reactjs - 使用 Gatsby 或 SPA 的 SEO 结构化数据

Question

您好，我有兴趣将以下 JSON-LD 结构化数据添加到我的 Gatsby 站点。我在此标记了 React，因为 Gatsby 中的响应通常非常低。我想做的是按照此处的示例进行操作
https://developers.google.com/search/docs/guides/intro-structured-data

如何将结构化数据添加到 Gatsby 或 React 站点？

我正在寻找静态解决方案(即联系页面)和动态解决方案(即配方页面)来自动填充值

Answer 1

此 official Gatsby documentation 中描述了创建和添加 SEO 的最佳实践。 .

你添加一个带有 React Helm 的 SEO 组件:

// src/components/SEO.js

const SEO = ({ title, description, image, pathname, article }) => (
  <StaticQuery
    query={query}
    render={({
      site: {
        siteMetadata: {
          defaultTitle,
          titleTemplate,
          defaultDescription,
          siteUrl,
          defaultImage,
          twitterUsername,
        }
      }
    }) => {
      const seo = {
        title: title || defaultTitle,
        description: description || defaultDescription,
        image: `${siteUrl}${image || defaultImage}`,
        url: `${siteUrl}${pathname || '/'}`,
      }
      return ()
    }}
  />
)
export default SEO

在底部，您可以找到一些示例链接。该文档描述了静态和动态元标记的解决方案。