JavaScript和SEO机器人体验

JavaScript和SEO：让你的机器人体验和你的用户体验一样好
技术先进的搜索引擎优化SEO
深圳网站制作意识到这是非常重要的我们作为SEO理解JavaScript的搜索体验的影响。搜索引擎能以用户的方式看到你的内容并体验你的站点吗？如果没有，您可以用什么解决方案来修复它？

了解JavaScript和搜索性能的潜在影响是现代SEO专业核心技能。如果搜索引擎不能爬行一个网站或无法解析和理解内容，没有什么会被索引和网站不会排名。

SEO与JavaScript相关的最重要问题：搜索引擎能看到内容并掌握网站经验吗？如果没有，可以利用什么解决方案来解决这个问题？

基本面

什么是JavaScript？

在创建一个现代Web页面时，主要有三个组件：

超文本标记语言是站点的主干或内容的组织者。它是网站的结构（例如标题、段落、列表元素等），并定义静态内容。

CSS–级联样式表的设计、浮华，魅力，和样式添加到网站。它构成页面的表示层。

JavaScript是动态Web的交互性和核心组件。

了解更多关于网页开发和如何编写基本javascript的代码。

javacssseo.gif

图片来源：1, 2, 3

JavaScript要么放在HTML标签内（即嵌入HTML），要么链接/引用。目前有大量的JavaScript库和框架，包括jQuery，AngularJS，reactjs，EmberJS，等。

JavaScript库和框架：

什么是ajax？

Ajax，即异步JavaScript和XML，是一组JavaScript和XML相结合的Web开发技术，允许Web应用程序在后台与服务器通信，而不干扰当前页面。异步意味着代码的其他功能或线可以运行在脚本运行。XML作为数据传递的主要语言；然而，术语Ajax是用于所有类型的数据传输（包括JSON；我猜”阿贾伊”不健全，“AJAX”[一语双关]）作为清洁。

Ajax的一个常用用法是更新网页的内容或布局，而无需启动完整的页面刷新。通常，当页面加载时，页面上的所有资产必须被请求并从服务器获取，然后在页面上呈现。然而，对于Ajax，只需要加载页面之间不同的资产，这就改善了用户体验，因为它们不必刷新整个页面。

人们可以把Ajax看作是微型服务器调用。Ajax的一个很好的例子就是谷歌地图。页面更新没有一个完整的页面重载（即微型服务器调用被用来加载内容为用户导航）。

相关的图像

图片来源

什么是文档对象模型（DOM）？

作为一个SEO专业人员，你需要理解DOM是什么，因为这正是谷歌用来分析和理解网页的原因。

DOM是您在浏览器中“检查元素”时所看到的内容。简单地说，您可以将DOM看作是在接收HTML文档来呈现页面之后所采取的步骤。

浏览器接收的第一件事是HTML文档。之后，它将开始解析该文档中的内容并获取额外的资源，如图像、CSS和JavaScript文件。

DOM是对信息和资源进行解析的形式。人们可以把它看作是网页代码的结构化、有组织的版本。

现在，DOM通常与最初的HTML文档非常不同，这是因为它们统称为动态HTML。动态HTML是页面根据用户输入、环境条件（例如一天中的时间）以及其他变量改变内容的能力，它利用HTML、CSS和JavaScript。

一个简单的例子，它通过JavaScript填充：

HTML源代码

DOM

什么是无头浏览？

无头浏览仅仅是在没有用户界面的情况下获取网页的行为。重要的是要理解，因为谷歌和现在的百度利用无头浏览来更好地理解用户的体验和网页内容。

PhantomJS和Zombie.js头浏览器脚本，通常用于自动化测试目的网页的互动性，并初步要求绘制静态HTML快照（预渲染）。

为什么JavaScript对SEO有挑战性？（以及如何修复问题）

有三个（3）主要原因要关注站点上的JavaScript：

检索：搜索引擎抓取你的网站的能力。

获得性：机器人的访问信息和分析你的内容的能力。

感知站点延迟：即关键的呈现路径。

检索

机器人能找到URL并了解你站点的架构吗？这里有两个重要元素：

阻止搜索引擎从你的JavaScript（甚至偶然）。

适当的内部链接，而不是利用JavaScript事件作为HTML标记的替代品。

为什么阻塞JavaScript这么大？

如果搜索引擎被抓取的JavaScript阻止，他们将不会收到您站点的全部经验。这意味着搜索引擎没有看到最终用户看到的内容。这样可以减少你的网站的吸引搜索引擎，最终可能被认为是伪装（如果意图确实是恶意的）。

拿谷歌和technicalseo网站的robots.txt文件和读取和渲染测试工具可以帮助确定Googlebot是阻止资源。

解决这个问题最简单的方法是通过提供搜索引擎访问他们所需要的资源来了解您的用户体验。

！！！重要提示：与开发团队合作，确定哪些文件应该以及不应该被搜索引擎访问。

内部链接

内部链接应实施常规锚标签在HTML或DOM（使用一个所有=“www.example .com”HTML标签）与利用JavaScript功能允许用户通过网站。

基本上是：不使用JavaScript的onclick事件作为一个内部链接替换。而最终的URL可能会发现爬（通过字符串在JavaScript代码或XML Sitemaps），他们不会与网站相关的全球导航。

内部链接是搜索引擎对站点的体系结构和页面重要性的强烈信号。事实上，内部链接是如此强大，他们可以（在某些情况下）超越“搜索引擎优化提示”，如规范标签。

网址结构

从历史上看，基于JavaScript的网站（又名“Ajax网站”）使用片段标识符（#）在URL。

不推荐：

唯一的哈希（#）–孤英镑的符号是不可能抓到。它用于识别锚链接（又名跳转链接）。这些链接允许一个人跳转到页面上的一段内容。在URL的单独散列部分之后，任何内容都不会发送到服务器，并且会导致页面自动滚动到第一个元素，并带有一个匹配ID（或第一个< >元素），该名称包含以下信息。谷歌建议避免使用“#”网址。

Hashbang（#！）（和escaped_fragments URL）–Hashbang URLs哈克支持爬虫（谷歌要避免现在只有Bing支持）。很久以前，谷歌和Bing制定了一个复杂的Ajax解决方案，其中一个漂亮的（#！）URL与UX共存与基于等效escaped_fragment HTML程序经验。谷歌已收回了这一建议，宁愿收到确切的用户体验。在逃跑片段中，这里有两个经验：

原有的经验（又名漂亮的URL）：这个URL必须有#！（名）在URL以表明有逃脱的片段或meta元素表明逃跑的片段存在（

）。

逃跑的片段（又名丑陋的URL，HTML快照）：这个URL替换名（#！）“_escaped_fragment_”服务于HTML快照。它被称为丑陋的URL，因为它很长，看起来像（所有意图和目的）都是黑客。

图像结果

图片来源

推荐:

pushstate历史API–pushstate是导航和基于历史的部分API（想想：你的网页浏览历史记录）。从本质上讲，pushstate更新的URL地址栏，只需要在页面上的变化更新。它允许js站点利用“干净”URL。pushstate目前是由谷歌支持，当支持浏览器的客户端或混合绘制。

一个很好用的pushstate是无限滚动（即，当用户点击新的页面的URL将更新）。理想情况下，如果用户刷新页面，该体验将使它们处于完全相同的位置。然而

获得性

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

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

假设我们讨论的是一个执行JavaScript的搜索引擎，那么搜索引擎可以获得一些重要的内容：

如果用户必须为某件东西开火，搜索引擎可能不会看到它。

谷歌是一个懒惰的用户。它不会点击，也不会滚动，也不会登录。如果从用户充分的UX要求行动，应采取特殊的预防措施，确保机器人接收同等经验。

如果JavaScript JavaScript加载事件发生火灾，加上~ 5 s *后，搜索引擎可能不会看到它。

* John Mueller提到没有具体的超时值；但是，站点应该在五秒内加载。

*尖叫青蛙测试显示相关到五秒渲染内容。

*加载事件加五秒是什么谷歌的pagespeed的见解，移动友好的工具，把谷歌的使用；看看Max Prin的测试定时器。

如果JavaScript中存在错误，那么如果没有执行整个代码，那么浏览器和搜索引擎都无法通过，并可能错过页面的部分。

如何确保谷歌和其他搜索引擎能得到你的内容

1。测试

解决JavaScript最流行的解决方案可能是不能解决任何问题（喝咖啡，让谷歌发挥算法的才华）。为谷歌提供与搜索者相同的体验是谷歌的首选方案。

谷歌首次宣布能够在2014年5月更好地理解Web（即JavaScript）。业内专家建议，谷歌在宣布之前可能会采用JavaScript方式。ipullrank团队提供的两大碎片这2011：Googlebot是Chrome和Googlebots有多聪明？（谢谢你，Josh和迈克）。Adam Audette的谷歌可以抓取JavaScript和DOM 2015证实利用。因此，如果你能在DOM中看到你的内容，你的内容就很有可能被谷歌解析。

adamaudette -我不总是JavaScript，但是当我做，我知道谷歌可以抓取DOM和动态生成的HTML

近日，Bartosz Goralewicz进行了一个很酷的实验测试相结合的各种JavaScript库和框架如何确定谷歌与页面（例如，它们是索引的URL的内容？GSC如何互动？等）。它最终表明，谷歌能够与多种形式的JavaScript进行交互，并强调某些框架可能更具挑战性。John Mueller甚至开始了一个JavaScript搜索组（从我所读到的，它相当有疗效）。

所有这些研究都是惊人的，有助于SEO了解何时关注和采取积极主动的作用。然而，在你决定坐在后面为你的位置是正确的解决方案，我建议在积极谨慎的尝试小部分认为：Jim Collin的“子弹”，然后炮弹”哲学从他的书很棒的选择：

“子弹是实证检验，旨在学习什么可行，符合三个标准：一颗子弹必须是低成本、低风险、低分心…10xers使用符号来验证实际将要工作。基于实证的验证，然后集中资源，发射炮弹，使大回报集中押注。”

考虑通过以下测试和评审：

确认您的内容正在DOM中出现。

测试页面的子集，看看谷歌是否可以索引内容。

从内容中手动检查引号。

用谷歌获取并查看内容是否出现。

应该在加载事件时或超时前发生谷歌调用。现在看看谷歌将能够看到你的内容，你是否在你的robots.txt阻止JavaScript的一个很大的考验。尽管用谷歌获取信息不是万无一失的，但这是一个很好的起点。

注意：如果你不在GSC得到验证，尝试technicalseo .com的读取和渲染任何BOT工具。

在测试完所有这些之后，如果某些东西不起作用，搜索引擎和机器人正在努力索引并获取内容，该怎么办呢？也许你担心其他搜索引擎（DuckDuckGo，脸谱网，LinkedIn，等等），或者你利用Meta信息需要通过其他程序解析，如推特总结卡或脸谱网Open Graph标签。如果其中任何一个在测试中被识别，或者作为一个关注点出现，HTML快照可能是唯一的决定。

2。HTML快照

什么是HTML快照？

HTML快照是一个完全呈现的页面（正如您在DOM中看到的），可以返回到搜索引擎漫游器（认为：DOM的静态HTML版本）。

谷歌介绍了HTML快照2009，过时的（但仍然支持）他们在2015，和笨拙地提到他们作为一个元素来“避免”在2016年底。HTML快照是谷歌的一个有争议的话题。然而，它们是重要的理解，因为在某些情况下，它们是必要的。

如果搜索引擎（像脸谱网这样的网站）无法掌握你的JavaScript，最好是返回一个HTML快照，而不是让你的内容索引和理解。理想情况下，您的站点将利用服务器端的某种形式的用户代理检测，并将HTML快照返回给机器人。

同时，我们必须认识到，谷歌想要与用户相同的体验（即，如果测试非常糟糕，而JavaScript搜索组不能为您的情况提供支持），那么只提供谷歌快照。

注意事项

当考虑HTML快照，你必须考虑到谷歌已经放弃了这个Ajax推荐。虽然谷歌在技术上仍然支持它，但谷歌建议避免使用它。是的，谷歌改变了主意，现在希望获得与用户相同的体验。这个方向是有意义的，因为它允许机器人更真实地体验用户体验。

第二个考虑因素涉及的隐形风险。如果HTML快照发现不代表网页上的经验，它被认为是一个隐形的风险。直接来源：

“HTML快照必须包含与最终用户在浏览器中看到的相同内容。如果不是这样的话，它可能被认为是伪装。”

–谷歌开发AJAX爬行常见问题

效益

尽管考虑到这些，HTML快照具有强大的优势：

知识搜索引擎爬虫能够体会。

某些类型的JavaScript可能更难让谷歌掌握（咳嗽）…角（也被称为AngularJS 2）咳嗽）。

其他搜索引擎爬虫（认为：Bing、脸谱网）能够体会。

Bing在其他搜索引擎中并没有说明它可以抓取和索引JavaScript。HTML快照可能是JavaScript重站点的惟一解决方案。和以往一样，在潜水之前要确保这是事实。

现场等待时间

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

谷歌关键的渲染路径的概念是加载用户需要什么尽快，可译为“把一切→在用户面前的倍以上，尽快。”

关键渲染路径-优化绘制逐渐加载：

渐进式页面的渲染

然而，如果您有不必要的资源或JavaScript文件阻塞了页面加载的能力，那么您将得到“阻止JavaScript”。

渲染阻塞的JavaScript -解决方案

如果你分析你的网页速度的结果（如网页速度的见解的工具，工具webpagetest.org，握点，等等），确定有一个渲染阻塞JavaScript的问题，这里有三个可能的解决方案：

内联：在HTML文档中添加JavaScript。

异步：使JavaScript异步（即添加“异步”属性的HTML标签）。

延迟：在HTML中放置javascript。

！！！重要提示：理解脚本必须按优先级排列是很重要的。用于加载上述折叠内容的脚本必须优先考虑，不应推迟。另外，引用其他文件的任何脚本只能在引用文件加载后使用。确保与开发团队紧密合作，以确认用户体验没有中断。

阅读更多：谷歌开发人员的速度文档

这个故事的寓意

爬虫和搜索引擎会尽力爬，执行和解释你的JavaScript，但不保证。确保你的内容抓取，索取，而不是开发网站潜在障碍。关键=每个情况都需要测试。基于结果，评估潜在的解决方案。

感谢：感谢Max Prin（@ maxxeight）评审内容块和分享你的知识，洞察力和智慧。没有你就不一样了。