1) 抓取网站
打开 SEO Spider,在“输入蜘蛛网址”框中键入或复制您希望抓取的网站,然后点击“开始”。
2) 单击“图像”选项卡
接下来,单击“图像”选项卡,您将在其中看到抓取过程中发现的所有图像的 URL、图像的大小以及源 IMG 链接的数量。
3) 单击图像,然后单击底部的“图像详细信息”选项卡
SEO Spider 底部的“图像详细信息”选项卡将在下方的窗口窗格中填充有关引用图像(“来自”URL)的源页面的信息以及发现的每个图像元素的替代文本。
它还将显示在右侧选择的图像。
在上面的示例中,您可以看到我们网站上的四个页面(“发件人”地址)有 Rand Fishkin 的图像 (https://www.screamingfrog.co.uk/wp-content/uploads/2014/03/ rand.jpg) 与不同的替代文字。一个以“rand”作为替代文本,其他为空白,这意味着它们缺少替代文本。
图像可以有许多不同的 URL 引用它们,因此,有许多不同的替代文本。虽然许多 CMS 为任何图像设置了单个 alt 文本,但它实际上是在 HTML 中的 IMG 元素和 alt 属性中设置的,就像链接的锚文本一样,可能会有很大不同。
因此,图像替代文本不能简单地设置在图像旁边的单个列中,这就是为什么我们的多窗口方法允许用户查看每个替代文本以保持一致性。
4) 使用过滤器选择“缺少替代文本”和“缺少替代属性”
过滤器会优化“图像”选项卡中的 URL,以显示具有“缺少替代文本”或“缺少替代属性”的图像。
‘Missing Alt Text’ 过滤器包括具有 alt 属性但为空或有空格的图像。
<img src="screamingfrog-logo.jpg" alt="" />
“缺少 Alt 属性”过滤器包括没有 alt 属性的图像。
<img src="screamingfrog-logo.jpg" />
将它们拆分成单独的过滤器很有用,因为装饰图像应该有空的替代文本,而不是遗漏替代属性——这可能会导致屏幕阅读器出现问题。然而,实际上我们也经常看到没有 alt 属性的装饰图像。
在可能的情况下,应使用 CSS 背景图像提供装饰图像。查看 W3C替代决策树,以获取有关应为不同类型的图像包含哪些替代文本的建议。
5) 通过“批量导出 > 图像 > 缺少替代属性和文本的图像”批量导出缺少的替代文本和源页面
您可以简单地使用“图像”选项卡上的“导出”按钮,并将过滤器设置为“缺少替代文本”或“缺少替代属性”,以仅导出图像的该视图。
但是,如果您要批量导出引用缺少替代文本、替代属性或两者(以及空白替代文本列)的图像的所有源页面,请使用批量导出菜单。
这将允许您查看源页面、图像 URL 和替代文本。
6)通过“批量导出>图像>所有图像”批量导出所有图像替代文本
此批量导出将包括所有引用图像的源页面及其各自的替代文本(包括那些缺失的)。
如果没有找到所有图像
有时您可能会发现网站上的某些图像未被发现,这有两个常见原因。
- 图像使用 JavaScript 或 CSS(如 CSS ‘background-image’)加载。如果是这种情况,那么只需切换到JavaScript 渲染来抓取站点并发现所有这些图像。请记住确保 JS 和 CSS 文件不被阻止。
- 图像被 robots.txt 阻止。您可以忽略 robots.txt或自定义 robots.txt以允许抓取。