SEO优化是慢工也是细活。细节做的好，如鱼得水，做的不好，举步维艰。做SEO优化的都知道，搜索引擎对图片理解是通过alt属性，所以在图片alt属性中用包含关键字的简要文字说明，也是页面优化的一部分。如果想要做的更好，可以在title属性里，进一步对图片说明，相关知识点SEO优化在《图片优化方法|百度图片优化》文章里有详细说明。今天SEO优化就和大家分享图片img标签alt与title属性评测实验。 图片img标签alt与title属性评测实验代码$ C$ B! M! I. U7 G1 @
说明：测试代码时把< >分别替换为< >
3 r5 B+ R# V' Z% [5 M <html>2 i6 s# |+ ^$ @/ f$ Z
<body>, `! ]) @; {6 L2 E- @
<p><img src="" alt="图片alt属性"></p>
3 N0 @! L) P3 ~$ F- L+ i <p><img src="" title="图片title属性" ></p>
: c# O. `5 _# H# y <p><img src="" alt="图片alt属性" title="图片title属性"></p>+ C8 |3 T! `8 o3 @7 q5 Z7 N1 n; ~
<p><img src="1.jpg" width="200" height="200" alt="图片alt属性"></p>
* J6 c% H0 n& j8 N <p><img src="1.jpg" width="200" height="200" title="图片title属性" ></p>) N: W' Y; n1 X4 h: W5 B
<p><img src="1.jpg" width="200" height="200" alt="图片alt属性" title="图片title属性" ></p>
9 G: P' N( x7 B9 R9 X9 ` </body>
( O( A0 b$ X" B7 B* I </html>' A+ L7 u8 q- y6 R$ H: d2 b5 s
图片img标签alt与title属性评测实验结果( p5 Q: {* f8 T2 G
图片地址出错，没有限定图片大小情况+ B% i3 `. a4 p6 X2 |' ~' c. C, }
一、图片只有alt属性4 R# _# C' d, p7 J
1、IE6 浏览器图片显示打叉与alt文字，鼠标移到图片上方有alt文字;
5 N* x6 [" @1 f* X* h$ C( Q8 d T% R7 D 2、360 浏览器5.1测试版(IE8 内核)图片显示打叉与alt文字，鼠标移到图片上方有alt文字;
2 F+ ]5 J2 K4 ?6 U4 O5 d1 F 3、火狐12.0 浏览器图片显示alt文字，鼠标移到图片上方没有alt文字;; l0 T3 |+ F6 x' w) z9 w' |
二、图片只有title属性9 y8 ]% I2 [9 [. d' u. K: @+ V
1、IE6 浏览器图片显示打叉，鼠标移到图片上方有title文字;0 \( z7 T. x& z8 p$ [5 s
2、360 浏览器5.1测试版(IE8 内核)图片显示打叉，鼠标移到图片上方有title文字;
& \* ~2 C" l/ B$ f4 b) D 3、火狐12.0 浏览器显示破损图片标志，鼠标移到图片上方有title文字;
# } V+ D$ S5 j5 ?( G% g$ r) ` 三、图片有alt和title属性9 n2 Y; i$ Z8 `$ z- @# n' n# I
1、IE6 浏览器图片显示打叉与alt文字，鼠标移到图片上方有title文字;
" S- _3 X/ @* E 2、360 浏览器5.1测试版(IE8 内核)图片显示打叉与alt文字，鼠标移到图片上方有title文字; B" d! m4 x. I3 R' g( I* u
3、火狐12.0 浏览器显示alt文字，鼠标移到图片上方有title文字;
) T T: @) ]9 }. u 图片地址正常，并且限制图片大小情况% i# M- y/ j" m+ q
一、图片只有alt属性
/ b! p# E; j* V) r 1、IE6 浏览器图片显示正常，鼠标移到图片上方有alt文字;4 @4 m) K. ^- L* G* ^# |: Q8 R/ u
2、360 浏览器5.1测试版(IE8 内核)图片显示正常，鼠标移到图片上方有alt文字;6 s, P: k1 u/ }' Q9 r
3、火狐12.0 浏览器图片显示正常，鼠标移到图片上方没有alt文字;
( L0 O- c% D( F) M) F 二、图片只有title属性
+ t+ i/ E0 r' I' m6 ?1 k 1、IE6 浏览器图片显示正常，鼠标移到图片上方有title文字;/ ^/ n4 v9 _& S- }6 u. h
2、360 浏览器5.1测试版(IE8 内核)图片显示正常，鼠标移到图片上方有title文字;2 M1 V$ w0 `3 h/ `$ j+ \
3、火狐12.0 浏览器图片显示正常，鼠标移到图片上方有title文字;6 h6 L9 |$ @: p5 A) _
三、图片有alt和title属性
4 U0 D* o0 F1 d5 u0 N2 A 1、IE6 浏览器图片显示正常，鼠标移到图片上方有title文字;
( d8 z7 t0 g+ p 2、360 浏览器5.1测试版(IE8 内核)图片显示正常，鼠标移到图片上方有title文字;4 v: K' g, \1 \4 \1 t
3、火狐12.0 浏览器图片显示正常，鼠标移到图片上方有title文字;; T0 j! A3 M: h0 t, n" |$ g2 @5 X
SEO优化总结图片img标签alt与title属性评测实验
9 r$ s- I# P+ _- q+ W3 h alt和title都是提示性语言标签，它们之间是有区别的。alt是当图片不存在时的替代文字;title是对图片的描述与进一步说明;在使用360 浏览器5.1测试版(IE8 内核)看只有alt属性的图片没有显示，而测试过程却能显示，这是让SEO优化困惑的，如果有知道的朋友麻烦告知，谢谢。而火狐12.0 浏览器alt属性是不显示的，只显示title属性;在ie6，当鼠标经过图片时title和alt的值都会显示。如果alt和title属性同时存在，显示的是title值。; g7 k1 f3 A; k/ O( ]& n z1 N0 \
SEO优化扩展补充：alt属性一般用于图片提示，title还可以用于给普通文字或者链接文字提示。
) v( ` O+ @) K& d( _" ]' a9 V 一般用法如下代码：
S( q# s. F8 O5 n2 y5 N7 f8 P <html>6 T# m# G" w0 N1 K8 D& C) L9 `
<body>
4 P$ g, X1 U+ u <p>< title="给普通文字提示">文字</p>
. n0 |2 y5 P$ Y4 w <a title="给链接文字提示">文字</a>
# b0 o4 x1 C' Y: ` </body>4 o+ l: R2 c `) a+ o" m+ P
</html>
: D" x. D, f! h5 H |
