内部信息源与外部信息源搜索引擎优化方法的异同( Web前端搜索引擎真的需要已经预渲染的应用吗？？)

　　内部信息源与外部信息源搜索引擎优化方法的异同(

Web前端搜索引擎真的需要已经预渲染的应用吗？？)

　　10行代码实现React App的SEO优化 - 程序员大本营

　　2020/03/24 05:39 • 网页前端

　　搜索引擎真的需要预渲染应用吗？Google 已经明确表示他们会在抓取您的 网站 之前运行您的 JavaScript 代码。准确地说，他们的爬虫使用 Chrome 41 打开 网站，就像真正的用户使用浏览器打开一样！但还有其他搜索引擎和社交媒体 网站 可能不会这样做。我知道人们太关心搜索引擎优化并且总是尽可能地改进。自然，每个人都想在没有任何J的情况下跑步

　　十行代码实现React App SEO优化小白攻略搜索引擎真的需要预渲染app吗？

　　Google 已经明确表示他们会在抓取您的 网站 之前运行您的 JavaScript 代码。准确地说，他们的爬虫使用 Chrome 41 打开 网站，就像真正的用户使用浏览器打开一样！但还有其他搜索引擎和社交媒体 网站 可能不会这样做。

　　我知道人们太关心搜索引擎优化并且总是尽可能地改进。自然，每个人都希望在不运行任何 JavaScript 的情况下直接向搜索引擎显示内容。这不是一个坏主意，相信很多人都尝试过。

　　*这不仅有利于 SEO*，而且还具有一些性能优势。浏览器不必等待JS文件加载完毕才开始渲染，第一次有效渲染（First Contentful Paint）的时间会更短。

　　React App 是如何预渲染的？

　　原理其实很简单。我们使用 npm run build 构建 React App 后，使用真实的浏览器渲染构建目录（通常是 index.html），然后获取生成的 HTML 代码并保存到文件中，但是所有内部页面都是一样的需要重复操作。

　　感谢 react-snap 让这一切变得简单。

　　在开发依赖项中安装 npm i -D react-snap 将“postbuild”添加到 package.json 中的脚本：“react-snap”运行 npm run build

　　它会做的是在正常构建之后，它将运行 react-snap，它将在 Puppeteer 浏览器中呈现它们，抓取内容并生成新的构建。

　　构建完成后，react-snap 将运行，在 Puppeteer 浏览器中渲染，抓取内容并生成新的构建。

　　{

"scripts": {

"postbuild": "react-snap"

},

"reactSnap": {

"skipThirdPartyRequests": true

},

"devDependencies": {

"react-snap": "^1.23.0"

}

}

　　和原作者一样，我在尝试 react-snap 的时候也遇到了一些问题，比如著名的 'Protocol error (Runtime.callFunctionOn): Object reference chain is too long' }，一般可以在官方问题中找到。解决方案，或者您选择 StackOverFlow。

　　所以我们在使用第三方脚本的时候，应该尽可能多的了解它们，比如有哪些限制或者选项，请参考文档。

　　喜欢（0)