SEO优化是慢工也是细活。细节做的好，如鱼得水，做的不好，举步维艰。做SEO优化的都知道，搜索引擎对图片理解是通过alt属性，所以在图片alt属性中用包含关键字的简要文字说明，也是页面优化的一部分。如果想要做的更好，可以在title属性里，进一步对图片说明，相关知识点SEO优化在《图片优化方法|百度图片优化》文章里有详细说明。今天SEO优化就和大家分享图片img标签alt与title属性评测实验。 图片img标签alt与title属性评测实验代码' G9 Z; N! R% s" `+ S! N0 ]
说明：测试代码时把< >分别替换为< >' N I% R, Y5 X1 W* c
<html>3 }$ p0 \ X7 o
<body>5 l9 X7 m+ p& F% w6 N, j. q
<p><img src="" alt="图片alt属性"></p>
$ j) T; i) ]5 @+ Z( {( C <p><img src="" title="图片title属性" ></p>/ l1 B3 I {. |' Y. K
<p><img src="" alt="图片alt属性" title="图片title属性"></p>
2 F6 u" S; O, o( i <p><img src="1.jpg" width="200" height="200" alt="图片alt属性"></p>
2 p' h: w7 u6 c$ }2 m <p><img src="1.jpg" width="200" height="200" title="图片title属性" ></p>3 N% O6 |! x% m# ]: L, C
<p><img src="1.jpg" width="200" height="200" alt="图片alt属性" title="图片title属性" ></p>0 W4 U3 u" b2 d* k, E0 j; A
</body>
. z; {' I1 |) x0 z9 ^% k1 I; l </html>
) |7 A) v4 `7 x 图片img标签alt与title属性评测实验结果
/ M. u' m4 i! p! K0 U0 v$ } 图片地址出错，没有限定图片大小情况: j( E& ~5 `& g: d
一、图片只有alt属性- r( o8 j; z" e
1、IE6 浏览器图片显示打叉与alt文字，鼠标移到图片上方有alt文字;" @5 P5 n4 S& s. O) w% Q
2、360 浏览器5.1测试版(IE8 内核)图片显示打叉与alt文字，鼠标移到图片上方有alt文字;
2 P4 r( H3 [/ Q G 3、火狐12.0 浏览器图片显示alt文字，鼠标移到图片上方没有alt文字;4 f( `6 q. E0 p: [! z. ?: d
二、图片只有title属性, ^, x Z- }1 q6 g% e5 w
1、IE6 浏览器图片显示打叉，鼠标移到图片上方有title文字;
4 G* Q& `# t! d3 H) x# V) p* E 2、360 浏览器5.1测试版(IE8 内核)图片显示打叉，鼠标移到图片上方有title文字;" ^, w- d7 R9 O( q* b3 d( m {
3、火狐12.0 浏览器显示破损图片标志，鼠标移到图片上方有title文字;, l0 ~( n- t; W3 v
三、图片有alt和title属性! n: w; u. |2 e! ?$ U6 h
1、IE6 浏览器图片显示打叉与alt文字，鼠标移到图片上方有title文字;' J: y4 s* V ~) v
2、360 浏览器5.1测试版(IE8 内核)图片显示打叉与alt文字，鼠标移到图片上方有title文字; l' ~( T% m9 Q
3、火狐12.0 浏览器显示alt文字，鼠标移到图片上方有title文字;: M; r6 `5 X0 T/ X( ?! o
图片地址正常，并且限制图片大小情况
9 Z) ?8 D) T+ F& f 一、图片只有alt属性
' m8 Q7 K+ _9 d* F0 W 1、IE6 浏览器图片显示正常，鼠标移到图片上方有alt文字;
; F/ g1 M6 F4 j; q 2、360 浏览器5.1测试版(IE8 内核)图片显示正常，鼠标移到图片上方有alt文字;
6 ~( I1 L. M$ F6 M' j 3、火狐12.0 浏览器图片显示正常，鼠标移到图片上方没有alt文字;
; |5 b+ T6 E8 N4 b6 J 二、图片只有title属性
! _; J4 r# k$ V X1 i) ?/ n 1、IE6 浏览器图片显示正常，鼠标移到图片上方有title文字;+ t4 L. _. @5 I1 a+ `" F- X
2、360 浏览器5.1测试版(IE8 内核)图片显示正常，鼠标移到图片上方有title文字;# K9 z0 R& a( s1 E
3、火狐12.0 浏览器图片显示正常，鼠标移到图片上方有title文字;
" y. T* k: J( g' r; s' G$ r- b9 A# P 三、图片有alt和title属性5 U0 g' y4 c1 E P4 F) g; C9 z
1、IE6 浏览器图片显示正常，鼠标移到图片上方有title文字;
$ _7 Q9 _, D& q# S$ l! T 2、360 浏览器5.1测试版(IE8 内核)图片显示正常，鼠标移到图片上方有title文字;) o0 y, p3 _* V3 {4 ^$ @, q/ v9 d
3、火狐12.0 浏览器图片显示正常，鼠标移到图片上方有title文字;
$ d$ X" w7 B' o1 b SEO优化总结图片img标签alt与title属性评测实验
0 H/ j- d1 I4 t+ _ alt和title都是提示性语言标签，它们之间是有区别的。alt是当图片不存在时的替代文字;title是对图片的描述与进一步说明;在使用360 浏览器5.1测试版(IE8 内核)看只有alt属性的图片没有显示，而测试过程却能显示，这是让SEO优化困惑的，如果有知道的朋友麻烦告知，谢谢。而火狐12.0 浏览器alt属性是不显示的，只显示title属性;在ie6，当鼠标经过图片时title和alt的值都会显示。如果alt和title属性同时存在，显示的是title值。
8 c8 W7 y8 }2 R. @# @3 W SEO优化扩展补充：alt属性一般用于图片提示，title还可以用于给普通文字或者链接文字提示。
! i4 h% N9 n- b) ^ 一般用法如下代码：$ h7 e5 I) x2 q! W/ R
<html>
: R+ h3 N3 G; H <body>
4 `- }. p$ A4 v2 Y% f% X7 l4 W& S1 W <p>< title="给普通文字提示">文字</p>
0 B, ^- y7 m0 I9 y) F5 G$ s# V <a title="给链接文字提示">文字</a>
7 b7 T6 \ \2 k+ `( ^+ `& ~ </body>
6 A9 Z+ m3 Q( D+ D4 B* C! o. i. P </html>$ t0 ^) ~1 k6 n% r% _+ R
|
