ALT屬性檢視原始碼討論檢視歷史
ALT屬性 |
外文名: alt 作 用: 一種補救措施 組 成: img與area兩個元素 替代原因 :網速太慢、src 屬性中的錯誤等 |
alt屬性:是一個用於網頁語言HTML和XHTML、為輸出純文字的參數屬性,作用是當HTML元素本身的物件無法被渲染時,就顯示alt(替換)文字作為一種補救措施[1]。
釋義
在HTML 4.01中,alt屬性主要用於兩個img與area元素,alt屬性的語法如下:
<area alt="..." />
介紹
alt 屬性是一個必需的屬性,它規定在圖像無法顯示時的替代文本。
假設由於下列原因用戶無法查看圖像,alt 屬性可以為圖像提供替代的信息:
1、網速太慢
2、src 屬性中的錯誤
3、瀏覽器禁用圖像
4、用戶使用的是屏幕閱讀器
標籤的 alt 屬性指定了替代文本,用於在圖像無法顯示或者用戶禁用圖像顯示時,代替圖像顯示在瀏覽器中的內容。
比如:視力受損的讀者如果使用屏幕閱讀器如JAWS(英語:JAWS (screen reader))或Orca(英語:Orca (assistive technology)),這些應用程序會將圖像中提供的alt文字讀出,讓他們以聆聽理解圖像內容。[2]
純文字網頁瀏覽器如Lynx或允許使用者手動會禁止下載圖像的瀏覽器會顯示alt文字以取代圖像;
一般能正常顯示圖像的網頁瀏覽器的讀者則需要開啟圖像屬性或頁面原始檔才能得知alt屬性內容。
誤區
IE7將alt文字顯示成彈出式提示框Internet Explorer 7及更舊版本會錯誤地將alt屬性渲染成彈出式提示框(英語:tooltip)。這個設定導致許多網絡開發者真的將alt屬性當成彈出式提示框來使用,而忽視了title才是用來顯示彈出式提示框的正確屬性。
這個失誤在Internet Explorer 8被改正過來,alt文字不會再被當成提示框彈出。alt屬性有時亦會被誤稱為「alt元素」(alt tag,變相與img元素畫上等號)。
重要性
圖片alt屬性是搜索引擎唯一能識別的圖片信息,因此,在優化網站時,儘可能利用alt屬性闡述圖片的主題內容,但是又要避免關鍵詞的重疊堆砌,該圖片屬性作用也不僅僅告訴搜索引擎圖片的主要信息,另外在圖片出現加載失敗時,還能夠讓訪客理解圖片所闡述的內容!
用來對網頁上的圖片進行描述,光標在圖片上時顯示的提示語即採用該標籤實現。從SEO和用戶體驗來看,ALT-代替屬性都是必要的,其重要性主要有:
網頁內容相關性是關鍵詞優化的前提,搜索引擎認為,網頁上的圖片應該與網頁主題相關。反過來講,當搜索引擎要判斷網頁的關鍵詞時,圖片的ALT-代替屬性是一個可信任的參考點。
所以, 別忘了在圖片的ALT-代替屬性里添加上該網頁的關鍵詞。有時候因為一些原因,比如使用屏幕讀取器、帶寬較低、網絡阻礙等導致網頁上的圖片無法顯示。[3]
描述性的ALT-代替屬性可以告訴用戶該位置的內容,從而添加用戶體驗。
正規的網站都應該這樣做。有時,如果沒有ALT-代替屬性,會導致用戶不明白該圖片代表着什麼,為什麼放在這個網頁。
標籤寫法
alt標籤在html語言中的寫法是這樣的: [4]
圖片描述最好是用簡短的語句,描述這張圖片的內容,如果是鏈接,則描述鏈接的作用,並帶上關鍵詞。
注意事項
不好的習慣是每張圖片都沒有alt標籤。而不可取的是,對於每個標籤都採用關鍵詞堆砌,這樣就有可能會導致被視為Spam垃圾網站。[5]
視頻
seo知識-alt屬性
網絡營銷SEO優化名稱解釋,什麼是Alt屬性,Alt屬性的添加演示
參考資料
- ↑ HTML 標籤的 alt 屬性,W3School,
- ↑ HTML alt 屬性,菜鳥教程,2017-12-19
- ↑ 圖像ALT屬性在網站優化中的作用分析,SEO技術-點瑞科技,2019-11-13
- ↑ HTML 標籤的alt屬性,一個yige.org
- ↑ 給圖片加ALT屬性是個什麼意思?有什麼優點呢,ldxsuanfa - 博客園,2019年3月15日