张亚楠-JAVASCRIPT SEO完全指南【2021版】-更蓝企服

有一些 SEO 还可以发现在“JavaScript 对 SEO 不友好”的过程中，但实际上 JavaScript 已经存在现在WEB 生态不可缺少的金属技术，并且谷歌的时间实现了对 JavaScript 的支持，比如谷歌已经识别 JavaScript 中的内容。

John Mueller 在 2017 年也说过：

SEO 应该注意到：WEB 已经不再是 HTML 容易的了。SEO 需要学习一些 JS 开发，以及 JS SEO 内容。JS 也不会消失。

补充：百度也有渲染爬虫，所有JavaScript内容进行识别。因此，本文对百度SEO适用。

JavaScript SEO 是什么

JavaScript SEO 是技术 SEO 的智慧，帮助基于 JavaScript 技术的实现，SEO 友好，可以抓取、渲染和收录等网页核心，另外也优化了网页性能，提升用户体验。

Googlebot如何处理JavaScript内容

我们先看下Googlebot现在的机制，是如何识别到JavaScript中的内容。Googlebot之前只有“发现-抓取-索引”这3个一组，现在加入了“渲染”一组，主要增强了JavaScript内容的识别。以下是 Googlebot 目前的几个阶段：

Googlebot通过站点地图、网页抓取的方式，将发现到的网址汇总成网址
Googlebot 请求对 URL 分别抓取
Googlebot 将已抓取网页加入渲染，用无头 Chromium 对网页进行渲染，并执行 JavaScript，获取内容
如果网页被判断定位，Googlebot 将网页更新库

所以，主要是Googlebot加入了内容，导致Googlebot可以识别JavaScript中的。

需要注意的是，不是所有内容 Googlebot 都能获取到。需要一些事件触发才展示的内容（例如滚动、点击），Googlebot 是非常能获取到的。注：下面的情景，就是渲染，翻译问题。

JavaScript SEO优化指南

JavaScript SEO 主要有内容可识别、链接 SEO 友好、懒加载 SEO 友好、网页性能优化、JAAX 可抓取等 5 个方面，还有商业注意事项。

1. JavaScript 内容可识别

JavaScript 内容，是要确保 JavaScript 内容可以优化被抓取和渲染。比如阿里巴巴的这种方式：

先加载一个前端框架（在CDN上，可实现秒开），然后使用JavaScript动态加载内容。SEO需要检查Googlebot是否能真正将其抓取到自己网站的内容，主要有3种工具：GSC的网址检查工具，Google的移动设备适合性测试，以及Google快照。这里GSC网址检查工具的使用方法：GSC的网址检查，“测试合适的网址”，然后点击“查看被测试的网页”。在分享的源代码就是Googlebot抓取+重点渲染后的HTML代码了。你可以在这个 HTML 里查看核心内容是否被 Googlebot 抓取到。

附赠再个小技巧，可以将爬虫看到的的HTML源代码复制下来，在Chrome浏览器中随便打开一个网页，按F2将这部分HTML内容复制进去，然后敲回车。这样浏览器中看到的内容就是 Googlebot 看到的内容。另外，谷歌的移动设备适合性测试跟网址检查工具类似，谷歌的快照就是要看视频是否可以包含核心内容。

2. JavaScript 链接 SEO 友好

因为Googlebot是按照URL进行抓取和索引，所以链接中要出现可抓取和索引的URL，不要使用JS链接和锚点链接。以下是几个案例：好的：

<一个 HREF = “/网页” >简单友好</一> 
<一个 HREF = “/页” 的onclick = “GOTO（ '页'）” >仍然友好</一>

坏的：

<一个 的onclick = “GOTO（ '页'）” >不友好，没使用的href属性</一> 
<一个 HREF = “JavaScript的：GOTO（ '页'）” >不友好，不是可用的链接地址</一> 
< span  onclick = ”goTo('page')” >不友好，没有用标签</ span > 
< a  href = ”#page” >不友好，是锚点，不是单独的网址</ a >

3. 懒加载SEO友好

懒加载是现在WEB翻页的常用方式，尤其是移动端。但懒惰要特别注意对SEO友好加载。因为Googlebot并没有滚动短行为，通常采用调整屏幕长的来获取更多内容。下面是Googlebot调整屏幕长短的示意图：

我先放上一段对 Googlebot 不友好的 JavaScript 实现方式。这种方式不友好，是因为主要依赖滚动行为来触发内容的加载

还有一段对Googlebot友好的JavaScript实现方式，这种方式是采用监听元素可视化的方式来触发内容加载，Googlebot是友好的。

另外，也有原生的惰性元素，目前只有 Chrome 支持，且是实验阶段，要谨慎采用。

4. 网页性能优化

网页速度是人气排名第一，因此建议对性能网页进行优化，可以针对灯塔进行热门优化。以下几列JavaScript优化的部分：

减少 JavaScript 请求量、文件大小
避免 JavaScript 核心内容的加载
核心 JavaScript 内容嵌入网页
JavaScript 文件可放置 CDN 上，并加缓存

5. AJAX 可抓

部分#AAX网站用作 URL，但实际上 Googlebot 泡沫#J 是网页的锚点，明智#后忽忽掉了。因此，AJAX 网站也使用了#!方式可抓取的方式，而不是使用#的。好的：www.example.com/ajax.html#!mystate

坏的：www.example.com/ajax.html#mystate

JavaScript SEO 之前避免什么

除了以上5个优化方面，JavaScriptSEO还有以下几个重点：

避免JavaScript和CSS文件被屏蔽，包含robots.txt和服务器端的屏蔽等
避免 JavaScript 错误，超时等

其他的解决方案

JavaScript SEO 还有 2 个解决方案，这两种会更完整，成本也不低：第一种是服务器端呈现或预装的方式。第二种是动态的，即是针对昆虫有单独的表达方式这2个方式也可以结合起来。

另外，History API 也是翻页时友好的使用方式。History API 实现滚动时自动加载，且可保证 Googlebot 的抓取可以。

最终的建议

原来，JavaScript SEO 需要注意内容可识别、链接 SEO 友好、懒加载 SEO 友好、网页优化、AJAX 可抓取性能这 4 个方向，还要注意避免 JavaScript 的屏蔽和错误。

整体上，谷歌仍建议使用服务器端呈现（SSR）和预装的方式，因为这样可以让用户和爬虫更快地看到的网页内容，而且并非所有爬虫都能运行 JavaScript。

关于作者

文章来源：张亚楠博客 – SEO 技术流

参考资料

《了解JavaScript SEO基础知识》https://developers.google.com/search/docs/guides/javascript-seo-basics
《实现动态呈现》https://developers.google.com/search/docs/guides/dynamic-rendering
《网络渲染》https://developers.google.com/web/updates/2019/02/rendering-on-the-web
《JavaScript SEO权威指南（2021版）》https://moz.com/blog/javascript-seo-guide
《JavaScript SEO终极指南》https://www.onely.com/blog/ultimate-guide-javascript-seo/
《JavaScript SEO：你需要知道的》https://ahrefs.com/blog/javascript-seo/
《用于SEO的JavaScript最佳实践和调试工具》https://www.searchenginejournal.com/javascript-seo-debugging-tools/398965/

转载请注明：更蓝企服 » 张亚楠-JAVASCRIPT SEO完全指南【2021版】