关于网站图片标签alt与title属性的应用问题
发布人：管理员 发布时间：2012-12-7
关于网站搜索引擎优化设置,搜索引擎对图片收入是通过alt属性来识别的 ,所以在图片alt属性中用包含关键字的简要文字说明,是页面优化的一部分。如果想要做的更好,可以在title属性里,进一步对图片说明。今天搜索引擎优化优化就和大家分享图片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="100" height="100" alt="图片alt属性"></p>
<p><img src="1.jpg" width="100" height="100" title="图片title属性"></p>
<p><img src="1.jpg" width="100" height="100" alt="图片alt属性" title="图片title属性"></p>
</body>
</html>
图片img标签alt与title属性评测实验结果
图片地址出错,没有限定图片大小情况
一、图片只有alt属性
1、IE6 浏览器图片显示打叉与alt文字,鼠标移到图片上方有alt文字;
2、360 浏览器5.1测试版(IE8 内核)图片显示打叉与alt文字,鼠标移到图片上方有alt文字;
3、火狐浏览器图片显示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、火狐浏览器图片显示正常,鼠标移到图片上方有title文字;
三、图片有alt和title属性
1、IE6 浏览器图片显示正常,鼠标移到图片上方有title文字;
2、360 浏览器5.1测试版(IE8 内核)图片显示正常,鼠标移到图片上方有title文字;
3、火狐浏览器图片显示正常,鼠标移到图片上方有title文字;
SEO优化总结图片img标签alt与title属性评测实验
alt和title都是提示性语言标签,它们之间是有区别的。alt是当图片不存在时的替代文字;title是对图片的描述与进一步说明;在使用360 浏览器5.1测试版(IE8 内核)看只有alt属性的图片没有显示,而测试过程却能显示,这是让SEO优化困惑的,如果有知道的朋友麻烦告知,谢谢。而火狐12.0 浏览器alt属性是不显示的,只显示title属性;在ie6,当鼠标经过图片时title和alt的值都会显示。如果alt和title属性同时存在,显示的是title值。
搜索引擎优化扩展补充:alt属性一般用于图片提示,title还可以用于给普通文字或者链接文字提示。
一般用法如下代码:
<html>
<body>
<p title="给普通文字提示">文字</p>
<a href=http://www.35wzw.com title="给链接文字提示">文字</a>
</body>
</html>
图片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="100" height="100" alt="图片alt属性"></p>
<p><img src="1.jpg" width="100" height="100" title="图片title属性"></p>
<p><img src="1.jpg" width="100" height="100" alt="图片alt属性" title="图片title属性"></p>
</body>
</html>
图片img标签alt与title属性评测实验结果
图片地址出错,没有限定图片大小情况
一、图片只有alt属性
1、IE6 浏览器图片显示打叉与alt文字,鼠标移到图片上方有alt文字;
2、360 浏览器5.1测试版(IE8 内核)图片显示打叉与alt文字,鼠标移到图片上方有alt文字;
3、火狐浏览器图片显示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、火狐浏览器图片显示正常,鼠标移到图片上方有title文字;
三、图片有alt和title属性
1、IE6 浏览器图片显示正常,鼠标移到图片上方有title文字;
2、360 浏览器5.1测试版(IE8 内核)图片显示正常,鼠标移到图片上方有title文字;
3、火狐浏览器图片显示正常,鼠标移到图片上方有title文字;
SEO优化总结图片img标签alt与title属性评测实验
alt和title都是提示性语言标签,它们之间是有区别的。alt是当图片不存在时的替代文字;title是对图片的描述与进一步说明;在使用360 浏览器5.1测试版(IE8 内核)看只有alt属性的图片没有显示,而测试过程却能显示,这是让SEO优化困惑的,如果有知道的朋友麻烦告知,谢谢。而火狐12.0 浏览器alt属性是不显示的,只显示title属性;在ie6,当鼠标经过图片时title和alt的值都会显示。如果alt和title属性同时存在,显示的是title值。
搜索引擎优化扩展补充:alt属性一般用于图片提示,title还可以用于给普通文字或者链接文字提示。
一般用法如下代码:
<html>
<body>
<p title="给普通文字提示">文字</p>
<a href=http://www.35wzw.com title="给链接文字提示">文字</a>
</body>
</html>
上一篇：谈网站用户体验的三个要素
下一篇：如何对网站进行测试
