10种SEO诊断方式:巧妙借用Chrome开发者工具功能

作者杰西

10月 17, 2022

业内很多人都在花费数以百计甚至数以千计的费用购买SEO软件用于帮助SEO自动化以解放日常工作的劳动力,但事实上我们已经拥有了触手可得的免费SEO工具,它被集成在Google Chrome浏览器的开发者工具里面,这套Web编辑和调试工具已经足够我们验证任何页面的SEO基本和关键因素。
在大多情况下,Chrome开发者工具(下文中简称DevTool)使用起来非常简单,但是有一些SEO的工具不那么明显,下面我讲带大家逐步去了解。
开始之初我们需要打开开发者工具,如下图演示: 我们也可以用快捷键F12或者windows下的Ctrl+Shift+I或者mac下的Cmd+Opt+I打开

1.检查页面的主要元素,包括JS呈现内容
Google声称现在可以抓取和索引基于JavaScript的内容,但它并不总是这样完美无缺。因此,我们必须验证网页的主要内容元素 – 不仅要检查其HTML源代码,还要检查其DOM以查看Google实际呈现和识别的信息。

我们可以在“Elements”面板中直接看到DevTools的任何页面的DOM。

在识别这两者中显示的内容之间的差异时,我们可以采取适当的步骤来验证其是否正确编入索引:查看Google中的网页缓存版本,在搜索时验证文字是否显示在Google的搜索结果中, 或者使用Google Search Console中的“Googlebot模拟器”检测google实际看到的内容。


2.查找CSS隐藏内容
众所周知,Google“打折”文字内容(Google声称对待此类内容很可能不被索引或者排名,因为这些内容对用户来讲不是默认可见的)虽然包含在网页的HTML源代码中,但默认情况下会被标签或菜单选项隐藏,需要“点击”才能查看或展开。
最常见的隐藏文字的方法是使用CSS的“display:none”或“visibility:hidden”属性,因此建议您检查您的网站网页是否有可能因为这些属性隐藏了重要信息。

我们可以使用Chrome的DevTools“search”来查找,我们可以在DevTools打开的情况下按Ctrl + Shift + F(Windows)或Cmd + Opt + F(Mac)访问。 此搜索功能将允许我们不仅可以查看打开的页面文件本身,而且查看所有使用的资源,包括CSS和JavaScript。
在这里,我们可以搜索所需的属性,在如下样例中为“hidden”或“display:none”,以识别他们在页面源码中的位置。

点击搜索结果,查看实体周围的完整代码。 查看代码发现被隐藏的问题本; 如果这是重要的内容,请检查它是否被Google认为是“打折”内容,并采取相应的措施。

3.验证图片的alt属性
除检查页面的主体文本内容元素外,”Element”面板同时可以用验证证图片的alt属性。右击任意一张图片,选择”Inspect”如下图所示:


4.验证网页的noindex标记和canonical标记的配置
Chrome浏览器的DevTools工具同样可以被用来检查网页的技术配置。比如可以通过“Search“来验证网站的 meta robots和canonical标签配置。

这个验证不仅可以通过检查HTML源代码中的<head>标签区域同时可以再HTTP头信息中验证,通过”Network”面板,选择特定页面验证头部信息,包括image文件是否添加了rel=”canonical“,如下图:

5.在头配置文件中查看Http服务器状态码
用“Network“面板的头配置信息除可以查看页面的服务器状态码以外还可以查看页面是否有重定向,以及使用了何种重定向,重定向是否有错误,以及查看诸如X-robots-tag,hreflang或者user agent等信息。


6.通过模拟任何设备验证网站的移动优化
现在移动友好对SEO来讲至关重要,我们可以验证页面的配置以及内容在移动设备上的呈现通过DevTools的”Device Mode”。这个功能的启用可以通过点击设备标签的左上角区域或者通过快捷键Command+Shift+M(Mac)或者Ctrl+Shift+M(Windows,Linux)在DevTools开启的情况下。


一旦进入Device Mode,视口会出现在窗口的上方区域,我们可以通过选择响应性设计视口或者选择任意一种特定设备去测试页面,同时可以用“Edit” 选项添加自定义设备。

7.评估网站页面加载时间并诊断响应速度问题
通过模拟网络条件和使用的设备分析任何页面加载时间可以转到“Network Conditions”工具,我們可以从面板右上角的“更多工具”下的自定义菜单访问该工具。



在这里您可以找到“Caching”,“Network Throttling”和“User agent”配置。

选择设置后,您可以重新加载所需的网页,并转到“网络”面板,不仅可以查看网页的完整加载时间(加载),还可以查看网页的初始标记(DOMContentLoaded),两者都出现在窗口的底部。我們还可以查看所使用的每个资源的加载时间和大小,可以通过单击面板左侧的红色按钮进行记录。

要获取提高页面速度性能的操作的建议,点击导航到“Audits”面板,然后单击“运行”按钮。每项建议都将说明造成问题的相关资源,如下所示:


此外,我們可以使用“Filmstrip”选项捕获您的页面呈现的屏幕截图。通过点击相机图标并重新加载网页,我們可以在各个加载阶段查看网页的屏幕截图,从而验证用户在每个阶段都能看到的内容。


8.验证渲染屏蔽资源
在”Network”面板,同样可以利用资源加载时间数据验证哪个JS或者CSS资源是在DOM之前加载的以及有可能被屏蔽掉了,哪个资源是最常见的影响页面加载速度的。我們可以通过点击CSS和JS的按钮进行过滤筛选,如下图所示


9.在HTTPS迁移期间查找非安全资源
DevTools工具在”Security”面板对任何页面进行安全性验证。你可以在这里检查当前页面是否安全以及是否拥有有效的HTTPS证书,安全连接的类型,以及是否存在非安全资源的引用引发的混合内容的问题。


10.验证AMP页面的实施
只需要在AMP页面URL最后添加”#development=1”,然后检查 ”Console”面板,它便会告诉你是否有问题,警告,或者错误在哪里方便你采取合适的行动去修复。

我是杰西,喜欢SEO研究的SEOer,一直在路上, 欢迎交流。也可以关注杰西seo公众号获取更多精彩SEO资讯

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注