在Gatsby中使用useStaticQuery填充数据的SEO效果
Afaik，预先渲染的HTML内容，其中的文本内容已经填充到DOM中具有更好的SEO性能，因为Google机器人不需要与javascript打交道来读取页面内的数据。
正如我在Gatsby的文档中看到的，可以通过useStaticQuery填充数据，其中数据加载了XHR请求，并使用javascript注入到需要另一次呈现的页面。我想知道它在搜索引擎优化性能方面的效率如何。
如我所见，他们直接建议通过这些查询提供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中是否有任何内置的方法来预先呈现这些内容？
回答 1
Stack Overflow用户
发布于 2020-06-22 04:31:59
Gatsby在编译或部署站点时(即，当您运行build命令时)创建SEO对象(此外，JavaScript中的任何默认对象，受componentDidMount/useEffect挂钩或类似的React生命周期影响的对象除外)。这意味着你的搜索引擎优化对象将从任何内容管理系统数据源动态生成，你的对象将在编译时由任何来源的任何数据填充，但一旦完成，它将在一个普通的HTML文件中输出(在/public文件夹下)。这个普通的超文本标记语言是谷歌将读取的，所以它不会处理任何JavaScript，它将直接读取你的元数据。
这就是盖茨比是如何工作的，为什么它是搜索引擎优化友好的:洞察得分结果总是惊人的，如果你的代码是有效的，但盖茨比帮助达到一个惊人的分数输出的普通JavaScript而不是要求它到服务器(像WordPress或其他JavaScript网站)，你的文件就在那里，准备被谷歌读取，这就是为什么这么快。
在问你问题时，Gatsby在编译时内置了SEO对象，而不是异步的，或者当你打开Gatsby站点时处理任何JavaScript。
https://stackoverflow.com/questions/62502583
复制相似问题
腾讯云开发者
