什么是Alt文本?
Alt文本(替代文本)描述页面上的图像。Alt文本可以帮助视障人士理解图像显示的内容,帮助搜索引擎机器人理解图像内容,并在图像加载失败时出现在页面上。
(这与图片说明形成对比。它总是出现在页面上。)
Alt文本通常是通过图像HTML代码中的Alt属性添加的。
像这样:
< img src = “ image-file-example.jpg”alt= “ alt文本移到这里” >
这就是为什么它有时被称为“alt属性”或“alt标签”。
大多数内容管理系统(cms)都有一个用于所有文本的专用字段。因此不需要直接编辑HTML。
下面是一个来自WordPress的例子:
你也可以在Twitter等社交媒体平台上使用图像替代文本。
以下是Dogs Trust的一个例子:
为什么Alt文本很重要?
Alt文本很重要,因为它使人们和搜索引擎更容易访问图像。即使它们不能被显示。
如果不提供适当的alt文本,使用屏幕阅读器的用户就无法从图像中获取信息。这不公平地排除了有视觉障碍的用户。这会损害你的品牌声誉、流量和转化率。
另外,网页的可访问性对SEO有好处。
谷歌和其他搜索引擎使用alt文本来确定图像描绘(或链接到)的内容。这可以增强他们对你的内容的理解,从而带来更高的排名。
Alt文本对图像搜索引擎优化特别有帮助。,在谷歌Images和其他图像结果中排名很高。
这种类型的曝光可以为你的网站带来有价值的流量。
例如,搜索引擎结果页面(SERP)的“柯基小狗”是由图片主导。链接到所有者的网站。
这些图片中的许多使用关键词“柯基小狗”或“柯基小狗”在他们的全部文字。
因为alt文本在页面优化中很重要,所以它有时被称为“SEO alt文本”。
如何编写Alt文本(最佳实践)
学习如何写所有的文本,提高网站的可访问性和搜索引擎优化。
我们总结了三个alt文本的最佳实践来帮助你写出完美的alt文本:
1. 添加Alt文本到正确的图像类型
不要把所有的文字都写在纯装饰性的图片上(就像下面这张)。这些描述可能会引起视觉障碍用户的分心和困惑,而不是添加有用的上下文。
相反,提供一个null(空)alt属性。像这样:
?
这告诉屏幕阅读器忽略图像。
如果完全不使用alt属性(如下所示),辅助技术可能会读出图像文件名。创造糟糕的用户体验。
?
一定要为所有其他图片写所有的文字——为读者提供额外意义的图片。
例如:
有用文字的图片(例如,社交媒体帖子的截图)
表示功能的图标(例如,购物车图标)
提供补充信息的照片(例如,智能手机尺寸对比)
说明未提及数据的图表
演示过程的图形(例如,如何握筷子)
提示:如果你在Semrush的SEO写作助手中起草内容,该工具会提醒你添加图像或文本。它还提供可读性、搜索引擎优化、原创性和语音语气建议。
2. 描述要简洁
根据Web无障碍倡议组织(WAI)的说法,Alt文本应该是“对图像目的最简洁的描述”。
图片的重要性取决于语境。因此,在编写所有文本时,要考虑到周围的内容和受众。
看看下面这张照片。“做瑜伽的女人”在很多情况下都是合适的。
但在健身指南中,对女性姿势的详细描述可能是必要的。
当你在写文字的时候,想想你会如何在电话里向别人描述一张图片。
不要在所有文本中包含以下详细信息:
图片名称和版权信息——包括在图片说明中
多余的短语,如“image of”或“photo of”(除非格式特别相关)
所有读者都需要的信息——将这些信息添加到标题或正文内容中
已经通过图片说明或正文内容提供的信息
提示:有些人建议在为图像编写所有文本时,最多使用125个字符。这是因为许多辅助技术在125个字符时就会停止阅读所有文本。但这并不是一个严格的限制。如果您需要编写更多内容,请参阅WAI关于复杂图像的建议。
3. 包含关键字
在所有文本中添加相关关键字可以帮助您的图像在谷歌图像结果中排名。
例如,这个文本告诉谷歌,我们的营销漏斗指南包含一个有用的营销漏斗插图:
这意味着它将是一个相关的谷歌图像结果查询相关的营销渠道。
要了解在所有文本中包含哪些关键字,你需要做一些关键字研究。
尝试使用Semrush的关键字魔术工具进行关键字研究。
只需输入与您的图像相关的关键字,然后单击“搜索”。
进入“高级过滤器”,然后进入“SERP功能”。
然后勾选“图像”和“图像包”,然后点击“应用”。
该工具将显示包含您的起始关键字(或变体)的关键字,并生成图像结果。
这些词和短语是你的图像的SEO文本的伟大候选人。只要图片能满足搜索者的需求。
Alt文本示例
让我们来看三个遵循最佳实践的全文本示例。
例1:NASA
这篇博客是关于哈勃太空望远镜拍摄的一张照片。NASA提供了高度描述性的alt文本,以确保有视觉障碍的用户能够理解照片中的内容。
具有明亮核心、旋臂和环绕它的轻微辉光的螺旋星系。下面,由亮蓝色斑块组成的线像触手一样延伸下来。星系刚刚被左边第二个微弱的星系碰到。
例2:互联网无障碍局
互联网无障碍局的主页上有与之合作的品牌的标志。
当用户无法访问这些图像时,alt标记提供了一个替代品。
例3:《卫报》
在这个产品评测中,卫报使用了所有属性和图片说明来给读者和搜索引擎提供他们需要的信息。
Alt text: Pixel 7 Pro背面的铝制摄像头。
图片说明:摄像头栏的设计仍然存在分歧,但毫无疑问,它在人群中脱颖而出。摄影:塞缪尔·吉布斯/卫报
注意,alt文本作为图像的替代品。而标题则提供了额外的信息,比如照片来源。
如何找到和修复丢失的Alt文本
要检查网站上的图片是否缺少所有文本,请使用Semrush的网站审计工具。
输入您的域名并点击“开始审计”。
然后按照提示配置工具。
审计准备好后,单击“Issues”选项卡。
您将看到错误、警告和通知的列表。
搜索“alt attributes”。然后看看你是否有“# images don ‘t have alt attributes”的警告。
如果是这样,请点击“# images”链接查看受影响的url。
点击每个页面标题旁边的“打开链接”图标来查看任何页面或图像。
找到一个不需要所有文本的图像?点击眼睛图标来隐藏警告。
或者使用过滤器、复选框和“隐藏选定”按钮来批量删除警告。
准备好修改所有文本了吗?使用复选框和“发送到…”按钮在Semrush CRM、Trello或Zapier中创建任务。(您可能需要首先设置相应的集成。)
然后通过CMS添加缺失的所有文本。
确保之后重新运行站点审计。只需点击装备按钮,点击“重新运行战役”。看着你的图像和文本警告消失。