回到主页

为Googlebot抓取工具优化AngularJS单页面应用程序

几乎可以肯定你在某个地方遇到过AngularJS,即使你当时并不知道它。以下是使用Angular的几个站点的列表:

  • Upwork.com
  • Freelancer.com
  • Udemy.com
  • Youtube.com

那些看起来很熟悉吗?如果是这样,那是因为AngularJS正在接管互联网。这有一个很好的理由:Angular和其他React风格的框架可以在网站上提供更好的用户和开发人员体验。对于后台,AngularJS和ReactJS是称为单页面应用程序或SPA的Web设计运动的一部分。当用户导航网站时,传统网站加载每个单独的页面,包括调用服务器和缓存,加载资源和呈现页面,当用户首先加载整个站点时,SPA会删除大部分后端活动登陆页面。每次单击链接时,站点都不会加载新页面,而是在用户与站点交互时动态更新单个HTML页面。

为什么这场运动会占据互联网?通过SPA,用户可以看到一个尖叫的快速站点,通过它们几乎可以即时导航,而开发人员拥有一个模板,可以让他们无缝,高效地自定义,测试和优化页面。AngularJS和ReactJS使用高级Javascript模板来呈现网站,这意味着HTML / CSS页面的速度开销几乎为零。所有站点活动都在幕后运行,不在用户的视野范围内。

不幸的是,任何尝试在Angular或React网站上执行搜索引擎优化的人都知道网站活动不仅仅隐藏在网站访问者身上:它也隐藏在网页抓取工具中。像Googlebot这样的抓取工具非常依赖HTML / CSS数据来呈现和解释网站上的内容。当HTML内容隐藏在网站脚本后面时,抓取工具没有网站内容可以在搜索结果中编制索引和提供服务。

当然,谷歌声称他们可以抓取Javascript(并且SEO已经测试并支持这种说法),但即使这是真的,Googlebot仍然很难抓取构建在SPA框架上的网站。当客户第一次与Angular网站联系时,我们遇到的第一个问题是SERP中出现的主页之外没有任何内容。ScreamingFrog抓取了主页和一些其他Javascript资源,就是这样。

另一个常见问题是记录Google Analytics数据。考虑一下:每次用户导航到页面时,都会通过记录网页浏览来跟踪分析数据。如果没有HTML响应来触发网页浏览,您如何跟踪网站分析?

在与SPA网站上的几个客户合作之后,我们开发了一个在这些网站上执行SEO的流程。通过使用此过程,我们不仅可以使SPA网站被搜索引擎编入索引,甚至可以在关键字的第一页上进行排名。

AngularJS的SEO的5步解决方案
  1. 列出网站上的所有页面
  2. 安装Prerender
  3. “通过谷歌获取信息”
  4. 配置分析
  5. 重新抓取网站
1)列出您网站上的所有页面

如果这听起来像一个漫长而乏味的过程,那是因为它绝对可以。对于某些站点,这将像导出站点的XML站点地图一样简单。对于其他网站,特别是那些拥有数百或数千页的网站,创建网站上所有网页的综合列表可能需要数小时或数天。但是,我不能强调这一步对我们有多大帮助。拥有网站上所有网页的索引可以为您提供参考和咨询指南,帮助您制作网站索引。几乎不可能预测到您将要遇到的每个问题,如果您没有在整个SEO优化中引用的全包内容列表,那么很可能您会留下部分内容。网站无意中被搜索引擎取消索引。

可以使您简化此过程的一种解决方案是将内容划分为目录而不是单个页面。例如,如果您知道存储库页面列表,请包含/ storeroom /目录并记下包含的页数。或者,如果您有一个电子商务网站,请记下您在每个购物类别中有多少产品并以这种方式编制您的列表(尽管如果您有一个电子商务网站,我希望您自己有一个主人某处的产品清单)。无论您采取什么措施来减少此步骤的耗时,请确保在继续执行第2步之前有完整列表。

2)安装Prerender

预渲染将会对SPA的执行SEO时,你最好的朋友。Prerender是一种服务,可以将您的网站呈现在虚拟浏览器中,然后将静态HTML内容提供给网络爬虫。从SEO的角度来看,这是一个很好的解决方案,你可以期望:用户仍然可以获得快速,动态的SPA体验,而搜索引擎抓取工具可以识别搜索结果的可索引内容。

Prerender的定价因网站的大小和向Google提供的缓存的新鲜程度而异。较小的网站(最多250页)可以免费使用Prerender,而较大的网站(或不断更新的网站)可能需要支付高达200美元/月的费用。但是,拥有一个可以通过自然搜索吸引客户的网站的可转换版本是非常宝贵的。这就是您在步骤1中编译的列表发挥作用的地方:如果您可以优先考虑您的网站的哪些部分需要提供给搜索引擎,或者以什么频率,您可以每月节省一点钱,同时仍在实现SEO进步。

3)“抓取谷歌

在谷歌搜索控制台中是一个非常有用的功能,称为“抓取为谷歌。”“抓取为谷歌”允许您从您的网站输入一个URL,并在抓取期间以谷歌机器人的方式获取它。“Fetch”从页面返回HTTP响应,其中包括Googlebot看到的页面源代码的完整下载。“获取和渲染”将返回HTTP响应,并且还将提供Googlebot看到的页面截图以及网站访问者将看到的截图。

这为AngularJS站点提供了强大的应用程序。即使安装了Prerender,您可能会发现Google仍然只是部分显示您的网站,或者可能省略了对您的网站有帮助的网站的主要功能。将网址插入“Google抓取方式”可让您查看您的网站在搜索引擎中的显示方式,以及您可能需要采取哪些进一步措施来优化关键字排名。此外,在请求“获取”或“获取和渲染”之后,您可以选择为该页面“请求索引”,这可以成为让您的网站出现在搜索结果中的便利催化剂。

4)配置Google Analytics(或Google跟踪代码管理器)

正如我上面提到的,SPA可能会在记录Google Analytics数据方面遇到严重问题,因为它们不像标准网站那样跟踪网页浏览。您需要通过某种替代方法安装Google Analytics,而不是传统的Google Analytics跟踪代码。

一种效果很好的方法是使用Angulartics插件。Angulartics使用虚拟网页浏览跟踪替换标准网页浏览事件,跟踪整个应用程序中的整个用户导航。由于SPA动态加载HTML内容,因此这些虚拟综合浏览量是根据用户与网站的互动进行记录的,最终会跟踪与传统Google Analytics相同的用户行为。其他人使用Google跟踪代码管理器“历史记录更改”触发器或其他创新方法取得了成功,这些方法是完全可以接受的。只要您的Google Analytics跟踪记录用户互动而不是传统的综合浏览量,您的Google Analytics配置就足够了。

5)重新抓取网站

在完成步骤1-4之后,您将要自己抓取该网站以查找甚至不是Googlebot预期的错误。我们早期发现客户端的一个问题是,在安装Prerender之后,我们的抓取工具仍然遇到蜘蛛陷阱:

您可能已经知道,该特定网站上实际上没有150,000个页面。我们的抓取工具只是发现了一个递归循环,它不断为网站内容生成更长和更长的URL字符串。这是我们在Google Search Console或Google Analytics中找不到的内容。SPA因为导致繁琐,无法解释的问题而臭名昭着,您只能通过自己抓取网站来发现这些问题。即使您按照上述步骤采取尽可能多的预防措施,我仍然几乎可以保证您会遇到一个只能通过爬行来诊断的独特问题。

如果您遇到任何这些独特的问题,请在评论中告诉我们!我很想知道人们在SPA中遇到的其他问题。

结果

正如我在本文前面提到的,上面概述的过程使我们不仅能够将客户端站点编入索引,而且甚至可以使这些站点在各个关键字的第一页上排名。以下是我们为一个拥有AngularJS站点的客户端所做的关键字进度的示例:

此外,该客户在七个月内的有机流量增长:

所有这一切都表明,尽管SPA的SEO可能是乏味,费力和麻烦的,但这并非不可能。按照上面的步骤,您可以使用单页应用程序网站获得SEO成功。

所有文章
×

还剩一步!

确认邮件已发至你的邮箱。 请点击邮件中的确认链接,完成订阅。

好的