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

另外，在DOM中已经填充了文本内容的预呈现HTML内容具有更好的搜索引擎优化性能，因为Google机器人不需要通过javascript读取页面中的数据

正如我在盖茨比的文档中看到的，可以通过

useStaticQuery

填充数据，其中数据加载了XHR请求，并注入javascript到需要另一个呈现的页面。我想知道它在SEO性能方面有多高效

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

const SEO=（{title，description，image，article}）=>{
const{pathname}=useLocation（）
const{site}=useStaticQuery（查询）
常数{
默认标题，
titleTemplate，
默认描述，
siteUrl，
默认图像，
推特用户名，
}=site.siteMatadata
常数seo={
标题：标题| |默认标题，
description:description | | defaultDescription，
图像：`${siteUrl}${image | | defaultImage}`，
url:`${siteUrl}${pathname}`，
}
返回空
}
导出默认搜索引擎优化

---

另外，如果这种查询方法对SEO性能有负面影响，Gatsby中是否有任何内置方式来预呈现这些内容？

Gatsby创建SEO对象（此外，JavaScript中的任何默认对象，受

componentDidMount

/

useEffect

hook或类似生命周期影响的对象除外）编译或部署站点时（即：运行

build

命令时）。这意味着您的SEO对象将从任何CMS数据源动态生成，您的对象将在编译时填充来自任何源的任何数据，但一旦完成，它将以普通HTML文件（在

/public

文件夹下）输出。这个简单的HTML是Google将要阅读的，所以它不会处理任何JavaScript，它将直接读取您的元数据

这就是盖茨比的工作原理以及它对SEO友好的原因：如果你的代码效率很高，那么insights评分结果总是令人惊讶的，但是盖茨比通过输出简单的JavaScript而不是向服务器（像WordPress或其他PHP网站那样）来帮助你获得惊人的评分，你的文件就在那里，随时可以被谷歌读取，这就是为什么它燃烧得如此之快

---

问你的问题，盖茨比在编译时内置了SEO对象，当你打开盖茨比网站时，不会异步或处理任何JavaScript。

谢谢，我也问了这个关于git问题的问题，并得到了一些很好的答案：