网络尚处在前端开发的黄金时代,各种取悦用户的炫酷JS层出不穷。JavaScript 和 SEO 优化正在不断融合。
JavaScript 对 SEO 的重要性
JavaScript 优化越来越重要,主要原因有:
- 移动网页普及 – 移动端网页多采用JavaScript动态渲染,需要优化JS提高移动端体验。
- 单页应用流行 – 很多网站采用了基于JavaScript的单页Web应用(SPA),整个页面依赖JS异步渲染。
- 提高互动性 – JavaScript可以实现更复杂的用户交互,提高网站综合体验。
- Google算法升级 – Google爬虫已可以抓取和索引JavaScript生成的内容。
- 提速网站 – 合理使用JavaScript可以进行异步加载,提高页面加载速度。
- 异步爬虫 – 新一代爬虫正向异步爬取优化过渡,JavaScript优化成为趋势。
- 提供结构化数据 – 通过JavaScript生成的结构化数据也会被搜索引擎抓取。
- 动态内容展现 – JavaScript使网站可以动态显示个性化内容。
何谓 JavaScript SEO?
JavaScript SEO是 SEO 的分科,其重点是优化使用JavaScript构建的网站,以提高搜索引擎的可见性及关键词排名。它主要涉及:
- 优化通过JavaScript注入的内容,以供搜索引擎进行抓取和索引。
- 针对基于JavaScript框架构建的网站和SPA(单页应用程序)的排名问题进行评测诊断和故障排除。
- 通过链接优化,确保搜索引擎可以找到网页。
- 缩短页面解析和执行JS代码以简化用户体验的页面加载时间。
JavaScript对SEO是好是坏?
具体情况具体分析。JavaScript是现代网络必不可少的要素,它使构建网站可扩展且易于维护,但不可否认,JavaScript的某些现实可能不利于搜索引擎的爬行抓取。
JavaScript如何影响SEO?
JavaScript会影响以下对SEO至关重要的页面元素和排名因素:
- 呈现的内容
- 链接
- 延迟加载的图像
- 页面加载时间
- 元数据
什么是JavaScript驱动的网站?
当我们谈论基于JavaScript构建的网站时,我们并不是在简单地向HTML文档添加一层JS交互性,例如向静态网页添加JS动画。在这种情况下,基于JavaScript的网站是指通过JavaScript将核心或主要内容注入DOM的时间。
下图为App Shell模型。
该模板称为应用程序外壳,是渐进式Web应用程序(PWA)的基础。
如何检查网站是否运用JavaScript构建
您可以使用诸如BuiltWith或Wappalyzer之类的技术查找工具来快速检查网站是否基于JavaScript框架构建,也可以在浏览器中“检查元素”或“查看源代码”以检查JS代码。您可能会发现的流行JavaScript框架包括:
- Google的Angular
- 通过Facebook做出反应
核心内容的JavaScript SEO
现代Web应用程序是基于Angular,React和Vue等JavaScript框架构建的。JavaScript框架允许开发人员快速构建和扩展交互式Web应用程序。让我们看一下Angular.js的默认项目模板,Angular.js是Google制作的流行框架。
在浏览器中查看时,它看起来像一个典型的网页。我们可以看到文本、图像和链接。让我们更深入地研究一下代码:
我们可以看到该HTML文档几乎完全没有任何内容,页面的主体中只有app-root和一些脚本标签。这是因为此单页应用程序的主要内容是通过JavaScript动态注入到DOM中的。换句话说,此应用程序依靠JS加载关键页面内容。
潜在的SEO问题:呈现给用户但未呈现给搜索引擎机器人的任何核心内容都可能会造成严重问题:搜索引擎无法完全抓取您的所有内容。
用于内部链接的JavaScript SEO
除了将内容动态注入DOM之外,JavaScript还可以影响链接的可爬网性。Google通过抓取在页面上找到的链接来发现新页面。最佳做法是,Google特别建议您使用带有href属性的HTML锚标记链接页面,并包括超链接的描述性锚文本:
但是,Google还建议开发人员不要依赖其他HTML元素(例如div或span)或JS事件处理程序进行链接。这些称为“伪”链接,根据Google的官方指南,通常不会对其进行爬网:
尽管有这些准则,但一项独立的第三方研究表明,Googlebot可能能够抓取JavaScript链接。尽管如此,将链接保留为静态HTML元素是一种最佳实践。
潜在的SEO问题:如果搜索引擎无法抓取并跟踪指向您的关键页面的链接,则您的页面可能会丢失指向它们的有价值的内部链接。内部链接可帮助搜索引擎更有效地抓取您的网站并突出显示最重要的页面。最坏的情况是,如果内部链接的实现不正确,那么Google可能除sitemal XML外,很难发现所有新页面。
JavaScript SEO用于延迟加载图像
JavaScript还可能影响延迟加载的图像的爬行抓取。这是一个基本示例。此代码段用于通过JavaScript延迟加载DOM中的图像:
Googlebot支持延迟加载,但是它不像人类用户访问网页时那样“滚动”。取而代之的是,Googlebot只是在抓取网络内容时将其虚拟视口的大小调整为更长。因此,“滚动”事件侦听器永远不会触发,爬虫也永远不会呈现内容。
这是更多SEO友好代码的示例:
此代码显示,当任何观察到的元素变为可见时,IntersectionObserver API会触发回调。它比滚动事件监听器更灵活,更强大,并且得到了现代Googlebot的支持。这段代码之所以有效,是因为Googlebot如何调整其视口大小以“查看”您的内容。
您还可以在浏览器中使用本机延迟加载。Google Chrome支持此功能,但它仍然是实验功能。最坏的情况是,它会被Googlebot忽略,无论如何,所有图片都会加载:
Google Chrome中的本机延迟加载。
潜在的SEO问题:与未加载核心内容类似,确保Google能够“看到”页面上的所有内容(包括图像)非常重要。例如,在具有多行产品列表的电子商务站点上,延迟加载图像可以为用户和机器人提供更快的用户体验。
Javascript SEO提高页面速度
Javascript也可能影响页面加载时间,这是Google移动优先索引中的官方排名因素。这意味着页面缓慢可能会损害搜索排名。我们如何帮助开发人员缓解这种情况?
- 缩小JavaScript
- 将非关键JS延迟到DOM中呈现主要内容之后
- 内联关键JS
- 在较小的有效载荷中提供JS
潜在的SEO问题:网站运行缓慢会给所有人(甚至搜索引擎)带来糟糕的用户体验。Google本身会推迟加载JavaScript,以节省资源,因此,务必确保有效编码和投放给客户的所有内容都有助于保护排名。
用于元数据的JavaScript SEO
利用路由器包(如react-router或vue-router)的SPA在路由器视图之间导航时,必须采取一些额外的步骤来处理诸如更改元标记之类的事情。这通常通过vue-meta或react-meta-tags之类的Node.js包进行处理。
什么是路由器视图?这是在React中通过五个步骤在单个页面应用程序中链接到不同“页面”的方式:
- 当用户访问React网站时,GET请求将发送到服务器以获取./index.html文件。
- 然后,服务器将index.html页面发送到客户端,其中包含启动React和React Router的脚本。
- 然后,将Web应用程序加载到客户端。
- 如果用户单击链接以进入新页面(/ example),则会向服务器发送新URL的请求。
- React Router在请求到达服务器之前对其进行拦截,并处理页面本身的更改。这是通过本地更新渲染的React组件并更改URL客户端来完成的。
换句话说,当用户或机器人遵循React网站上URL的链接时,不会为他们提供多个静态HTML文件。但是,托管在根./index.html文件中的React组件(如页眉,页脚和正文内容)只是被重新组织以显示不同的内容。这就是为什么它们被称为单页应用程序。
潜在的SEO问题:使用React Helmet之类的软件包非常重要,以确保在浏览SPA时为用户提供每个页面或“视图”的唯一元数据,否则搜索引擎可能会为每个页面抓取相同的元数据,或更糟糕的是根本没有。
Google如何处理JavaScript?
为了了解JavaScript如何影响SEO,我们需要了解GoogleBot抓取网页时到底发生了什么:
- 爬行
- 渲染
- 指数
首先,Googlebot逐页抓取其队列中的URL。搜寻器通常使用移动用户代理向服务器发出GET请求,然后服务器发送HTML文档。
然后,Google决定呈现页面主要内容所需的资源。通常,这意味着只爬网静态HTML,而不爬网任何链接的CSS或JS文件。
为什么?根据Google网站站长的说法,Googlebot已发现了大约130万亿个网页。大规模渲染JavaScript可能会花费很大。批量下载,解析和执行JavaScript所需的强大计算能力非常强大。
这就是Google可能将JavaScript渲染推迟到以后的原因。当计算资源可用时,所有未执行的资源都会排队等待Google Web Rendering Services(WRS)处理。
最后,Google将在执行JavaScript后索引所有呈现的HTML。
换句话说,Google分两次搜索和索引内容:
- 索引的第一波,或由网络服务器发送的静态HTML的即时爬网
- 第二波索引编制,或延迟抓取通过JavaScript呈现的任何其他内容
最重要的是,依赖于要呈现的JS的内容可能会在Google进行爬网和索引时遇到延迟。过去通常需要几天甚至几周的时间,例如Googlebot过去一直在过时的Chrome 41渲染引擎上运行。但近年来,他们已经大大改善了其网络爬虫。
Googlebot最近于2019年5月升级到Chromium无头浏览器的最新稳定版本。这意味着他们的Web搜寻器现在是“常绿的”并且与ECMAScript 6(ES6)和更高版本或最新版本的JavaScript完全兼容。
因此,如果Googlebot现在可以从技术上运行JavaScript,为什么我们仍然担心索引问题?
简短的答案是抓取预算。这是一个概念,因为计算资源有限,Google限制了其对给定网站进行爬网的频率。我们已经知道Google推迟将JavaScript稍后执行以节省检索预算。
虽然减少了抓取和呈现之间的延迟,但不能保证Google会在其Web Rendering Services队列中实际执行排队等待的JavaScript代码。
以下是Google可能实际上未运行您的JavaScript代码的一些原因:
- 在robots.txt中被阻止
- 超时时间
- 失误
因此,当核心内容依赖JavaScript而不由Google呈现时,JavaScript可能会导致SEO问题。
实际应用程序:用于电子商务的JavaScript SEO
电子商务网站是通过JavaScript注入的动态内容的真实示例。例如,在线商店通常通过JavaScript将产品加载到类别页面上。
JavaScript可以使电子商务网站动态更新其类别页面上的产品。这是有道理的,因为由于销售,他们的库存处于不断变化的状态。但是,如果Google不执行您的JS文件,则它实际上能够“看到”您的内容吗?
对于依赖在线转换的电子商务网站,如果其产品没有被Google编入索引,可能会造成灾难性的后果。
如何测试和调试JavaScript SEO问题
您可以立即采取以下步骤来主动诊断任何潜在的JavaScript SEO问题:
- 使用Google的网站站长工具可视化页面。这有助于您从Google的角度查看页面。
- 使用网站搜索运算符检查Google的索引。通过手动检查Google,确保所有JavaScript内容均已正确编入索引。
- 使用Chrome的内置开发工具进行调试。将Google“看到”(源代码)的内容与用户看到(呈现代码)的内容进行比较和对比,并确保它们总体上保持一致。
您还可以使用方便的第三方工具和插件。
Google网站管理员工具
确定Google在尝试呈现网页时是否遇到技术困难的最佳方法是使用Google网站站长工具测试您的网页,例如:
- Search Console中的URL检查工具
- 行动装置相容性测试
目标只是视觉上比较和对比您在浏览器中可见的内容,并查找工具中显示的内容是否有差异。这两个Google网站管理员工具都使用与Google相同的常绿Chromium渲染引擎。这意味着它们可以为您提供Googlebot抓取您的网站时实际“看到”的准确视觉呈现。
也有第三方技术SEO工具,例如Merkle的获取和呈现工具。与Google的工具不同,此Web应用程序实际上为用户提供了整个页面的完整屏幕截图。
网站:搜索运算符
如果您不确定JavaScript内容是否已被Google编入索引,则可以使用site:Google上的搜索运算符进行快速检查。
复制并粘贴您不确定Google会在site:运算符和您的域名之后建立索引的所有内容,然后按回车键。如果您可以在搜索结果中找到您的页面,那么不用担心!Google可以对您的内容进行爬网,渲染和索引。如果不是,则意味着您的JavaScript内容可能需要一些帮助才能获得可见性。
这是在Google SERP中的样子:
Chrome开发工具
您可以用来测试和调试JavaScript SEO问题的另一种方法是Chrome网络浏览器中提供的开发人员工具的内置功能。右键单击网页上的任意位置以显示选项菜单,然后单击“查看源代码”以在新选项卡中查看静态HTML文档。右键单击后,您还可以单击“检查元素”以查看DOM中实际加载的内容,包括JavaScript。
比较和对比这两种观点,以查看是否仅在DOM中加载了任何核心内容,而在源中是否未对其进行硬编码。还有第三方Chrome扩展程序可以帮助完成此任务,例如Chris Pederick的Web Developer插件或Jon Hogg的View Rendered Source插件。
如何解决JavaScript呈现问题
诊断JavaScript呈现问题后,如何解决JavaScript SEO问题?答案很简单:通用Javascript,也称为“同构” JavaScript。
这是什么意思?通用或同构在这里是指能够在服务器或客户端上运行的JavaScript应用程序。为了避免将JS卸载给用户和搜寻器,JavaScript有几种不同的实现比客户端呈现更易于搜索。
- 服务器端渲染(SSR)。这意味着在服务器上为每个请求执行JS。一种实现SSR的方法是使用像Puppeteer这样的Node.js库。但是,这会对服务器造成很大的压力。
- 混合渲染。这是服务器端渲染和客户端渲染的组合。核心内容在发送到客户端之前先在服务器端呈现。任何其他资源都将卸载到客户端。
- 动态渲染。在这种解决方法中,服务器将检测发出请求的客户端的用户代理。然后,它可以将预先渲染的JavaScript内容发送到搜索引擎。任何其他用户代理都需要在客户端呈现其内容。例如,Google网站站长建议使用一种流行的开源解决方案Renderton来实现动态渲染。
- 增量静态重新生成,或在站点已部署后更新静态内容。这可以使用诸如React 。的Next.js或Vue的Nuxt.js之类的框架来完成。这些框架具有一个构建过程,该过程会将JS应用程序的每个页面预呈现为静态资产,您可以从S3存储桶等内容中为其提供服务。这样,您的站点无需服务器管理即可获得服务器端渲染的所有SEO优势!
这些解决方案均有助于确保当搜索引擎机器人提出对HTML文档进行爬网的请求时,它们会收到完整呈现的网页版本。但是,其中一些可能在构建Web基础结构之后极难实现,甚至无法实现。这就是为什么在设计下一个Web应用程序的体系结构时牢记JavaScript SEO最佳实践很重要的原因。
对于基于内容管理系统(CMS)构建的网站,该网站已经预先提供了大多数内容,例如WordPress或Shopify,这通常不是问题。
小结
这里提供了一些一般的最佳实践和对JavaScript SEO的见解,但JavaScript SEO是一个复杂而细微的研究领域。我们建议您通读Google的官方文档和故障排除指南,以获取更多JavaScript SEO基础知识。