JavaScript SEO最佳实践和调试工具

JavaScript是一个很好的选择,使网站页面更加互动,更少无聊。

但它也是杀死网站SEO的好方法错误地实施了。

这是一个简单的事实:即使是世界上最好的东西也需要找到一种方法。

无论谷歌如何无法将其索引到期,那么到 JavaScript问题,你错过了交通机会。

在这篇文章中,您将学习关于 JavaScript SEO 最佳实践所需的一切和OLS您可以用来调试JavaScript问题。

为什么JavaScript对SEO危险:现实世界示例

“自从重新设计我们的网站反应时,我们的交通急剧下降。发生了什么?“

这只是我在论坛上听到或看过的许多问题之一。

广告Continue读数下面

您可以用任何其他JS框架替换作响;没关系。如果在不考虑SEO影响的情况下实施,其中任何一个都可以伤害网站。

以下是JavaScript可能出现问题的一些示例。

示例1:网站导航不是易碎的

Website is not crawlable: JS SEO errors

Website is not crawlable: JS SEO errors

导航中的链接不符合网络标准。作为R.谷歌,谷歌无法看到或遵循它们。读数下方

为什么是错误的:

它使谷歌难以发现内部页面。网站内的权限没有正确分布。没有明确指示网站内页面之间的关系。Image Search Has Decreased After Improper Lazy Load Implementation结果,一个具有链接的网站,Googlebot不能遵循的链接将无法利用内部链接的

电力实施例2:在不正确的锂载荷实现后,图像搜索已经减少Image Search Has Decreased After Improper Lazy Load Implementation

The Website Was Switched to React With No Consideration of SEO

这里:The Website Was Switched to React With No Consideration of SEO虽然延迟加载是减少页面加载时间的好方法,但如果在不正确的情况下,它也可能是危险的。

在这个例子中,延迟加载阻止了Google看页面上的图像

为什么它错了:

谷歌可能无法发现延迟加载下的内容“隐藏”(当不正确时)。如果内容不是由Google发现,内容未排名。结果,图像搜索流量可能会受到很多。这对任何严重依赖视觉搜索的业务尤其重要。实施例3:该网站被切换以与SEO

这里有什么问题:

这是我最喜欢的是我审判了一段时间的网站的榜样。所有坦克的交通都是欠我的。这就像他们无意中试图杀死他们的网站:

读数下方的广告传票没有爬行。图像不是爬行。标题标记在所有网站页面上都是相同的。内部页面上没有文本内容。

为什么它错了:

如果谷歌没有看到页面上的任何内容,它不会对此页面进行排名。如果多个页面看起来与GoogleBot相同,它可以选择其中一个并通过Canonicalize剩下来。

在这个例子中,网站页面看起来与谷歌完全相同,所以它重复删除它们并将主页用作规范版本。

您需要了解关于Google-JavaScript关系的一些事情

在谷歌如何处理您的内容时,有一些您应该知道的主要事情。

谷歌没有与您的内容进行交互

Googlebot无法单击页面上的按钮,展开/折叠内容等

GoogleBot以下的广告Continue读数只能看到渲染的HTML中可用的内容,而无需任何其他交互。例如,如果您有一个可扩展的文本部分,则其文本可在源代码或呈现HTML中使用,谷歌将索引它。

相反,如果您有一个部分,其中内容在页面源代码或DOM中的内容不可用,并且仅在用户与其交互后(例如单击按钮) ,谷歌将不会看到此内容。

谷歌不滚动

 Googlebot不像网站上的常用用户;它不会滚动页面。因此,如果您的内容是“隐藏”的无穷量的滚动背后,Google将不会看到它。 请参阅:

谷歌的Martin Splitt与我索引页面nfinite滚动

谷歌没有看到仅在服务器上的浏览器VS中呈现的内容。

这就是为什么客户端渲染是一个错误的想法,如果你愿意谷歌索引并排名您的网站(如果您需要流量和销售,您确实想要它)。读数下方

确定,所以JavaScript真的很糟糕吗?

不是如果javascript实现了javascript在网站上使用最佳实践。

这正是我要封面的正是下面的。

JavaScript SEO最佳实践

根据Web标准添加链接

虽然“Web标准”可以听起来可以令人生畏,但实际上它只是意味着您应该使用HREF属性链接到内部页面:

您的相关锚文本

这样,谷歌很容易找到链接并关注它们(除非您向他们添加一个Nofollow属性,但这是一个不同的故事)。

 不使用以下技术在您的网站上添加内部链接:

window.location.href =’/ page-url’

#pep-url

顺便说一下,如果您想将人们带到特定部分,仍然可以在页面上成功使用最后一个选项在这个页面

但谷歌不会用“#”索引你的URL的所有个人变体。

广告联系读数下面参见:
谷歌SEO 101:做和唐'TS链接和JavaScript

根据Web标准添加图像

与内部链接一样,图像使用还应遵循Web标准,以便GoogleBot可以轻松发现和索引图像。

是光盘过度后,图像应从“SRC”HTML标记链接:

许多基于JavaScript的延迟加载库使用“data-src”属性来存储真实图像URL,它们用占位符图像或GIF替换“SRC”标签,该占位符快速加载。

You need to make sure that rendered HTML shows the right information.

You need to make sure that rendered HTML shows the right information.

存储有关图像的附加信息。

它有助于页面速度优化,如果正确实现,可以很好地运行。 如果您希望谷歌拿起您的真实形象而不是占位符,请交换占位符图像到目标图像,使

显示目标图像的路径。

在最近的谷歌搜索中央现场活动期间,我做了一个关于调试问题的实时案例研究使用javascript库加载懒惰的图像。

广告读取下面的

或者,您可以使用本机延迟加载来消除JavaScript。这是由许多浏览器支持的。

使用服务器端渲染

Open settings, click Disable JavaScriptand reload the page.如果您希望谷歌阅读和排列内容,则应确保服务器上的此内容不仅可以使用在用户的浏览器中。或者,您可以使用

动态渲染,它意味着检测搜索引擎并在浏览器中为用户提供HTML + JavaScript内容时为它们提供静态HTML页面。Open settings, click Disable JavaScriptand reload the page. 确保呈现的HTML具有您想要谷歌阅读的所有主要信息

您需要确保呈现的HTML显示正确的信息,例如:

页面上的复制.Images.cnonical TAG.TITLE和META DEFFIPtion.Meta机器人tag.Structured data.hreflang.Any其他重要标签。

调试JavaScript实现的搜索引擎优化工具

几天只需要查看页面的源代码,以检查它是否包括合适的内容。

读下方的广告联系读数javascript使它更复杂,因为它可以添加,删除或更改不同的元素。看源代码是不够的;您需要检查呈现的HTML。 步骤1:检查网站依赖于JavaScript以满足内容

当我看到依赖的网站时,我通常会做的第一件事在JavaScript上是为了检查

这取决于它。最简单的方法是在浏览中禁用JSr。

我使用

Web开发人员Chrome扩展简单地打开设置,单击

禁用JavaScript Google's Mobile-friendly Test Tool HTML check并重新加载页面:

Google's Mobile-friendly Test Tool HTML check

一旦你这样做,你会看到一个页面如何看看没有任何JS。

Rich Results Test tool下面的广告联系读数上面的示例,您可以看到没有JavaScript的没有内容。

注意此方法只需概述JavaScript影响内容交付的数量。它没有告诉你谷歌将索引它是否索引。Rich Results Test tool 即使您看到如上所述的空白页面,它也并不意味着没有任何工作。这只是意味着一个网站依赖于JavaScript。

这就是为什么你需要用工具测试呈现的HTML,我将在下一个ST中向您展示EP。第2步:检查GoogleBot是否服务于合适的内容和标签

Google移动友好的测试工具

URL Inspection Tool in Google Search Console

谷歌的移动友好测试工具是检查移动呈现的HTML时最佳,最可靠的工具之一,因为您从谷歌获取信息。 URL Inspection Tool in Google Search Console您需要做什么:加载

移动友好工具。检查您的URL.Look在HTML选项卡中的信息:

这就是你的位置’LL必须检查代码以确保它具有正确的信息。

广告Continue读数下面

注意:您可以使用An overview of what JavaScript changes on the page Rich的结果测试工具

,也可以执行这些检查: An overview of what JavaScript changes on the page

URL检测工具在谷歌搜索康寿E

Load a mobile view in the Chrome inspection tool and then use the View Rendered Source extension

URL检测工具还可以让您访问GoogleBot用于评估页面内容的页面的RAW HTML: Load a mobile view in the Chrome inspection tool and then use the View Rendered Source extension

移动友好的测试工具与URL检查工具JavaScript Rendering Check

好的,所以这些工具之间的差异是什么?JavaScript Rendering Check下面的广告联系读数简而言之,由于移动友好的测试和URL检测工具使用相同的核心技术,因此输出中没有差异。

其他方面存在一些差异,但

到使用URL检测工具,您需要访问您正在检查的网站的Google搜索控制台。如果您没有此类访问,请使用移动友好的测试(或丰富的结果测试)。网址检查离子工具可以向您展示同一页面的两个版本 – 最后爬立的版本和Live版本。如果刚刚被javascript打破的东西,它可以易用,并且您可以将新的实现与前一个的东西进行比较。

移动友好的测试和丰富的结果测试只为您的当前实时页面版本提供输出。

其他调试工具

查看渲染源Chrome扩展

Use the SEO Pro extension to see the Title tag and other important tags that are found in rendered HTML.

我喜欢这个扩展Use the SEO Pro extension to see the Title tag and other important tags that are found in rendered HTML.如图所示,它显示了源代码和呈现HTML之间的差异。它为您提供了页面上的JavaScript更改的概述:


呈现HTML vs桌面。广告联网读数以下要执行此操作,您需要首先加载移动视图 我认为这是最友好的JS调试工具,因为您甚至不需要检查代码。 它检查了您的页面源代码中的主要元素并将它们与它们进行比较在呈现的HTML相同的元素(再次,一定要检查手机版): 在这个例子中,我看到的JavaScript更改页面上的主要元素,如标题标记,规范,内部链接。广告联系读数下面这并不总是一件坏事,而是作为SEO专业人士,您需要调查这些变化是否有害页面您要检查。 您还可以使用 SEO Pro扩展来查看呈现HTML中的标题标记和其他重要标记,而不是源代码: 我更倾向于使用上述工具的组合来研究JavaScript SEO问题或确保实施最佳实践。以下更多资源: SEO专业人员的JavaScript基础知识 对SEO的现代JavaScript的动手介绍 谷歌的Martin Splitt解释了为什么无限滚动导致SEO问题 图像信用 所有屏幕截图,3月2021日