DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁SEO優化 >> SEO優化集錦 >> 圖片img標簽alt與title屬性評測實驗
圖片img標簽alt與title屬性評測實驗
編輯:SEO優化集錦     

SEO優化是慢工也是細活。細節做的好,如魚得水,做的不好,舉步維艱。做SEO優化的都知道,搜索引擎對圖片理解是通過alt屬性,所以在圖片alt屬性中用包含關鍵字的簡要文字說明,也是頁面優化的一部分。如果想要做的更好,可以在title屬性裡,進一步對圖片說明。今天就和大家分享圖片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文字;

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>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved