梅州网站优化:如何优化搜索引擎和机器人的反应性网站

2019.08.14 mf_web

155

反应性JavaScript框架(例如React,Vue.js和Angular)最近风靡一时,因为它们具有灵活性,模块化和易于自动化测试,所以它们在越来越多的网站和应用程序中使用也就不足为奇了。

这些框架允许人们在网站或应用程序上实现新的,以前无法想象的东西,但他们如何在SEO方面表现?使用这些框架创建的页面是否会被Google编入索引?由于使用这些框架,所有或大部分页面呈现都是在JavaScript中完成的(并且由机器人下载的HTML大部分都是空的),如果您希望将您的网站编入索引,它们似乎是不可行的搜索引擎甚至通常由机器人解析。

梅州网站优化在本文中,我将主要讨论Vue.js,因为它是我最常用的框架,并且我在主要项目的搜索引擎索引方面有直接的经验,但我可以假设大多数我将介绍的内容对其他框架也有效。

关于问题的一些背景

索引如何工作

要让您的网站被Google编入索引,需要使用Googlebot(一种访问您网站的自动索引软件并将网页内容保存到其索引中)跟踪每个网页内的链接。Googlebot还会在网站中查找特殊的Sitemap XML文件,以查找可能无法从您的公共网站正确链接的网页,并获取有关网站中网页更改次数以及上次更改时间的额外信息。

一点历史

直到几年前(2009年之前),Google过去常常为网站的HTML内容编制索引 - 不包括JavaScript创建的所有内容。常见的SEO知识是,重要的链接和内容不应该由JavaScript编写,因为它不会被Google编入索引,并且可能会对网站造成惩罚,因为Google可能会认为它是“虚假内容”,就像网站所有者正在尝试一样向用户展示与搜索引擎所展示的内容不同并试图愚弄后者的内容。

例如,诈骗者通常会在HTML中添加大量SEO友好内容并将其隐藏在JavaScript中。谷歌一直警告这种做法:

“提供Googlebot不同于普通用户的内容会被视为伪装,并且会违反我们的网站管理员指南。”

你可能因此而受到惩罚。在某些情况下,您可能会因为服务器端的不同用户代理提供不同的内容而受到惩罚,但也可能在页面加载后通过JavaScript切换内容。我认为这向我们展示了谷歌长期以来一直在为执行JavaScript的网站编制索引 - 至少为了比较网站的最终HTML(在执行JavaScript之后)和它为其索引解析的原始HTML。但是Googlebot并没有一直执行JavaScript,谷歌并没有将JavaScript生成的内容用于索引目的。

然后,鉴于AJAX用于在网站上提供动态内容的增加,谷歌提出了一个“ AJAX爬行方案 ”来帮助用户索引基于AJAX的网站。这很复杂; 它基本上要求网站生成包含AJAX内容的页面呈现。当Google要求时,服务器将提供该页面的一个版本,其中包含HTML页面中包含的JavaScript动态生成的所有(或大部分)内容 - 预呈现为内容的HTML快照。这个让服务器端解决方案提供的内容(用于所有其他目的)意味着生成客户端,这意味着那些想要拥有一个严重依赖于Google索引的JavaScript的网站的人必须经历很多技术上的麻烦。

例如,如果AJAX读取的内容来自外部Web服务,则必须在服务器端复制相同的Web服务调用,并在服务器端生成与客户端生成的相同的HTML。 JavaScript - 或至少非常类似的JavaScript。这非常复杂,因为在Node.js出现之前,它需要在两种不同的编程语言中至少部分地复制相同的渲染逻辑:前端的JavaScript,以及PHP,Java,Python,Ruby等等。后端。这称为“ 服务器端呈现 ”,它可能导致维护地狱:如果您对前端中的内容进行重要更改,则必须在后端复制这些更改。

避免重复逻辑的唯一选择是使用浏览器执行JavaScript解析您自己的网站,并将最终结果保存到您的服务器并将其提供给Googlebot。这类似于现在所谓的“ 预渲染 ”。

谷歌(及其AJAX抓取方案)也保证您可以避免处罚,因为在这种情况下,您向Googlebot和用户提供不同的内容。然而,自2015年以来,谷歌已经通过官方博客文章弃用了这种做法,该帖子告诉网站管理员以下内容:

“今天,只要您不阻止Googlebot抓取您的JavaScript或CSS文件,我们通常就能够像现代浏览器一样呈现和理解您的网页。”

这告诉我们的不是Googlebot在索引网页时突然获得了执行JavaScript的能力,因为我们知道它已经这么做了很长时间(至少要检查虚假内容和诈骗)。相反,它告诉我们JavaScript执行的结果将被编入索引并在SERP中使用。

这似乎意味着我们不必担心向Google提供服务器端呈现的HTML了。但是,我们看到为JavaScript框架提供了各种用于服务器端呈现和预呈现的工具,但事实并非如此。此外,在与大型项目的SEO代理商打交道时,预渲染似乎被认为是强制性的。怎么会?

Google如何使用前端框架创建索引页面?

本实验

为了了解Google在使用前端框架创建的网站中实际索引的内容,我构建了一个小实验。它并未涵盖所有用例,但它至少是一种了解Google行为的方法。我用Vue.js构建了一个小型网站,并以不同的方式呈现不同的文本部分。

该网站的内容取自David Foster Wallace在Infinite Jest Wiki中的书“ Infinite Jest”的描述(谢谢你们!)。整本书有几个介绍性文本,以及个人简历中的人物列表:

  • 静态HTML中的一些文本,在Vue.js主容器之外;

  • 一些文本由Vue.js立即呈现,因为它包含在应用程序代码中已经存在的变量中:它们在组件的data对象中定义;

  • #Sume文本由data对象呈现,但延迟时间为300毫秒;

  • 字符bios来自一组休息API,我是使用Sandbox专门构建的。由于我假设Google会执行网站的代码并在一段时间后停止拍摄页面当前状态的快照,因此我将每个Web服务设置为以增量延迟响应,第一个为0ms,第二个为300ms,第三个是600毫秒,依此类推,最长可达2700毫秒。

每个字符bio缩短并包含指向子页面的链接,该子页面只能通过Vue.js使用(URL由Vue.js使用历史记录API生成),但不是服务器端(如果您调用URL的URL)页面直接,您没有得到服务器的响应),以检查那些是否也被索引。我认为这些不会被索引,因为它们不是呈现服务器端的正确链接,并且Google无法直接将用户引导到这些链接。但我只是想检查一下。

我将这个小测试网站发布到我的Github Pages并请求索引 - 看一看。

结果

实验结果(关于主页)如下:

  • 已经在静态HTML内容中的内容被Google索引(这是相当明显的);

  • Vue实时生成的内容总是由Google索引;

  • 由Vue生成但在300ms之后呈现的内容也被索引;

  • 来自Web服务的内容有一些延迟,可能会被编入索引,但并非总是如此。我在不同时刻检查了Google的页面索引,并且最后插入的内容(几秒钟后)有时会被编入索引,有时则没有。即使它来自对外部Web服务的异步调用,大部分时间内都会很快得到索引的内容。这取决于Google 每个网页和网站的渲染预算,这取决于其内部算法,并且可能会根据您网站的排名和Googlebot渲染队列的当前状态而有很大差异。因此,您不能依赖来自外部Web服务的内容来获取索引;

  • 子页面(因为它们不能作为直接链接访问)不会按预期编制索引。

这个实验告诉我们什么?基本上,Google确实会对动态生成的内容进行索引,即使来自外部Web服务,但如果内容“到达时间太晚”,则无法保证将内容编入索引。除了这个实验,我和其他真实的制作网站有过类似的经历。

有竞争力的SEO

好的,所以内容被编入索引,但是这个实验没有告诉我们的是:内容是否会被竞争排名?谷歌是否更喜欢将静态内容的网站添加到动态生成的网站?这不是一个容易回答的问题。

根据我的经验,我可以看出动态生成的内容可以排在SERPS的最高位置。我曾在网站上为一家大型汽车公司的新车型工作,推出了一个新的三级域名网站。该网站是使用Vue.js完全生成的 - 除了<title>标签和meta描述之外,静态HTML中的内容非常少。

该网站在发布后的前几天开始对次要搜索进行排名,并且SERP中的文本片段报告了直接来自动态内容的文字。

在三个月内,它与大多数与该车型相关的搜索排名第一 - 由于它是在汽车制造商的官方域名上托管的,因此相对容易,而且域名与信誉良好的网站密切相关。

但鉴于我们不得不面对负责该项目的SEO公司的强烈反对,我认为结果仍然非常显着。

由于项目的截止日期和时间紧迫,我们将在没有预渲染的情况下发布网站。

动画文字

谷歌没有索引的是动画严重的文本。我与之合作的公司之一Rabbit Hole Consulting包含大量文本动画,这些动画在用户滚动时执行,并要求将文本拆分为不同标签的多个块。

网站主页中的主要文本不适用于搜索引擎索引,因为它们没有针对SEO进行优化。它们不是由技术说话而且不使用关键字:它们只是为了陪伴用户进行关于公司的概念性旅程。当用户进入主页的各个部分时,动态插入文本。

兔洞咨询

网站的这些部分中没有任何文本被Google编入索引。为了让Google在SERP中显示有意义的内容,我们在联系表单下方的页脚中添加了一些静态文本,并且此内容确实显示为SERP中页面内容的一部分。

页脚中的文本被索引并显示在SERP中,即使它们不会立即对用户可见,除非它们滚动到页面底部并单击“问题”按钮以打开联系表单。这证实了我的观点,即即使内容没有立即显示给用户,内容也会被编入索引,只要它很快呈现给HTML - 而不是按需呈现或在长时间延迟之后呈现。

预渲染怎么样?

那么,为什么所有关于预渲染的大惊小怪 - 无论是服务器端还是项目编译时?真的有必要吗?虽然像Nuxt这样的一些框架使它更容易执行,但它仍然没有野餐,所以选择是否设置它并不是一个轻松的选择。

我认为这不是强制性的。当你想要被Google索引的很多内容来自外部网络服务并且在渲染时不能立即获得时,这当然是一个要求,并且可能 - 在某些不幸的情况下 - 可能根本不可用,例如,Web服务停机时间。如果在Googlebot访问期间,您的部分内容传输速度过慢,则可能无法编入索引。如果Googlebot准确地在您对Web服务执行维护的时刻对您的页面编制索引,则它可能根本不会为任何动态内容编制索引。

此外,我没有证明居静态内容和动态生成的内容之间的差异。这可能需要另一个实验。我认为,如果内容来自外部网络服务并且不立即加载,则很可能会影响Google对您网站性能的看法,这对于排名来说是一个非常重要的因素。

其他考虑因素

兼容性

直到最近,Googlebot还使用了相当旧版本的Chromium(Google Chrome所基于的开源项目),即版本41.这意味着Google无法正确呈现最近的一些JavaScript或CSS功能(例如IntersectionObserver, ES6语法,等等)。

谷歌最近宣布,它正在谷歌博客中运行最新版本的Chromium(撰写本文时为74),该版本将定期更新。谷歌运行Chromium 41的事实可能对决定忽视与IE11和其他旧浏览器的兼容性的网站产生重大影响。

您可以在此处看到Chromium 41和Chromium 74对功能的支持的比较,但是,如果您的网站已经填充缺少的功能以保持与旧浏览器兼容,那么应该没有问题。

始终使用polyfill,因为您永远不知道哪个浏览器错过了对您认为常见的功能的支持。例如,在2019年3月发布的版本12.1之前,Safari不支持像IntersectionObserver这样的主要且非常有用的新功能。

JAVASCRIPT错误

如果您依靠Googlebot执行JavaScript来呈现重要内容,则必须不惜一切代价避免可能阻止内容呈现的主要JavaScript错误。虽然机器人可能会解析并索引不完全有效的HTML(尽管在任何网站上都有优惠的HTML总是好的!),如果有一个JavaScript错误阻止加载某些内容,那么谷歌就无法索引那个内容。

在任何情况下,如果您依靠JavaScript向最终用户呈现重要内容,那么您可能已经进行了大量的单元测试来检查任何类型的阻塞错误。但请记住,Javascript错误可能来自不可预测的情况,例如,在API响应错误处理不当的情况下。

最好有一些实时的错误检查软件(例如Sentry或LogRocket),它会提醒您在单元或手动测试期间可能没有选择的任何边缘情况错误。这增加了依赖JavaScript进行SEO内容的复杂性。

其他搜索引擎

其他的搜索引擎也不会因为谷歌与动态内容以及工作。Bing似乎根本没有索引动态内容,也没有DuckDuckGo或百度。可能那些搜索引擎缺乏Google所拥有的资源和计算能力。

使用无头浏览器解析页面并执行JavaScript几秒钟来解析呈现的内容肯定比只读纯HTML更加耗费资源。或者这些搜索引擎可能会出于其他原因选择不扫描动态内容。无论原因是什么,如果您的项目需要支持任何搜索引擎,您需要设置预渲染。

注意:要获得有关其他搜索引擎渲染功能的更多信息,您可以查看BartoszGóralewicz撰写的这篇文章。它有点旧,但根据我的经验,它仍然有效。

其他机器人

请记住,其他机器人也会访问您的网站。最重要的例子是Twitter,Facebook和其他社交媒体漫游器,它们需要获取有关您网页的元信息,以便在用户链接时显示您网页的预览。这些机器人不会索引动态内容,只会显示他们在静态HTML中找到的元信息。这引导我们进行下一步考虑。

子页面

如果您的网站是所谓的“One Page网站”,并且所有相关内容都位于一个主HTML中,那么将Google编入索引的内容就没有问题。但是,如果您需要Google在网站上编制索引并显示任何辅助页面,您仍需要为每个辅助页面创建静态HTML - 即使您依赖JavaScript框架检查当前URL并提供相关内容在那个页面。在这种情况下,我的建议是创建服务器端(或静态)页面,至少提供正确的title标签和元描述/信息。

结论

我在研究本文时得出的结论如下:

  • 如果您只定位Google,则不必使用预呈现来将您的网站完全编入索引,但是:

  • 你应该不依靠第三方Web服务的需要被编入索引的内容,特别是如果他们不尽快答复。

  • 您通过Vue.js渲染立即插入HTML的内容会被编入索引,但您不应使用在滚动等用户操作后插入DOM中的动画文本或文本。

  • 确保您测试JavaScript错误,因为它们可能导致整个页面/部分未被编入索引,或者您的网站根本没有编入索引。

  • 如果您的网站有多个页面,您仍然需要有一些逻辑来创建页面,这些页面虽然依赖于与主页相同的前端渲染系统,但可以被Google索引为单个URL。

  • 如果您需要在不同页面之间为社交媒体提供不同的描述和预览图像,您还需要在服务器端或通过为每个URL编译静态页面来解决此问题。

  • 如果您需要在Google以外的搜索引擎上执行您的网站,您肯定需要预先呈现某种类型。

梅州网站优化

最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监

TOP