如何为 SEO 和可访问性编写替代文本

已发表: 2022-04-28

带有字母骰子的白色表面,拼出替代文本

替代文本经常进入 SEO 内容优化讨论。 这些看似无关紧要的 alt 属性旨在提高网站的可访问性,但可能会对您网站的 SEO 和可用性产生影响。 为了帮助您充分利用您的替代文字,我们将介绍如何编写替代文字以最大限度地发挥 SEO 潜力并提高您网站的可访问性。

什么是替代文字?

检查窗格中的替代文本示例

替代文本或替代文本是在 HTML 代码中图像的 IMG 标记的 ALT 属性中写入的图像描述。

也称为“alt 属性”或“alt 描述”,如果图像未加载或用户视力受损,这些文本描述提供有关网页上图像的外观和功能的信息。

替代文本的用途

这些 alt 属性可能位于页面 SEO 清单的最前沿。 然而,替代文本的推动力始于 2006 年,当时联合国审计了世界上最受欢迎的网站,发现很少有网站能够平等地访问他们为视障用户提供的信息。 从那时起,该文本主要用于:

可访问性的替代文本

带有蓝色按钮的键盘,表示可访问性,而不是顶部带有迷你地球仪的输入

从失明到色盲的视觉障碍的互联网用户依靠替代文本来获得对网站内容的完全访问权限。 屏幕阅读器用户和其他辅助技术用户已大声朗读替代文本。 这为屏幕阅读器用户提供了页面上所有信息的更清晰图片。

使用屏幕阅读器浏览网站可以让您更好地了解用户在依赖屏幕阅读器时的体验。

加载问题和用户体验的替代文本

带有可见的遛狗替代文字的损坏的图像图标

如果图像文件无法加载,则其替代文本将在其不存在时显示。 如果用户带宽低或选择关闭浏览器图像以保存数据,这可能非常有用正如视障用户依靠此替代文本来填写图像的目的和内容一样,互联网连接速度较慢的用户也不会因为使用替代文本而错过图像,从而获得更好的整体用户体验。

此外,当替代文本代表图像时,它会丰富您的内容并为读者提供对文本的更全面的理解。

图像 SEO 的替代文本

网络爬虫使用 NLP 来读取 alt 文本 HTML,以更好地理解图像是什么、图像的用途以及图像的上下文,从而更好地索引和获得更好的图像搜索结果。

这可以让爬虫更好地了解您的网页,并让您的图片有机会出现在 Google 图片搜索中。

替代文字示例

具有讽刺意味的是,了解如何创建良好的替代文本通常需要一种展示-不讲的方法。 因此,这里有一些带有 alt 标签文本的图像示例:

寒冷的早晨,小猎犬站在寒冷的田野里

alt=”在寒冷的早晨,小猎犬站在结霜的田野里。”

这是它在 HTML 中的样子:

小猎犬的替代文字

天地尊严雕像

alt="地天尊像"

明确的证据:大西洋洋流携带墨西哥湾流

alt=”<p>明确的证据:大西洋洋流携带墨西哥湾流</p>”

格式化替代文本

大多数 CMS 会为您将 alt 文本格式化为 HTML。 但是,要实现 alt 文本,您可以将以下代码插入到 IMG 标记中:

< img src =”file” alt =”add text” width =”” height =””>

如何写出好的替代文字

编写好的替代文本不需要创意写作或编码方面的专业知识。 不过,它确实需要您通过新镜头查看图像。

一种方法是想象您正在通过电话向某人描述图片。 当你这样做时,请记住你的听众是否会从对图像目的的解释中受益。

考虑到可访问性和 SEO,如何使您的 alt 文本更好?

1. 尽可能具有描述性。

更具描述性的替代文本为用户提供了对图像的更好理解。 在构建描述性替代文本时,请包括使图像重要、独特的原因以及它如何丰富文本。

我们都同意代表很重要。 屏幕阅读器用户还想知道品牌何时包含在其图像中。 因此,请务必在描述中包含相关的性别和种族。

2. 保持简洁,但不要太短。 忽略无关的信息。

左边是鲸鲨,右边是图片的替代文字

上面的示例太长了,如果改用标题标签或长描述标签,可能会有所帮助。

最好的替代文本最多是一个或两个短语(或一行替代文本)。 在构建替代文本时,请考虑给定的内容、信息优先级以及它如何通知网页内容。 通过省略内容中包含的任何内容来减少冗余。

同样,考虑图像和文章的目的是关键。

请记住,替代文字不是标题。 如果您需要提供来源信用或来源引文,请为该信息使用标题。

3. 使用你的目标关键词。

马拉松跑鞋相关关键词截图

如果您的目标关键字在图像中很明显,请将其包含在您的替代文字中。 正如我们所指出的,网络爬虫将读取这些属性以更好地了解您的内容。

请记住,即使在图像搜索方面,长尾关键字也更容易排名。

例如,您可以尝试对“张开嘴的鲸鲨”进行排名,而不是对“鲸鲨”进行排名。

4. 不要塞满你的关键词。

关键字填充从来都不是一个好主意。 尤其是当它使用户误入图像所描绘的内容时。 始终以适当且信息丰富的替代文本为目标,以在需要时用含义代替图像。

带有右侧检查菜单的狗玩具,突出显示替代文字

此外,请记住,Google NLP 非常擅长确定单词之间的语义关系,因此,如果您的图像与目标关键字相关,则您的替代文本也应该是相关的——结果应该是对 Google 索引系统的自然信号。

例如,注意上方图片中的替代文字提到了“重型狗咀嚼玩具”。 谷歌在“重咀嚼狗玩具”的搜索查询中显示了这张图片,这在语义上与原始查询相关。

Bad alt text = 关键字填充:alt =“自定义狗标签,自定义狗 ID 标签,自定义狗 ID。”

5. 不用解释是照片。

许多人犯的一个错误是在替代文本中包含“照片”、“图片”或“图像”。 这不是必需的。 你的 alt 标签表明它是一张照片,所以这些只是增加了不必要的冗长和冗余。

6. 使用 longdesc="" 进行冗长的描述。

有时图像会受益于替代文本中更长的描述,从而带来更好的用户体验。 例如,不附有博客的信息图不会增加价值,除非解释清楚。

对于这些实例,您将需要使用 longdesc="" 标签。

7. 也描述按钮。

按钮通常是嵌入了文本的图像。 这些属于文本图像的类别,这意味着您需要让您的用户知道他们所说的内容才能使它们有用。

为您的用户提供可访问的按钮替代方案:

<输入类型= “” src= “”名称= “”

高度= “”宽度= “” alt= “按钮上的文字” >

8. 避免拼写错误和拼写错误的单词。

校对和正确的拼写会妨碍屏幕阅读器正确传达图像含义的能力。 此外,如果不加以检查,您的 alt 属性中的拼写错误可能会成为图像 SEO 灾难。

9. 考虑图像的类型

虽然您不需要指出您正在描述图像,但您可能需要提及图像的类型是否是唯一的。 您可能要提及的一些图像形式包括:

  • 插图
  • 图形和图表
  • 绘画或其他美术
  • 地图
  • 信息图表
  • GIF 和动画

关于替代文本,您还需要了解什么?

随着时间的推移,编写有效的替代文本将成为第二天性。 但是,了解何时使用图像替代文本、何时跳过它以及其他图像最佳实践也可以改善您网站的 SEO 和可访问性。

避免仅包含文本的图像。

不该做什么:

仅带引号的替代文本的不良示例

添加屏幕截图、PNG 或 JPEG 文本可能很诱人。 但是,网络爬虫永远不会读取此文本。 此外,由于您不想从图像中的信息中排除视障者,因此您需要将该图像的文本键入到 alt 文本标记中。

何时不添加替代文本

装饰图像不需要包含替代文字。 这是因为图像的内容并没有增加网页内容的含义。 但是,您应该在 HTML 中包含一个空的或 null 的 alt 属性。 这个空的替代文本将向屏幕阅读器发出信号,不要阅读图像的描述。

您可以将空 alt 属性写为:alt=“”或 alt=””

您可能还希望对图像使用空 alt 属性,该图像是旁边带有文本版本的链接。

您需要视频的替代文字吗?

不可以,但您需要为听障用户、说其他语言的用户以及无法播放音频的观众提供视频的转录。

如何检查图像的替代文本或其他站点的替代文本

要阅读图像的替代文本,您需要做的就是右键单击图像并选择“检查”或“检查元素”。 这将打开 HTML 和 CSS 元素检查工具。 在 Mac 上,您还可以使用 Control + 单击。

您还可以使用可访问性检查器来解决可访问性问题。

始终考虑图像的上下文

在提供深思熟虑的替代文本时,请考虑图像的目的。 这也为您提供了更多使用目标关键字的机会。

例如,如果博客的目的是比较狗粮的质量,您的关键字是优质狗粮,而您的图片是两碗狗粮进行比较,则可以使用替代文字“一碗优质狗粮”为了比较的目的,放在一碗质量较低的食物旁边。” 这使您可以顺利整合关键字而无需填充。

替代文字与图像标题相同吗?

不会。即使在 Alt 文本仅存在于您的 HTML 中时加载图像时,站点用户也可以看到图像标题。 字幕的目的是提供版权信息或理解图像内容所需的解释。

如何在 WordPress 中添加替代文本

在 WordPress 中添加图像替代文本很简单。 上传图片时,您可以在将图片插入页面之前添加图片替代文本。 某些版本的 WordPress 在图像缩略图旁边包含图像 alt 属性菜单。 其他包括缩略图屏幕底部的菜单。

一些体面到有效的替代文本模型

当谈到替代文本时,质量水平各不相同。 您可以选择体面的替代文字,也可以努力为您的用户和 SEO 提供最佳替代文字。 以下是一些基本替代文本模型的示例:

棕褐色贵宾犬在草地上快乐地玩耍,它的皮带仍然系着

不好:alt=”dog”

更好:alt =“带皮带的棕色狗”

最佳:alt =“棕褐色贵宾犬在草地上快乐地玩耍,皮带仍然系着”

一位黑人母亲帮助儿子做作业的插图,以展示参与其中的父母的力量

不好:alt =“有书的人”

更好:alt=“母子做作业”

最佳: alt =“一位黑人母亲帮助儿子完成家庭作业的插图,以展示参与其中的父母的力量。”

一个蓝色的咖啡杯,左边有咖啡,坐在木桌上,对面有一支笔,中间有一张餐巾纸,上面写着设定目标,而不是限制

不好:alt=”杯子、餐巾纸和笔的图片”

更好:alt =“一个蓝色的咖啡杯,旁边是一张带有书写和笔的餐巾纸”

最佳:alt =“一个蓝色的咖啡杯,左边有咖啡,坐在木桌上,对面有一支笔,中间有一张餐巾纸,上面写着设定目标,而不是限制”

替代文本:更好的用户体验和 SEO

跳过或匆忙构建图像的替代文本很容易。 但这样做会损害您的网页访问者和您的 SEO。 我们敦促您将替代文本视为改进每个网页的一种方式。 为搜索引擎优化图像包括通过替代文本为网络爬虫提供上下文。 此外,许多人依靠替代文本来充分理解您的网站并与之互动。 如果图像无法加载或用户有视觉或认知障碍,替代文本会通过代替图像来增加可访问性。