Gatsby - 使用 react-head/react-helmet 为 SSR 添加元标记不适用于动态创建的页面答案

【问题标题】：Gatsby - Adding meta tags for SSR using react-head/react-helmet doesn't work on dynamically created pagesGatsby - 使用 react-head/react-helmet 为 SSR 添加元标记不适用于动态创建的页面
【发布时间】：2021-02-14 07:41:20
【问题描述】：

我已经研究这个问题一个星期了，但仍然很难过。我有一个使用 Prismic 的 Gatsby 的网站，我有 2 种不同类型的页面：静态页面和动态创建的页面。静态可以包括主页、联系我们页面、关于我们页面等页面。动态可以包括博客文章、服务页面等。

我使用 react-helmet 将元数据注入到页面中，但后来我开始使用 react-head。这适用于静态页面，它包含在页面的 SSR 版本中 - 但它不适用于动态页面。我还在一个 Layout 组件上添加了一个 console.log，我在所有页面上使用它，在静态页面上它显示在终端上，但在动态页面上却没有。

我的配置包括以下插件：

plugins: [
    `gatsby-plugin-catch-links`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-resolve-src`,
    `gatsby-plugin-remove-trailing-slashes`,
    `gatsby-plugin-emotion`,
    `gatsby-plugin-preload-fonts`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: "gatsby-source-prismic-graphql",
      options: {
        repositoryName: "<redacted>",
        linkResolver: () => (post) => `/${post.uid}`,
        omitPrismicScript: true,
      },
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `sample`,
        short_name: `sample`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `sample-notext.png`, // This path is relative to the root of the site.
      },
    },
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: "UA-107057776-1",
        head: true,
      },
    },
    {
      resolve: "gatsby-plugin-iltorb",
      options: {
        extensions: ["css", "html", "js", "svg", "png", "ttf"],
      },
    },
    `gatsby-plugin-preact`,
    {
      resolve: `gatsby-plugin-html-minifier`,
      options: {
        minifyCSS: true,
        minifyJS: true,
        minifyURLs: true,
        removeEmptyAttributes: true,
        removeComments: true,
      },
    },
    {
      resolve: "gatsby-plugin-html-attributes",
      options: {
        lang: "en",
      },
    },
    {
      resolve: `gatsby-plugin-nprogress`,
      options: {
        color: "#dd8d83",
        showSpinner: false,
        minimum: 0.4,
      },
    },
    `gatsby-plugin-react-head`,
  ],

页面（动态和静态）通常如下所示：

<Layout
    meta={{
        title: `${post.post_title[0].text} | Not Just a Box Events`,
        description: meta.description,
        image: blog.page_hero_image.url,
    }}
>
    {children}
</Layout>

布局是这样的：

<LayoutContainer className="div">
    <div className="Layout">
        <header>
            <Meta
                name="p:domain_verify"
                content="1228088838575c68d8e15366463bb836"
            />
            <Link rel="preconnect" href="https://images.prismic.io" />
            <Title>{meta.title}</Title>
            <Meta name="title" content={meta.title} />
            <Meta name="description" content={meta.description} />
            <Meta property="og:type" content="website" />
            <Meta
                property="og:url"
                content=""
            />
            <Meta property="og:title" content={meta.title} />
            <Meta
                property="og:description"
                content={meta.description}
            />
            <Meta property="og:image" content={meta.image} />
            <Meta
                property="twitter:card"
                content="summary_large_image"
            />
            <Meta
                property="twitter:url"
                content=""
            />
            <Meta property="twitter:title" content={meta.title} />
            <Meta
                property="twitter:description"
                content={meta.description}
            />
            <Meta property="twitter:image" content={meta.imagge} />
            {headerChildren}
        </header>
        <main className="Layout__content">{children}</main>
        <Footer data={footerInfo} />
    </div>
</LayoutContainer>

当我查看动态页面的页面源时，我看不到我正在尝试生成的元标记。我只看到这个：

<html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="theme-color" content="#663399"/><meta name="generator" content="Gatsby 2.21.1"/>

然后是一些 CSS 代码等。没有我想要的元标记。

请帮忙

【问题讨论】：

标签： gatsby

【解决方案1】：

这比您尝试过的要简单得多。只需在任何Gatsby starter 中使用<SEO> 组件（内置）即可：

<Layout>
<SEO description={meta.description} 
     title={`${post.post_title[0].text} | Not Just a Box Events`} 
     image={blog.page_hero_image.url} />
    {children}
</Layout>

请注意，您可能需要调整组件以将image 作为prop 接收。

此方法适用于（静态和动态）页面。 SSR 不应影响 SEO。

【讨论】：

本质上，SEO组件仍然使用react-helmet。我仍然不明白为什么即使我使用了 react-helmet 它也不起作用
为什么说“不工作”？你的SEO 组件是空的吗？你是怎么用的？