1. 柠檬SEO首页
  2. 谷歌SEO技术优化教程

JavaScript&SEO:使您的Bot体验与用户体验一样好

了解JavaScript及其对搜索性能的潜在影响是现代SEO专业人员的核心技能。如果搜索引擎无法抓取网站或无法解析和理解内容,则不会索引任何内容,也不会对该网站进行排名。

对于与JavaScript相关的SEO来说,最重要的问题是:搜索引擎可以看到内容并掌握网站体验吗?如果没有,可以利用哪些解决方案来解决此问题?


基本原理

什么是JavaScript?

创建现代网页时,包含三个主要组件:

  1. HTML –超文本标记语言充当网站的骨干或内容的组织者。它是网站的结构(例如标题,段落,列表元素等)并定义静态内容。
  2. CSS –级联样式表是添加到网站的设计,浮华,华丽和样式。它构成了页面的表示层。
  3. JavaScript – JavaScript是动态Web的交互性和核心组成部分。

了解有关网页开发以及如何编写基本JavaScript的更多信息。

javacssseo.gif

图像源:1,2,3

JavaScript可以放在<script>标记内的HTML文档中(即,它嵌入在HTML中),也可以被链接/引用。当前有很多JavaScript库和框架,包括jQuery,AngularJS,ReactJS,EmberJS等。

JavaScript库和框架:

JavaScript&SEO:使您的Bot体验与用户体验一样好

什么是AJAX?

AJAX或异步JavaScript和XML是结合了JavaScript和XML的一组Web开发技术,这些技术允许Web应用程序在后台与服务器通信而不会干扰当前页面。异步意味着其他功能或行代码可以同时运行异步脚本运行。XML曾经是传递数据的主要语言;但是,术语AJAX用于所有类型的数据传输(包括JSON;我猜“ AJAJ”听起来不像“ AJAX” [pun意图])。

AJAX的常用用法是在不启动整个页面刷新的情况下更新网页的内容或布局。通常,在页面加载时,必须请求并从服务器获取页面上的所有资产,然后将其呈现在页面上。但是,使用AJAX,只需要加载页面之间不同的资产,这可以改善用户体验,因为它们不必刷新整个页面。

可以将AJAX视为小型服务器调用。使用AJAX的一个很好的例子是Google Maps。页面更新时不会重新加载整个页面(即,在用户导航时,将使用小型服务器调用来加载内容)。

相关图片

图片来源

什么是文档对象模型(DOM)?

作为SEO专家,您需要了解DOM是什么,因为它是Google用于分析和理解网页的对象。

DOM是在浏览器中“检查元素”时看到的内容。简而言之,您可以将DOM视为浏览器在收到HTML文档以呈现页面后所采取的步骤。

浏览器收到的第一件事是HTML文档。之后,它将开始解析该文档中的内容并获取其他资源,例如图像,CSS和JavaScript文件。

DOM是从信息和资源的解析中形成的。可以将其视为网页代码的结构化,组织化版本。

如今,由于通常称为动态HTML,因此DOM通常与初始HTML文档大不相同。动态HTML是页面利用HTML,CSS和JavaScript根据用户输入,环境条件(例如一天中的时间)和其他变量来更改其内容的能力。

一个带有<title>标记的简单示例,该标记通过JavaScript填充:

HTML来源 DOM
JavaScript&SEO:使您的Bot体验与用户体验一样好 JavaScript&SEO:使您的Bot体验与用户体验一样好

什么是无头浏览?

无头浏览只是在没有用户界面的情况下获取网页的操作。了解这一点很重要,因为Google 和现在的百度都利用无头浏览来更好地了解用户的体验和网页内容。

PhantomJS和Zombie.js是脚本化的无头浏览器,通常用于自动化Web交互以进行测试,并为初始请求呈现静态HTML快照(预呈现)。


为什么JavaScript会对SEO构成挑战?(以及如何解决问题)

有三(3)个理由要关注您网站上的JavaScript:

  1. 抓取能力:Bots抓取您的网站的能力。
  2. 可获取性:Bots能够访问信息并解析您的内容。
  3. 感知的网站延迟:又称关键渲染路径。

JavaScript&SEO:使您的Bot体验与用户体验一样好

爬网能力

机器人能够找到URL并了解您的网站架构吗?这里有两个重要元素:

  1. 从您的JavaScript阻止搜索引擎(甚至是偶然)。
  2. 正确的内部链接,不能利用JavaScript事件代替HTML标签。

为什么阻止JavaScript这么重要?

如果搜索引擎被阻止抓取JavaScript,它们将无法获得您网站的完整体验。这意味着搜索引擎看不到最终用户所见。这可能会降低您的网站对搜索引擎的吸引力,并最终被认为是伪装的(如果意图确实是恶意的)。

Google抓取方式和TechnicalSEO.com的robots.txt以及Fetch and Render测试工具可以帮助识别被Googlebot阻止的资源。

解决此问题的最简单方法是通过为搜索引擎提供对他们理解您的用户体验所需的资源的访问权限。

!!! 重要说明:与您的开发团队一起确定哪些文件应该和不应该被搜索引擎访问。

内部连结

内部链接应使用HTML或DOM中的常规锚标签(使用a hrefs =“ www.example.com” HTML标签)来实现,而不是利用JavaScript函数来允许用户遍历网站。

本质上:不要使用JavaScript的onclick事件代替内部链接。尽管可能会找到最终网址并对其进行爬网(通过JavaScript代码或XML网站地图中的字符串),但它们不会与网站的全局导航相关联。

内部链接对于网站的体系结构和页面重要性向搜索引擎发出了强烈的信号。实际上,内部链接是如此强大,以至于它们可以(在某些情况下)覆盖“ SEO提示”,例如规范标签。

网址结构

历史上,基于JavaScript的网站(也称为“ AJAX网站”)在URL中使用片段标识符(#)。

  • 不建议:
    • 原始体验(又称“漂亮” URL):此URL必须带有#!URL中的(hashbang)表示存在转义的片段,或表示存在转义的片段的meta元素(<meta name =“ fragment” content =“!”>)。
    • 转义的片段(又名Ugly URL,HTML快照):此URL用“ _escaped_fragment_”替换哈希爆炸(#!),并提供HTML快照。之所以称其为“丑陋的URL”,是因为它很长,而且看起来很((出于所有目的和目的)是一种hack)。
    • 孤独哈希(#)–孤独英镑符号不可检索。它用于标识锚链接(也称为跳转链接)。这些链接使您可以跳到页面上的一部分内容。URL的单独哈希部分之后的所有内容都不会发送到服务器,并且会导致页面自动滚动到具有匹配ID的第一个元素(或具有以下信息名称的第一个<a>元素)。Google建议避免在网址中使用“#”。
    • Hashbang(#!)(和escaped_fragments URL)– Hashbang URL是支持爬网程序的一种方法(Google希望现在避免,仅Bing支持)。在一个多月前,Google和Bing开发了一个复杂的AJAX解决方案,其中,一个漂亮的(#!)URL与UX并存,与针对机器人的等效的基于escaped_fragment HTML体验并存。从那以后,谷歌就回溯了这一建议,宁愿获得确切的用户体验。在转义的片段中,有两种经验:

图片结果

图片来源

  • 推荐的:
    • pushState的一个很好的用途是无限滚动(即,当用户点击页面的新部分时,URL将更新)。理想情况下,如果用户刷新页面,则体验会将它们放在完全相同的位置。但是,它们不需要刷新页面,因为在向下滚动时内容会更新,而地址栏中的URL会更新。
    • 示例:可以在此处找到由Google的John Mueller(如图)创建的搜索引擎友好的无限滚动实现的一个很好的示例。从技术上讲,他利用了replaceState(),它不包含与pushState相同的后退按钮功能。
    • 阅读更多:Mozilla PushState历史记录API文档
    • pushState历史记录API – PushState基于导航,是History API的一部分(请考虑:您的Web浏览历史记录)。本质上,pushState更新地址栏中的URL,并且仅更新页面上需要更改的内容。它允许JS网站利用“干净” URL。当支持客户端或混合渲染的浏览器导航时,Google当前支持 PushState 。

JavaScript&SEO:使您的Bot体验与用户体验一样好

可获得性

已显示搜索引擎采用无头浏览来呈现DOM,以更好地理解用户的体验和页面内容。也就是说,Google可以处理一些JavaScript并使用DOM(而不是HTML文档)。

同时,在某些情况下,搜索引擎很难理解JavaScript。没有人希望他们的网站或客户的网站发生Hulu情况。了解机器人如何与您的现场内容进行交互至关重要。如果不确定,请进行测试。

假设我们正在谈论执行JavaScript的搜索引擎机器人,则搜索引擎能够获取内容的几个重要元素:

  • 如果用户必须进行交互才能触发操作,则搜索引擎可能看不到它。
    • Google是一个懒惰的用户。它不会单击,也不会滚动,也不会登录。如果完整的UX需要用户采取措施,则应采取特殊的预防措施以确保机器人获得同等的体验。
  • 如果JavaScript在JavaScript加载事件触发约5秒后发生*,则搜索引擎可能看不到它。
    • * John Mueller提到没有特定的超时值;但是,网站应该在五秒钟内加载。
    • * Screaming Frog测试显示与五秒钟的渲染时间相关。
    • *加载事件加五秒钟是Google使用的PageSpeed Insights,移动友好工具和抓取功能;查看Max Prin的测试计时器。
  • 如果JavaScript中存在错误,那么如果未执行整个代码,则浏览器和搜索引擎都将无法通过,并且可能会丢失页面的某些部分。

如何确保Google和其他搜索引擎可以获取您的内容

1.测试

解决JavaScript最流行的解决方案可能不是解决任何问题(喝杯咖啡,让Google发挥它的算法优势)。为谷歌提供与搜索者相同的体验是谷歌的首选方案。

Google于2014年5月首次宣布能够“更好地理解Web(即JavaScript)” 。业内专家建议Google可以在此消息发布之前抓取JavaScript。iPullRank团队在2011年为此提供了两项出色的成果:Googlebot是Chrome,而Googlebots有多聪明?(谢谢,乔希和迈克)。可以肯定,Adam Audette的Google可以抓取JavaScript并在2015年利用DOM。因此,如果您可以在DOM中看到您的内容,则可能是Google解析了您的内容。

adamaudette-我并不总是使用JavaScript,但是当我这样做时,我知道Google可以抓取dom并动态生成HTML

最近,Bartosz Goralewicz进行了一个很酷的实验,测试了各种JavaScript库和框架的组合,以确定Google如何与页面进行交互(例如,它们是否为URL /内容建立索引?GSC如何进行交互?等等)。它最终表明Google能够与多种形式的JavaScript进行交互,并强调了某些框架可能更具挑战性。约翰·穆勒(John Mueller)甚至成立了一个JavaScript搜索小组(据我所读,这非常有帮助)。

所有这些研究都是惊人的,可帮助SEO了解何时需要关注并发挥积极作用。但是,在确定坐下来是您网站的正确解决方案之前,我建议您谨慎尝试小断想法:吉姆·科林(Jim Collin)的《子弹,然后炮弹》哲学,摘自他的《Great by Choice》:

“子弹是一项旨在检验什么有效且符合三个条件的实证测试:子弹必须是低成本,低风险和低干扰力的……10Xers使用子弹来凭经验验证实际可行的方法。基于这一经验验证,他们随后集中了资源来发射炮弹,从而使集中的赌注获得了丰厚的回报。”

考虑通过以下方式进行测试和审查:

  1. 确认您的内容出现在DOM中。
  2. 测试部分页面,看看Google是否可以为内容编制索引。
  • 手动检查内容中的引号。
  • 使用Google抓取并查看是否显示内容。
  • 据推测,在加载事件前后或超时之前,会通过Google进行抓取。检查Google是否能够查看您的内容以及您是否在robots.txt中阻止JavaScript是一个很好的测试。尽管通过Google抓取并非万无一失,但这是一个很好的起点。
  • 注意:如果未在GSC中进行验证,请尝试使用Technicalseo.com的“作为任何Bot工具进行提取和渲染”。

在测试了所有这些内容之后,如果某些功能不起作用并且搜索引擎和机器人正在努力建立索引并获取您的内容该怎么办?也许您担心其他搜索引擎(DuckDuckGo,Facebook,LinkedIn等),或者您正在利用需要其他机器人解析的元信息,例如Twitter摘要卡或Facebook Open Graph标签。如果在测试中发现其中任何一个或将其自身视为问题,则HTML快照可能是唯一的决定。

2. HTML快照
什么是HTML快照?

HTML快照是一个完全呈现的页面(在DOM中可能会看到),可以将其返回给搜索引擎机器人(请看:DOM的静态HTML版本)。

Google引入了HTML快照2009,在2015 年弃用(但仍支持),并尴尬地提到它们是2016年底“避免”的要素。HTML快照是Google的一个有争议的话题。但是,理解它们很重要,因为在某些情况下它们是必需的。

如果搜索引擎(或类似Facebook的网站)无法掌握您的JavaScript,则最好返回HTML快照,而不是根本不索引和理解您的内容。理想情况下,您的站点将在服务器端利用某种形式的用户代理检测,并将HTML快照返回给机器人。

同时,必须认识到Google希望与用户拥有相同的体验(即,如果测试很艰苦并且JavaScript搜索组无法为您提供支持,则仅向Google提供HTML快照)。

注意事项

考虑HTML快照时,您必须考虑到Google已弃用该AJAX建议。尽管Google在技术上仍然支持它,但Google建议避免使用它。是的,Google改变了主意,现在希望获得与用户相同的体验。这个方向是有道理的,因为它允许漫游器接收更真实的用户体验。

第二个考虑因素涉及隐身的风险。如果发现HTML快照不代表页面上的体验,则认为存在隐藏风险。直接从来源:

“ HTML快照必须包含与最终用户在浏览器中看到的内容相同的内容。如果不是这种情况,则可以认为是伪装。”
– Google Developer AJAX检索常见问题解答

好处

尽管有很多考虑,HTML快照仍具有强大的优势:

  1. 搜索引擎和爬网程序将能够理解该体验的知识。
    • Google可能难以掌握某些类型的JavaScript(咳嗽… Angular(俗称AngularJS 2)……咳嗽)。
  2. 其他搜索引擎和搜寻器(例如Bing,Facebook)将能够理解这种体验。
    • 除其他搜索引擎外,必应还没有声明它可以对JavaScript进行爬网和编制索引。HTML快照可能是JavaScript繁重的网站的唯一解决方案。与往常一样,在潜水之前进行测试以确保是这种情况。

“不仅仅是Google了解您的JavaScript。它还关系到速度。”  -DOM-“这不仅与Google了解您的Javascript有关,还与您感知的延迟有关。”  -DOM

网站延迟

当浏览器收到HTML文档并创建DOM时(尽管有一定程度的预扫描),大多数资源都按它们出现在HTML文档中的方式加载。这意味着,如果您的HTML文档顶部有一个巨大的文件,浏览器将首先加载该文件。

Google关键渲染路径的概念是尽快加载用户需要的内容,可以将其转换为→“尽快将所有内容摆在用户面前”。

关键渲染路径-逐步优化的渲染负载:

渐进式页面渲染

图片来源

但是,如果您有不必要的资源或JavaScript文件阻塞了页面的加载能力,那么您将获得“阻止渲染的JavaScript”。含义:您的JavaScript阻止了页面显示的速度,好像页面加载速度更快(也称为:感知延迟)一样。

JavaScript&SEO:使您的Bot体验与用户体验一样好

渲染阻止JavaScript –解决方案

如果您分析页面速度结果(通过诸如Page Speed Insights Tool,WebPageTest.org,CatchPoint等工具)并确定存在渲染阻止JavaScript问题,则可以使用以下三种解决方案:

  1. 内联:将JavaScript添加到HTML文档中。
  2. 异步:使JavaScript异步(即,将“异步”属性添加到HTML标签)。
    JavaScript&SEO:使您的Bot体验与用户体验一样好
  3. 推迟:通过将JavaScript放到HTML中较低的位置。

JavaScript&SEO:使您的Bot体验与用户体验一样好

!!! 重要说明:重要的是要了解脚本必须按优先级排列。必须优先处理用于加载首屏内容的脚本,并且不应将其推迟。同样,任何引用另一个文件的脚本只能在引用文件加载后使用。确保与您的开发团队紧密合作,以确保不会中断用户的体验。

[原创文章] 发布者:adimn,转载抄袭请注明本站链接:http://www.spsa.cn/2013.html

发表评论

登录后才能评论

联系我们

15289893167

在线咨询:点击这里给我发消息
工作时间:周一至周日,9:30-18:30,节假休息

QR code