带有 GatsbyJS 的 JSON-LD 模式，用于丰富的片段

Question

我有一个 Gatsby 的基本博客设置，在发布此问题时，缺少 SEO 组件的良好文档。有一些基本 SEO 组件的示例，但我想要的是更深入一些。也许，如果在这里达成了解决方案，则可以将其贡献给 Gatsby 文档，让其他人受益。

在通常的标题和描述元标签以及 facebook/twitter 开放图元（我已经完成）之上，我想为丰富的片段添加结构化数据，这些数据将根据博客文章的类型而有所不同。例如，我可能有一个常规帖子会打印文章架构，有些帖子可能是How-to，在这种情况下，我想打印 HowTo 架构而不是文章。在某些时候，我可能会写一篇适合常见问题解答架构的帖子。

我不知道这是否是最好的方法，但这是我的想法：

1. 在 frontmatter 中设置我想要的模式类型为真，其余为假。

我也在考虑将架构数据存储在 frontmatter 中，但由于这些数据非常复杂，并且会因帖子类型（文章、HowTo 等）的不同而有所不同，我不确定这是否是一个好主意？

---

title: Hello World

description: How to say hello

article: false

how-to: true

faq: false

---

2. 在 SEO 组件中测试真/假并打印正确的模式。

下面是我的整个 SEO 组件，这显然不起作用，但您希望能看到我的想法。我已经剖析并借鉴了gatsby 高级启动组件和gatsby 启动棱镜组件，但都没有完全满足我的需求。

我能看到的问题是：

1. 如何测试要使用的模式类型并打印它

2. 包括所有类型的面包屑模式

3. 只打印一个模式 JSON-LD 脚本标签，避免任何重复的模式

4. 在 Markdown 文件中使用 frontmatter 适合存储复杂的模式数据

5. 检索模式的 frontmatter 数据

Answer 1

我决定了这个解决方案。正面：---type: howto // Use either 'article' or 'howto'---像查询其他数据一样使用 GraphQL 查询它：frontmatter {&nbsp;title&nbsp;published(formatString: "MMMM DD, YYYY")&nbsp;modified(formatString: "MMMM DD, YYYY")&nbsp;description&nbsp;type}将其传递给您的 SEO 组件：<SEO&nbsp;title={post.frontmatter.title}&nbsp;desc={post.frontmatter.description}&nbsp;published={post.frontmatter.published}&nbsp;modified={post.frontmatter.modified}&nbsp;type={post.frontmatter.type}/>在您的 SEO 组件中，您可以像这样使用它（对所有类型都这样做）。您可以根据需要为我的类型、常见问题解答、课程等设置您的帖子和 SEO 组件：const schemaType = typeif (schemaType === "howto") {&nbsp;schemaHowTo = {&nbsp; // Your howto schema here&nbsp;}}if (schemaType === "article") {&nbsp;schemaArticle = {&nbsp; // Your article schema here&nbsp;}}最后，在 React Helmet 中，我们有：<Helmet>&nbsp;{schemaType === "howto" && (&nbsp; <script type="application/ld+json">&nbsp; &nbsp;{JSON.stringify(schemaHowTo)}&nbsp; </script>&nbsp;)}&nbsp;{schemaType === "article" && (&nbsp; <script type="application/ld+json">&nbsp; &nbsp;{JSON.stringify(schemaArticle)}&nbsp; </script>&nbsp;)}...<Helmet>

Answer 2

刚刚找到关于该主题的精彩文章：https: //www.iamtimsmith.com/blog/creating-a-better-seo-component-for-gatsby/ 帮助我为应用程序中的所有页面动态创建丰富的片段。主要思想：传递给children你seo.js：return (&nbsp; &nbsp; <Helmet&nbsp; &nbsp; &nbsp; htmlAttributes={{lang: `en`}}&nbsp; &nbsp; &nbsp; titleTemplate={`%s | ${data.site.siteMetadata.title}`}&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; <title>{title}</title>&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; {children}&nbsp; &nbsp; </Helmet>&nbsp; );然后在任何页面/组件上：return (&nbsp; &nbsp; &nbsp; <SEO title={title} description={description} image={image} slug={slug}>&nbsp; &nbsp; &nbsp; &nbsp; <script type='application/ld+json'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {`{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '@context': 'https://schema.org',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '@type': 'LiveBlogPosting',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '@id': 'https://example.com',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'headline': ${title},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'description': ${description}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }`}&nbsp; &nbsp; &nbsp; &nbsp; </script>&nbsp; &nbsp; &nbsp; </SEO>&nbsp; );};