JavaScript看似无限的可能性让基于HTML和CSS的普通网站成为过去。然而，尽管JavaScript为用户提供了出色的动态体验，但它也为开发人员制造了一个雷区。正因为如此，JavaScript搜索引擎优化成为了不可忽视的事情。
javascript如何工作？除了HTML和CSS，JavaScript是三大核心Web开发技术之一。HTML是用来创建静态页面的(意思是代码在浏览器中按原样显示，不能根据用户的 *** 作而改变)，而JavaScript是让网页动态化。当用户单击按钮或从下拉框中选择值时，程序员可以使用JavaScript来更改HTML标记的值和属性。与JavaScript代码一起放在页面上，并与代码结合使用。
客户端和服务器端呈现
在讨论JavaScript时，我们需要提到两个概念，并了解它们之间的区别:服务器端渲染和客户端渲染。
传统上，像静态HTML页面一样，代码呈现在服务器上(服务器端呈现)。当访问一个页面时，Googlebot会获得完整的准备好的内容，所以不需要做任何事情，只需下载CSS文件，在浏览器中显示信息。
另一方面，JavaScript通常运行在客户端机器上(客户端渲染)，这意味着Googlebot最初获取的页面没有内容，然后JavaScript创建DOM(文档对象模型)内容用于加载渲染。每当页面加载时都会发生这种情况。
显然，如果Googlebot不能正确执行和渲染你的JavaScript，你就看不到你想看的页面和内容。而这也是JavaScript搜索引擎优化带来的大部分问题。
如何避免这些问题？如何检查网站呈现是否正确？
让Googlebot正确展示你的网站需要你专注于正确展示网站上的链接和内容。如果你不提供链接，Googlebot就很难在你的网站上找到自己的路。如果你没有在你的网站上正确地呈现内容，Googlebot就看不到它。
这里有一些选项可以帮助你。
1。网站:命令
首先，site:command会显示Google目前为你的网站编译了多少页面。如果网站的许多页面没有被编入索引，这可能是内部链接有问题的迹象。
其次，你可能需要检查JavaScript本身加载的内容是否被Google索引过。
为此，您需要找到一行不会在您的初始HTML代码中显示、只会在JavaScript执行后加载的文本。之后，使用site:yourdomain.com命令在Google索引中搜索这一行文本。
请注意，这不适用于cache:命令，因为页面的缓存版本只包含原始的、尚未呈现的代码。
2。铬41
2017年8月，谷歌更新了搜索指南，并宣布他们正在使用Chrome41进行演示。这是对SEO的一个改变，因为你现在可以检查Google实际上是如何呈现页面的，而不是猜测。
现在，你可以下载Chrome41，看看Googlebot是如何呈现和查看网站或网页的。
3。Chrome开发工具
JavaScript代码的某些部分可以被编程来执行特定的用户动作——点击、滚动等。但是Googlebot不是用户，它不会点击或者向下滚动，所以不会看到你在为这些 *** 作加载什么。
检查是否所有基于JavaScript的元素都已加载而无需任何用户 *** 作的最快和最简单的方法是使用Chrome开发工具:
用Chrome打开你的网站
在DevTools中打开elements选项卡。
通过查看浏览器构建的实际页面的DOM来了解页面是如何呈现的——确保所有关键的导航和内容元素都已经存在。
建议你在Chrome41里面查一下，会让你相信Googlebot在技术上是可以看到这个元素的。
当然，你也可以在当前版本的Chrome中进行一些检查和对比。
4。谷歌搜索控制台的抓取和展示
Google搜索控制台中的抓取和渲染功能可以让我们知道Google是如何渲染我们的网站的。
首先，你必须复制并粘贴你的网址。然后点击“提取和渲染”并等待一段时间。这将让你看到，如果谷歌机器人可以渲染你的网页，并查看任何相关的文章，副本或链接。
在这里，您还可以使用Google的移动友好测试，该测试将显示JavaScript错误和呈现的页面代码。
5。服务器日志分析
你可以用来验证Googlebot如何抓取你的网站的最后一件事是服务器日志分析。通过仔细检查服务器日志，可以检查Googlebot是否访问过特定的URL，以及Googlebot检索了哪些URL。
在服务器日志上，您可以分析许多元素。例如，你可以检查Googlebot是否访问你的旧文章。如果不是，可能是链接问题，也可能是JS有问题。
你也可以检查Googlebot是否能看到你网站的每一部分——如果不能，也可能是渲染问题造成的。
服务器日志不会告诉你Googlebot是如何看到这些页面的，你只能检查你是否访问了这些页面，发送了哪些响应代码。需要额外的分析来确定JavaScript是否导致了任何问题。
此外，通过查看服务器日志，可以检查Googlebot是否请求了关键的JavaScript文件，或者完全忽略它们。
javascript呈现时可能出现的问题即使你的网页在搜索控制台的抓取和渲染中被正确渲染，也不代表你可以放松。你还需要注意其他问题。
让我们从你将面临的最大问题之一开始...
1。超时
虽然没有规定具体的超时时间，但是据说Google等待脚本的时间不能超过5秒。我们的实验证实了这个规律。如果脚本加载时间超过5秒，Google通常不会对其生成的内容进行索引。
抓取和渲染会显示谷歌是否可以渲染网页，但不会包括超时。重要的是要记住，Fetch和Render比标准的Googlebot更宽容，所以你需要采取额外的步骤来确保你提供的脚本可以在5秒内加载。
2。浏览器限制
正如我前面提到的，谷歌使用一个过时的浏览器版本来呈现网站:三年前的Chrome41。随着JavaScript技术的发展并继续快速发展，谷歌的一些最新功能Chrome41可能不支持最新版本的Chrome。
所以最好的解决办法就是下载Chrome41浏览器(Google用于网页渲染的确切版本)熟悉一下。检查控制台日志以查看错误发生的位置，并要求开发人员修复它们。
3。需要用户交互加载的内容
Googlebot的行为不像用户。Googlebot不点击按钮，不展开“阅读更多”，不输入标签，也不填写任何表格……只是阅读和跟随。
这意味着要呈现的全部内容应该立即加载到DOM中，而不是在 *** 作执行之后。
这对于“阅读更多”的内容和菜单尤其重要，比如汉堡菜单。
我们能做些什么来帮助Googlebot更好地呈现网站？Googlebot展示的网站不是单行道。开发者可以做很多事情来促进这一过程，帮助你专注于Googelbot呈现的内容，并为开发者提供良好的睡眠。
1。避免使用OnClick链接
搜索引擎不会将onclick="window.location="视为普通链接，这意味着在大多数情况下，他们不会关注这种类型的导航。而搜索引擎绝不会把它们当成内部链接信号。
点击之前的链接在DOM中至关重要。你可以通过打开Chrome41中的开发者工具来检查这一点，并检查重要的链接是否已经加载——无需任何额外的用户 *** 作。
2。避免在URL中使用#号
Googlebot不支持并忽略#fragment标识符。因此，与其使用example.com/#urlURL结构，不如尝试使用干净的format–example.com/url.URL
独特的内容，独特的网址
你的内容的每一部分都必须位于“某个地方”,以便搜索引擎对其进行索引。这就是为什么要记住，如果你动态地改变内容而不改变URL，它会阻止搜索引擎访问它。
3。避免JS错误
HTML很宽容，JavaScript肯定不是。
如果您的网站在JS脚本中包含错误，它们将不会被执行，这可能会导致您的网站内容根本无法显示。脚本中的一个错误可能会导致多米诺骨牌效应，从而导致许多其他错误。
为了检查代码并防止JavaScript出现错误，您可以再次使用Chrome开发工具并检查“控制台”选项卡，以查看发生了哪些错误以及JavaScript代码的哪一行。
4。不要在robots.txt里屏蔽JS
阻塞JS文件是一种非常古老的做法，但它仍然经常发生。在某些CMS中，它有时甚至会作为默认值出现。虽然目标是优化爬行预算，但阻止JS文件(和CSS样式表)被认为是非常糟糕的做法。但不要把它从我身上拿出来，这是谷歌在这个话题上说的话:
“我们建议确保Googlebot可以访问任何有意义地推广您网站的可见内容或其布局的嵌入式资源……”
所以不要做这样的事情:
预渲染
当您发现Google在渲染JavaScript网站时遇到问题时，可以使用预渲染。
预渲染为您的网站提供现成的HTML快照。这意味着Googlebot不会接收JavaScript，而是纯HTML。同时，访问该网站的用户将获得相同的JavaScript页面版本。
最流行的解决方案是使用外部服务进行预渲染，比如Prerender.io，它兼容所有最重要的JS框架。
使用这个解决方案非常简单——您只需要向Web服务器添加中间件或片段。
摘要
JavaScript的主题是SEO界最有活力的话题，绝对值得你关注，尤其是它发展如此之快。本文中描述的问题只是你可以调查的一小部分，以确保Googlebot正确呈现你的网站。
相关文章推荐欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）