综合编程

如何通过6个步骤解决JavaScript SEO问题

微信扫一扫,分享到朋友圈

如何通过6个步骤解决JavaScript SEO问题
0

公司使用现代JavaScript框架和React,Angular或Vue等库来构建网站是相当普遍的。现在很明显,网络已经从简单的HTML转移到了JS的时代。

虽然企业愿意利用最新技术并没有什么不寻常之处,但我们需要解决这一趋势的严峻现实:大多数JavaScript框架的迁移都没有考虑到用户或有机流量。

我们称之为JavaScript悖论:

在听到有关JavaScript框架创建令人惊叹的用户体验的所有嗡嗡声后,大品牌跳上了JavaScript炒作列车。

现实揭示了JavaScript框架非常复杂。

大品牌完全将迁移转移到JavaScript。他们失去了有机交通,往往不得不偷工减料,而不是为用户创造这个惊人的用户体验之旅(我将在本文中提到一些例子)。

由于没有回头路,SEO需要学习如何处理JavaScript网站。

但这说起来容易做起来难,因为在搜索引擎中使JavaScript网站成功对开发人员和SEO来说都是一个真正的挑战。

本文旨在作为我全面的JavaScript SEO终极指南的后续内容,并且它旨在尽可能容易地遵循。所以,给自己喝杯咖啡,让我们玩得开心 – 这里有六个步骤来帮助您诊断和解决JavaScript SEO问题。

第1步:使用网址检查工具查看Google是否可以呈现您的内容

网址检查工具(以前称为Google Fetch and Render)是一款出色的免费工具,可让您检查Google是否可以正确呈现您的网页。

网址检查工具要求您将网站连接到Google Search Console。如果您还没有帐户,请查看Google的帮助页面。

打开Google Search Console,然后点击网址检查按钮。

在“URL表单”字段中,键入要审核的页面的完整URL。

然后单击TEST LIVE URL。

测试完成后,单击VIEW TESTED PAGE。

最后,单击“屏幕截图”选项卡以查看呈现的页面。

向下滚动屏幕截图以确保您的网页正确呈现。问自己以下问题:

主要内容是否可见?

谷歌可以看到用户生成的评论吗?

Google可以访问类似文章和产品的区域吗?

Google能否看到您网页的其他重要元素?

为什么屏幕截图看起来与我在浏览器中看到的不同?以下是一些可能的原因:

Google在渲染时遇到了超时。

渲染时发生了一些错误。您可能使用了Google Web渲染服务不支持的一些功能(Google使用已有四年历史的Chrome 41进行网络渲染,但不支持许多现代功能)。

您屏蔽了Googlebot的重要JavaScript文件。

第2步:确保您没有错误地阻止JavaScript文件

如果Google无法正常呈现您的网页,您应该确保没有在robots.txt中阻止Googlebot的重要JavaScript文件

TL; DR:什么是robots.txt?

这是一个纯文本文件,指示Googlebot或任何其他搜索引擎机器人是否允许他们请求页面/资源。

幸运的是,URL检查工具指出了robots.txt阻止的呈现页面的所有资源。

但是,如何从渲染的角度判断被阻止的资源是否重要?

您有两个选项:基本和高级。

基本

在大多数情况下,简单地向开发人员询问它可能是一个好主意。他们创建了您的网站,所以他们应该很清楚。

显然,如果脚本的名称被称为content.js或productListing.js,它可能是相关的,不应该被阻止。

不幸的是,就目前而言,URL检查不会通知您有关被阻止的JS文件的严重性。之前的Google Fetch和Render有这样一个选项:

高级

现在,我们可以使用Chrome开发者工具。

出于教育目的,我们将检查以下URL:http://botbenchmarking.com/youshallnotpass.html

在最新版本的Chrome中打开该页面,然后转到Chrome开发者工具。然后转到“网络”选项卡并刷新页面。

最后,选择所需的资源(在我们的例子中是YouShallNotPass.js),右键单击,然后选择阻止请求URL。

刷新页面,查看是否有任何重要内容消失。如果是这样,那么您应该考虑从robots.txt文件中删除相应的规则。

第3步:使用URL检查工具修复JavaScript错误

如果您看到Google Fetch和Render未正确呈现您的网页,则可能是由于呈现时发生的JavaScript错误。

要进行诊断,请在“URL检查”工具中单击“更多信息”选项卡。

然后,向开发人员显示这些错误,让他们修复它。

JavaScript代码中只有一个错误可以停止为Google呈现,这反过来会使您的网站无法转换。

您的网站可能在最近的浏览器中正常运行,但如果它在旧浏览器中崩溃(Google Web渲染服务基于Chrome 41),您的Google排名可能会下降。

需要一些例子吗?

官方Angular文档中的一个错误导致Google无法呈现我们的测试Angular网站。

曾几何时,谷歌取消了Angular 2+的官方网站Angular.io的一些页面。

如果你想知道它为什么会发生,请阅读我的JavaScript SEO终极指南。

附注:如果由于某种原因您不想使用URL检查工具来调试JavaScript错误,则可以使用Chrome 41。

就个人而言,我更喜欢使用Chrome 41进行调试,因为它更通用,并提供更大的灵活性。但是,URL检查工具在模拟Google Web渲染服务时更加准确,这就是为什么我建议那些刚接触JavaScript SEO的人。

第4步:检查您的内容是否已在Google中编入索引

仅仅了解Google是否可以正确呈现您的网站是不够的。您必须确保Google已正确索引您的内容。最好的选择是使用site:命令。

这是一个非常简单而且非常强大的工具。它的语法非常简单:site:[网站的URL]“[要搜索的片段]”。请注意,您没有在site:和URL之间放置空格。

我们假设您要检查Google是否将以下文本索引为“在所有平台上开发”,该文字在Angular.io的主页上有所体现。

在Google中键入以下命令:site:angular.io“开发所有平台”

正如你所看到的,谷歌将这些内容编入索引,这就是你想要的,但情况并非总是如此。

带走:

尽可能使用site:命令。

检查不同的页面模板,以确保您的整个网站正常工作。不要停在一页!

如果你没事,请转到下一步。如果情况并非如此,可能有几个原因导致这种情况发生:

Google仍然没有呈现您的内容。它应该在Google访问网址后的几天/几周内发生。如果您网站的特征要求您的内容尽快编制索引,请实施SSR。

Google在呈现网页时遇到超时。你的脚本快吗?当服务器负载很高时,它们是否仍然响应?

谷歌仍在请求旧的JS文件。好吧,谷歌试图缓存很多,以节省他们的计算能力。因此,CSS和JS文件可能会被激活缓存。如果您发现自己修复了所有JavaScript错误并且Google仍无法正确呈现您的网站,则可能是因为Google使用旧的缓存JS和CSS文件。要解决此问题,您可以在文件名中嵌入版本号,例如,将其命名为bundle3424323.js。您可以在Google指南中了解有关HTTP缓存的更多信息。

在编制索引时,如果Google决定不对必要的网页内容做出贡献,则可能无法获取某些资源。

第5步:确保Google可以发现您的内部链接

您应该遵循一些简单的规则:

Google需要适当的链接来发现您网站上的网址。

如果只有当有人点击某个按钮时,您的链接才会添加到DOM中,Google就会看不到它。

很简单,很多大公司都会犯这些错误。

正确的链接结构

Googlebot为了抓取网站,需要拥有传统的“href”链接。如果没有提供,您的许多网页将无法访问Googlebot!

我认为在Google I / O大会期间Tom Greenway(谷歌代表)对此进行了很好的解释:

请注意:如果您有正确的链接,还有一些其他参数,例如onClick,data-url,ng-href,这对Google来说仍然没问题。

开发人员常犯的错误:Googlebot无法访问分页的第二页和后续页

不要让Googlebot从分页的第二页发现页面,这是开发人员常犯的错误。

当您打开Gearbest,Aliexpress和宜家的移动版本时,您会很快注意到,事实上,他们不会让Googlebot看到分页链接,这真的很奇怪。当Google为这些网站启用移动优先索引时,这些网站将受到影响。

你如何自己检查?

如果您尚未下载Chrome 41,请从Ele.ph/chrome41获取。

然后导航到任何页面。为了本教程的目的,我使用的是AliExpress.com的移动版本。出于教育目的,如果您遵循相同的示例,那就太好了。

打开Aliexpress移动电话类别的移动版本。

然后,右键单击“查看更多”并选择“检查”按钮以查看其实现方式。

如您所见,没有,也没有指向第二页分页的链接。

Aliexpress.com上的移动电话类别有2,000多种产品。由于移动版Googlebot只能访问其中的20个,因此仅为1%!

这意味着该类别中99%的产品对于移动Googlebot而言是隐形的!太疯狂了!

这些错误是由延迟加载的错误实现引起的。还有许多其他网站犯了类似的错误。您可以在我的文章“ 可能在移动优先索引中失败的热门网站 ”中阅读更多内容。

TL; DR:单独使用link rel =“next”对于Google来说太弱了

注意:通常使用“link rel =”next’来表示分页系列。然而,来自Kyle Blanchette的发现似乎表明,“链接rel =”next“对于谷歌来说太弱了,应该通过传统的链接加强。

John Mueller更多地讨论了这个:

“我们可以理解哪些页面与rel一起属于rel,rel =”previous“,但如果页面上根本没有链接,那么我们很难在页面之间进行爬网。(…)因此,在页面的头部使用rel =“next”rel =“previous”是一个好主意,告诉我们这些页面是如何连接的,但是你真的需要有页面上的普通HTML链接。

不要误解我的意思 – 使用没有错。相反,它们是有益的,但将这些标签与传统的链接相结合是很好的。

检查Google是否可以看到菜单链接

审核JavaScript网站的另一个重要步骤是确保Google可以看到您的菜单链接。要检查此项,请使用Chrome 41。

出于本教程的目的,我们将使用Target.com的案例:

首先,打开任何浏览器并从菜单中选择一些链接:

https://www.target.com/c/clothing/-/N-5xtd3 – >服装

https://www.target.com/c/shoes/-/N-55b0t – >鞋子

https://www.target.com/c/furniture/-/N-5xtnr – >家具

接下来,打开Chrome 41.在Chrome开发者工具中(单击Ctrl + Shift + J),导航到元素选项卡。

结果?幸运的是,Google可以获取Target.com的菜单链接。

现在,检查Google是否可以选择您网站上的菜单链接,看看您是否也在目标上。

第6步:检查Google是否可以发现标签下隐藏的内容

我经常观察到,在许多电子商务商店的情况下,Google无法发现和索引隐藏在标签下的内容(产品描述,意见,相关产品等)。我知道这很奇怪,但它很常见。

这是每次搜索引擎优化审核的关键部分,以确保谷歌可以看到隐藏在标签下的内容。

打开Chrome 41并导航到Boohoo.com上的任何产品; 例如,Muscle Fit背心。

点击Details&Care查看产品说明:

“细节与关怀

94%棉6%弹性纤维。肌肉贴合背心。型号为6’1“,穿着英国尺寸M.”

现在,是时候检查它是否在DOM中。为此,请转到Chrome开发者工具(Ctrl + Shift + J),然后单击“网络”选项卡。

确保已启用禁用缓存选项。

单击F5刷新页面。刷新后,导航到“元素”选项卡并搜索产品说明:

如您所见,在boohoo.com的情况下,Google可以看到产品说明。

完善!现在花点时间检查一下你的网站是否正常。

包起来

显然,JavaScript SEO是一个相当复杂的主题,但我希望本教程很有帮助。

如果您仍在努力应对Google排名,则可能需要考虑实施动态渲染或混合渲染。当然,随时可以在Twitter上与我联系,了解这个或其他SEO需求。

发布者:营销家-张尘,转转请注明出处: http://www.chons.cn/6508.html

阅读原文...

微信扫一扫,分享到朋友圈

如何通过6个步骤解决JavaScript SEO问题
0
Avatar

英国监管机构开始禁止“轻推”技术 以保护儿童的在线安全

上一篇

抛弃人设,刘强东重回狠角色

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

如何通过6个步骤解决JavaScript SEO问题

长按储存图像,分享给朋友