使用Chrome DevTools进行SEO故障排除的方法

任何SEO PRO的指控器中最重要的技术工具之一是Google Chrome。

无论如何

SEO软件您可能会使用自动审核或诊断SEO问题缩放, Chrome Devtools 继续提供关键的方式来查询一般点击SEO问题。现在,已经

有大量的文章

概述了一些方式该DevTools可以帮助SEO专业人士和开发人员。然而,我想共享一些不同的用例,其中SEO专业人员可以依赖Devtools。 site.spot-check爬网错误。 1。为ad hoc seo故障排除设置devtools

对于没有冒险到Chrome的Devtools的任何人访问它就像右键单击网页并单击

检查

从SEO专业人员的镜头接近这一点,我建议使用元素窗格 – 允许您查看DOM和CSS – 以及在控制台抽屉中启用一些不同的工具。广告联接键读数下面要开始,右键单击,然后选择

检查

3 Ways to Use Chrome DevTools for SEO Troubleshooting

3 Ways to Use Chrome DevTools for SEO Troubleshooting

3 Ways to Use Chrome DevTools for SEO Troubleshooting

3 Ways to Use Chrome DevTools for SEO Troubleshooting

3 Ways to Use Chrome DevTools for SEO Troubleshooting默认情况下,这会带来元素面板,给您一瞥DOM和用于构图页面的样式表。

这个仅视图为我们提供了大量的事情来潜入,但要充分利用工具包,请启用控制台抽屉。3 Ways to Use Chrome DevTools for SEO Troubleshooting 单击设置图标旁边的三个点并滚动下至

显示控制台画ER

AdvertisementContinue阅读以下

或者,点击退出键。

与这两个控制台抽屉启用了元素面板,用户能够瞥见在DOM和用于在浏览器中绘制该代码的DOM和样式表中呈现的代码。

以及一系列可以从控制台抽屉访问的其他工具。

取决于您使用DevTools的频率,控制台抽屉可能只是显示控制台本身。

控制台面板允许您3 Ways to Use Chrome DevTools for SEO Troubleshooting查看记录的消息

和运行JavaScript 3 Ways to Use Chrome DevTools for SEO Troubleshooting – 但我们今天不会进入那个。

相反,我们将专注于启用三个附加工具:网络条件。 coverage.Rendering。

下矿石工具

,选择这三个项目中的每一个,直到它们显示为控制台抽屉中的选项卡。

我们的Devtools面板应该看起来像这样:

3 Ways to Use Chrome DevTools for SEO Troubleshooting

3 Ways to Use Chrome DevTools for SEO Troubleshooting

现在,现在这三个窗格被启用,让我们进入故障排除。

广告联系读数下方

2。在devtools中切换用户 – 代理

使用devtools的最忽略方式之一倾向于Chrome的内置能力,然后

交换机用户 – 代理

这个简单的测试通过了解GoogleBot如何看待和处理网站的信息,帮助揭示了许多不同的问题。

对于调查的SEO专业人士,Devtools通常可以作为可靠的放大镜,允许用户放大对UNC的特定问题在根本原因。

如何切换用户 – 代理

为了在Chrome中切换用户代理,请使用控制台抽屉中的网络条件选项卡。

3 Ways to Use Chrome DevTools for SEO Troubleshooting

3 Ways to Use Chrome DevTools for SEO Troubleshooting

取消选中

自动选择

,您可以使用GoogleBot Smartphone,Bingbot或任意数量的其他用户代理查看内容来查看如何交付内容。

下面

移动备用站点的情况

拍摄了一个站点,其中谷歌可能不在serps中显示更新的标题标记或元描述。

可能难以确定谷歌似乎完全选择了另一个标题的原因或者未能从先前的标题标记更新SERP中的标题。

在一个情况下,将用户代理切换到Google之后BOT智能手机很明显,该网站仍然向GoogleBot为备用移动网站提供服务。

因为谷歌已经将切换到

移动 – 首先索引

,Google正在处理和索引移动网站上的更改,同时无法捕获桌面版本的域的更新。

移动站点看起来像遥远的过去的遗物,但它们肯定仍然存在。[事实上,一个网站:搜索m。*。COM网站在谷歌搜索中显示超过20亿:3 Ways to Use Chrome DevTools for SEO Troubleshooting

3 Ways to Use Chrome DevTools for SEO Troubleshooting

3 Ways to Use Chrome DevTools for SEO Troubleshooting

3 Ways to Use Chrome DevTools for SEO Troubleshooting

虽然通过寻找rel =“备用”元标签,但在爬网中发现这样的问题可能很容易,但在Google Chrome中切换用户代理商提供了一个很好的机会,可以找到潜在问题ut曾经离开浏览器。

读数下方的广告联网读数识别Overizealous服务器保护

没有秘密,网站上有很多糟糕的演员。3 Ways to Use Chrome DevTools for SEO Troubleshooting另外,许多黑客和一般恶意误解都没有秘密可能会尝试使用谷歌的力量对待网站。

这就是我们不能拥有好东西的原因。结果,一些服务器堆栈,CDN和托管提供商可以提供一些内置的安全功能,这些功能阻止了努力确保网站免于垃圾邮件爬行者。3 Ways to Use Chrome DevTools for SEO Troubleshooting然而,有时一个网站也可能有点Overizealous,最终意外阻止GoogleBot!如果你看到一条像这里这样的消息,可能是时候做一些测试:

[1

当我们在谷歌的SERPS上看到这条消息时,很清楚一些犯规的东西。

广告联系读数下面

然而,浏览器没有问题加载了所有内容。

谷歌看到了不同的东西?

通过使用devtools中的用户代理切换器,我们能够看到该网站在用户时提供该消息 – 代理被设置为Googlebot智能手机。

虽然这可能是保持贝湾Googlebot Spoofs的精致方法,但他们意外地阻止了真正的GoogleBot!

用户 – 代理切换器不是没有它的缺陷,肯定不是捕获。实际上,Cloudflare等CDNS令人震惊的是阻止来自可能欺骗搜索引擎的用户代理的流量。

访问CLO时udflare自己的网站与Googlebot的设置为用户代理,你招呼着这样的页面:

3 Ways to Use Chrome DevTools for SEO Troubleshooting

3 Ways to Use Chrome DevTools for SEO Troubleshooting

同样,切换用户-Agents不会告诉你GoogleBot是否可以在第一次通过或其他重要的可访问性问题上呈现JavaScript。

广告联系读数以下

但是,如果您在SERPS中看到的内容是意外的,这是一个很好的点检查。 诊断DevTools中的核心Web Vitals

DevTools中的一个重要标签是性能选项卡。

这是一个很好的网关,用于解决与页速和性能相关的问题。当涉及到

核心网络vitals

时,可以提供一些可操作的外卖。

虽然是谷歌核心Web Vitals的一部分的指标是 Page s的一部分PEED和绩效报告一段时间,SEO专业人员熟悉如何对这些问题进行解剖。

特别是由于网站管理员更加敏锐地意识到核心网络威力搜索的重要性。

使用devtools中的性能选项卡是更好地理解这些重要的网络指标的步骤。

如何设置用于调试核心Web的性能选项卡vitals

DevTools中的顶部选项卡,单击

性能

选项卡。

确保选中

屏幕截图3 Ways to Use Chrome DevTools for SEO Troubleshooting按钮,然后单击“性能”选项卡中的“刷新”图标以录制页面加载。

3 Ways to Use Chrome DevTools for SEO Troubleshooting

配置文件加载给出过了多长时间加载页面的概况,定时突出了标志意义NT事件。

在时间部分中

下面

读数,用户可以看到FCP(第一个满足油漆)等内容的标志,并

LCP(最大的满足油漆)

,我们的核心网络之一vitals。

在悬停在LCP的标志上,我们实际上可以看到标记为页面负载期间最大的内容涂料的内容。3 Ways to Use Chrome DevTools for SEO Troubleshooting

这有助于将猜测作为技术删除SEO专业人员与开发和绩效团队一起进行解决,以解决核心网络威力。 3 Ways to Use Chrome DevTools for SEO Troubleshooting

3 Ways to Use Chrome DevTools for SEO Troubleshooting

3 Ways to Use Chrome DevTools for SEO Troubleshooting

DevTools还允许您确定可能导致布局移位的元素。

广告联接键读数以下

通常,当图像和广告完成加载时,内容可能会跳转ARO在屏幕上。

当页面没有保留这些资产所需的房地产时,会导致布局随着内容而移动并移动时。 为了有助于检测布局班次,请使用控制台抽屉中的渲染选项卡。

检查布局换档区域选项,这将突出显示作为加载内容的布局班次的页面的区域。 在与页面交互时,布局移位将以蓝色突出显示。


这可以帮助网站管理员和开发人员了解哪些资源可能需要占位符。

仔细检查HTTP标头和审查未使用的代码 我们经常听到SEO审核中的软404s 。广告Continue Re浏览器可以显示404页的软404s,而是返回200个OK响应代码。在某些情况下,您可以在浏览器上完全看出内容加载HTTP响应代码可以示出404,302,或者通常不正确或不同于预期。在任何情况下,对于每个页面和资源,有助于查看 HTTP响应代码 。虽然有一个令人难以置疑的铬扩展,但为您提供有关响应代码的信息,但这是您可以直接从devtools检查的东西。 使用devtools并导航到网络选项卡。[在这里,Devtools显示正在调用的所有各个资源,以编译页面,相应的状态代码和瀑布可视化。 那里这里是两个令人难以置信的有用的视图来帮助过滤和排序状态代码信息。首先,网络选项卡顶部的FileType过滤器允许我们将我们的焦点缩小到特定内容类型: 在选择资源之后,网络选项卡中的子菜单允许我们查看关于所选的一系列信息文件。下面读取的广告联系读数包括所有HTTP报头信息,如请求URL,请求方法,状态代码,内容编码,上次修改日期,服务器等等。 这可以在故障排除时是令人难以置信的有用信息。您可以依赖此信息依赖于:验证GZIP压缩已启用。双重检查缓存控制是working按预期.Verify我们将GoogleBot和其他用户代理发送了适当的状态代码。 最后,我总是喜欢在控制台抽屉中留下覆盖选项卡。使用此选项卡,您可以快速命中重新加载并识别实际使用的代码。 通常,您经常看到具有大量未使用代码的JavaScript和CSS文件。在故障排除站点时读取读数速度或性能,这些通常是第一个应评估优化的渲染阻止资源。如果您正在运送一大吨从未使用的CSS,则会是一种大规模的性能漏油。 CSS始终是渲染阻止 – 结果,大CSS文件可以急剧减慢页面速度和性能。通过识别未使用的脚本,SEO专业人员通常可以帮助开发人员和WebMasters故障排除资源需要更好的资源提高性能的优化。 简而言之,谷歌Chrome是您的阿森纳的一个批判性重要的SEO工具。 Takeaway Devtools在任何人的引擎盖下提供强大的一瞥网站,可以成为技术审计的关键部分。然而,关于使用devtools的最佳部分之一是其速度。 没有离开浏览器, SEO专业人员可以感到赋予从爬行性表现到表现的检查问题。 更多资源: 4使用Chrome Devtools用于技术SEO审核的高级方式 7提高核心Web Vitals分数和页面体验信号的提示 先进的技术SEO:一个完整​​的指南广告Continue读数下方 图像信用