Alt描述 - Alt Text

在HTML代碼中使用Alt 替代文字，也稱為“alt屬性”，“alt描述”，以及俗稱但技術上不正確的“alt標籤”來描述頁面上圖片img的外觀和功能。

alt描述的使用：

• 1.在照片添加描述要以網頁可閱讀性為原則，讓使用螢幕閱讀器的視覺障礙用戶，使用來閱讀alt屬性，可以以更好地理解頁面圖片。
• 2.如果無法下載圖片檔案時，Alt標籤將會顯示在圖片的位置。
• 3. Alt標籤為搜索引擎爬蟲提供更好的圖片上下文/描述，幫助他們正確地索引圖片。

程式碼示例

最佳格式

描述的最佳格式具有足夠的描述性，但不包含關鍵字填充，如果你能閉上你的眼睛，讓別人閱讀描述，並可以想像一個相當準確的圖片描述，那麼就是正確的。

好的描述：

<img src="https://newscanpic.tw/n/chocolate_cake.jpg" alt="白色餐盤上放了一塊巧克力蛋糕，並放了一副叉子的圖片，用來做alt描述的範例圖">

這描述只是“好”，因為它不是很具描述性。是的，這是一巧克力蛋糕的圖片，但這幅圖片還有更多值得一提的地方。

更好的描述：

這個描述是一個更好的方式，因為它更仔細地描述了圖片中的內容，這不僅是一塊"蛋糕"（作為第一個描述範例）; 白色餐盤放了一塊巧克力蛋糕，並放了一副叉子！

不建議：

OR

這兩個例子都不推薦。代碼的第一行實際上根本不包含任何描述（注意引號是空的），而第二個例子顯示了描述中的關鍵字填充。

為什麼alt描述是重要的？

1.無障礙

描述要以網頁可閱讀性為原則，它最初的（也是主要的）目的是讓無法看到圖片的訪問者，藉由描述來了解圖片，這包括無法看到圖片的螢幕閱讀器和瀏覽器，也包括視力受損或無法直接識別圖片的用戶。在您的圖片中添加描述可確保所有用戶（無論視覺能力如何）都能欣賞您網站上的內容。

2.圖片SEO

在您的圖片上使用描述可以帶來更好的用戶體驗，也可能幫助您獲得顯式和隱式搜索引擎優化的好處，隨著添加圖片標題和文件命名的最佳做法，包括描述也可能有助於圖片SEO。

儘管搜索引擎圖片識別技術多年來已經有了很大的改進，搜索爬蟲仍然不能在網頁上“看”圖片，所以將解釋完全留給爬蟲手中是不明智的。如果他們不明白，或者弄錯了，那麼你可能會排除到你不想排除的關鍵字，或者完全錯過排名。

從這個意義上來說，描述為您提供了另一個曝光目標關鍵字的機會，由於網頁內關鍵字的使用量仍然將搜索引擎的排名因素作為重要因素，因此創建替代圖片的文字是最符合您重視的環節。如果可能的話，最好要包含您要的目標關鍵字或關鍵字相關詞組。

我如何撰寫好alt的描述？

1.盡可能詳細地描述圖片：

初衷是設計用來為無法看到圖片的用戶提供圖片的替代解釋，如果一個圖片沒有真正表達任何意義與價值，只是出於設計目的，它應該是放置在CSS，而不是HTML。

2.保持（相對）較短：

大部分的螢幕閱讀器會將約125個字符後的字符切掉，因此建議將其保留為不超過125字符數量。

3.使用您的關鍵字：

可以將您的目標關鍵字包含在網頁上，從而有機會向搜索引擎發出信號，表明您的網頁與特定搜索查詢高度相關。雖然您的首要任務應該是描述圖片並提供上下文，如果圖片與關鍵字有相關意義，請將關鍵字包含在頁面上至少一個圖片的描述中。

4.避免關鍵字填充：

Google不會把注意力放在寫得不好的描述上，但是如果你用自己的描述來填充很多的相關關鍵字，那麼你就會遇到麻煩，請專注於為圖片提供上下文的描述性替代文字，當然如果可能的話，最好可以包含您的目標關鍵字。

5.不要將圖片做成文字：

這不是對於文字的最佳作法，更不是友善的網站開發原則，由於搜索引擎無法讀取圖片中的文字，因此應避免使用圖片代替文字。如果您必須這樣做，請在照片的描述中說明圖片中的文字內容。

6.不要在您的描述中放入「形象」「圖片」等字眼：

它已經假定您的替代文字是指圖片，所以沒有必要在使用這些文字說明。

7.不要忘記可以使用longdesc=" "：

當網頁放入較複雜的圖片時，需要更長的描述才可以說明，此時可以使用longdesc屬性來指定描述的內容或連結到詳細說明的文件。

8.不要忽略表單按鈕：

如果您的網站上的表單使用圖片作為“提交”按鈕，請給它一個ALT屬性。圖片按鈕需要有一個ALT屬性來描述按鈕的功能，例如“送出”、“購買”、“註冊”等說明。

資料來源：https://moz.com/learn/seo/alt-text

歡迎推廣本文，請務必連結(LINK)本文出處：新視野網頁設計公司