SEO 中的 alt 文本：如何优化你的图片

alt 文本（alternative text，替代文本）用于描述网页上的一张图片。它存在于 HTML 代码中，通常不会显示在页面本身。

那么 alt 文本为什么如此重要？你又该如何用它来改善 SEO 与用户体验？

在本指南中，你将了解：

• 为什么 alt 文本很重要
• 如何为图片添加 alt 文本
• 为什么你不应该给所有图片都添加 alt 文本
• 如何撰写优质的 alt 文本
• 优质与糟糕的 alt 文本示例
• 如何发现并修复 alt 属性的问题

为什么 alt 文本很重要？

alt 文本之所以重要，主要有四个原因。

1. 提升无障碍性
2. 可以改善“主题相关性”
3. 有助于你在 Google 图片中排名
4. 充当图片链接的锚文本

1. alt 文本提升无障碍性

数百万人 存在视力障碍，其中许多人使用屏幕阅读器来获取线上内容。屏幕阅读器的工作原理，是把屏幕上的内容（包括图片）转换成音频。

没有 alt 文本的图片会给屏幕阅读器带来麻烦，因为无法把图片内容传达给用户。通常，它们会跳过这些图片，更糟糕的情况是读出又长又无用的图片文件名。

Google 在其 SEO 入门指南 中谈到了 alt 文本对屏幕阅读器用户的重要性。

2. alt 文本可以改善“主题相关性”

Google 会查看页面上的文字，以理解页面讲的是什么。

例如，如果页面提到 poodles（贵宾犬）、labradors（拉布拉多）和 retrievers（寻回犬），那么 Google 就知道这是关于犬种的页面。

这与图片有什么关系呢？

因为有时候，语境被“锁”在 Google 无法读取的图片里。

虽然 Google 几乎可以确定这些是没有 alt 文本的狗的图片，但具体是什么品种可能就没那么明显了——而 alt 文本正是在这里发挥作用。

3. alt 文本有助于你在 Google 图片中排名

Google 图片是全球第二大搜索引擎，占所有线上搜索的 20.45%，超过 YouTube、Bing 以及 其他搜索引擎 的总和。

这意味着存在从 Google 图片获取流量的机会。

看看过去三个月我们从 Google 图片获得点击进入 Ahrefs 博客的数量就知道了：

Google 的 John Mueller 表示，alt 文本是优化 Google 图片的重要一环：

4. alt 文本充当图片链接的锚文本

锚文本 指将一个网页链接到另一个网页的可点击文字。Google 用它来更好地理解网页及其内容。

但并非所有链接都是文字，有些是图片。

Google 表示：

如何为图片添加 alt 文本

只需在 HTML 代码的 [['Text', '<img>']] 标签中添加一个 alt 属性即可。

带 alt 标签的图片： [['Text', '<img src=“pie.jpg” '], ['InlineBold', [['Text', 'alt=“steak and ale pie”']]], ['Text', '>']]

如果你使用的是现代 CMS，应该无需深入 HTML 代码就能添加 alt 文本。

例如，在 WordPress 中，把图片添加到页面或文章时，就有一个用于填写 alt 文本的字段：

其他 CMS 中的情况也大同小异。

以下是一些最流行的 CMS 的操作说明：

• 在 Squarespace 中为图片添加 alt 文本
• 在 Shopify 中为图片添加 alt 文本

你应该给所有图片都添加 alt 文本吗？

不，这是一个常见的误解。

如果图片仅用于装饰，并不承载重要信息，那么就没必要添加 alt 文本。

例如，一些网站会用图标来分隔内容：

这些图标只是为了好看，所以你不应该给它们添加 alt 文本。这样做只会惹恼使用屏幕阅读器的访客，也不会给页面带来任何“SEO 价值”。

通用图片或图库图片（stock images）也是如此，比如下面这张：

把 alt 文本写成“bath and candle（浴缸和蜡烛）”对有视力障碍的读者没有用处，因为这是他们不需要知道的信息。更好的做法是让屏幕阅读器完全忽略它。

但这里有一个重要的点……

如果图片不需要 alt 文本，最佳实践是添加一个空的 alt 属性。这是因为在缺少 alt 属性时，某些屏幕阅读器会读出文件名，而大多数屏幕阅读器则会跳过那些 alt 属性为空的图片。

它看起来是这样的：

[['Text', '<img src="spacer.gif" alt="">']]

想了解更多，请阅读 WebAIM 的这篇指南。

如何撰写优质的 alt 文本

alt 文本并不是什么高深的技术。

遵循以下五条最佳实践，你应该就没问题了。

• 保持简洁。冗长的 alt 文本会让使用屏幕阅读器的人感到烦恼。用尽可能少的词。（如果确实需要长描述，请使用 longdesc 属性。）
• 保持准确。专注于描述这张图片。
• 避免关键词堆砌。这里不是硬塞关键词的地方。
• 不要说明这是一张图片。描述中无需包含“Image of……”或“Picture of……”。Google 和屏幕阅读器都能自己判断出来。
• 避免重复。不要重复图片语境中已经存在的信息。例如，如果你有一张 Steve Jobs 的照片，而图片正下方的文字写着“Steve Jobs”，那就没必要把这段描述再加进 alt 标签里。Google 应该能理解，这个题注实际上就相当于 alt 文本。

你还应该记得给表单按钮添加 alt 文本。否则屏幕阅读器可能会忽略它们，一些访客就无法与你的网站交互。

优质与糟糕的 alt 文本示例

我们通过几个例子来确保理解哪些做法有效、哪些无效。

差： [['Text', '<img src=“cheesecake.png” alt=“picture of cheesecake”>']]尚可： [['Text', '<img src=“cheesecake.png” alt=“cheesecake”>']]好： [['Text', '<img src=“cheesecake.png” alt=“strawberry cheesecake”>']]最佳： [['Text', '<img src=“cheesecake.png” alt=“strawberry cheesecake with cream”>']]差： [['Text', '<img src=“steve-jobs.png” alt=“steve jobs apple iphone ipad mac”>']]尚可： [['Text', '<img src=“steve-jobs.png” alt=“steve jobs”>']]好： [['Text', '<img src=“steve-jobs.png” alt=“apple founder, steve jobs”>']]最佳： [['Text', '<img src=“steve-jobs.png” alt=“apple founder, steve jobs, holding the iphone 4”>']]差： [['Text', '<img src=“amp.png” alt=“image4">']]尚可： [['Text', '<img src=“amp.png” alt=“orange amplifier”>']]好： [['Text', '<img src=“amp.png” alt=“orange amplifier - 30 watts”>']]最佳： [['Text', '<img src=“amp.png” alt=“orange AD30HTC - 30 watt amplifier”>']]

请注意最后一个例子中加入了型号。这是一种很好的做法，尤其适用于电商产品页面上的图片。

如何发现并修复 alt 属性的问题

很多工具都能抓取你的网站并找出缺失的 alt 属性，其中包括 Ahrefs 的 Site Audit。

但是，缺失 alt 文本并不总是问题，因为并非所有图片都需要 alt 文本。

例如，看看这些缺失的 alt 属性：

从文件名就能明显看出，它们不需要 alt 文本。它们是装饰性的，这意味着我们希望屏幕阅读器直接跳过它们。

所以，与其抓取整个网站、纠结于每一个缺失的 alt 属性（大多数网站都有相当多缺失），更好的做法是针对已经有流量的页面审查并改进 alt 标签。

这样做有两个原因：

1. 这些页面有视力障碍读者。 2.4% 的美国公民 有视力残疾。大约每 42 个人中就有 1 个，这意味着平均而言，如果你的页面每月有 10,000 名访客，其中 240 人无法正常获取你的内容。
2. 这些页面有可能获得更多流量。 alt 文本能帮助图片在 Google 图片中更好地排名，从而带来更多流量。哪怕只是让一个月访问量 10,000 的页面提升 1%，也是额外的 100 名访客。

具体流程如下：

第 1 步：找出你自然搜索访问量最高的页面

查看 Ahrefs 的 Web Analytics：

或者 Ahrefs 的 Site Explorer 中的“Top pages（热门页面）”报告。

第 2 步：审查你的 alt 属性

安装免费的 Alt Text Tester Chrome 扩展，加载流量最高的那个页面，然后启用该扩展。

当你把鼠标悬停在任意图片上时，应该就会看到显示的 alt 文本。

如果 alt 属性缺失，你会看到一个警告提示。

检查页面上几张图片的 alt 文本。你很快就能感觉到它们是优化得好、优化得差，还是根本没优化。

例如，滚动这篇文章只需几秒钟，就能看出所有图片都优化得很好……

……而 The Mirror 的这个页面就不是这样了：

第 3 步：对更多页面重复操作

对你网站访问量最高的页面重复这一流程。这应该能让你大致判断出你的 alt 文本优化是扎实的，还是需要改进。

因为大多数网站的流量都集中在少数几个页面上，所以这不会花太长时间。

例如，Ahrefs 博客上仅仅十篇文章就贡献了 51% 的每月自然流量……

……因此我们可以轻松地在几分钟内审查并优化大多数高流量页面的 alt 文本。

最后想法

优化 alt 文本很重要，但它并不是图片 SEO 的全部。你还应该优化文件名、使用响应式图片、考虑懒加载（lazy loading）等等。

想了解更多，请阅读 我们列出的 12 个可落地的图片 SEO 技巧。