首頁 > 建站 > 網站運營

圖片img標籤alt與title屬性評測實驗

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳

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、火狐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>

　　本文由SEO優化HTTP://www.fqseo.org/原創，文章位址HTTP://www.fqseo.org/652.html，轉載請保留連結!

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
html img alt image html img alt attribute html img src alt css img alt img title css html img title alt php
相關文章
以婚紗攝影網站為例簡析區域性網站的口碑與品牌建設
如何利用好下面四種方法推廣自己的網站？
如何從對比中找到突破來實現網站推廣效果？
地方網站內容獲取是網站運營的第一大難關
關於網站快照新舊的原因分析和解決方法
網站運營:思路是決定成敗的關鍵

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More