Gatsby 博客 post - 如何向从 YouTube 嵌入的视频添加丰富网页摘要
Gatsby blog post - How to add rich snippets to a video embedded from YouTube
我有一个博客 运行 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",
}
有人知道最好的方法是什么吗?
提前致谢!
此致。
你应该使用 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 + 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",
}
有人知道最好的方法是什么吗?
提前致谢!
此致。
你应该使用 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>