实验:图片title和alt属性的使用

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

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

今天上海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值。

 

三、下面这个问题可能是大家经常遇见的疑问

如果某一个图片也是带链接的,Title和Alt这两个属性应该如何处理呢?

这里只是两者都放到一起了而已,前面我们分析都是单独分开的,网站中某一图片带链接的现象很多,比如一些商城类或产品介绍类的网页.下面给给出青岛友浩SEO建议:

1、链接的Title属性可做可不做

前面我们提到,Title就是给链接做个注释,这个时候我们可以做(增加某一关键词的密度)也可以不做(不影响搜索引擎和用户对链接的判断).大家可以根据自己的实际情况进行把握了.

2、图片做上Alt属性

大家可以想下,如果给图片做上了Alt,那么,结合上面两个属性的注释,这时候搜索引擎就会明白这张图片的意思,我们索性把这个图片链接看成文字链接好了(因为已经给图片做上了Alt属性),这个时候,我们再结合Title属性的使用就可以了。

未经允许不得转载:友浩SEO » 实验:图片title和alt属性的使用

打赏

评论 0

评论前必须登录!

登陆 注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏