gatsby-react-helmet 生成空<title>在 SSR 上&lt;/div&gt;</title><div id="text_translate"><p> 我的 Gatsby 网站没有在 SSR 上生成正确的标题标签。 当我建立网站时，我在生成的文件上得到的只是&lt;title data-react-helmet="true"&gt;&lt;/title&gt; 。 我很感激帮助找到问题并解决，因为经过长时间的调试过程，我不知道哪个可能是问题。</p><p> 相关文件：</p><p> <strong>package.json</strong></p><pre> ... "dependencies": { "gatsby": "^2.19.45", "gatsby-image": "^2.2.44", "gatsby-plugin-manifest": "^2.2.48", "gatsby-plugin-react-helmet": "^3.2.2", "gatsby-plugin-sharp": "^2.4.13", "gatsby-plugin-sitemap": "^2.3.1", "gatsby-plugin-typescript": "^2.3.3", "gatsby-source-filesystem": "^2.1.56", "gatsby-source-graphql": "^2.2.0", "react": "^16.12.0", "react-dom": "^16.12.0", "react-helmet": "^6.0.0", }...</pre><p> <strong>gatsby.config.js</strong></p><pre> plugins: [ `gatsby-plugin-react-helmet`, ... ]</pre><p> <em>（gatsby-plugin-offline 已禁用）</em></p><p> 搜索引擎优化</p><pre>import React from "react" import { Helmet } from "react-helmet" import { useStaticQuery, graphql } from "gatsby" interface Props { title: string description?: string image?: string } const SEO = ({ title, description, image }: Props) =&gt; { const { site } = useStaticQuery( graphql` query { site { siteMetadata { title description image siteUrl } } } ` ) const metaDescription = description || site.siteMetadata.description const shareImage = image || site.siteMetadata.image const url = site.siteMetadata.siteUrl return ( &lt;Helmet defer={false}&gt; &lt;title&gt;{title}&lt;/title&gt; &lt;meta name="description" content={metaDescription} /&gt; &lt;meta name="image" content={shareImage} /&gt; &lt;link rel="canonical" href={url} /&gt; &lt;meta property="og:url" content={url} /&gt; &lt;meta property="og:type" content="website" /&gt; &lt;meta property="og:title" content={title} /&gt; &lt;meta property="og:description" content={metaDescription} /&gt; &lt;meta property="og:image" content={shareImage} /&gt; &lt;meta name="twitter:card" content="summary_large_image" /&gt; &lt;meta name="twitter:title" content={title} /&gt; &lt;meta name="twitter:description" content={metaDescription} /&gt; &lt;meta name="twitter:image" content={shareImage} /&gt; &lt;/Helmet&gt; ) } export default SEO</pre><p> 将&lt;title&gt;{title}&lt;/title&gt;更改为&lt;Helmet title={title}&gt;或删除defer={true}不会改变结果中的任何内容。</p><p> <strong>盖茨比-ssr.js</strong></p><pre> import React from "react" import { Helmet } from "react-helmet" export const onRenderBody = ( { setHeadComponents, setHtmlAttributes, setBodyAttributes }, pluginOptions ) =&gt; { const helmet = Helmet.renderStatic() setHtmlAttributes(helmet.htmlAttributes.toComponent()) setBodyAttributes(helmet.bodyAttributes.toComponent()) setHeadComponents([ helmet.title.toComponent(), helmet.link.toComponent(), helmet.meta.toComponent(), helmet.noscript.toComponent(), helmet.script.toComponent(), helmet.style.toComponent() ]) }</pre><p> <em>我仍然有一个空的 srr 文件的问题。</em></p><p> 在任何给定的页面上，我都会调用 SEO 标签，例如：</p><pre> &lt;SEO title="Hello World" description="Foo Bar" /&gt;</pre></div>

Question

My Gatsby website is not generating proper title tags on SSR. When I build the website all I get on my generated files are <title data-react-helmet="true"></title> . I'd appreciate help to find the problem and solve as I have no idea which might be the issue after a long debugging process.

Relevant files:

package.json

...
"dependencies": {
  "gatsby": "^2.19.45",
  "gatsby-image": "^2.2.44",
  "gatsby-plugin-manifest": "^2.2.48",
  "gatsby-plugin-react-helmet": "^3.2.2",
  "gatsby-plugin-sharp": "^2.4.13",
  "gatsby-plugin-sitemap": "^2.3.1",
  "gatsby-plugin-typescript": "^2.3.3",
  "gatsby-source-filesystem": "^2.1.56",
  "gatsby-source-graphql": "^2.2.0",
  "react": "^16.12.0",
  "react-dom": "^16.12.0",
  "react-helmet": "^6.0.0",
}
...

gatsby.config.js

  plugins: [
    `gatsby-plugin-react-helmet`,
    ...
  ]

(gatsby-plugin-offline is disabled)

Seo.tsx

import React from "react"
import { Helmet } from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"

interface Props {
  title: string
  description?: string
  image?: string
}

const SEO = ({ title, description, image }: Props) => {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            image
            siteUrl
          }
        }
      }
    `
  )

  const metaDescription = description || site.siteMetadata.description
  const shareImage = image || site.siteMetadata.image
  const url = site.siteMetadata.siteUrl

  return (
    <Helmet defer={false}>
      <title>{title}</title>
      <meta name="description" content={metaDescription} />
      <meta name="image" content={shareImage} />
      <link rel="canonical" href={url} />
      <meta property="og:url" content={url} />
      <meta property="og:type" content="website" />
      <meta property="og:title" content={title} />
      <meta property="og:description" content={metaDescription} />
      <meta property="og:image" content={shareImage} />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={title} />
      <meta name="twitter:description" content={metaDescription} />
      <meta name="twitter:image" content={shareImage} />
    </Helmet>
  )
}

export default SEO

Changing the <title>{title}</title> to <Helmet title={title}> or either removing defer={true} won't change anything in the result.

gatsby-ssr.js

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

export const onRenderBody = (
  { setHeadComponents, setHtmlAttributes, setBodyAttributes },
  pluginOptions
) => {
  const helmet = Helmet.renderStatic()
  setHtmlAttributes(helmet.htmlAttributes.toComponent())
  setBodyAttributes(helmet.bodyAttributes.toComponent())
  setHeadComponents([
    helmet.title.toComponent(),
    helmet.link.toComponent(),
    helmet.meta.toComponent(),
    helmet.noscript.toComponent(),
    helmet.script.toComponent(),
    helmet.style.toComponent()
  ])
}

I still have problems with an empty srr file.

On any given page I call the SEO tag, for example:

<SEO title="Hello World" description="Foo Bar" />

Answer 1

Can you try something like title = {title} passing it in as a props of helmet rather than as the title tag you have like above

  <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={`%s | ${site.siteMetadata.title}`}
      meta={[
        {
          name: `description`,
          content: metaDescription,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: metaDescription,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          name: `twitter:card`,
          content: `summary`,
        },
        {
          name: `twitter:creator`,
          content: site.siteMetadata.author,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:description`,
          content: metaDescription,
        },
      ].concat(meta)}
    />

The Gatsby Starter Default Template has a good SEO component you can reference as well.

Answer 2

Found the solution. It's a problem with redux-persist-store that was causing the SSR to not work.

The full solution can be found in another question here: Gatsby not generating correct static HTML files