Alt文本：它是什么&为什么它对可访问性和搜索引擎优化很重要

什么是Alt文本？

Alt text（替代文本）描述页面上的图像。 Alt文本帮助视障人士了解图像显示的内容，帮助搜索引擎机器人理解图像内容，并在图像加载失败时出现在页面上。

（这与一个图片说明. 它总是出现在页面上。)

Alt文本通常通过alt属性在图像的HTML代码中.

像这样:

alt="Alt文本到这里">

这就是为什么它有时被称为"alt属性"或"alt标签"。”

大多数内容管理系统（Cms）都有一个用于alt文本的专用字段。所以你不需要直接编辑HTML。

这是WordPress的一个例子:

您还可以在Twitter等社交媒体平台上使用图像alt文本。

这是一个例子：狗只信托基金:

为什么Alt文本很重要？

Alt文本很重要，因为它使人们和搜索引擎更容易访问图像。即使它们不能显示。

如果您不提供适当的alt文本，则使用屏幕阅读器的人无法从图像中获取信息。这不公平地排除了视力障碍的用户。这会伤害你的品牌声誉、交通及转换率.

加,网页可访问性对SEO有好处.

Google和其他搜索引擎使用alt文本来确定图像描绘（或链接到）的内容。这可以增强他们对您的内容的理解，从而导致更高的排名。

Alt文本是特别有用的图像SEO-即在Google图片和其他图片结果中排名较高。

这种类型的曝光可以为您的网站带来宝贵的流量。

例如，"corgi puppies"的搜索引擎结果页面（SERP）以图像为主。链接到所有者的网站。

许多这些图像在其alt文本中使用关键字"corgi puppy"或"corgi puppies"。

A photo of a corgi on a webpage, alongside its HTML code. You can see the

因为alt文本在页面优化，它有时被称为"SEO alt文本。”

如何编写Alt文本（最佳实践）

了解如何编写alt文本，以提高您的网站的可访问性和搜索引擎优化。

我们已经收集了三个alt文本最佳实践，以帮助您编写完美的alt文本:

1. 将Alt文本添加到正确的图像类型

不要写纯装饰图像的alt文本（如下图所示）。这些描述可能会导致视觉障碍用户分心和混淆，而不是添加有用的上下文。

而是提供一个null（空）alt属性。像这样:

✅ 高级行政主任写作助理，该工具会提醒您添加图像alt文本。它还提供可读性，搜索引擎优化，原创性和语音建议的语气。

2. 描述性但简洁

Alt文本应该是"图像目的的最简洁的描述"，根据无障碍网页倡议（围）。

图像的重要性取决于上下文。因此，在编写alt文本时，请考虑周围的内容和受众。

考虑下面的照片。替代文本"做瑜伽的女人"在许多情况下都是合适的。

但在锻炼指南中，可能需要详细描述女性的姿势。

在写alt文本时，想想你如何在电话交谈中向某人描述图像。

不要在alt文本中包含以下详细信息:

照片积分和版权信息-请包含在图片说明中

冗余短语，如"image of"或"photo of"（除非格式特别相关）

所有读者需要的信息-将其添加到标题或正文内容中

已通过图像标题或正文内容提供的信息

小费:有些人建议在为图像编写alt文本时坚持最多125个字符。这是因为许多辅助技术停止读取125个字符的替代文本。但它不是一个严格的限制。如果你需要写更多的东西，请参阅WAI的建议复杂图像.

3. 包含关键字

将相关关键字添加到alt文本可以帮助您的图像在Google图像结果中排名。

例如，这个alt文本告诉Google，我们的营销漏斗指南包含有用的营销漏斗图:

An illustration of the marketing funnel alongside its HTML code. You can read the alt text in the code.

这意味着它将是与营销漏斗相关的查询的相关Google图像结果。

要了解要在alt文本中包含哪些关键字，您需要进行一些关键字研究。

尝试使用Semrush's进行关键字研究关键字魔术工具.

只需输入与您的图像相关的关键字，然后单击"搜索.”

去"高级过滤器"然后"SERP功能.”

然后检查"图像"和"图像包"点击前"申请.”

该工具将显示包含您的起始关键字（或变体）的关键字和生成图像结果。

这些单词和短语是您图像的SEO alt文本的绝佳候选者。只要图像将满足搜索者的需求。

Alt文本示例

让我们来看看遵循最佳实践的三个alt文本示例。

示例1：NASA

这篇博客文章是关于哈勃太空望远镜拍摄的照片。 NASA提供了高度描述性的alt文本，以确保有视觉障碍的用户能够理解照片中的内容。

Alt文本:具有明亮核心，旋臂和轻微辉光的螺旋星系围绕着它。下面，由明亮的蓝色斑块组成的股线像触手一样向下延伸。星系只是被左边的第二个微弱的星系所触及。

例子2：互联网无障碍局

互联网无障碍网页局的特色标志的品牌，它的工作。

当用户无法访问这些图像时，alt标签提供了一个替代。

Broken image icons alongside various br和 names, such as Chipotle 和 Godiva. They appear below a subheading that says

例子3：守护者

在本产品评论中，卫报使用alt属性和图片标题给读者和搜索引擎他们需要的信息.

A section of an article about the Pixel 7 Pro. Alt text appears in place of the image, 和 a caption appears below.

Alt文本:像素7pro的背面显示铝相机酒吧.

图片说明:相机栏设计仍然存在分歧，但毫无疑问，它在人群中脱颖而出。照片：Samuel Gibbs/The Guardian

请注意，alt文本充当更换为图像。而标题提供额外费用信息，例如照片信用。

如何查找和修复丢失的Alt文本

要检查您的网站上是否缺少图像的alt文本，请使用Semrush的现场审核工具。

输入你的域名，然后按"开始审核.”

然后按照提示操作配置工具.

审核完成后，请按"问题"tab。

A 现场审核 in Semrush. There's an arrow to the

您将看到错误、警告和通知的列表。

搜索"alt属性。"然后看看你是否有"#images don't have alt属性s"警告。

如果你这样做，请按"#图像"链接查看受影响的Url。

单击每个页面标题旁边的"打开链接"图标以查看任何页面或图像。

找到不需要alt文本的图像？单击眼睛图标以隐藏警告。

The 问题 report in Semrush's 现场审核工具。 A column on the right-h和 side, featuring buttons with eye symbols, is highlighted.

或者使用过滤器、复选框和"隐藏选定"按钮以批量删除警告。

The 问题 report in Semrush's 现场审核 Tool. The

准备好你的alt文本了吗？使用复选框和"发送至…"按钮在Semrush CRM, 特雷洛，或扎皮尔. （您可能需要先设置相应的集成。)

然后通过CMS添加丢失的alt文本。

确保在之后重新运行站点审核。只需点击齿轮按钮，然后点击"重播运动."并观看您的图像alt文本警告消失。