[魔法师 · 小站]

张亚楠-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 目前的几个阶段:

  1. Googlebot通过站点地图、网页抓取的方式,将发现到的网址汇总成网址
  2. Googlebot 请求对 URL 分别抓取
  3. Googlebot 将已抓取网页加入渲染,用无头 Chromium 对网页进行渲染,并执行 JavaScript,获取内容
  4. 如果网页被判断定位,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。

推荐2个Debug插件

View Rendered Source – Chrome 插件

查看渲染源可以看到网页的渲染前和渲染后的HTML代码,并给出渲染的差异。不光如此,支持 PC 和 Msite,可模拟 Googlebot。让我不禁感叹:这才是真正真正的SEO产品工具!

SEO Pro extension – Chrome 插件

SEO Pro 扩展是个查看网页 SEO 的插件,并且使用的是网页渲染后的 HTML 资源,元素渲染前的。所以可以手动点击,查看网页元素的加载情况。

关于作者

文章来源:张亚楠博客 – 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/

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注