实验：图片title和alt属性的使用|友浩SEO

中国国家书画院平度分院院长：李洪勤先生的书法作品《中国梦》

今天上海SEO的余应磊同学和我公司为国家书画院平度分院制作的网站www.shuhuacn.cn交换友链后，说“怎么没有锚文字啊”。我当时说为他加图片友链（该网站全是图片友链，客户说是这样好看），他的意思应该是说没有图片Alt属性，但我加了title属性。站内图片seo优化可参考《站内图片seo优化应该注意的7点》，这里重点说明title和alt属性。那具体他们有哪些相似与区别呢？对于SEO又有什么影响呢？下面我用实验来说明：

一、我们看下Alt和Title这两个属性各自代表什么意思.

alt属性

1、 alt属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户，以及视觉障碍的用户和使用屏幕阅读器的用户。当图片不显示的时候，图片的替换文字。
2、alt属性值得长度必须少于100个英文字符
3、alt属性是img标签的必须属性，如果没有特别意义的图片，可以写alt=””
4、alt属性是搜索引擎判断图片与文字是否相关的重要依据，alt属性添加到img主要的目的是为了SEO.

5、Alt属性:对图片起注释作用;

title属性

1、title属性并不是必须的。
2、title属性规定元素的额外信息，有视觉效果，当鼠标放到文字或是图片上时有文字显示。
3、title属性并不作为搜索引擎抓取图片的参考，更多倾向于用户体验的考虑。

4、title属性对链接起注释作用.

看了上面的说明后,大家心里可能已经有了自己的答案了.

Alt属性:主要是对图片起注释作用的,因为目前搜索引擎的蜘蛛程序对图片的判断能力还不够,所以这里给图片加上Alt,可以起到给图片命名的作用,让搜索引擎更清楚某一幅图片的意思.

对于用户来讲,如果某一幅图片的URL出错或由于网络的原因打不开,如果该图片有Alt属性,那么,图片出错的位置则会显示该图片的Alt注释内容,这样多用户体验也起到了一定的作用.

Title属性:主要是对链接起到注释或者加强的作用,这里可能会有朋友会问到:”链接本来就是文字,为什么还要进行加强呢?”.其实很多时候我们在调用某一篇内容页面的标题的时候,由于页面的排版或美观,可能只会显示该内容页面的一部分标题文字,那么,这个时候给这个链接做上Title,搜索引擎或者用户对这个链接的理解是不是会更好点呢.

由于搜索引擎是看网页的源代码的,如果在链接或图片中加上Title或Alt属性,这样对某一个关键密度的提升也有一定的帮助(切忌别故意借助这两个属性来增加某一关键词的密度).

二、图片img标签alt与title属性评测实验

图片img标签alt与title属性评测实验代码说明：测试代码时把＜＞分别替换为< >
＜html＞
＜body＞
＜p＞＜img src=”” alt=”图片alt属性”＞＜/p＞
＜p＞＜img src=”” title=”图片title属性”＞＜/p＞
＜p＞＜img src=”” alt=”图片alt属性” title=”图片title属性”＞＜/p＞
＜p＞＜img src=”1.jpg” width=”200″ height=”200″ alt=”图片alt属性”＞＜/p＞
＜p＞＜img src=”1.jpg” width=”200″ height=”200″ title=”图片title属性”＞＜/p＞
＜p＞＜img src=”1.jpg” width=”200″ height=”200″ alt=”图片alt属性” title=”图片title属性”＞＜/p＞
＜/body＞
＜/html＞

图片img标签alt与title属性评测实验结果图片地址出错，没有限定图片大小情况

（一）、图片只有alt属性
1、IE6 浏览器图片显示打叉与alt文字，鼠标移到图片上方有alt文字;
2、360 浏览器5.1测试版(IE8 内核)图片显示打叉与alt文字，鼠标移到图片上方有alt文字;
3、火狐12.0 浏览器图片显示alt文字，鼠标移到图片上方没有alt文字;
（二）、图片只有title属性
1、IE6 浏览器图片显示打叉，鼠标移到图片上方有title文字;
2、360 浏览器5.1测试版(IE8 内核)图片显示打叉，鼠标移到图片上方有title文字;
3、火狐12.0 浏览器显示破损图片标志，鼠标移到图片上方有title文字;
（三）、图片有alt和title属性
1、IE6 浏览器图片显示打叉与alt文字，鼠标移到图片上方有title文字;
2、360 浏览器5.1测试版(IE8 内核)图片显示打叉与alt文字，鼠标移到图片上方有title文字;
3、火狐12.0 浏览器显示alt文字，鼠标移到图片上方有title文字;

图片地址正常，并且限制图片大小情况

（一）、图片只有alt属性
1、IE6 浏览器图片显示正常，鼠标移到图片上方有alt文字;
2、360 浏览器5.1测试版(IE8 内核)图片显示正常，鼠标移到图片上方有alt文字;
3、火狐12.0 浏览器图片显示正常，鼠标移到图片上方没有alt文字;
（二）、图片只有title属性
1、IE6 浏览器图片显示正常，鼠标移到图片上方有title文字;
2、360 浏览器5.1测试版(IE8 内核)图片显示正常，鼠标移到图片上方有title文字;
3、火狐12.0 浏览器图片显示正常，鼠标移到图片上方有title文字;
（三）、图片有alt和title属性
1、IE6 浏览器图片显示正常，鼠标移到图片上方有title文字;
2、360 浏览器5.1测试版(IE8 内核)图片显示正常，鼠标移到图片上方有title文字;
3、火狐12.0 浏览器图片显示正常，鼠标移到图片上方有title文字;一般用法如下代码：
＜html＞
＜body＞
＜p title=”给普通文字提示”＞文字＜/p＞
＜a href=”http://www.pingdu.co/” title=”关键词”＞文字＜/a＞
＜/body＞
＜/html＞
SEO优化总结图片img标签alt与title属性评测实验alt和title都是提示性语言标签，它们之间是有区别的。alt是当图片不存在时的替代文字;title是对图片的描述与进一步说明;在使用360 浏览器5.1测试版(IE8 内核)看只有alt属性的图片没有显示，而测试过程却能显示，这是让SEO优化困惑的，如果有知道的朋友麻烦告知，谢谢。而火狐12.0 浏览器alt属性是不显示的，只显示title属性;在ie6，当鼠标经过图片时title和alt的值都会显示。如果alt和title属性同时存在，显示的是title值。