img title alt 区别 图片img标签alt与title属性评测实验

SEO优化是慢工也是细活。细节做的好,如鱼得水,做的不好,举步维艰。做SEO优化的都知道,搜索引擎对图片理解是通过alt属性,所以在图片alt属性中用包含关键字的简要文字说明,也是页面优化的一部分。如果想要做的更好,可以在title属性里,进一步对图片说明,相关知识点SEO优化在《图片优化方法|百度图片优化》文章里有详细说明。今天SEO优化就和大家分享图片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属性

img title alt 区别 图片img标签alt与title属性评测实验

1、IE6 浏览器图片显示正常,鼠标移到图片上方有title文字;

2、360 浏览器5.1测试版(IE8 内核)图片显示正常,鼠标移到图片上方有title文字;

3、火狐12.0 浏览器图片显示正常,鼠标移到图片上方有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值。

SEO优化扩展补充:alt属性一般用于图片提示,title还可以用于给普通文字或者链接文字提示。

一般用法如下代码:

<html>

<body>

<p title="给普通文字提示">文字</p>

<a href="http://www.**.org/" title="给链接文字提示">文字</a>

</body>

</html>

本文由SEO优化原创,文章地址http://www.fqseo.org/652.html,转载请保留链接!

  

爱华网本文地址 » http://www.aihuau.com/a/4310571/467139161.html

更多阅读

怎样区别电容屏与电阻屏 电容与电阻的区别

电阻屏:电阻屏是靠点击按压来操作的,也就是说,屏幕感受到你手指或者触控笔的压力,然后接受操作。就是要对屏体造成压力,就会产生电流从而形成触摸。 电容屏:电容屏是靠静电感应来操作的,也就是说,屏幕感受到你手指的静电,然后接受操作。触摸

喷绘图片 写真与喷绘的区别

写真和喷绘本是同属于喷绘,但是写真一般指室内喷绘,喷绘多指户外喷绘;那么写真和喷绘到底有哪些区别呢?今年我经常有做喷绘,所以对这一块有些大概的了解,下面跟大家分享下喷绘和写真的区别。写真与喷绘的区别――工具/原料喷绘画面写真

火车硬卧图片 怎么样区别榨汁机与豆浆机

怎么样区别榨汁机与豆浆机――简介 随着人们健康认识的增强,为了卫生,喝的放心,纷纷选择家庭自制果汁、豆浆。榨汁机和豆浆机外表看起来相似,很多人却不懂得如何去区分。今天,和大家分享一下榨汁机和豆浆机的区别。怎么样区别榨汁机与豆

声明:《img title alt 区别 图片img标签alt与title属性评测实验》为网友影孓分享!如侵犯到您的合法权益请联系我们删除