在 Gatsby 中使用 useStaticQuery 填充数据的 SEO 效果

Question

Afaik，预渲染的 HTML 内容，其中文本内容已经填充在 DOM 中具有更好的 SEO 性能，因为 Google 机器人不需要使用 javascript 来读取页面内的数据。

正如我在 Gatsby 的文档中看到的，可以通过 useStaticQuery 填充数据，其中数据通过 XHR 请求加载并使用 javascript 注入需要另一个渲染的页面。我想知道它在 SEO 性能方面的效率如何。

正如我所见，他们直接建议通过这些查询提供 SEO 敏感数据：

const SEO = ({ title, description, image, article }) => {
  const { pathname } = useLocation()
  const { site } = useStaticQuery(query)
  const {
    defaultTitle,
    titleTemplate,
    defaultDescription,
    siteUrl,
    defaultImage,
    twitterUsername,
  } = site.siteMetadata
  const seo = {
    title: title || defaultTitle,
    description: description || defaultDescription,
    image: `${siteUrl}${image || defaultImage}`,
    url: `${siteUrl}${pathname}`,
  }
  return null
}
export default SEO

此外，如果这种查询方法对 SEO 性能有负面影响，那么 Gatsby 中是否有任何内置方法可以预渲染这些内容？

Answer 1

Gatsby 在编译或部署站点时（即：当您运行 @987654324 @ 命令）。这意味着您的 SEO 对象将从任何 CMS 数据源动态生成，您的对象将在编译时使用来自任何源的任何数据填充，但是一旦完成，它将以纯 HTML 文件的形式输出（在/public文件夹）。这个纯 HTML 是 Google 将读取的内容，它不会处理任何 JavaScript，它会直接读取您的元数据。

这就是 Gatsby 的工作原理以及它对 SEO 友好的原因：如果您的代码高效，洞察得分结果总是令人惊叹，但 Gatsby 通过输出纯 JavaScript 而不是向服务器询问（如 WordPress 或其他 PHP 网站有），您的文件就在那里，可供 Google 读取，这就是为什么速度如此之快。

问你的问题，Gatsby 在编译时内置了 SEO 对象，而不是在你打开 Gatsby 网站时异步或处理任何 JavaScript。