如何為 SEO 和可訪問性編寫替代文本
已發表: 2022-04-28替代文本經常進入 SEO 內容優化討論。 這些看似無關緊要的 alt 屬性旨在提高網站的可訪問性,但可能會對您網站的 SEO 和可用性產生影響。 為了幫助您充分利用您的替代文字,我們將介紹如何編寫替代文字以最大限度地發揮 SEO 潛力並提高您網站的可訪問性。
什麼是替代文字?
替代文本或替代文本是在 HTML 代碼中圖像的 IMG 標記的 ALT 屬性中寫入的圖像描述。
也稱為“alt 屬性”或“alt 描述”,如果圖像未加載或用戶視力受損,這些文本描述提供有關網頁上圖像的外觀和功能的信息。
替代文本的用途
這些 alt 屬性可能位於頁面 SEO 清單的最前沿。 然而,替代文本的推動力始於 2006 年,當時聯合國審計了世界上最受歡迎的網站,發現很少有網站能夠平等地訪問他們為視障用戶提供的信息。 從那時起,該文本主要用於:
可訪問性的替代文本
從失明到色盲的視覺障礙的互聯網用戶依靠替代文本來獲得對網站內容的完全訪問權限。 屏幕閱讀器用戶和其他輔助技術用戶已大聲朗讀替代文本。 這為屏幕閱讀器用戶提供了頁面上所有信息的更清晰圖片。
使用屏幕閱讀器瀏覽網站可以讓您更好地了解用戶在依賴屏幕閱讀器時的體驗。
加載問題和用戶體驗的替代文本
如果圖像文件無法加載,則其替代文本將在其不存在時顯示。 如果用戶帶寬低或選擇關閉瀏覽器圖像以保存數據,這可能非常有用。 正如視障用戶依靠此替代文本來填寫圖像的目的和內容一樣,互聯網連接速度較慢的用戶也不會因為使用替代文本而錯過圖像,從而獲得更好的整體用戶體驗。
此外,當替代文本代表圖像時,它會豐富您的內容並為讀者提供對文本的更全面的理解。
圖像 SEO 的替代文本
網絡爬蟲使用 NLP 來讀取 alt 文本 HTML,以更好地理解圖像是什麼、圖像的用途以及圖像的上下文,從而更好地索引和獲得更好的圖像搜索結果。
這可以讓爬蟲更好地了解您的網頁,並讓您的圖片有機會出現在 Google 圖片搜索中。
替代文字示例
具有諷刺意味的是,了解如何創建良好的替代文本通常需要一種展示-不講的方法。 因此,這裡有一些帶有 alt 標籤文本的圖像示例:
alt=”在寒冷的早晨,小獵犬站在結霜的田野裡。”
這是它在 HTML 中的樣子:
alt="地天尊像"
alt=”<p>明確的證據:大西洋洋流攜帶墨西哥灣流</p>”
格式化替代文本
大多數 CMS 會為您將 alt 文本格式化為 HTML。 但是,要實現 alt 文本,您可以將以下代碼插入到 IMG 標記中:
< img src =”file” alt =”add text” width =”” height =””>
如何寫出好的替代文字
編寫好的替代文本不需要創意寫作或編碼方面的專業知識。 不過,它確實需要您通過新鏡頭查看圖像。
一種方法是想像您正在通過電話向某人描述圖片。 當你這樣做時,請記住你的聽眾是否會從對圖像目的的解釋中受益。
考慮到可訪問性和 SEO,如何使您的 alt 文本更好?
1. 盡可能具有描述性。
更具描述性的替代文本為用戶提供了對圖像的更好理解。 在構建描述性替代文本時,請包括使圖像重要、獨特的原因以及它如何豐富文本。
我們都同意代表很重要。 屏幕閱讀器用戶還想知道品牌何時包含在其圖像中。 因此,請務必在描述中包含相關的性別和種族。
2. 保持簡潔,但不要太短。 忽略無關的信息。
上面的示例太長了,如果改用標題標籤或長描述標籤,可能會有所幫助。
最好的替代文本最多是一個或兩個短語(或一行替代文本)。 在構建替代文本時,請考慮給定的內容、信息優先級以及它如何通知網頁內容。 通過省略內容中包含的任何內容來減少冗餘。
同樣,考慮圖像和文章的目的是關鍵。
請記住,替代文字不是標題。 如果您需要提供來源信用或來源引文,請為該信息使用標題。
3. 使用你的目標關鍵詞。
如果您的目標關鍵字在圖像中很明顯,請將其包含在您的替代文字中。 正如我們所指出的,網絡爬蟲將讀取這些屬性以更好地了解您的內容。
請記住,即使在圖像搜索方面,長尾關鍵字也更容易排名。
例如,您可以嘗試對“張開嘴的鯨鯊”進行排名,而不是對“鯨鯊”進行排名。
4. 不要塞滿你的關鍵詞。
關鍵字填充從來都不是一個好主意。 尤其是當它使用戶誤入圖像所描繪的內容時。 始終以適當且信息豐富的替代文本為目標,以在需要時用含義代替圖像。
此外,請記住,Google NLP 非常擅長確定單詞之間的語義關係,因此,如果您的圖像與目標關鍵字相關,則您的替代文本也應該是相關的——結果應該是對 Google 索引系統的自然信號。

例如,注意上方圖片中的替代文字提到了“重型狗咀嚼玩具”。 谷歌在“重咀嚼狗玩具”的搜索查詢中顯示了這張圖片,這在語義上與原始查詢相關。
Bad alt text = 關鍵字填充:alt =“自定義狗標籤,自定義狗 ID 標籤,自定義狗 ID。”
5. 不用解釋是照片。
許多人犯的一個錯誤是在替代文本中包含“照片”、“圖片”或“圖像”。 這不是必需的。 你的 alt 標籤表明它是一張照片,所以這些只是增加了不必要的冗長和冗餘。
6. 使用 longdesc="" 進行冗長的描述。
有時圖像會受益於替代文本中更長的描述,從而帶來更好的用戶體驗。 例如,不附有博客的信息圖不會增加價值,除非解釋清楚。
對於這些實例,您將需要使用 longdesc="" 標籤。
7. 也描述按鈕。
按鈕通常是嵌入了文本的圖像。 這些屬於文本圖像的類別,這意味著您需要讓您的用戶知道他們所說的內容才能使它們有用。
為您的用戶提供可訪問的按鈕替代方案:
<輸入類型= “” src= “”名稱= “”
高度= “”寬度= “” alt= “按鈕上的文字” >
8. 避免拼寫錯誤和拼寫錯誤的單詞。
校對和正確的拼寫會妨礙屏幕閱讀器正確傳達圖像含義的能力。 此外,如果不加以檢查,您的 alt 屬性中的拼寫錯誤可能會成為圖像 SEO 災難。
9. 考慮圖像的類型。
雖然您不需要指出您正在描述圖像,但您可能需要提及圖像的類型是否是唯一的。 您可能要提及的一些圖像形式包括:
- 插圖
- 圖形和圖表
- 繪畫或其他美術
- 地圖
- 信息圖表
- GIF 和動畫
關於替代文本,您還需要了解什麼?
隨著時間的推移,編寫有效的替代文本將成為第二天性。 但是,了解何時使用圖像替代文本、何時跳過它以及其他圖像最佳實踐也可以改善您網站的 SEO 和可訪問性。
避免僅包含文本的圖像。
不該做什麼:
添加屏幕截圖、PNG 或 JPEG 文本可能很誘人。 但是,網絡爬蟲永遠不會讀取此文本。 此外,由於您不想從圖像中的信息中排除視障者,因此您需要將該圖像的文本鍵入到 alt 文本標記中。
何時不添加替代文本
裝飾圖像不需要包含替代文字。 這是因為圖像的內容並沒有增加網頁內容的含義。 但是,您應該在 HTML 中包含一個空的或 null 的 alt 屬性。 這個空的替代文本將向屏幕閱讀器發出信號,不要閱讀圖像的描述。
您可以將空 alt 屬性寫為:alt=“”或 alt=””
您可能還希望對圖像使用空 alt 屬性,該圖像是旁邊帶有文本版本的鏈接。
您需要視頻的替代文字嗎?
不可以,但您需要為聽障用戶、說其他語言的用戶以及無法播放音頻的觀眾提供視頻的轉錄。
如何檢查圖像的替代文本或其他站點的替代文本
要閱讀圖像的替代文本,您需要做的就是右鍵單擊圖像並選擇“檢查”或“檢查元素”。 這將打開 HTML 和 CSS 元素檢查工具。 在 Mac 上,您還可以使用 Control + 單擊。
您還可以使用可訪問性檢查器來解決可訪問性問題。
始終考慮圖像的上下文
在提供深思熟慮的替代文本時,請考慮圖像的目的。 這也為您提供了更多使用目標關鍵字的機會。
例如,如果博客的目的是比較狗糧的質量,您的關鍵字是優質狗糧,而您的圖片是兩碗狗糧進行比較,則可以使用替代文字“一碗優質狗糧”為了比較的目的,放在一碗質量較低的食物旁邊。” 這使您可以順利整合關鍵字而無需填充。
替代文字與圖像標題相同嗎?
不會。即使在 Alt 文本僅存在於您的 HTML 中時加載圖像時,站點用戶也可以看到圖像標題。 字幕的目的是提供版權信息或理解圖像內容所需的解釋。
如何在 WordPress 中添加替代文本
在 WordPress 中添加圖像替代文本很簡單。 上傳圖片時,您可以在將圖片插入頁面之前添加圖片替代文本。 某些版本的 WordPress 在圖像縮略圖旁邊包含圖像 alt 屬性菜單。 其他包括縮略圖屏幕底部的菜單。
一些體面到有效的替代文本模型
當談到替代文本時,質量水平各不相同。 您可以選擇體面的替代文字,也可以努力為您的用戶和 SEO 提供最佳替代文字。 以下是一些基本替代文本模型的示例:
不好:alt=”dog”
更好:alt =“帶皮帶的棕色狗”
最佳:alt =“棕褐色貴賓犬在草地上快樂地玩耍,皮帶仍然繫著”
不好:alt =“有書的人”
更好:alt=“母子做作業”
最佳: alt =“一位黑人母親幫助兒子完成家庭作業的插圖,以展示參與其中的父母的力量。”
不好:alt=”杯子、餐巾紙和筆的圖片”
更好:alt =“一個藍色的咖啡杯,旁邊是一張帶有書寫和筆的餐巾紙”
最佳:alt =“一個藍色的咖啡杯,左邊有咖啡,坐在木桌上,對面有一支筆,中間有一張餐巾紙,上面寫著設定目標,而不是限制”
替代文本:更好的用戶體驗和 SEO
跳過或匆忙構建圖像的替代文本很容易。 但這樣做會損害您的網頁訪問者和您的 SEO。 我們敦促您將替代文本視為改進每個網頁的一種方式。 為搜索引擎優化圖像包括通過替代文本為網絡爬蟲提供上下文。 此外,許多人依靠替代文本來充分理解您的網站並與之互動。 如果圖像無法加載或用戶有視覺或認知障礙,替代文本會通過代替圖像來增加可訪問性。