随着JavaScript看似无限的可能性，普通的网站只基于HTML和CSS正在成为过去的事情。但是，虽然JavaScript为用户提供了动态体验，但它也为开发人员创造了一个雷区。正因为如此，JavaScript SEO已经成为不可忽视的东西，特别是当涉及到确保Googlebot分析正确的JavaScript渲染时。
JS如何工作?
对于那些不熟悉JavaScript的人，这里有一个简短的介绍。JavaScript和HTML、CSS是web开发的三大核心技术之一。HTML用于创建静态页面(这意味着代码按原样显示在浏览器中，不能根据用户的操作进行更改)，而JavaScript使Web页面成为动态的。当用户单击按钮或从下拉框中选择值时，程序员可以使用JavaScript更改HTML标记的值和属性。JavaScript与HTML代码一起放置在页面上，它与代码一起工作。在讨论JavaScript时，我们需要提到两个概念。理解它们之间的区别是非常重要的:服务器端呈现和客户端呈现。传统上，与静态HTML页面一样，代码是在服务器上呈现的(服务器端呈现)。当访问一个页面时，Googlebot得到完整的和“准备好”的内容，所以它不需要做任何事情，只需要下载CSS文件并在浏览器中显示信息。另一方面，
JavaScript通常在客户端机器上运行(客户端渲染)，这意味着Googlebot最初获得一个没有任何内容的页面，然后JavaScript创建用于加载渲染内容的DOM(文档对象模型)。每次加载页面时都会发生这种情况。显然，如果Googlebot不能正确地执行和呈现JavaScript，它就不能呈现页面和您希望它看到的主要内容。这也是大多数JavaScript SEO问题产生的原因。
现在让我们看看如何避免这些问题。让谷歌机器人正确渲染你的网站需要你专注于正确渲染你网站上的链接和内容。如果你不呈现链接，Googlebot将很难在你的站点中找到它的方法。如果你不正确地渲染你的网站上的内容，谷歌机器人将无法看到它。这里有一些选项可以帮助你改进你未来的JavaScript SEO。
1。首先，site:命令将显示您的网站目前有多少页面被谷歌索引。如果它们中的许多还没有在索引中，这可能是内部链接呈现问题的迹象。其次，您可能想检查您的javascript加载的内容本身是否已经被谷歌索引了。要做到这一点，您需要找到在初始HTML代码中没有显示的某一行文本，它只在JavaScript执行后加载。之后，使用’site:yourdomain.com’命令在谷歌索引中搜索这行文本。
http://take。注意，这对cache:命令不起作用，因为页面的缓存版本只包含原始的、尚未呈现的代码。
2。长青谷歌机器人
谷歌机器人是爬虫访问网页，包括他们在谷歌搜索索引。在活动和社交媒体上，谷歌从社区得到的第一个问题是，他们是否可以让谷歌机器人在最新的Chromium上长青。在撰写本文时，GoogleBot运行的是Chrome的最新版本，74。这是SEO的一个游戏规则改变者，因为现在您可以检查谷歌如何实际呈现页面，而不是猜测和hopi最好是Ng。
谷歌的最新创建
的额外新功能Chrome DevTools
你基于javascript的网站的某些部分可能被编程为在特定用户的操作(点击、滚动等)时执行。然而，谷歌机器人不是用户。它不会点击或向下滚动，所以它不会看到你在这些操作上加载的内容。在Chrome中打开你的网站，在DevTools中打开元素选项卡，通过浏览浏览器构建的实际页面的DOM来查看你的页面是如何呈现的——确保所有关键的导航和内容元素都已经出现在那里。
我建议在Chrome 41中检查它。这将为您提供信心，使您相信Googlebot可以从技术上看到元素。当然，你也可以在你当前的Chrome版本中检查它并做一些比较。
http://take。/女士GgsqO
4。另一个有用的工具，它可以让我们了解谷歌如何渲染我们的网站，是谷歌搜索控制台中的Fetch and Render函数。首先，您必须复制并粘贴您的URL。然后点击“获取和渲染”并等待一段时间。这将允许你看看谷歌机器人是否可以渲染你的页面，并看到任何相关的文章，副本或链接。
http://take。在这里，您还可以使用谷歌的Mobile-Friendly Test，它将显示JavaScript错误和呈现页面的代码。
5。为了验证Googlebot如何抓取你的网站，你可以求助的最后一件事是服务器日志分析。通过仔细查看服务器日志，您可以检查特定的url是否被Googlebot访问过，哪些部分被或没有被Googlebot抓取过。
多亏了服务器端日志，您可以分析许多元素。例如，你可以检查Googlebot是否访问了你的旧文章——如果没有，可能是链接有问题，这可能是由JS的问题引起的。你也可以检查Googlebot是否看到你网站的每个部分-如果没有，这也可能是由渲染问题引起的。
服务器日志不会显示Googlebot如何查看页面。您只能检查页面是否被访问过以及发送了什么响应码。需要进行额外的分析，以确定是否有任何问题是由JavaScript引起的。此外，通过查看服务器日志，您可以检查Googlebot是否请求了您的关键JavaScript渲染HTML，或者完全忽略了它。即使你的网页在搜索控制台中的获取和渲染是正确呈现的，这并不意味着你可以坐下来放松。你还需要注意其他问题。让我们从一些可能严重扰乱你的JavaScript SEO计划的最大问题开始。虽然没有指定确切的超时时间，但据说谷歌不能等待一个脚本超过5秒。我们在Elephate的实验证实了这一规律。如果脚本加载时间超过5秒，谷歌通常不会为生成的内容建立索引。
获取和渲染将显示页面是否可以由谷歌渲染，但它不包括超时。重要的是要记住，Fetch和Render比标准的Googlebot更宽容，所以你需要采取额外的步骤，以确保你所服务的脚本能够在5秒内加载。
2。正如我前面提到的，谷歌使用一个有点过时的浏览器版本来呈现网站:已有三年历史的Chrome 41。由于JavaScript SEO及其背后的技术已经发展并将继续快速发展，它的一些最新特性在最新Chrome 41可能不支持Chrome版本。因此，最好的解决方案是下载Chrome 41浏览器(在撰写本文时，谷歌用于web渲染的版本)并熟悉它。检查控制台日志，查看发生错误的位置，并让开发人员修复它们。
3。我知道我已经说过这一点，但真的需要重复:Googlebot不像用户一样行动。谷歌机器人不点击按钮，不展开“阅读更多”，不输入标签，不填写任何表单……它只读取和跟随。
这意味着您想要呈现的整个内容应该立即加载到DOM中，而不是在操作执行之后。
这对于“阅读更多”内容和菜单(例如汉堡包菜单)尤其重要。我们能做些什么来帮助谷歌机器人更好地渲染网站?
谷歌机器人对网站的渲染不是单行道。开发人员可以做很多事情来促进这一过程，帮助人们关注你想要Googlebot渲染的东西，并为开发人员提供一个关于成功的JavaScript SEO的美好梦想。
避免’OnClick’链接
搜索引擎不处理’OnClick =”窗口。location=”‘作为普通链接，这意味着在大多数情况下它们不会遵循这种类型的导航—而且搜索引擎肯定不会将它们视为内部链接信号。你可以在Chrome 41中打开开发者工具，检查重要的链接是否已经被加载，而不需要任何额外的用户操作。
http://take。#片段标识符不支持，被谷歌机器人忽略。因此，与其使用example.com/#url的URL结构，不如尝试坚持简洁的URL格式——example.com/url。
每一段内容的唯一url
您的每一段内容必须位于“某处”，以便搜索引擎索引它。这就是为什么要记住，如果动态地更改内容而不更改URL，就会阻止搜索引擎访问它。
HTML是非常宽容的，但JavaScript绝对不是。如果你的网站JS脚本中包含错误，它们将无法执行，这可能导致你的网站内容根本无法显示。脚本中的一个错误会导致多米诺骨牌效应，导致大量额外的错误。要检查代码，让你的JavaScript免于错误，你可以再次使用Chrome DevTools和检查控制台选项卡，看看发生了什么错误，在哪一行JavaScript代码。阻塞JS文件是一个非常古老的做法，但它仍然经常发生。它甚至有时在某些cms中作为默认值出现。虽然目标是优化爬行预算，但阻塞JS文件(和CSS样式表)被认为是一个非常糟糕的做法。不要听我的，下面是谷歌对这个话题的看法:
“我们建议确保Googlebot可以访问任何对你的网站可见内容或布局有意义贡献的嵌入资源……”
http://take。ms/OoAEp
否则你的JavaScript SEO将受到真正的打击。当你发现谷歌在渲染你的JavaScript网站时有问题，你可以使用预渲染。
预渲染是提供一个现成的，JavaScript渲染HTML的网站文档。这意味着Googlebot接收的不是JavaScript渲染的HTML，而是纯HTML。与此同时，访问站点的用户将获得相同的富含javascript的页面版本。最流行的解决方案是使用外部服务ice用于预渲染，比如Prerender。io，它与所有最重要的JS框架兼容。
本质上你渲染HTML的方式包括所有潜在的JavaScript -你只需要添加中间件或一个片段到你的web服务器。向您展示这些指导方针和提示是一回事，但完全是另一回事，演示如何实现它们的过程。我们将使用一个来自市场领导者网站审计器的工具，分析一个样本网站的常见JavaScript错误。
包含在这个工具中，是关于如何解决你在JavaScript中会遇到的其他问题的建议，这无疑对那些没有处理这门语言的终身经验的人很有用。
网站审计器可以执行JavaScript和抓取动态生成的内容-完全像现代浏览器(和谷歌)所做的。这意味着，如果你的网站是建立在AJAX(使用Wix或Squarespace这样的平台)上的，或者使用JavaScript生成一些内容，网站审计员能够渲染、抓取并完全分析——去掉所有繁重的工作。
为什么不尝试一下并免费下载呢?JavaScript SEO的话题是SEO世界中最动态的话题，绝对值得你关注，特别是它发展如此迅速。本文中描述的问题只是你可以调查的一小部分，以确保谷歌机器人正确渲染你的网站。如果你想了解更全面的情况，可以查看大象的JavaScript SEO终极指南。
Bartosz Goralewicz是Elephate的联合创始人，该公司最近获得了2018年欧洲搜索大奖的“最佳小型SEO机构”。大象相信通过大胆、精准的客户SEO活动、SEO实验和案例研究，为SEO行业开辟新的道路。Bartosz领导着一个高度专业化的技术SEO专家团队，他们致力于大型国际结构的深度技术优化。技术SEO不仅是Bartosz的工作，也是他最大的热情之一，这就是为什么他喜欢周游世界，与志同道合的SEO人士分享这种热情。