gatsby-react-helmet 在 SSR 上生成空 <title>
gatsby-react-helmet generating empty <title> on SSR
我的 Gatsby 网站没有在 SSR 上生成正确的标题标签。当我建立网站时,我得到的所有生成文件都是 <title data-react-helmet="true"></title>
。我很感激帮助找到问题并解决,因为我不知道经过长时间的调试过程后可能是哪个问题。
相关文件:
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 已禁用)
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
将 <title>{title}</title>
更改为 <Helmet title={title}>
或删除 defer={true}
不会改变任何结果。
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()
])
}
我仍然遇到空 srr 文件的问题。
在我调用 SEO 标签的任何给定页面上,例如:
<SEO title="Hello World" description="Foo Bar" />
你能试试像 title = {title} 这样的东西把它作为头盔的道具而不是像上面那样作为标题标签传递吗
<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)}
/>
Gatsby 入门默认模板有一个很好的 SEO 组件,您也可以参考。
找到解决方案。 redux-persist-store
的问题导致 SSR 无法工作。
完整的解决方案可以在此处的另一个问题中找到:
我的 Gatsby 网站没有在 SSR 上生成正确的标题标签。当我建立网站时,我得到的所有生成文件都是 <title data-react-helmet="true"></title>
。我很感激帮助找到问题并解决,因为我不知道经过长时间的调试过程后可能是哪个问题。
相关文件:
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 已禁用)
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
将 <title>{title}</title>
更改为 <Helmet title={title}>
或删除 defer={true}
不会改变任何结果。
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()
])
}
我仍然遇到空 srr 文件的问题。
在我调用 SEO 标签的任何给定页面上,例如:
<SEO title="Hello World" description="Foo Bar" />
你能试试像 title = {title} 这样的东西把它作为头盔的道具而不是像上面那样作为标题标签传递吗
<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)}
/>
Gatsby 入门默认模板有一个很好的 SEO 组件,您也可以参考。
找到解决方案。 redux-persist-store
的问题导致 SSR 无法工作。
完整的解决方案可以在此处的另一个问题中找到: