qt中如何在 鼠标移动到pushbutton上时显示出手_如何使用Chrome DevTools进行SEO疑难解答...

Google Chrome浏览器是任何SEO专家都可以触手可及的最重要的技术工具包之一。

无论您使用哪种SEO软件来自动执行审核或大规模诊断SEO问题，Chrome DevTools都将继续提供重要的方法来及时检查SEO问题。

现在，有很多文章概述了DevTools可以帮助SEO专业人员和开发人员的某些方式。

但是，我想分享几个不同的用例，在这些用例中，SEO专业人员可以依靠DevTools。

• 解决站点性能问题。
• 仔细检查Google如何看待您的网站。
• 抽查爬网错误。

1.设置DevTools进行特别SEO故障排除

对于任何尚未尝试使用Chrome的DevTools的人来说，访问它都非常简单，只需右键单击网页并单击检查即可。

从SEO专业人员的角度出发，我建议同时使用“元素”窗格(允许您查看DOM和CSS)以及在控制台抽屉中启用一些其他工具。

首先，右键单击，然后选择检查。

在启用控制台抽屉和元素面板的情况下，用户可以瞥见DOM中呈现的代码以及用于在浏览器中绘制该代码的样式表。

以及可从控制台抽屉访问的许多其他工具。

根据您使用DevTools的频率，控制台抽屉可能只显示控制台本身。

控制台面板允许您查看记录的消息并运行JavaScript-但是我们今天不再讨论。

相反，我们将重点关注启用其他三个工具：

• 网络条件。
• 覆盖范围。
• 渲染。

在“更多工具”下，选择这三个项目，直到它们在控制台抽屉中显示为选项卡。

我们的DevTools面板应如下所示：

现在启用了这窗口，让我们开始故障排除。

2.在DevTools中切换用户代理

使用DevTools的一种最容易被忽视的方法是依靠Chrome的内置功能来切换User-Agent。

这项简单的测试通过深入了解Googlebot如何查看和处理网站上的信息，帮助发现了许多不同的问题。

对于调查性SEO专业人员而言，DevTools通常可以充当可信赖的放大镜，使用户可以放大特定问题以找出根本原因。

如何切换您的用户代理

为了在Chrome中切换用户代理，请使用控制台抽屉中的“网络条件”标签。

取消选中自动选择，您可以使用Googlebot智能手机，Bingbot或任何其他用户代理查看内容，以查看内容的传递方式。

移动备用网站的案例

在Google可能未在SERP中显示更新的标题标签或元描述的网站上。

可能很难确定为什么Google似乎总共选择了另一个标题，或者为什么未能从先前的标题标签更新SERP中的标题。

在一种情况下，将User-Agent切换到Googlebot智能手机后，很快就可以看出该网站仍在为Googlebot提供备用移动网站。

因为Google已经切换到移动优先索引，所以Google正在处理和索引移动网站上的更改，而未能捕获在域的桌面版本上所做的更新。

移动站点可能看起来像是遥远过去的遗物，但它们肯定仍然存在。

实际上，一个网站：搜索m。*。com网站可显示超过20亿次Google搜索：

通过查找rel =” alternate”元标记可以很容易地在爬网中发现这样的问题，但是在Google Chrome中切换User-Agent提供了一个很好的机会来发现潜在的问题而不必离开浏览器。

发现过度的服务器保护

网上有很多坏人已经不是什么秘密了。

此外，许多黑客和通常为恶意的不当行为可能会试图将Google的功能用于网站，这已不是什么秘密。

这就是为什么我们不能拥有美好的事物的原因。

结果，某些服务器堆栈，CDN和托管服务提供商可能会提供一些内置的安全功能，这些功能会阻止Googlebot的欺骗，以确保网站免受垃圾邮件爬虫的侵害。

但是，有时网站可能会显得过于狂热，最终会意外地阻止Googlebot！

如果您看到类似此处的消息，则可能是时候进行一些测试了：

当我们在Google的SERP上看到此消息时，很明显犯规了。

但是，浏览器加载了所有内容而没有问题。

Google看到了什么不同吗？

通过使用DevTools中的User-Agent切换器，当User-Agent设置为Googlebot Smartphone时，我们可以看到该站点正在提供该消息。

尽管这可能是阻止Googlebot欺骗的好方法，但他们无意间阻止了真正的Googlebot！

User-Agent切换器并非没有缺陷，当然也不是全部。

实际上，诸如Cloudflare之类的CDN因阻止访问量欺骗了搜索引擎的User-Agent而臭名昭著。

在将Googlebot设置为User-Agent的Cloudflare自己的网站时，会看到类似以下的页面：

同样，切换User-Agent不会告诉您Googlebot是否可以在初次通过时或其他重要的可访问性问题上呈现JavaScript。

但是，如果您在SERP中看到的内容是意外的，那么这是一个很好的现场检查。

在DevTools中诊断核心网络生命

DevTools中的一个重要选项卡是“性能”选项卡。

对于解决与页面速度和性能有关的问题，这是一个很好的网关，当涉及到Core Web Vitals时，可以提供一些可行的建议。

虽然Google核心网络生命力中的指标已经成为页面速度和性能报告的一部分，但是SEO专业人员要熟悉如何剖析这些问题，这是非常重要的。

尤其是随着网站管理员越来越敏锐地意识到核心网络生命对搜索的重要性。

使用DevTools中的“性能”选项卡是更好地了解这些重要Web指标的步骤。

如何设置性能选项卡以调试核心Web Vital

在DevTools的顶部选项卡上，单击性能选项卡。

确保已选中“屏幕截图”按钮，然后单击“性能”选项卡中的“刷新”图标以记录页面加载。

加载的配置文件概述了加载页面所花费的时间，并突出显示了重要事件的时间安排。

在计时部分中，用户可以看到诸如FCP和LCP之类的标志，LCP是我们的核心网络生命力之一。

将鼠标悬停在LCP的标志上时，我们实际上可以看到标记为页面加载期间内容最大的内容的内容。

当技术SEO专业人员与开发和性能团队一起对核心Web Vital进行故障排除时，这可以帮助消除猜测。

检查累积布局偏移

DevTools还允许您确定哪些元素可能导致布局偏移。

通常，当图像和广告完成加载后，内容可能会在屏幕上跳来跳去。

当页面未保留这些资产所需的不动产时，就会发生这种情况，从而导致布局随着内容的加载而移动。

为了帮助检测布局偏移，请使用控制台抽屉中的“渲染”选项卡。

检查Layout Shift Regions的选项，该选项将突出显示页面在加载内容时发生布局偏移的区域。

与页面互动时，版式转换将以蓝色突出显示。

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

3.仔细检查您的HTTP标头并查看未使用的代码

我们经常在SEO审核中听到有关软404的信息。

软404表示浏览器可能显示404页面，但返回200 OK响应代码。

在某些情况下，您可能会看到内容完全按照浏览器的预期加载，但是HTTP响应代码可能显示404、302，或者通常不正确或与预期不同。

无论如何，查看每个页面和资源的HTTP响应代码都是有帮助的。

虽然有许多很棒的Chrome扩展程序可以为您提供有关响应代码的信息，但是您可以直接从DevTools进行检查。

使用DevTools并导航到“网络”选项卡。

在这里，DevTools显示了被调用以编译页面的所有单个资源，相应的状态代码以及瀑布可视化。

这里有两个非常有用的视图，可帮助您过滤和分类信息。

首先，通过“网络”标签顶部的文件类型过滤器，我们可以将重点缩小到特定的内容类型：

选择资源后，“网络”选项卡中的“标题”子菜单使我们可以查看有关所选文件的大量信息。

这包括所有HTTP标头信息，例如请求URL，请求方法，状态代码，内容编码，上次修改日期，服务器等。

在进行故障排除时，这可能是非常有用的信息。

您可以依靠此信息来：

• 确认已启用GZip压缩功能。
• 仔细检查缓存控件是否按预期工作。
• 验证我们是否向Googlebot和其他用户代理发送了适当的状态代码。

查看未使用的代码

最后，我总是喜欢在控制台抽屉中保留“覆盖率”选项卡。

使用此选项卡，您可以快速重新加载并确定实际使用了多少代码。

通常，您会看到包含大量未使用代码的JavaScript和CSS文件。

在对站点速度或性能进行故障排除时，这些通常是应该评估以进行优化的第一个渲染阻止资源。

如果您要运送大量从未使用过的CSS，那将极大地降低性能。

CSS始终会阻止渲染-结果，大型CSS文件会大大降低页面速度和性能。

通过识别未使用的脚本，SEO专业人员通常可以帮助开发人员和网站管理员解决哪些资源需要更好地优化以提高性能。

简而言之，Chrome浏览器是您武器库中至关重要的SEO工具。

总结

DevTools提供了任何网站背景下的强大功能，并且可以成为技术审核的关键部分。

但是，使用DevTools最好的部分之一是它的速度。

SEO专业人员无需离开浏览器，就能发现从爬网到性能的所有检查问题。