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

Question

我有一个 Gatsby 的基本博客设置，在发布此问题时，缺少 SEO 组件的良好文档。有一些基本 SEO 组件的示例，但我想要的是更深入一些。也许，如果在这里达成了解决方案，则可以将其贡献给 Gatsby 文档，让其他人受益。在通常的标题和描述元标签以及 facebook/twitter 开放图元（我已经完成）之上，我想为丰富的片段添加结构化数据，这些数据将根据博客文章的类型而有所不同。例如，我可能有一个常规帖子会打印文章架构，有些帖子可能是How-to，在这种情况下，我想打印 HowTo 架构而不是文章。在某些时候，我可能会写一篇适合常见问题解答架构的帖子。我不知道这是否是最好的方法，但这是我的想法：1. 在 frontmatter 中设置我想要的模式类型为真，其余为假。我也在考虑将架构数据存储在 frontmatter 中，但由于这些数据非常复杂，并且会因帖子类型（文章、HowTo 等）的不同而有所不同，我不确定这是否是一个好主意？---title: Hello Worlddescription: How to say helloarticle: falsehow-to: truefaq: false---2. 在 SEO 组件中测试真/假并打印正确的模式。下面是我的整个 SEO 组件，这显然不起作用，但您希望能看到我的想法。我已经剖析并借鉴了gatsby 高级启动组件和gatsby 启动棱镜组件，但都没有完全满足我的需求。我能看到的问题是：如何测试要使用的模式类型并打印它包括所有类型的面包屑模式只打印一个模式 JSON-LD 脚本标签，避免任何重复的模式在 Markdown 文件中使用 frontmatter 适合存储复杂的模式数据检索模式的 frontmatter 数据

Answer 1

我决定了这个解决方案。

正面：

---

type: howto // Use either 'article' or 'howto'

---

像查询其他数据一样使用 GraphQL 查询它：

frontmatter {

 title

 published(formatString: "MMMM DD, YYYY")

 modified(formatString: "MMMM DD, YYYY")

 description

 type

}

将其传递给您的 SEO 组件：

<SEO

 title={post.frontmatter.title}

 desc={post.frontmatter.description}

 published={post.frontmatter.published}

 modified={post.frontmatter.modified}

 type={post.frontmatter.type}

/>

在您的 SEO 组件中，您可以像这样使用它（对所有类型都这样做）。您可以根据需要为我的类型、常见问题解答、课程等设置您的帖子和 SEO 组件：

const schemaType = type

if (schemaType === "howto") {

 schemaHowTo = {

  // Your howto schema here

 }

}

if (schemaType === "article") {

 schemaArticle = {

  // Your article schema here

 }

}

最后，在 React Helmet 中，我们有：

<Helmet>

 {schemaType === "howto" && (

  <script type="application/ld+json">

   {JSON.stringify(schemaHowTo)}

  </script>

 )}

 {schemaType === "article" && (

  <script type="application/ld+json">

   {JSON.stringify(schemaArticle)}

  </script>

 )}

...

<Helmet>

Answer 2

刚刚找到关于该主题的精彩文章：https: //www.iamtimsmith.com/blog/creating-a-better-seo-component-for-gatsby/ 帮助我为应用程序中的所有页面动态创建丰富的片段。主要思想：传递给children你seo.js：

return (

    <Helmet

      htmlAttributes={{lang: `en`}}

      titleTemplate={`%s | ${data.site.siteMetadata.title}`}

    >

      <title>{title}</title>

      

      {children}

    </Helmet>

  );

然后在任何页面/组件上：

return (

      <SEO title={title} description={description} image={image} slug={slug}>

        <script type='application/ld+json'>

          {`{

                        '@context': 'https://schema.org',

                        '@type': 'LiveBlogPosting',

                        '@id': 'https://example.com',

                        'headline': ${title},

                        'description': ${description}

                    }`}

        </script>

      </SEO>

  );

};