在今天的在线环境中，Web开发人员可以创建的网站似乎没有尽头。有一次，开发人员只能在构建网站时使用超文本标记语言和层叠样式表-HTML和CSS。然而，现在，这两个元素仅被视为网站的基础或“骨头”。网站或“肌肉”的大部分编程工作都在于Javascript的集成。精通Javascript的开发人员可以创建令人惊叹的在线内容：交互式图形，嵌入式视频和反应元素，仅举几个例子。使用基于Javascript的其他设计工具，天空在网站设计方面确实是极限。

不幸的是，虽然网站设计已大大提升，但搜索引擎记录和评估它的能力仍然落后。尽管它在使SEO成为一个更公平的过程方面取得了令人瞩目的进步，但它还没有完全适应其协议来正确地索引基于Javascript的内容。出于多种原因，当Google第一次遇到任何内容植根于Javascript的新网页时，通常无法完全评估该内容。因此，该页面可能被不正确地编入索引，并且接收的搜索引擎结果页面（SERP）排名远低于其真正应得的排名。

当然，这为渴望从事网站设计工作的Javascript程序员以及对他们网站中使用脚本非常感兴趣的Web开发人员提出了许多问题。对于初学者来说，为什么谷歌有这么多问题排名基于Javascript的内容？什么样的问题导致谷歌将一些Javascript网站排名高于其他网站？而且，也许最重要的是，开发人员和/或程序员可以做些什么来缓解这些问题？

在本文中，我们打算阐述所有这些问题及其解决方案。绝不应将本文视为对基于Javascript的SEO的综合评估; 这是一个可以涵盖多个大学教科书和/或正式课程的主题。虽然我们鼓励读者对Javascript和SEO进行自己的研究，但我们希望以下文字告诉读者如何指导他们的学习。

JavaScript和SEO

问题所在

Google协议在基于Javascript的网站排名方面遇到的任何问题通常分为四类：

• 渲染

• JavaScript错误

• 爬行

• 技术问题

简而言之，Google在排名网站时所看到的差异可能会导致错误。接下来，程序员希望他的Javascript代码执行的操作可能不是Google执行它时实际执行的操作。另一个错误来源是网站结构的可抓取性。最后，当前的Google技术是否可以处理该网站会影响该网站的排名方式。以下几段将更详细地探讨这些内容。

渲染

也许Javascript思想的网络开发者 - 如果不是所有开发者 - 需要清除的第一个障碍是像谷歌这样的搜索引擎“看到”网站的不同观点。为了更准确，Googlebot首次加载该页面时看到的页面不是我们用户看到的页面。用户会看到最终产品，但Googlebot会首先看到该页面的源代码。

这就是所谓的“渲染”网页。从程序的角度来看，这个过程相当简单。执行渲染的计算机接收源代码，解释它并执行它; 这涉及到HTML，CSS和Javascript的组合。HTML构成了基础，让计算机知道文件是一个网站。接下来，执行Javascript，创建开发人员想要的特定内容。最后，执行CSS代码，在页面上放置所需的装饰性触摸。

总的来说，有两种类型的渲染服务器端和客户端 - 它们在准确的位置和方式上有所不同。

• 服务器端渲染一直是渲染网页的“传统”手段; 这是他们想象渲染时最想到的。在服务器端呈现中，请求web内容的计算机（web浏览器）接收其大部分呈现已由存储它的计算机（服务器）完成的页面。所有请求计算机必须做的是下载CSS文件以完成整容调整; 大部分渲染工作已经完成。

• 客户端渲染是关于该主题的新思想流派。这是处理渲染的请求计算机（客户端）。浏览器接收HTML文档（页面模板），然后引用Javascript和CSS文件，而不是接收预先渲染的站点。最初，浏览器从HTML文件生成空白页面，但在下载Javascript文件后，浏览器然后执行代码并重新创建内容，替换空白页面。在此之后，它执行CSS代码。

遗憾的是，客户端渲染更成问题。可以想象，由于Google看到的第一件事是空白网页，如果Javascript代码有任何问题，那么该空白页面就是谷歌必须排名的。无论故障是与用户还是谷歌相关，结果都是一样的。除了一个空白页面之外，谷歌将对该网站进行比实际应得的严厉评级。

Web开发人员应该从中获取的是，在将网站放到网上之前测试运行网站至关重要，尤其是在他们使用客户端呈现时。如果存在任何可能影响渲染的错误，则必须在Google查看之前检测并纠正错误。重写一千行代码比将一个网站排在网上排名不佳更好。

JavaScript错误

Javascript Web开发人员经常面临的下一个障碍与之前的障碍相关; 事实上，这个问题经常导致或有助于第一个问题。尽管HTML和Javascript协同工作，但它们在处理编码错误方面存在根本的不同。HTML在遇到错误时相对仁慈，即使发生错误，用户也可以经常找出错误消息中出错的地方。

另一方面，Javascript在处理错误时完全是无情的。由于它在逻辑和公式方面的基础，它不能容忍任何偏离用户的意图; 如果用户没有完全遵循公式，代码将不会执行所需的结果。因此，如果开发人员甚至在代码中发出最微小的错误 - 即使缺少一个字符 - 它也会产生语法错误，这使得Googlebot无法呈现该网站。

当一个因素导致不可避免的人为错误时，很容易理解为什么为基于Javascript的网站运行SEO会如此令人烦恼。如果一个人搜索Javascript错误，就会遇到大量的故事，其中复杂的，以及完美的Javascript程序被一行代码中的错误所阻碍。这些令人沮丧的练习并不仅限于新手编程。即使是经验丰富的Javascript大师也不会对语法错误产生免疫力。同样，这说明了在上传代码之前彻底测试代码的重要性。

抓取和索引

要了解站点爬网和索引期间可能出现的问题，需要掌握爬网过程。对于不使用Javascript的网站，该过程相对简单，几乎直接来自渲染。不同之处在于，在Googlebot下载网站的HTML后，它会从该代码中提取所有外部链接，并立即访问所有这些链接。从这里，它下载CSS代码，然后将整个下载的站点发送到索引程序。

然而，当涉及到Javascript时，事情变得有点毛茸茸。下载初始HTML，CSS和JS文件后，Googlebot必须从索引器中招募渲染服务。在此之后，Googlebot必须等到Javascript代码被编译并执行才能继续。根据JS文件，渲染服务可能需要调用其他库来执行代码。

一旦代码执行完毕，索引器最终可以完成它的工作，但即便如此，Googlebot仍然有工作要做。当索引器工作时，Googlebot会从呈现的网站中收集任何外部链接，并将其添加到其爬行提示中。可以看出，Javascript为网站爬行增加了大量的复杂性和等待时间，这两者都可能导致任何步骤的错误。

由于它遵循呈现过程，因此站点爬网Javascript站点存在许多相同的问题。如果内容无法正确呈现，Google只会有一个空白的HTML文件进行排名。此外，即使Javascript代码执行没有错误，整个过程也比非基于Javascript的网站要长得多。这为网站的SEO带来了两个问题。首先，必须考虑爬行预算的概念。

从本质上讲，谷歌只能拨出这么多时间来索引它遇到的任何特定网站。如果Google为网站编制索引需要很长时间 - 例如等待执行大型Javascript文件 - 它将丢弃该网站并转移到下一个网站。其次，即使Google为网站编制索引所需的时间也在预算范围内，仍然存在其他网站获得更快索引的风险。如果该网站是个人博客，那么这不是一个可怕的损失。但是，如果该网站用于在线业务，则SERP中较低的排名意味着可能损失数千美元。

技术限制

基于Javascript的SEO的最后挑战来自Google索引技术的局限性。虽然谷歌浏览器在用户方面保持最新，但遗憾的是谷歌的抓取工具和索引器并非如此。Googlebot的技术基于2015年Chrome-Chrome 41的迭代。因此，它无法访问其用户对应的全部功能和库。对于Web开发人员，这意味着对其站点进行呈现，爬网和索引的程序与其目标浏览器不具有相同的功能。

开发人员必须考虑的另一个技术因素是Googlebot并非设计为浏览器。当然，它与Chrome有一些共同特征，但它的最终目的与典型的浏览器相去甚远。为了有效地完成任务，Googlebot仅从网络中检索最相关的文件 - 它认为对渲染至关重要。

因此，如果Googlebot错误地确定不需要呈现网站的Javascript文件，则不会下载它。在这种情况下，我们再次让Google查看空白网页。这是将Javascript合并到网站时要记住的一个重要因素。

透过GOOGLE的眼睛看看

正如人们可能想象的那样，了解网站的Javascript会有什么问题（如果有的话）的唯一方法就是看看Google看到了什么。换句话说，通过以与Googlebot相同的方式查看网站，开发人员可以确保他们的网站是他们希望Google看到的。一种方法是使用Google Console Fetch and Render工具。然而，更好的解决方案是下载Chrome 41的副本。这样，用户使用的技术与Googlebot用于查看网站的技术完全相同; 错误日志将完全相同。  

此外，Chrome 41还兼容开发人员可以使用的众多其他工具，例如Rich Results和Google Mobile工具。这两项都弥补了Chrome 41测试功能的差距。它们还允许用户从移动和桌面角度查看他们的网站。

最佳实践

除了以上几点之外，Web开发人员还可以使用许多通用方法。以这些为准则，Web开发人员有更好的机会避免可能对其网站排名产生负面影响的错误。

对于那些使用Google的抓取和渲染工具的用户，请记住它只能检测技术问题。换句话说，它只能确定Google在技术上是否能够呈现网站; 它没有评估时间。如前所述，完美的技术执行并不意味着及时执行。如果用户需要了解他们的网站渲染速度，他们可能希望使用其他工具与Fetch和Render一起使用。另一个有用的指导方针是了解Javascript文件大小; 较大的文件需要更多时间。

诊断网站任何类型的SEO问题的有用方法是使用Google Search Console。控制台可以用作一种温度计，因为它可以检测网站的SEO的一般问题。控制台还可以快速访问Fetch和Render，它可以发现任何直接渲染问题。也就是说，并非每个Google工具都完全有效。例如，虽然检查Google缓存有助于发现HTML中的渲染问题，但对于Javascript来说却不是这样。

如果用户计划在其网站上使用规范标签，则可能会出现一个潜在问题。虽然这些类型的标签本身并不成问题，但如果它们是由Javascript注入的，它们可能会导致问题。虽然专家已经证明Google可以正确检测插入Javascript的标签，但用户应该记住这些JS文件是由工艺大师设计的。我们不会说使用Javascript注入标签是一个有保证的错误来源，但我们建议在HTML中放置标签是一种更好的做法。这样，用户完全避免了错误源。

最后要注意的是，用户应该警惕使用Javascript生成链接URL。原因是因为这些链接可以包含哈希值或＃符号。这是有问题的，因为Googlebot的观点与社交媒体的观点相反。换句话说，只要Googlebot看到主题标签符号，它就会自动假定以下文本无关紧要，并忽略它。

因此，Googlebot查看时包含哈希的任何链接都将被错误地查看和跟踪。因此，当Googlebot到达错误的位置时，它会认为链接不正确并将其保留在网站上。为防止这种情况发生，用户应确保任何基于Javascript的链接不包含哈希，或仅使用非JS链接。

结论

最后，我们希望重申，本文不应被视为解决基于JS的SEO的权威来源。另一点值得记住的是，基于Javascript的SEO遵循与传统SEO相同的规则和原则。当出现问题时，很容易认为问题在于Javascript。

然而，执行尽职调查的用户可能会发现首先尝试搜索引擎优化可以消除JS故障排除带来的许多挫败感。简而言之，如果用户擅长传统SEO，那么他或她应该没有基于Javascript的SEO的不可逾越的问题。