描述和标题 siteMetadata in Gatsby 没有被 Google 提取

Question

我在 Gatsby v. 4.17.1 中构建并部署了 web 站点。下一步是增强 SEO。 我创建了一个 SEO 组件并部署了它。 元标记存在，但是当我通过谷歌查找网站时，标题和描述不存在（有些值似乎来自页脚）。

你可以在下面找到我的代码：

SEO.js 组件：

import React from "react"
import { Helmet } from "react-helmet"

import { useSiteMetadata } from "../../hooks/use-site-metadata"

export const SEO = ({ title, description, pathname }) => {
  const { title: defaultTitle, description: defaultDescription, siteUrl, keywords } = useSiteMetadata()

  const seo = {
    title: title,
    description: description || defaultDescription,
    url: `${siteUrl}${pathname || ``}`,
    keywords
  }

  return (
    <Helmet title={seo.title} titleTemplate={`%s | ${defaultTitle}`} defaultTitle={defaultTitle}>
      <html lang="en" />
      <meta name="description" content={seo.description} />
      <meta property="og:type" content="article" />
      <meta name="image" content={seo.image} />
      <meta name="keywords" content={seo.keywords} />
      <meta name="url" content={seo.url} />
    </Helmet>
  )
}

useSiteMetadata 钩子从 gatsby-config.js 获取值：

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`
})

module.exports = {
  siteMetadata: {
    title: `Website title `,
    description: `Website description`,
    siteUrl: `url`,
    image: "",
    keywords: `keywords`
  },
  plugins: [
    {
      resolve: "gatsby-source-wordpress",
      options: {
        url: `***`,
        baseUrl: `***`
      }
    },
    "gatsby-plugin-sass",
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: "GatsbyJS",
        short_name: "GatsbyJS",
        start_url: "/",
        background_color: "***",
        theme_color: "***",
        display: "standalone",
        icon: "***"
        crossOrigin: `use-credentials`
      }
    },
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        trackingIds: [***],
        pluginConfig: {
          head: true,
          respectDNT: true
        }
      }
    },
    "gatsby-plugin-image",
    "gatsby-plugin-react-helmet",
    "gatsby-plugin-sitemap",
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    "gatsby-plugin-fontawesome-css",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: "./src/images/"
      },
      __key: "images"
    }
  ]
} 

我在我的页面中使用了 SEO 组件：

 return (
    <main>
      <Layout>
        <div>
          <HomeLogo/>
          <HomeLatestProducts />
          <Distribution />
          <Footer />
          <SEO />
        </div>
      </Layout>
    </main>
  )

部署后，我可以看到<head>中的所有元标记，它们看起来像这样：

<meta data-react-helmet="true" name="description" content="Website description">

但是当我通过google.com搜索网站时，标题和描述不存在。 为什么？