Gatsby 博客文章 - 如何向从 YouTube 嵌入的视频添加丰富的片段

问题描述

我有一个使用 Gatsby + Netlify CMS 运行的博客，有时我想将来自 YouTube 的嵌入视频添加到博客帖子中。我想为这些视频创建一个具有以下结构的 videoObject 架构：

   {
  "@context": "http://schema.org","@type": "VideoObject","name": "VIDEO TITLE","description": "VIDEO DESCRIPTION","thumbnailUrl": "VIDEO THUMBNAIL","uploadDate": "2018-04-16T08:01:27Z","duration": "PT4M43S","embedUrl": "https://www.youtube.com/embed/JypYtPhDeiI",}

有人知道这样做的最佳方法是什么吗？

先谢谢你！

问候。

解决方法

您应该使用 React Helmet 和 JSON.stringify。

React 头盔是一个组件，可让您使用其 React 组件控制文档头部。 JSON.stringify 是一种将 JavaScript 对象转换为字符串的方法。

使用您的架构标记创建一个常量：

const videoObject = {
  "@context": "http://schema.org","@type": "VideoObject",name: "VIDEO TITLE",description: "VIDEO DESCRIPTION",thumbnailUrl: "VIDEO THUMBNAIL",uploadDate: "2018-04-16T08:01:27Z",duration: "PT4M43S",embedUrl: "https://www.youtube.com/embed/JypYtPhDeiI",};

然后像这样使用反应头盔和 JSON.stringify 输出模式：

import React from "react"
import { Helmet } from "react-helmet"

<Helmet>
  <script type="application/ld+json">{JSON.stringify(videoObject)}</script>
</Helmet>