SEO优化是慢工也是细活。细节做的好，如鱼得水，做的不好，举步维艰。做SEO优化的都知道，搜索引擎对图片理解是通过alt属性，所以在图片alt属性中用包含关键字的简要文字说明，也是页面优化的一部分。如果想要做的更好，可以在title属性里，进一步对图片说明，相关知识点SEO优化在《图片优化方法|百度图片优化》文章里有详细说明。今天SEO优化就和大家分享图片img标签alt与title属性评测实验。 图片img标签alt与title属性评测实验代码3 X! S {; i( v3 a3 B3 T) i/ E
说明：测试代码时把< >分别替换为< >
' P( M/ I2 d7 x <html>2 M+ v3 p% B; n1 G1 N
<body>3 x+ V8 O5 F& Z' q# t* Y) }1 K6 @
<p><img src="" alt="图片alt属性"></p>! S0 _+ F' ]7 W; K% m% j, s. {
<p><img src="" title="图片title属性" ></p>
" G9 j' _ P2 h# m) v" `! Q9 r/ @ <p><img src="" alt="图片alt属性" title="图片title属性"></p>
. b3 D5 A# i$ ]: x0 Z# w8 t <p><img src="1.jpg" width="200" height="200" alt="图片alt属性"></p>
: [) ^) }# o& ~6 m# ^) A <p><img src="1.jpg" width="200" height="200" title="图片title属性" ></p>9 ], K! S7 H; h/ [9 s
<p><img src="1.jpg" width="200" height="200" alt="图片alt属性" title="图片title属性" ></p>( n9 f Z% j$ d( H) ]
</body># x v! f! R5 k
</html>' m! ]# P6 f* d% c
图片img标签alt与title属性评测实验结果
! K, n8 p2 b% J0 l6 Q: e' v! b: c0 { 图片地址出错，没有限定图片大小情况' C: t U8 x) V) p, {$ E
一、图片只有alt属性8 t. Q; B& V; T& t2 }
1、IE6 浏览器图片显示打叉与alt文字，鼠标移到图片上方有alt文字;# n7 B0 C: j+ X
2、360 浏览器5.1测试版(IE8 内核)图片显示打叉与alt文字，鼠标移到图片上方有alt文字;5 {- w( D: L& i' |6 j2 H
3、火狐12.0 浏览器图片显示alt文字，鼠标移到图片上方没有alt文字;
- U' _6 @! Q) n- N 二、图片只有title属性3 ]5 m5 W: q' p& x4 F, w
1、IE6 浏览器图片显示打叉，鼠标移到图片上方有title文字;6 B F5 U! j2 a+ }. T. s: S
2、360 浏览器5.1测试版(IE8 内核)图片显示打叉，鼠标移到图片上方有title文字;
! `1 E2 l1 x8 \' P 3、火狐12.0 浏览器显示破损图片标志，鼠标移到图片上方有title文字;
5 w9 S( A4 }' ^7 X6 { 三、图片有alt和title属性
! F# W4 M! B+ r% f 1、IE6 浏览器图片显示打叉与alt文字，鼠标移到图片上方有title文字;
# r8 m8 p' E( c y! X 2、360 浏览器5.1测试版(IE8 内核)图片显示打叉与alt文字，鼠标移到图片上方有title文字;
4 B6 ~8 E W; Y; `" P 3、火狐12.0 浏览器显示alt文字，鼠标移到图片上方有title文字;
9 E% ~5 m) ~" [4 A( x0 x. C 图片地址正常，并且限制图片大小情况' I8 d' A# C9 z4 q- T1 U, w3 r
一、图片只有alt属性! l. q- k6 F: P* M! x
1、IE6 浏览器图片显示正常，鼠标移到图片上方有alt文字;. B( N+ Y5 [! g( r$ k0 a4 ~& R
2、360 浏览器5.1测试版(IE8 内核)图片显示正常，鼠标移到图片上方有alt文字;
* {. p3 Y. D6 @5 n 3、火狐12.0 浏览器图片显示正常，鼠标移到图片上方没有alt文字;$ L) P5 K4 ]1 z8 v5 q
二、图片只有title属性4 Y9 c& m9 v/ s2 J6 ~; e% j+ ^# ]
1、IE6 浏览器图片显示正常，鼠标移到图片上方有title文字;
: t e9 D" c4 o" S5 o 2、360 浏览器5.1测试版(IE8 内核)图片显示正常，鼠标移到图片上方有title文字;5 D& x# a- M9 i3 y6 H' G
3、火狐12.0 浏览器图片显示正常，鼠标移到图片上方有title文字;) `9 ^0 `* X# L
三、图片有alt和title属性- v2 A. ]$ ?3 g t
1、IE6 浏览器图片显示正常，鼠标移到图片上方有title文字;9 x/ h7 P& h8 L, o5 z9 S9 x+ b _- U1 @
2、360 浏览器5.1测试版(IE8 内核)图片显示正常，鼠标移到图片上方有title文字;
, ~! `0 b$ I$ I' d- H, U" }1 _ 3、火狐12.0 浏览器图片显示正常，鼠标移到图片上方有title文字;
$ I& g9 T$ P; l B( e! ?% _ SEO优化总结图片img标签alt与title属性评测实验8 k+ Y+ |9 V3 H, W, G7 {& H
alt和title都是提示性语言标签，它们之间是有区别的。alt是当图片不存在时的替代文字;title是对图片的描述与进一步说明;在使用360 浏览器5.1测试版(IE8 内核)看只有alt属性的图片没有显示，而测试过程却能显示，这是让SEO优化困惑的，如果有知道的朋友麻烦告知，谢谢。而火狐12.0 浏览器alt属性是不显示的，只显示title属性;在ie6，当鼠标经过图片时title和alt的值都会显示。如果alt和title属性同时存在，显示的是title值。
0 L" k4 m8 t" {* k7 f# l0 Z) a SEO优化扩展补充：alt属性一般用于图片提示，title还可以用于给普通文字或者链接文字提示。5 H8 `! h+ n+ |+ p( A
一般用法如下代码：( ^ d/ f" Z, ]0 C& E4 U
<html>
7 A$ H. r9 }; y* L <body>3 ?- [3 I) a. o
<p>< title="给普通文字提示">文字</p>
1 ]$ @2 N! t+ f <a title="给链接文字提示">文字</a>
1 e/ z% r6 q1 ^4 E </body>
( Q9 w9 v7 Z" B+ ~0 q8 c. Y! U* b </html>
% \7 g( z- g5 v; e$ {2 Z |
