JavaScript SEO的最终指南(2021版)

网络是前端开发的黄金时代,JavaScript和技术SEO正在经历文艺复兴。作为技术SEO专家和Web Dev爱好者,在屡获殊荣的数字营销机构中,我想根据行业最佳实践和我自己的代理经验分享我对现代JavaScript SEO的看法。在本文中,您将学习如何在2021年度优化您的JS-Powered网站以便于2021获取搜索。

什么是JavaScript SEO?

JavaScript SEO是专注于优化的技术SEO的学科使用JavaScript构建的网站以获得搜索引擎的可见性。它主要关注:

优化通过JavaScript注入的内容,用于通过搜索引擎爬行,呈现和索引.preventing,诊断和排除ran网站和SPA(单页应用程序)的King问题构建在JavaScript框架之上,例如React,Angular和Vue.Curence通过链接最佳实践来发现网页。页面解析和执行JS代码的页面加载时间。为了简化的用户体验(UX)。

是JavaScript对SEO的好坏?

这取决于! JavaScript对现代网络至关重要,并使建筑网站可扩展,更易于维护。然而,JavaScript的某些实现可能是有害的,对搜索发动机能见度有害。

如何影响SEO?

JavaScript会影响以下关注的元素和对SEO非常重要的排名因素:

渲染ContentLinkSlazy加载的ImagePAGE LOAD TIMEMETA数据

是什么JavaScript供电的网站?

当我们谈论在JavaScript上构建的网站时,我们不参考仅向HTML文档添加一层JS交互性(例如,在将JS动画添加到静态网页时)。在这种情况下,JavaScript的网站是指核心或主内容通过JavaScript注入DOM时。

应用程序壳模型。该模板称为App shell,是渐进式Web应用程序的基础(PWA)。我们将探索下一步。
如何检查网站是否使用JavaScript构建

您可以通过使用技术查找工具快速检查网站是否构建了JavaScript框架如

内置

WAP帕利泽

。您还可以在浏览器中“检查元素”或“查看源”以检查JS代码。您可能发现的流行JavaScript框架包括:

Angular

通过Google 由Facebook Vue 通过 Evan You

JavaScript SEO用于核心内容 这是一个例子:现代Web应用程序正在构建在JavaScript框架上,如角,反应和Vue。 JavaScript框架允许开发人员快速构建和缩放交互式Web应用程序。让我们来看看Angular.js的默认项目模板,是Google生产的流行框架。 在浏览器中查看时,这看起来像典型的网页。我们可以看到文字,图像和链接。但是,让我们深入潜入并在代码的罩下窥视:

现在我们可以看到这个HTML文档几乎完全没有任何内容。页面正文中只有App-Root和一些脚本标记。这是因为本单页面应用程序的主要内容通过JavaScript动态注入DOM。换句话说,这个应用程序取决于JS加载密钥上页面内容!

潜在的SEO问题:任何向用户呈现但不是搜索引擎机器人的任何核心内容都可能是严重的问题!如果搜索引擎无法完全抓取所有内容,那么您的网站可能被忽视以支持竞争对手。我们稍后会更详细地讨论此内容。

内部链接的JavaScript SEO

除了将内容动态注入DOM,JavaScript也可以affect链接的克拉力性。 Google通过在页面上发现的链接来发现新页面。

作为最佳实践,Google特别建议使用HTML锚标记与HREF属性链接页面,以及包括超链接的描述性锚文本:

谷歌还建议开发人员不依赖于其他HTML元素 – 或SPAN – 或JS事件处理程序进行链接。这些称为“伪”链接,根据

官方Google指南,他们通常不会爬行

第三方研究

建议GoogleBot可以抓取JavaScript链接。尽管如此,在我的经验中,我发现这是最好的实践将链接保留为静态HTML元素。

潜在的SEO问题:如果搜索引擎无法抓取并遵循关键页面的链接,则可以在指向它们的有价值的内部链接上遗漏您的页面。内部链接帮助搜索引擎更有效地爬网并突出显示最重要的页面。最坏情况的情况是,如果您的内部链接是错误的,那么谷歌可能很难发现您的新页面(XML站点地图之外)。

懒惰加载图像的JavaScript SEO [图

JavaScript还可以影响懒惰加载的图像的克拉布性。这是一个基本的例子。这个代码片段是通过JavaScript中DOM中的延迟加载图像:

Googlebot支持Lazy-Loading,但它不会像人类用户那样“滚动”,在访问您的网页时会像人类用户一样。相反,GoogleBot只是在爬行Web内容时调整其虚拟视口的大小更长。因此,永远不会触发“滚动”事件侦听器,内容永远不会由爬网程序呈现。以下是更友好的代码的示例:

此代码显示当任何观察到的元素变得可见时,intersectobserver API触发回调。它比滚动事件侦听器更灵活且强大,并由现代GoogleBot支持。此代码是有效的,因为GoogleBot如何调整其视口中的大小,以便“查看”您的内容(见下文)。

您还可以在浏览器中使用本机懒惰加载。这是Google Chrome的支持但请注意,它仍然是一个实验特征。最糟糕的情况,它只通过GoogleBot忽略,所有图像都将加载,无论如何在Google Chrome中。

潜在的SEO问题:类似于未加载的核心内容,确保谷歌能够“查看”页面上的所有内容非常重要,包括图片。例如,在具有多行产品列表的电子商务站点上,懒惰加载图像可以为用户和机器人提供更快的用户体验!

页面速度的JavaScript SEO

JavaScript也可以影响页面加载时间,这是谷歌移动第一索引中的官方排名因素。这意味着慢页面可能潜在危害SEAR排名Ch。我们如何帮助开发人员缓解这一点?

缩小JavaScriptDeferring非关键词,直到在较小的有效载荷中呈现在多米隆的关键JSServing JS中的主内容

潜在的SEO问题之后:慢速网站为每个人创造了较差的用户体验甚至搜索引擎。谷歌本身逗留加载JavaScript以节省资源,因此必须有效地编码并有效地发送给客户来帮助保护保障排名。

Meta数据的JavaScript SEO

也是如此值得注意的是要注意利用Routh-Router或Vue-Router等路由器包的SPA必须采用一些额外的步骤来处理在路由器视图之间导航时更改元标记的内容。这通常使用像Vue-Me这样的节点.js包处理TA或反应元标签。

什么是路由器视图?以下是如何在单页应用程序中链接到不同的“页面”在五个步骤中的反应中的作品:

当用户访问React网站时,将Get请求发送到服务器。/index.html文件。服务器然后将index.html页面发送到客户端,其中包含脚本启动React和React Router。然后将Web应用程序加载到客户端。如果用户点击链接以进行新页面(/示例) ,请求发送到新URL.reaCT路由器在访问服务器之前拦截并处理页面本身的更改之前拦截请求。这是通过在本地更新渲染的React组件并更改URL客户端来完成的。换句话说,当用户或机器人跟随链接时在React网站上的URL,它们不会提供多个静态HTML文件。但是,托管在root上托管的反应组件(类似标题,页脚和身体内容)只是重新组织以显示不同的内容。这就是为什么他们被称为单页应用程序!

潜在的SEO问题:因此,使用像 React Helmet

这样的包来确保用户为每个服务提供唯一的元数据是很重要的浏览SPA时,页面或“视图”。否则,搜索引擎可能会为每个页面爬行相同的元数据,或者更糟糕的是,没有!

这一切如何影响SEO在更大的图片中?接下来,我们需要了解Google进程的JavaScript如何。

Google处理JavaScript如何?

为了了解JAVAscript影响SEO,我们需要了解GoogleBot抓取网页时究竟恰好发生了什么:

CrawlRenderIndex

首先,GoogleBoT爬上其队列中的URL,页面逐页。爬网程序通常使用移动用户代理将请求提供给服务器,然后服务器发送HTML文档。然后,Google决定了渲染页面主要内容所需的资源。通常,这意味着只有静态HTML爬出,而不是任何链接的CSS或JS文件。为什么?

根据Google网上管理员,GoogleBot已经发现了大约

130万亿

网页。以刻度渲染JavaScript可能是昂贵的。下载,解析和批量执行JavaScript所需的纯粹计算能力是大规模的。

这就是谷歌可能推迟的原因渲染JavaScript直到以后。任何未执行的资源都排队通过Google Web渲染服务(WRS)处理,因为计算资源可用。最后,谷歌将在执行JavaScript之后索引任何呈现的HTML。

谷歌爬网,渲染和索引过程。 换句话说,Google爬网和索引两波中的内容:第一波索引,或者网络服务器发送的索引的静态HTML的即时爬网,或者延迟爬网通过JavaScript呈现的任何其他内容

Google波索引。资料来源:Google I / O’18
底线是依赖于js的内容才能呈现,可以延迟爬行和索引的goo格里。这用于花几天甚至几周。例如,GoogleBot历史上跑在过时的Chrome 41渲染引擎上。然而,他们近年来他们显着改善了其网络爬虫。

Googlebot是

最近升级了到2019年5月的最新稳定释放铬无头浏览器。这意味着他们的网履带现在是“Evergreen”并与ECMAScript 6(ES6)和更高版本完全兼容,或更高版本的JavaScript。

所以,如果GoogleBot现在可以在技术上运行JavaScript,为什么我们仍然担心索引问题?

简短的答案是爬行预算。这是谷歌由于计算资源有限而抓取给定网站的速率限制的概念。我们已经知道谷歌叛逃者稍后要执行的JavaScript保存爬网预算。

虽然爬行和渲染之间的延迟减少了,但无法保证Google将在其Web渲染服务队列中排队等待的JavaScript代码。

以下是Google可能无法运行的一些原因,为什么robots.txtipeoutsErrors封锁,因此,当核心内容依赖于JavaScript但不是由Google呈现而不是由Google呈现而且不会由Google呈现而导致SEO问题。实际应用程序:电子商务的JavaScript SEO 电子商务网站是通过JavaScript注入的动态内容的真实例子。例如,Online存储通常通过JavaScript在类别页面上加载产品。

JavaScript可以允许e-commuste Website动态更新其类别页面上的产品。这是有道理的,因为他们的库存导致由于销售而处于恒定的助焊状态。但是,谷歌实际上能够“看到”您的内容如果它不执行您的JS文件,那么对电子商务网站

依赖于在线转换,而不是通过谷歌索引的产品可能是灾难性的。

如何测试和调试JavaScript SEO问题

以下是您今天可以采取的步骤,主动诊断任何潜在的JavaScript SEO问题:

使用Google的网站管理员工具可视化页面。这有助于您从Google的透视图查看页面。使用网站搜索操作员查看谷歌的索引。确保通过手动检查GOO正常索引所有JavaScript内容gle.debug使用Chrome的内置开发工具。与用户看到(呈现代码)的谷歌“看到”(源代码)的比较和对比,并确保它们通常对齐。

还可以使用派上使用的第三方工具和插件。我们将很快谈论这些。

Google网站管理员工具

确定谷歌在尝试呈现页面时遇到技术困难的最佳方式是使用Google网站管理员工具测试页面,如:

搜索控制台中的URL检查工具

移动友好的测试

目标只是在视觉上比较和对比您的浏览器中可见的内容,并在t中查找任何差异他的工具。这两个谷歌网站管理员工具都使用相同的常绿铬渲染引擎作为谷歌。这意味着它们可以在爬网爬网爬网时,为您提供准确的视觉表达格式谷歌的视觉表现。

如果您不确定谷歌是否正在索引JavaScript内容,您可以使用该网站执行快速检查:在Google上搜索操作员。

复制并粘贴您不确定谷歌在网站之后索引的任何内容:运算符和域名,然后pr.ESS返回键。如果您可以在搜索结果中找到页面,那么无需担心!谷歌可以爬网,渲染和索引您的内容。如果没有,这意味着您的JavaScript内容可能需要一些有助于获取的可见性。

这就是Google Serp中的那种看起来的样子:

rowome dev工具您可以用于测试和调试JavaScript SEO问题的另一种方法是Chrome Web浏览器中可用的开发人员工具的内置功能。 右键单击网页上的任何位置以显示“选项”菜单,然后单击“查看源”以查看新选项卡中的静态HTML文档。 您还可以在右键单击以查看实际加载在DOM中的内容后单击“检查元素” ,包括JavaScript。 [1检查元素 比较和对比这两个观点来看看是否只在DOM中加载了任何核心内容,但在源中没有硬编码。还有三方Chrome扩展可以帮助执行此操作,如 Web开发人员插件,克里斯Pederick或查看渲染源插件由Jon Hogg。 如何修复JavaScript渲染问题 诊断JavaScript呈现问题后,您如何解决JavaScript SEO问题?答案很简单:通用JavaScript,也称为“同义”JavaScript。 这是什么意思?这里的普遍或同构是指能够在服务器或客户端上运行的JavaScript应用程序。 有几个不同的实现javascript的javascript比客户端addersive更友好,以避免将js卸载到两个用户和爬虫:服务器端呈现(SSR)。这意味着js在服务器上执行每个请求。实现SSR的一种方法是使用像 Pumppeteer(如)的Node.js库。但是,这可以在server.hybrid渲染上放置很多紧张。这是服务器端和客户端呈现的组合。在发送到客户端之前,核心内容是服务器端。任何其他资源都将卸载到Client.Dynamic渲染。在此解决方法中,服务器检测客户端的用户代理。然后,它可以将预先呈现的JavaScript内容发送到搜索引擎。任何其他用户代理都需要呈现他们的内容客户端。例如,Google WebMasters推荐一个名为 Renderton 的流行的开源解决方案,用于实现动态渲染。静态再生,或者在已经部署网站后更新静态内容。这可以用框架(如 Next.js )的框架来完成,用于反应或 Nuxt.js 为Vue。这些框架具有一个构建过程,它将将每个页面的每个页面呈现给静态资产,您可以从S3桶中的某些内容提供服务。这样,您的网站可以获得服务器端渲染的所有SEO福利,而无需服务器管理!呈现网页的版本。豪夫在已经构建了Web基础架构之后,其中一些可能极其困难甚至不可能实现。这就是为什么在设计下一个Web应用程序的体系结构时,为保留JavaScript SEO最佳实践是重要的。注意,对于已经在大多数内容预先呈现的内容管理系统(CMS)的网站,如此WordPress或Shopify,这不是一个问题。 关键的外卖 本指南为JavaScript SEO提供了一些普遍的最佳实践和见解。然而,JavaScript SEO是一个复杂和细致的学习领域。我们建议您通过谷歌的官方文档和故障排除指南获取更多JavaScript SEO基础知识。有兴趣了解更多关于优化你的Java脚本网站搜索?在下面留言。 Web已从普通的HTML移动 – 作为SEO,您可以接受这一点。与他们一起学习JS Devs并分享SEO知识。 Js不会消失。 – ????约翰 ???? (@Johnmu) 2017年8月8日 想了解技术SEO的更多信息吗?查看 Moz Academy技术SEO认证系列,这是一种深入的训练系列,其在技术SEO的螺母和螺栓上。 我!