Return to site

外贸网站优化-诊断JavaScript驱动的网站的优先级

外贸网站优化

· seo优化

在过去的20年里,谷歌seo的搜索引擎发生了很大的变化。如果我们从整体上看技术和网络开发,我们可以看到变化的步伐非常惊人。

这个网站从1998年开始提供信息,但不是很吸引人或易于使用:

现代网站不仅看起来好多了,而且还配备了强大的功能,例如推送通知,部分脱机工作和眨眼间加载。

但是,如果我们想要准确,我们应该使用术语“应用”而不是“网站”,因为网站是交互式的,动态的并且使用JavaScript构建。

JavaScript作为游戏改变者

最长的时间,谷歌优化无法执行JavaScript,但在2015年,该公司在处理JavaScript方面迈出了一大步。

需要强调的是,搜索引擎的发展比网络开发领域的发展要慢得多,这可能就是谷歌仍然是唯一可以执行JavaScript的搜索引擎的原因。

最初,当万维网是由仅由静态超文本标记语言(HTML)组成的网站构建的时候,谷歌有一个简单的任务要完成:

向服务器发出请求→获取静态HTML响应→索引页面

我知道这是对这个过程的一个超级简单的描述,但是我想展示当今处理网站和处理网站之间的差异。

当开发人员开始使用JavaScript(JS)在网站上添加交互性,然后当使用Javascript创建整个网站时依赖于JavaScript变得更大时,问题就出现了。

JavaScript应用和网站是Google的挑战,因为在初始请求发送到服务器后,Googlebot会收到一个空的或几乎为空的HTML文件。JS执行后添加内容,图像和链接。

谷歌试图渲染他们访问的几乎所有页面,从而解决了这个问题。所以现在,这个过程或多或少看起来像这样:

向服务器发出请求→获取静态HTML响应→将其发送到索引器→呈现页面→
索引并将提取的链接发送到Googlebot→Googlebot可以抓取下一页。

JavaScript执行增加了很多低效率并延迟了抓取,呈现和索引的过程,因为:

  •  Googlebot的抓取速度放慢了。它没有在JS网站的源代码中看到超链接,因此它需要等待索引器呈现页面,然后将提取的URL发回。
  •  执行JavaScript需要很多资源。即使对谷歌的数据中心来说,这也令人筋疲力尽。

尽管有这些障碍,我们需要为开发动态JS应用程序的繁荣做好准备,因为对React,Vue.js或Angular等开源框架的兴趣继续猛增。将使用JavaScript构建越来越多的网站。所以作为优化推广,我们需要能够在使用它的网站上发现问题。

当开发人员开始使用JavaScript(JS)在网站上添加交互性,然后当使用Javascript创建整个网站时依赖于JavaScript变得更大时,问题就出现了。

JavaScript应用和网站是Google的挑战,因为在初始请求发送到服务器后,Googlebot会收到一个空的或几乎为空的HTML文件。JS执行后添加内容,图像和链接。

谷歌试图渲染他们访问的几乎所有页面,从而解决了这个问题。所以现在,这个过程或多或少看起来像这样:

向服务器发出请求→获取静态HTML响应→将其发送到索引器→呈现页面→
索引并将提取的链接发送到Googlebot→Googlebot可以抓取下一页。

JavaScript执行增加了很多低效率并延迟了抓取,呈现和索引的过程,因为:

  •  Googlebot的抓取速度放慢了。它没有在JS网站的源代码中看到超链接,因此它需要等待索引器呈现页面,然后将提取的URL发回。
  •  执行JavaScript需要很多资源。即使对谷歌的数据中心来说,这也令人筋疲力尽。

尽管有这些障碍,我们需要为开发动态JS应用程序的繁荣做好准备,因为对React,Vue.js或Angular等开源框架的兴趣继续猛增。将使用JavaScript构建越来越多的网站。所以作为SEO,我们需要能够在使用它的网站上发现问题。

要深入了解支持和不支持的内容,请访问Caniuse.com并将Chrome 41与最新版本的Chrome进行比较。名单很长:

处理资源

超时是使JS和SEO难以匹敌的下一步。

JavaScript应用程序通常非常繁重,而Google的资源有限。想象一下,在JavaScript的情况下,Google需要渲染每个页面才能看到内容。下面的示例显示了JS执行的重要性。

如果您有一个JS文件和相同大小的图像文件,您将看到解析大约需要2秒,然后执行JavaScript大约需要1.5秒。

由于需要处理大量数据,Google需要合理地管理其处理资源。万维网由超过十亿个网站组成,并且每天都在增长。下面的图表显示,在过去五年中,桌面版本的页面中值大小增加了近100%。移动版网站的适当指标增加了250%!

JavaScript网站的自然结果是对这些网站的抓取,索引以及最终排名的延迟。

准备和有用的资源

从事技术搜索引擎优化SEO需要注意细节。对于JavaScript网站,我们需要为我们需要解决的棘手问题做好准备,我们必须明白,我们不能总是依赖于常见的和众所周知的规则。

Google知道SEO和开发人员在理解搜索行为方面存在问题,他们正试图帮助我们。以下是Google应该关注的一些资源,并检查以帮助解决您可能遇到的任何JS问题:

网站管理员趋势分析师John Mueller。
网站管理员趋势分析师Gary Illyes。
工程师Eric Bidelman。
Google搜索论坛中的JavaScript网站。
视频:John Mueller的“ 现代网站的 SEO最佳实践和要求 ”。
视频片段:Google I / O 2018 “提供易于搜索的JavaScript网站”。

诊断JavaScript驱动的站点问题

现在我们已经了解了Google的限制,让我们尝试在JavaScript网站上发现一些问题并寻找解决方法。

谷歌看到了什么?

三年前,谷歌宣布它能够呈现和理解像现代浏览器这样的网站。但是,如果我们查看有关呈现JS网站的文章和评论,您会发现它们包含许多警示词,例如:“可能”,“通常”和“并非总是”。

这应该突出一个事实,虽然谷歌在JS执行方面越来越好,但仍有很大的改进空间

源代码与DOM

源代码是Googlebot进入页面后看到的内容。它是没有JS集成到代码中的原始HTML。要记住的一件重要事情是Googlebot不会渲染页面。

Googlebot是一个抓取工具,因此它的工作是浏览页面,从源代码中提取元素并将它们发送给索引器。文档对象模型(DOM)是网站的呈现版本,它意味着原始HTML由JavaScript改变,结构化和有组织。

“Inspect Element”显示文档对象模型。渲染由Web渲染服务完成,该服务是Google Indexer的一部分。以下是要记住的一些要点:

在抓取时会考虑原始HTML。
索引时会考虑DOM。
JavaScript网站在两个波段中编入索引,这使得索引的整个过程完全不同:

第一波:Google仅提取元数据并根据此信息为URL编制索引。
第二波:如果Google有备用资源,它会呈现页面以查看内容。它可以重新索引页面并加入这两个数据源。
请记住,在第二波索引中,Google不会更新原始索引元素(如果它们被JavaScript更改)。如果您使用JavaScript添加rel =“canonical”标记,则Google不会将其添加。

然而,最近John Mueller表示,如果Google在页面呈现过程中遇到困难,原始HTML可能会被用于索引。

即使您看到特定URL已编制索引,也不表示索引器发现了内容。我知道这可能令人困惑,所以这里有一个小的备忘单:

要查看发送到Googlebot的HTML,请转到Google Search Console并使用“获取和渲染”工具。在这里,您可以访问原始HTTP响应。
要查看页面的呈现版本,您还可以使用“获取和渲染”工具。
要查看桌面设备的Web呈现服务(WRS)构建的DOM ,请使用Rich Results Test。对于移动设备,请使用适合移动设备的测试。
Google正式确认我们可以依靠这两种方法来检查Google“看到”该网站的方式:

将源代码与DOM进行比较

现在,是时候分析代码和DOM了。

在第一步中,根据可索引性比较它们,并检查源代码是否包含:

元机器人指令,如索引规则。
规范标签。
Hreflang标签。
元数据。
然后看看它们是否符合网站的渲染版本。

要发现差异,可以使用Diff Checker之类的工具,它将比较两个文件之间的文本差异。

使用Diff Checker,从Google Search Console获取原始超文本传输​​协议(HTTP)响应,并将其与上面第3点中提到的工具(Rich Results测试和Mobile-Friendly测试)中的DOM进行比较。

JavaScript可能会修改某些元素,Google可能会有两条不同的说明。

Googlebot不会滚动
在查看DOM时,还需要验证依赖于点击,滚动和填充表单等事件的元素。

JavaScript允许在用户交互后加载其他内容,链接和图像。Googlebot不会滚动或点击,因此如果某些内容需要显示某个操作,Google就不会发现它。

两波索引及其后果
回到我前面提到的那两个波,Google承认只在第一波索引中考虑了元数据。如果源代码不包含机器人指令,hreflangs或规范标签,Google可能无法发现它。

Google如何看待您的网站?

要查看Google如何查看您网站的呈现版本,请转到Google Search Console中的Google抓取工具并提供您要检查的网址,然后点击获取和​​渲染。

对于复杂或动态的网站,仅仅验证网站的所有元素是否都在其位置是不够的。

谷歌正式表示Chrome 41支持Fetch and Render工具,因此最好下载并安装该浏览器的确切版本。

一旦安装在您的个人计算机(PC)上,您就可以与网站进行一些交互,导航到其他部分并检查由JavaScript触发的控制台中的错误。移动友好测试中的新功能还可以在JavaScript控制台中查看JavaScript中的错误。

我想提一些常见和微不足道的错误,以避免:

  • 在使用富含JavaScript的网站来诊断问题时,请不要在Google中查看缓存。它不提供有意义的信息,因为缓存显示由Googlebot看到的RAW HTML,由您的浏览器呈现。JS网站的源代码只包含几行代码,一些指向脚本的超链接; JavaScript执行后加载真实内容。
  • 不要在robots.txt中阻止JavaScript资源; 它阻止了正确的渲染(我知道这很明显,但它仍然会发生)。
内部链接

内部链接是使网站可抓取的唯一方法。由于JavaScript网站的源代码(一般情况下)不包含链接,因此整个抓取过程都会延迟。Googlebot需要等待索引器呈现页面并将发现的链接发回。

诊断JS网站的关键要素是检查链接是否放在DOM中。源代码不必包含链接,但如果DOM没有链接,则不会发现链接。如果主导航是使用JavaScript构建的,这可能会产生巨大影响。

分析超级菜单时要小心。有时它们充满了花哨的功能,这些功能并不总是对网站seo优化有益。以下是John Mueller关于如何查看导航是否适用于Google的提示:

还要注意“加载更多”分页和无限滚动。这些元素也很棘手。它们以平滑的方式加载其他内容,但它在与网站交互后发生,这意味着我们将无法在DOM中找到内容。

在Google I / O大会上,Tom Greenway为此问题提到了两个可接受的解决方案:您可以预加载这些链接并通过CSS隐藏它们,或者您可以提供到后续页面的标准超链接,以便按钮需要链接到单独的URL序列中的下一个内容。

下一个重要元素是嵌入内部链接的方法。Googlebot仅遵循标准超链接,这意味着您需要在代码中看到这样的链接:(没有间距)

<a href =“http://www.domain.com”>文字< / a>
如果你看到OnClick链接,它们看起来像这样,不会被发现:

<div OnClick =“location.href =”http://www.domain.com“> text </ div>
因此,在浏览源代码和DOM时,请务必检查以确保在内部链接上使用正确的方法

网址 - 干净且独特

获取内容索引的基本规则是为每条内容提供干净且唯一的URL。

很多时候,JS驱动的网站在URL中使用了一个#标签。Google已明确表示,在大多数情况下,抓取工具不会发现此类型的网址。

在分析网站时,请检查结构是否未使用以下URL构建:

Google中的#符号后面的所有内容都将被修剪并忽略,因此内容不会被编入索引!

超时

没有人喜欢渲染延迟,甚至谷歌。据说谷歌等待最多5秒才能获得并执行JavaScript(请注意,5秒规则是基于观察结果而尚未得到Google的确认)。我认为Google必须限制执行的最长时间,因为渲染是一个非常耗费资源的过程。

不幸的是,诊断超时问题并不容易。如果我们不能足够快地提供内容,我们就无法将内容编入索引。

对于JavaScript网站,您需要等待一段时间才能加载其他元素,甚至整个部分。加载程序显示将出现新内容:

如果JavaScript按时执行,Web呈现服务可以正确呈现页面,并且内容可以使用JavaScript加载索引。但是,如果我们查看搜索结果,我们会看到加载器已编入索引。啊!

我们怎样才能发现这些问题?我们可以使用像Screaming Frog这样的工具抓取网站,延迟时间设置为5秒。在渲染模式下,您可以查看渲染版本是否一切正常。

不要依赖于提取和渲染工具中的检查延迟。JavaScript可以等待最多2分钟,因此它比Google的Indexer更耐心。

John Mueller建议我们可以检查Google是否在移动友好测试中按时呈现页面,如果网站有效,那么索引就可以了。

在分析网站时,请查看网站是否实施了像加载程序这样的人为延迟,这会延迟等待内容交付:

没有理由设置类似的元素; 它可能会对索引内容的索引产生巨大影响,而这些内容是无法被发现的。

索引

如果内容未编入索引,您将无法获得任何收益。这是最容易检查和诊断的元素,也是最重要的元素!

使用site:domain.com命令

检查索引的最有用方法是众所周知的查询:

网站:域名'来自您网站的几行内容'

如果您搜索一些内容并在搜索结果中找到它,那就太棒了!但是如果你没有找到它,请卷起袖子开始工作。你需要找出它没有编入索引的原因!

如果要进行复杂的索引分析,则需要检查域中和不同部分中可用的不同类型页面的内容部分。

延迟加载图片
Google表示加载“懒惰”图片可能存在问题:。

如果您的图像缓慢加载,请在您正在服务的图像上添加标记,这样可以在JavaScript关闭时显示它们。

使Google可以发现懒惰内容的第二个选项是结构化数据

包起来

外贸网站优化不要将本文作为您将用于JS网站的唯一清单。虽然这里有很多信息,但这还不够。

本文旨在作为深入分析的起点。每个网站都是不同的,当您考虑独特的框架和个人开发人员的创造力时,不可能只用一个清单来结束审计。

All Posts
×

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OKSubscriptions powered by Strikingly