回到主页

JavaScript和SEO:让您的机器人体验与用户体验一样好

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

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

基本面 什么是JavaScript?

创建现代网页时,有三个主要组成部分:

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

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

JavaScript库和框架:
什么是AJAX?

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

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

人们可以将AJAX视为迷你服务器调用。AJAX的一个很好的例子就是谷歌地图。页面更新没有完整页面重新加载(即,用户导航时正在使用迷你服务器调用来加载内容)。

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

作为SEO专业人士,您需要了解DOM是什么,因为这是Google用来分析和理解网页的内容。

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

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

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

现在,DOM通常与最初的HTML文档非常不同,因为统称为动态HTML。动态HTML是页面根据用户输入,环境条件(例如时间)和其他变量更改其内容的能力,利用HTML,CSS和JavaScript。

使用JavaScript填充的<title>标记的简单示例:

HTML源代码

DOM

什么是无头浏览?

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

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

为什么JavaScript可以挑战SEO?(以及如何解决问题)

在您的网站上关注JavaScript有三(3)个主要原因:

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

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

  1. 阻止JavaScript中的搜索引擎(甚至意外)。
  2. 正确的内部链接,而不是利用JavaScript事件替代HTML标记。
为什么阻止JavaScript如此重要?

如果阻止搜索引擎抓取JavaScript,他们将无法获得您网站的完整体验。这意味着搜索引擎没有看到最终用户看到的内容。这可能会降低您的网站对搜索引擎的吸引力,并最终可能被视为隐藏(如果意图确实是恶意的)。

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

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

!重要说明:与开发团队合作,确定搜索引擎应该和不应该访问哪些文件。

内部链接

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

基本上:不要使用JavaScript的onclick事件来代替内部链接。虽然可以找到并抓取结束URL(通过JavaScript代码或XML站点地图中的字符串),但它们不会与站点的全局导航相关联。

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

网址结构

从历史上看,基于JavaScript的网站(又名“AJAX网站”)在URL中使用片段标识符(#)。

  1. 不建议:
    • Lone Hash(#) -单独的磅符号不可抓取。它用于识别锚链接(也称为跳转链接)。这些链接允许用户跳转到页面上的一段内容。URL的单独哈希部分之后的任何内容都不会发送到服务器,并且会导致页面自动滚动到具有匹配ID的第一个元素(或第一个具有以下信息名称的<a>元素)。Google建议不要在网址中使用“#”。
    • Hashbang(#!)(以及escaped_fragments URL) - Hashbang网址是支持抓取工具的黑客(谷歌现在想要避免,只有Bing支持)。很多月前,Google和Bing开发了一个复杂的AJAX解决方案,其中一个漂亮的(#!)URL与UX共存,并且基于HTML的碎片基于HTML的经验。谷歌此后推迟了这项建议,更倾向于获得确切的用户体验。在转义的片段中,有两种体验:
      1. 原始体验(又名漂亮的URL):此URL必须具有#!URL中的(hashbang)表示存在转义片段或元素元素,表明存在转义片段(<meta name =“fragment”content =“!”>)。
      2. Escaped Fragment(又名Ugly URL,HTML snapshot):此URL将hashbang(#!)替换为“_escaped_fragment_”并提供HTML快照。它被称为丑陋的URL因为它很长并且看起来像(并且所有意图和目的)是一个黑客。

推荐的:

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

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

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

      假设我们谈论的是执行JavaScript的搜索引擎机器人,搜索引擎有一些重要元素可以获取内容:

    • 如果用户必须进行交互以触发某些内容,搜索引擎可能没有看到它。
      • 谷歌是一个懒惰的用户。它不会单击,也不会滚动,也不会登录。如果完整的UX要求用户采取措施,则应采取特殊预防措施以确保机器人获得相同的体验。
    • 如果JavaScript在JavaScript加载事件触发加上~5秒*后发生,搜索引擎可能没有看到它。
      • * John Mueller提到没有特定的超时值; 但是,网站应该在五秒钟内加载。
      • * 尖叫青蛙测试显示渲染内容的相关性为五秒。
      • *加载事件加上五秒是谷歌的PageSpeed Insights,Mobile Friendliness Tool和Fetch as Google使用的; 查看Max Prin的测试计时器。
    • 如果JavaScript中存在错误,则如果未执行整个代码,则浏览器和搜索引擎都将无法通过并可能错过页面的各个部分。
    • 如何确保Google和其他搜索引擎可以获取您的内容 1.测试

      解决JavaScript的最流行的解决方案可能无法解决任何问题(拿起咖啡让Google运用其算法优势)。为Google提供与搜索者相同的体验是Google的首选方案。

      谷歌首次宣布能够在2014年5月 “更好地了解网络(即JavaScript)” 。业内专家建议谷歌可以在此声明之前抓取JavaScript方式。iPullRank团队在2011年提供了两件很棒的作品:Googlebot是Chrome,Googlebots有多聪明?(谢谢Josh和Mike)。Adam Audette的Google可以抓取JavaScript并在2015年利用DOM确认。因此,如果您可以在DOM中查看自己的内容,那么Google可能会对您的内容进行解析。

    • 最近,Bartosz Goralewicz进行了一项很酷的实验,测试了各种JavaScript库和框架的组合,以确定Google如何与页面进行交互(例如,他们是否将URL /内容编入索引?GSC如何交互?等等)。它最终表明,谷歌能够与许多形式的JavaScript进行交互,并强调某些框架可能更具挑战性。John Mueller甚至创建了一个JavaScript搜索小组(从我读过的内容来看,它是相当有效的)。

      所有这些研究都是惊人的,并帮助SEO了解何时需要关注并采取积极主动的角色。然而,在你确定坐下来是适合你网站的正确解决方案之前,我建议你通过尝试小部分来积极谨慎思考:Jim Collin的“子弹,然后是炮弹”哲学来自他的着作Great by Choice:

      “子弹是一种经验测试,旨在了解哪些有效并满足三个标准:子弹必须是低成本,低风险和低分心...... 10Xer使用子弹来凭经验验证实际工作的内容。在经验验证的基础上,他们将资源集中用于发射炮弹,从集中投注中获得丰厚回报。“

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

    • 确认您的内容出现在DOM中。
    • 测试页面子集以查看Google是否可以为内容编制索引。
    • 手动检查内容中的引号。
    • 使用Google抓取并查看是否显示内容。
    • 据推测,Google的抓取可能发生在加载事件周围或超时之前。这是一个很好的测试,可以检查Google是否能够看到您的内容,以及您是否在robots.txt中屏蔽了JavaScript。虽然Fetch with Google并非万无一失,但它是一个很好的起点。
    • 注意:如果您未在GSC中验证,请尝试使用Technicalseo.com的Fetch和Render As Any Bot Tool。
    • “HTML快照必须包含与最终用户在浏览器中看到的内容相同的内容。如果不是这种情况,可能会被视为隐藏真实内容。“
      - Google Developer AJAX Crawling FAQs
      优点

      尽管有这些考虑因素,但HTML快照具有强大的优势:

    • 了解搜索引擎和抓取工具将能够理解体验。
      • 某些类型的JavaScript可能难以让Google掌握(咳嗽...... Angular(通俗地称为AngularJS 2)......咳嗽)。
    • 其他搜索引擎和爬虫(想想:Bing,Facebook)将能够理解这种体验。
      • Bing和其他搜索引擎一样,没有声明它可以抓取和索引JavaScript。HTML快照可能是JavaScript密集型站点的唯一解决方案。一如既往,测试以确保在潜水之前就是这种情况。
    • 在你测试了所有这些之后,如果某些东西不起作用,搜索引擎和机器人正在努力索引并获取你的内容呢?也许您担心其他搜索引擎(DuckDuckGo,Facebook,LinkedIn等),或者您正在利用需要由其他机器人解析的元信息,例如Twitter摘要卡或Facebook Open Graph标签。如果在测试中发现任何此类问题或将其本身作为一个问题,则HTML快照可能是唯一的决定。

      2. HTML SNAPSHOTS 什么是HTML快照?

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

      谷歌推出了2009年的HTML快照,2015 年被弃用(但仍然支持),并且在2016年末尴尬地提到它们是“避免”的元素 .HTML快照是谷歌的一个有争议的话题。但是,它们很重要,因为在某些情况下它们是必要的。

      如果搜索引擎(或像Facebook这样的网站)无法掌握您的JavaScript,那么返回HTML快照最好不要让您的内容完全被索引和理解。理想情况下,您的站点将在服务器端利用某种形式的用户代理检测,并将HTML快照返回到bot。

      同时,必须认识到Google希望获得与用户相同的体验(即,如果测试是可怕的,并且JavaScript搜索组无法为您的情况提供支持,则仅向Google提供HTML快照)。

      注意事项

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

      第二个考虑因素与隐藏的风险有关。如果发现HTML快照不代表页面上的体验,则会将其视为隐藏风险。直接来源:

    • 网站延迟

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

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

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

但是,如果你有不必要的资源或JavaScript文件阻塞页面的加载能力,你会得到“渲染阻止JavaScript”。意思是:你的JavaScript阻止了页面的可能性,好像它的加载速度更快(也称为:感知延迟) 。

渲染阻止JavaScript - 解决方案

如果您分析页面速度结果(通过Page Speed Insights Tool,WebPageTest.org,CatchPoint等工具)并确定存在阻止渲染的JavaScript问题,这里有三个可能的解决方案:

  1. 内联:在HTML文档中添加JavaScript。
  2. 异步:使JavaScript异步(即向HTML标记添加“async”属性)。
  3. 推迟:将JavaScript放在HTML中。!重要说明:了解脚本必须按优先顺序排列非常重要。用于加载上层内容的脚本必须按优先顺序排列,不应推迟。此外,任何引用其他文件的脚本只能在引用的文件加载后使用。确保与您的开发团队密切合作,确认用户体验不会中断。
TL; DR - 故事的道德

爬虫和搜索引擎将尽最大努力来抓取,执行和解释您的JavaScript,但不能保证。确保您的内容可抓取,可获取,并且不会产生网站延迟障碍。关键=每种情况都需要测试。根据结果​​,评估潜在的解决方案。

  1.  
  2.  
所有文章
×

还剩一步!

确认邮件已发至你的邮箱。 请点击邮件中的确认链接,完成订阅。

好的