什么是Alt Text（替代文本）？
Alt text（alternative text替代文本），也叫做“alt attributes”（“alt属性），“alt descriptions”（“alt描述”），还有严格意义来讲不正确的“alt tags”（“alt标签”）。替代文本被用在HTML代码里去描述网页中的图片的内容及功能。
替代文本的用处：
- 给图片添加替代文本是网页可访问性的首要原则。替代文本可以帮助视力受损在使用屏幕阅读器的用户更好的理解页面上的图片。
- 当图片文件加载错误的时候，替代文本将会代替图片展示。
- 替代文本提供图片背景/描述给搜索引擎爬虫，帮助它们更准确的去索引图片。
标记黄色的文本就是左侧图片的替代文本。
代码示例
<img src= “pupdanceparty.gif” alt= “Puppies dancing”>
最佳样式
替代文本最好的样式就是足够的具有描述性，但是不包含任何垃圾性质的关键词堆积。如果你闭上眼睛，听着别人给你读替代文本，然后你可以精准的想象出那张图片，那么你就在正确的轨道上。
来看一下对于以下蓝莓薄饼的替代文本示例：
及格：<img src= “pancakes.png” alt= “pancakes”>
这个替代文本仅仅是“及格”因为它具备描述性。这张图片的确是一沓薄饼，但是还可以描述得更多。
良好：<img src= “pancake.png” alt= “Stack of blueberry pancakes with powdered sugar”>
这个替代文本比起刚才那个更好是因为它很具象的描述了图片里的内容。它不仅仅是一沓“pancakes”（薄饼）；它是一沓撒了糖分的蓝莓薄饼！
不建议：
<img src= “pancakes.png” alt= “”>
or
<img src= “pancakes.png” alt= “pancake pancakes pan cake hotcakes hotcake breakfast food best breakfast top breakfasts breakfast recipes pancake recipe”>
以上的例子都是不建议使用的。第一个代码没有包含任何替代文本（注意引号内是空的）。第二个例子则是一个关键词堆积的替代文本。
为什么替代文本很重要？
- 易访问性
替代文本是易访问设计的宗旨之一。它最初（和最主要）的目的是为了给无法看到图片的访客描述图片的内容。这包括屏蔽图片的屏幕阅读器和浏览器，也包括视力有缺陷或者是无法在视觉上分辨图片的用户。为图片添加替代文本可以为用户（不管是否存在视觉问题）更好的使用你的网站。
- 图片SEO
为图片添加替代文本可以创作一个好的用户体验，但是也可以帮助你获得外显与隐性的SEO好处。在完善图片标题和文件名之余，为图片添加替代文本也是图片SEO的一种。
虽然搜索引擎图像识别技术在这些年有很大的进步，搜索爬虫还是无法像我们那样“查看”一个网页上的图片，所以想着让它们自己去理解图片是不明智的。如果爬虫不理解或者是理解了错误信息，可能为错误的关键词排名和错失排名的机会。
实例演示：Google看到以下图片会解读为一个打着领带戴着眼镜坐着的男士。
《The Office》里的Jim Halpert
如果你想要对 “Jim Halpert’s impersonation of Dwight Schrute”（Jim Halpert扮演Dwight Schrute）这个短语进行排名，你需要将想要排名的词组描写出来，帮助搜索引擎去了解这张图片。
也意味着，替代文本提供了一个包含目标关键词的机会。页面关键词部署还是搜索引擎排名因素的一个重点，所以在撰写替代文本时要在描述图片的同时尽可能包含你的目标关键词。
Article: https://moz.com/learn/seo/alt-text
Feature Images: https://www.rnib.org.uk/accessibility-guidelines-alt-text-what-you-need-know
Write a Comment