江山网站建设:JavaScript(JS)和搜索引擎优化(SEO)

2019.07.22 mf_web

182

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

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

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

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

JavaScript(JS)和搜索引擎优化(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的不可逾越的问题。

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP