在 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 在编译或部署站点（即：当您运行一个 build 命令时）。这意味着您的 SEO 对象将从任何 CMS 数据源动态生成，您的对象将在编译时使用来自任何来源的任何数据填充，但一旦完成，它将输出到一个普通的 HTML 文件中（ /public 文件夹下）。这个普通的 HTML 是 Google 将读取的内容，它不会处理任何 JavaScript，它会直接读取您的元数据。

这就是 Gatsby 的工作原理以及它对 SEO 友好的原因：如果您的代码高效，洞察力得分结果总是惊人的，但 Gatsby 通过输出普通的 JavaScript 而不是要求它来帮助达到惊人的得分服务器（就像 WordPress 或其他 PHP 网站一样），您的文件就在那里，准备好被 Google 读取，这就是为什么如此快。

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

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

SEO effect of populating data with useStaticQuery in Gatsby

html

javascript

seo

reactjs

gatsby