使用 Gatsby 或 SPA 进行 SEO 的结构化数据答案

【问题标题】：Structured Data for SEO using Gatsby or a SPA使用 Gatsby 或 SPA 进行 SEO 的结构化数据
【发布时间】：2020-05-18 08:10:29
【问题描述】：

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

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

我正在寻找静态解决方案（即联系页面）和动态解决方案（即食谱页面）来自动填充值

【问题讨论】：

标签： reactjs seo gatsby json-ld structured-data

【解决方案1】：

在您的 SEO 组件本身中创建两个对象

首先，

  const schemaOrgWebPage = {
    "@context": "http://schema.org",
    "@type": "WebPage",
    url: siteUrl,
    headline: "Your Headline here",
    inLanguage: "en",
    mainEntityOfPage: siteUrl,
    description: "your description here",
    name: "your name here",
    author: {
      "@id": "author name",
    },
    copyrightHolder: {
      "@id": "copyright holder name",
    },
    copyrightYear: "2020",
    creator: {
      "@id": "creator name",
    },
    publisher: {
      "@id": "publisher name",
    },
    datePublished: "date of your publication",
    image: {
      "@type": "ImageObject",
      url: "image url",
    },
  }

第二，

  const orgaCreator = {
    "@context": "http://schema.org",
    "@id": `${siteUrl}`,
    "@type": "WebPage",
    address: {
      "@type": "PostalAddress",
      addressCountry: "put your country name",
      addressLocality: "put your locality name",
    },
    name: "your name here",
    alternateName: "your nick name",
    description: description || defaultDescription,
    url: siteUrl,
    email: "your email address",
    founder: "founder name",
    foundingDate: "founding date",
    foundingLocation: "founding location",
    image: {
      "@type": "ImageObject",
      url: `${siteUrl}${image || defaultImage}`,
      height: "512",
      width: "512",
    },
    logo: {
      "@type": "ImageObject",
      url: `${siteUrl}${image || defaultImage}`,
      height: "60",
      width: "60",
    },
    sameAs: [
      "https://www.facebook.com/put-your-user-id-here",
      "https://stackoverflow.com/put-your-user-id-here",
      "https://github.com/put-your-user-id-here",
      "https://www.instagram.com/put-your-user-id-here",
      "https://twitter.com/put-your-user-id-here",
      "https://www.linkedin.com/put-your-user-id-here",
    ],
  }

然后最后在 Helmet 标签中添加这个

<Helmet>
    <html lang="en" />
    ....
    ....
      <script type="application/ld+json">
            {JSON.stringify(schemaOrgWebPage)}
          </script>
          <script type="application/ld+json">{JSON.stringify(orgaCreator)} 
   </script>
</Helmet>

如果您想测试结构化数据，请在部署网站后转到 https://search.google.com/structured-data/testing-tool/u/0/ 并将您的网站网址放在那里，它会让您深入了解您的结构化数据。

【讨论】：

【解决方案2】：

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

你添加一个带有 React 头盔的 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

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

【讨论】：