网页图片分类和ALT属性

对网页上图片的ALT属性值的内容应该是什么，这个问题其实一直很困扰，特别是文章的特色图片，由于这类图片不需要caption，就更不知道ALT属性的内容应该是什么了。

WordPress的最新版本在处理图片属性的时候，多了一个小提示，如果图片仅作为装饰用，请留空。这个小提示是这样的：

“如果图片仅作为装饰用，请留空。”

打开链接详情：https://www.w3.org/WAI/tutorials/images/decision-tree/

原来网页上的图片还有这么多分类，按照W3的建议，不同分类的图片的ALT属性设置也不尽相同。具体如下；

（1）信息类图片

这类图片在网页上的作用是提供信息，比如文章内页的图片，一般都是围绕文章主题的一些图片，图片本身含有要传递给读者的信息。这类图片的ALT属性内容应该包含此图片的核心信息。

（2）装饰类图片

这类图片的作用不是提供信息，而是装饰页面。典型如特色图片，一个与文章内容没有关系，可有可无的图片。这类图片的ALT属性内容应该就是空，alt=””。

（3）功能性图片

图片网页上的打印按钮，提交表单的按钮，可能就是图片，点击图片实现某种功能。这类图片的ALT属性应该是描述背后的链接的功能说明。

（4）有文字的图片

通过CSS或者JS技术，我们现在可以将文字直接浮在图片上面。W3的建议是，不要去使用有文字的图片，除非是LOGO图片；对于这类图片的ALT属性，跟图片上的文字一样即可。

（5）复杂图片

比如图表，各种曲线的图片等等。这类图片跟信息类图片相似，需要在ALT属性中写入这个复杂图片所传递的核心信息。

（6）图片组

如果多张图片传递的是相同的一个信息，每一张图片的ALT属性值都应该是这一个完整信息的描述。

（7）图片地图（有多个可点击区域的图片）

图片的ALT属性值应该是整个图片的内容核心，同时，每一个可点击区域的ALT值应该用来描述目的链接。

个人感觉，重点需要关注的第2类，装饰类图片的ALT信息。只有这一类图片的ALT建议是空！

这几年做站的经验，几乎所有的SEO教学内容都在说一个事情，所有的图片都需要有ALT属性值，这是必须的，而且里面还要放置关键词！现在可能就不这样认为了。

W3对网页图片做这样的分类，有一个目的，就是服务各类残障人士，比如看不见的人，他们使用屏幕阅读器（sreen reader）浏览网页，在遇到图片的时候，会将ALT属性值读出来，而如果这个图片只是装饰作用，读出来是没有意义的。

Google的指导文件说：”use text that fulfills the same function as the image”。看不见的人，在浏览网页的时候，完全可以忽略装饰性的图片，因此对这类图片的ALT属性值，应该设置为空！请参考这篇文章：https://varvy.com/titleandalttags.html#alt。

有没有被说服……

虽然各类SEO工具还会提示说，网页上有图片没有ALT属性值，但还是决定对装饰性的特色图片，使用alt=””。

未经允许不得转载：下一个课程 » 网页图片分类和ALT属性