skip to Main Content
如何写出好的替代文本(Alt Text)?

如何写出好的替代文本(Alt Text)?

上一篇文章讲到什么是替代文本(Alt Text),这一篇文章将讲解如何写出好的替代文本。

 

  1. 尽可能的详细描述图片。替代文本最首要的是为无法看到图片的用户提供图片的文字解释。如果一张图片并没有传达任何的意思/价值,只是因为网页设计所需存在的,它应该出现在CSS中,不是HTML中。
  2. 保持相对的简短。许多大众屏幕阅读器会在替代文本的125个字符处做出裁剪,所以最好是保持或者低于125个字符。
  3. 使用关键词。替代文本提供你又一个在页面中包含目标关键词的机会,也同时是给搜索引擎一个表明你页面与特定搜索请求高度相关的信号。虽然你的首要是描述和提供图片的背景,但请至少在页面中的一张图片的替代文本中包含关键词。
  4. 避免关键词堆积。Google不会因为写的不好的替代文本去因此扣你的分数,但是你可能会因为在替代文本中进行大量相关关键词的堆积而受到惩罚。注重在撰写具有描述性的,尽可能提供图片背景的替代文本,以及包含你的目标关键词即可。
  5. 不要使用图片作为文字。这比较不是一个替代文本的实践,更多的是一个SEO友好的网页开发原则。因为搜索引擎无法读取你图片中的文字,你应该避免使用文字图片。如果你需要这么做,那么请在替代文本中解释你图片中文字的内容。
  6. 不要在替代文字中包含 image of, picture of等短语。替代文字已经知道是指的图片,不需要再说明。
  7. 不要忘记longdesc= “”.使用longdesc= “”标签,可以为复杂的图片写更长的描述。
  8. 不要忘记表格按钮。如果你网站上的表格使用一张图片作为 “submit”按钮,给它一个替代文本。图片按钮应该有个替代文本描述按钮的用途,例如, “search”, “apply now”, “sign up”等。

 

一个好的替代文本是怎样的?

我们来看一下几个替代文本的例子:

替代文本示例

及格的替代文本:<img src= “bird.png” alt= “Rooster”>

良好的替代文本:<img src= “bird.png” alt= “Rooster crowing”>

优秀的替代文本:<img src= “bird.png alt= “Red-crested rooster crowing”>

 

替代文本示例

及格的替代文本:<img src= “escalator.jpg” alt= “man on escalator”>

良好的替代文本:<img src= “escalator.jpg” alt= “man walking on escalator”>

优秀的替代文本:<img src= “escalator.jpg” alt= “man wearing backpack walking down escalator”>

 

替代文本示例

及格的替代文本:<img src= “kwe.png” alt= “kw explorer”>

良好的替代文本:<img src= “kwe.png” alt= “keyword research in Keyword Explorer”>

优秀的替代文本:<img src= “kwe.png” alt= “Moz Keyword Explorer tool for SEO keyword research”>

 

Article: https://moz.com/learn/seo/alt-text

Feature Images: https://www.suntech.org.ng/2018/08/05/alt-text-what-is-it-and-do-i-need-to-use-it/

发表评论

电子邮件地址不会被公开。

Back To Top