標籤：style http 使用 strong width io
圖片img標籤alt與title屬性評測實驗SEO最佳化是慢工也是細活。細節做的好，如魚得水，做的不好，舉步維艱。做SEO最佳化的都知道，搜尋引擎對圖片理解是通過alt屬性，所以在圖片alt屬性中用包含關鍵字的簡要文字說明，也是頁面最佳化的一部分。如果想要做的更好，可以在title屬性裡，進一步對圖片說明，相關知識點SEO最佳化在《圖片最佳化方法|百度圖片最佳化》文章裡有詳細說明。今天SEO最佳化就和大家分享圖片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、Firefox12.0 瀏覽器圖片顯示alt文字，滑鼠移到圖片上方沒有alt文字;
二、圖片只有title屬性
1、IE6 瀏覽器圖片顯示打叉，滑鼠移到圖片上方有title文字;
2、360 瀏覽器5.1測試版(IE8 核心)圖片顯示打叉，滑鼠移到圖片上方有title文字;
3、Firefox12.0 瀏覽器顯示破損圖片標誌，滑鼠移到圖片上方有title文字;
三、圖片有alt和title屬性
1、IE6 瀏覽器圖片顯示打叉與alt文字，滑鼠移到圖片上方有title文字;
2、360 瀏覽器5.1測試版(IE8 核心)圖片顯示打叉與alt文字，滑鼠移到圖片上方有title文字;
3、Firefox12.0 瀏覽器顯示alt文字，滑鼠移到圖片上方有title文字;
圖片地址正常，並且限制圖片大小情況
一、圖片只有alt屬性
1、IE6 瀏覽器圖片顯示正常，滑鼠移到圖片上方有alt文字;
2、360 瀏覽器5.1測試版(IE8 核心)圖片顯示正常，滑鼠移到圖片上方有alt文字;
3、Firefox12.0 瀏覽器圖片顯示正常，滑鼠移到圖片上方沒有alt文字;
二、圖片只有title屬性
1、IE6 瀏覽器圖片顯示正常，滑鼠移到圖片上方有title文字;
2、360 瀏覽器5.1測試版(IE8 核心)圖片顯示正常，滑鼠移到圖片上方有title文字;
3、Firefox12.0 瀏覽器圖片顯示正常，滑鼠移到圖片上方有title文字;
三、圖片有alt和title屬性
1、IE6 瀏覽器圖片顯示正常，滑鼠移到圖片上方有title文字;
2、360 瀏覽器5.1測試版(IE8 核心)圖片顯示正常，滑鼠移到圖片上方有title文字;
3、Firefox12.0 瀏覽器圖片顯示正常，滑鼠移到圖片上方有title文字;
SEO最佳化總結圖片img標籤alt與title屬性評測實驗
alt和title都是提示性語言標籤，它們之間是有區別的。alt是當圖片不存在時的替代文字;title是對圖片的描述與進一步說明;在使用360 瀏覽器5.1測試版(IE8 核心)看只有alt屬性的圖片沒有顯示，而測試過程卻能顯示，這是讓SEO最佳化困惑的，如果有知道的朋友麻煩告知，謝謝。而Firefox12.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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
