添加 SEO 组件

示例

使用 Gatsby Head

向页面添加元数据（例如标题或描述）对于帮助搜索引擎（如 Google）理解您的内容至关重要，并决定何时在搜索结果中显示您的内容。当有人分享您的网站（例如在 Twitter 上）时，也会显示这些信息。使用 Gatsby Head API，您可以修改页面的 document head。

Gatsby 自动提供对元数据服务器端渲染的即插即用支持，并将将其添加到 Gatsby 生成的静态 HTML 页面中。这有助于您的网站在搜索引擎中获得更好的排名和性能。

在本指南结束时，您将拥有一个 SEO 组件，可以在您的页面中用于定义元数据。

先决条件

一个使用 gatsby@4.19.0 或更高版本设置的 Gatsby 项目。（需要帮助创建吗？请遵循快速入门）

操作步骤

添加 `siteMetadata`

GraphQL 数据层中提供了 gatsby-config 文件的 siteMetadata 部分。将站点元数据放在此处被认为是最佳实践。siteUrl 应该是您已部署目标的 URL（例如，生产域），以便后续的 meta 标签可以指向绝对 URL。

将以下键添加到您的配置中

您可以随时扩展 siteMetadata 对象，并相应地自定义 <SEO /> 组件。在定义像上面那样的 image 时，请确保在 static 文件夹中有一个同名同扩展名的图片。

创建 `useSiteMetadata` hook

由于您需要使用刚刚放在 siteMetadata 中的信息，因此可以创建一个名为 useSiteMetadata 的自定义 React hook 来获取这些信息。这样，您也可以在其他地方引用这些值。

在 src/hooks 中创建一个名为 use-site-metadata.jsx 的新文件。通过 useStaticQuery hook 查询 site 接口中的信息。

您将可以直接从此 hook 获取 title、description 等。

SEO 组件

在 src/components 中创建一个名为 seo.jsx 的新文件。您的 SEO 组件将接收 title、description、children 等作为 props，并且如果未传递任何 props，则使用 useSiteMetadata hook 的信息作为后备。对于不会按页面更改的内容（例如 Twitter 用户名），将直接使用 useSiteMetadata hook 的数据。

这是完整的 SEO 组件

所有 props 都是可选的，因为每个值都有一个默认值或后备值。pathname prop 将是页面的相对路径，因此您需要使用 siteUrl 构建一个绝对 URL。

您可以扩展 seo 对象中的其他键，但建议遵循 prop || fallback 的模式，以免任何值变为 undefined。

在页面中使用

当您只想使用 SEO 组件的默认值时（例如在主页上），您可以导入它并无 props 地渲染它

要覆盖单个值，请使用 SEO 组件上定义的 props

要在页面中添加一次性 meta 标签，请为 SEO 组件提供 children

附加信息

数据块 <script> 标签，例如 <script type="application/ld+json">，可以放在 Head 函数中，但动态脚本最好使用您页面或组件中的 Gatsby Script Component 来加载。

如果您想编辑 <html> 或 <body>，请阅读 Gatsby Head 参考指南。

富摘要

Google 会使用它在网上找到的结构化数据来理解页面的内容，以及收集有关网络和整个世界的一般信息。

例如，以下是一个 JSON-LD 格式（用于链接数据的 JavaScript 对象表示法）的结构化数据摘要，它可能出现在一家名为 Spooky Technologies 的公司的联系页面上，描述了他们的联系信息。

您可以使用 Google 的富摘要测试在本地开发期间检查您是否传递了有效信息。

部署后，他们的富摘要状态报告可能有助于监控您页面的健康状况并减轻任何模板或提供问题。

其他资源

立即开始构建，在 Netlify!

在 GitHub 上编辑此页面