图片标签alt属性与title属性的用法浅析

发布时间:2020-12-11编辑:脚本学堂
本文介绍下,在html页面中,有关图片标签alt属性与title属性的用法,学习下这二上标签的使用场景与注意事项。感兴趣的朋友参考下。

说明:
在页面中的图片用alt属性还是用title属性,是很多做网站和SEO的人很困苦的问题。

alt属性是对图片起到一个注释的作用,现在搜索引擎对图片的读取功能有限,当要告诉搜索引擎这个图片是什么时就会用到alt属性,同时对于seo也是很有好处的,可以适当的增加某个关键词密度(切忌关键词堆砌)。

其实当用到一些站长工具时,会提示首页有多少个图片没有加alt属性。最近的百度统计的seo建议里面也会检测这一项,可想而知alt属性对于seo的作用是很大的。

title属性,当鼠标放到图片上时会显示title属性里面的文字,官方对title属性定义是注释图片链接的作用,但是当一个图片没有链接时,也需要用到title属性,这就关乎到用户体验了。

title属性有一个很好的用途,即为链接添加描述性文字,特别是当连接本身并不是十分清楚的表达了链接的目的。
这样就使得访问者知道那些链接将会带他们到什么地方,他们就不会加载一个可能完全不感兴趣的页面。

另外,一个潜在的作用:为图像提供额外的说明信息,比如日期或者其他非本质的信息。
title属性值可以比alt属性值设置的更长。

注意:有些浏览器会截断过长的文字(比如工具提示或其他)。比如Mozilla核心的浏览器只能显示最先的60个字符。这被认为是一个Mozilla bug,这是你要注意的。

title属性就是为用户体验而生的,对于seo没什么作用,有的人说他也能增加关键词密度,这点我不敢苟同,因为搜索引擎不认这个属性,从百度统计的seo建议就可以看出来。

那什么时候用到title标签呢?当图片有链接时要用到,这样用户点到这张图片时就会显示文字,用户就可以根据文字来判断这个加载页面是否是自己感兴趣的,减少无用页面的加载。当图片没有链接,同时图片旁边没有文字标题或者文字标题很长显示不全时,也要用到title属性来告诉用户这个图片是什么。title属性为用户体验而生没有错吧。

alt属性起到利于seo的作用,title属性起到提高用户体验的作用。那分别什么时候用呢?alt属性毫无疑问,有图片的地方都要用到alt属性;
title属性在一种情况下可以不要用,那就是图片没有链接,同时图片旁边已经有文字说明,此时就不要多此一举去告诉用户这个图片说明什么了。