Gatsby 博客 post - 如何向从 YouTube 嵌入的视频添加丰富网页摘要

Question

我有一个博客运行 Gatsby + Netlify CMS，有时我想向博客 post 添加来自 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",
}

有人知道最好的方法是什么吗？

提前致谢！

此致。

Answer 1

你应该使用 React 头盔 & JSON.stringify。

React helmet 是一个组件，可让您使用其 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",
};

然后使用 react helmet & JSON.stringify 像这样输出模式：

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

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

Gatsby 博客 post - 如何向从 YouTube 嵌入的视频添加丰富网页摘要

Gatsby blog post - How to add rich snippets to a video embedded from YouTube

javascript

reactjs

gatsby

schema.org

google-rich-snippets