跳到主要内容

如何查找缺失的图片 Alt 文本 & 属性

2024-01-31

查找缺少图片 alt 文本和 alt 属性的页面，预览图片并批量导出源页面和图片以进行更正。

如何查看 Alt 文本 & 查找缺失的 Alt 文本​

图片 alt 文本（替代文本）用于网站的 HTML 中，用于描述图片，主要用于网络可访问性（针对盲人和视力障碍者），或者如果由于某种原因无法显示图片，则文本将代替图片显示。搜索引擎也使用它来理解图片的内容。

图片 alt 属性（通常被错误地称为“alt 标签”）应指定关于图片用途的相关且描述性的替代文本，并出现在 HTML 源代码中，如下例所示。

<img src="screamingfrog-logo.jpg" alt="Screaming Frog" />

alt 属性本身和/或 alt 文本经常被完全遗忘，如果没有自动化工具，追踪它们可能是一项繁琐的任务。

您可以免费（和付费）使用 Screaming Frog SEO Spider 工具来查看您的图片 alt 文本，并查找您网站上缺失的 alt 属性和 alt 文本。以下是一个非常快速且简单的教程，介绍如何检查图片的 alt 文本、查找缺失的 alt 文本或标签、大型图片并批量导出它们。

首先，您需要下载 Screaming Frog SEO Spider，该工具的精简版是免费的，可用于抓取最多 500 个 URL。您可以通过右侧边栏中的按钮下载。

在我们的视频和下面的教程中，您可以查看在您的网站中查找缺失的 alt 文本的后续步骤。

1) 抓取网站​

打开 SEO Spider，在“enter url to spider”框中键入或复制您要抓取的网站，然后点击“Start”。

抓取以查找缺少 alt 文本的图片

2) 点击“Images”选项卡​

接下来，点击“images”选项卡，您将在其中看到抓取过程中发现的所有图片的 URL、图片的大小以及源 IMG 内链的数量。

“Images”选项卡

3) 点击图片，然后点击底部的“Image Details”选项卡​

SEO Spider 底部的“Image Details”选项卡将在下方的窗口窗格中填充有关引用该图片的源页面（“from” URL）以及发现的每个图片元素的 alt 文本的信息。

它还将在右侧显示所选的图片。

用于查看 Alt 文本的“Image Details”选项卡

在上面的示例中，您可以看到我们网站上的四个页面（“From”地址）都有 Rand Fishkin 的图片 (https://www.screamingfrog.co.uk/wp-content/uploads/2014/03/rand.jpg)，并且具有不同的 alt 文本。一个的 alt 文本为“rand”，其他的为空白，这意味着它们缺少 alt 文本。

图片可以有许多不同的 URL 引用它们，因此，可以有许多不同的 alt 文本。虽然许多 CMS 为任何图片设置单个 alt 文本，但它实际上是在 IMG 元素和 alt 属性中的 HTML 中设置的，就像链接的锚文本一样，可能非常不同。

因此，图片 alt 文本不能简单地设置在图片旁边的单个列中，这就是为什么我们的多窗口方法允许用户审查每个 alt 文本以确保一致性。

4) 使用过滤器选择“Missing Alt Text”&“Missing Alt Attribute”​

过滤器细化了“Images”选项卡中的 URL，以显示具有“Missing Alt Text”或“Missing Alt Attribute”的图片。

缺失图片 Alt 文本检查器

“Missing Alt Text”过滤器包括具有 alt 属性但为空或具有空格的图片。

<img src="screamingfrog-logo.jpg" alt="" />

“Missing Alt Attribute”过滤器包括没有 alt 属性的图片。

<img src="screamingfrog-logo.jpg" />

将它们分成单独的过滤器很有用，因为装饰性图片应具有空的 alt 文本，而不是省略 alt 属性——这可能会导致屏幕阅读器出现问题。但是，在现实中，我们经常看到没有 alt 属性的装饰性图片。

在可能的情况下，应使用 CSS 背景图片提供装饰性图片。查看 W3C alt 决策树，以获取有关应为不同类型的图片包含哪些 alt 文本的建议。

5) 通过“Bulk Export > Images > Images Missing Alt Attribute & Text”批量导出缺失的 Alt 文本 & 源页面​

您可以简单地使用“Images”选项卡上的“export”按钮，并将过滤器设置为“Missing Alt Text”或“Missing Alt Attribute”，以仅导出该图片视图。

但是，如果您想批量导出引用缺少 alt 文本、alt 属性或两者（以及空白 alt 文本列）的图片的所有源页面，请使用批量导出菜单。

缺失 Alt 文本 & 属性的图片

这将允许您查看源页面、图片 URL 和 alt 文本。

6) 通过“Bulk Export > Images > All Images”批量导出所有图片 Alt 文本​

此批量导出将包括引用图片的所有源页面及其各自的 alt 文本（包括缺失的文本）。

批量导出所有图片 Alt 文本

如果未找到所有图片​

有时您可能会发现网站上的某些图片未被发现，这有两个常见原因。

  1. 图片是使用 JavaScript 或 CSS 加载的（例如 CSS 'background-image'）。如果是这种情况，只需切换到 JavaScript 渲染 来抓取网站并发现所有这些图片。请记住确保未阻止 JS 和 CSS 文件。
  2. 图片被 robots.txt 阻止。您可以忽略 robots.txt 或自定义 robots.txt 以允许抓取。

希望以上指南有助于说明如何使用 SEO Spider 工具高效地检查缺失的 alt 文本。

另请阅读我们的 Screaming Frog SEO spider 常见问题解答 和完整的用户指南，以获取更多信息。