什麼是 Alt 標籤以及如何使用它？

圖片有助於使您的網站具有吸引力和視覺吸引力。 但是，如果您不使用替代文本（也稱為“替代文本”或“替代標籤”）優化圖像，您將錯失改善用戶體驗和網站可訪問性的重要機會。

要正確使用它們，首先了解什麼是 alt 標籤很重要。 在這篇文章中，我們將討論什麼是 alt 標籤以及為什麼使用它們。 我們還將解釋如何在 WordPress 中為圖像添加 alt 標籤，並介紹一些最佳實踐。

讓我們開始吧！

訂閱我們的 YouTube 頻道

什麼是 Alt 標籤？

Alt 標籤被添加到 HTML 中的圖像，以描述它們在網頁上的內容和上下文。 當媒體文件無法正確加載或顯示時，alt 標籤也會出現在圖像容器中：

Alt 標籤可幫助使用屏幕閱讀器的人（例如有視覺障礙的人）了解您網站上的內容。 更重要的是，搜索引擎機器人在對您的網站進行爬行、索引和排名時使用它們來解釋您的圖像。

在圖像標籤中添加的質量 alt 標籤是一個簡短的描述，不僅解釋了圖像呈現的內容，還解釋了它在頁面上的用途。 在 HTML 代碼中使用時，完整的圖像標記如下所示：

<img src="motorcycle-sunset.png" alt="Man in black and red checkered shirt riding an orange motorcycle at sunset."/>

圖片 alt 標籤有時會與圖片標題或說明混淆。 但是，圖像標題是一種不同類型的屬性。 當一個人將鼠標懸停在圖像上時，它們顯示為彈出文本。 另一方面，標題與圖像一起出現，通常在其下方，並提供有關它的附加信息或詳細信息。 在正常情況下，訪問者永遠不會看到您圖片的 alt 標籤。

為什麼在圖像上使用 Alt 標籤？

Alt 標籤有多種用途。 雖然您不需要使用它們，但這樣做有一些主要好處。 由於搜索引擎爬蟲和屏幕閱讀工具都使用它們，因此它們是網絡可訪問性和搜索引擎優化 (SEO) 的重要組成部分。

它們提高了 Web 可訪問性

Alt 標籤有助於確保訪問者可以訪問和享受您網站的內容，即使使用輔助技術或純文本瀏覽器也是如此。 當有視力障礙的人訪問您的網站時，他們的屏幕閱讀器會閱讀頁面上的文字。 當它到達一個圖像時，它將使用 alt 標籤來描述該圖像是什麼。

如果缺少 alt 標籤，屏幕閱讀器可能會改為讀取圖像文件名。 這不僅在正確解釋圖像方面通常無效，而且還可能令人困惑和具有破壞性，特別是如果文件名未經過 SEO 優化。

在某些情況下，例如當您在 WordPress 中將圖像的 alt 標籤字段留空時，屏幕閱讀器將完全跳過該圖像。 假設您在網頁上包含的圖像有用途，這種缺失意味著訪問者在消費您的內容時無法獲得您想要的全部價值或體驗。

他們可以提高您的搜索引擎排名

圖片 alt 標籤可以讓您更輕鬆地對您嘗試定位的關鍵字進行排名。 搜索引擎機器人很智能，但它們無法像人類一樣解釋和理解圖像的視覺方面。

Alt 屬性提供了一種基於文本的替代方法來翻譯圖像，更具體地說是用於合併相關關鍵字。 包含目標關鍵字的文字描述可以增加您在圖片搜索中獲得高排名的機會。

為了強調圖像（以及替代標籤）在 SEO 中的重要作用，請考慮“特大號床上用品”的搜索引擎結果頁面 (SERP)：

第一頁不僅僅產生基於文本的結果； 還有很多圖像結果。 如果優化並正確​​使用，alt 標籤可以幫助提升您的 SEO 並生成超鏈接、可點擊的圖像，以顯示在此類搜索中。 這對電子商務網站和登陸頁面特別有益。

如何在 WordPress 中添加圖像 Alt 標籤

一旦您了解在您的網站上使用圖像 alt 屬性的好處，就該學習如何實際做到這一點了。 幸運的是，WordPress 使這項任務變得非常簡單明了。

要在 WordPress 中添加圖像 alt 標籤，請登錄到您的管理儀表板並導航到您想要添加圖像的頁面或帖子。 在 WordPress 編輯器中，單擊加號圖標並選擇圖像塊：

接下來，上傳您的圖片或從您的媒體庫中選擇一張。 將圖像插入塊後，圖像設置面板將在右側的側欄中打開。 您可以在Alt 文本框中輸入您的描述：

完成後，保存更改。 您也可以對現有圖像執行此操作。 例如，如果您想更新已發佈在您網站上的帖子上的圖片，只需單擊該圖片並在側欄中輸入新的 alt 標籤即可。

如何在 HTML 中添加圖像 Alt 標籤

當您使用 WordPress 或其他包含用於添加和編輯 alt 標籤的模塊的 CMS 時，它會自動為您添加 HTML 代碼。 但是，如果您想自己添加代碼，則可以輕鬆完成。

要在 WordPress 中添加 alt 標籤 HTML，請單擊相關的圖像塊。 在塊工具欄中，選擇帶有三個垂直點的按鈕，然後選擇Edit as HTML ：

HTML 代碼將顯示圖像標記。 您會注意到 alt 屬性為空。 將您的文本放在引號內：

完成後，單擊“預覽”按鈕返回可視化編輯器，然後保存更改。 您可以使用相同的語法和格式來編輯任何文件的 HTML 圖像標籤。

編寫圖像替代標籤的技巧和最佳實踐

在創建 alt 標籤時，需要牢記幾個關鍵點。 遵守這些最佳實踐將有助於使您的 alt 標籤更有效：

• 是具體的和描述性的。 alt 標籤的目的是描述圖像，因此您希望盡可能具體。 如果您不確定您的描述是否充分，請考慮如果您只看到該行文本，您會想像出什麼樣的圖像。
• 保持簡短。 雖然您想要詳細說明，但您也不需要讓 alt 標籤很長（甚至是一個完整的句子）。 最大目標為 100 到 125 個字符。
• 不要多餘。 為了充分利用您的 alt 標籤，您不想包含任何不必要的詞。 這包括在描述之前添加“圖片”或“圖片”。 這些元素是不必要的，因為它們已經被暗示了。
• 自然地結合相關關鍵詞。 考慮您的目標關鍵字，並在可能的情況下將它們有機地合併到頁面上下文中。 當您使用與文本對應的高度相關圖像時，這會更容易。
• 避免關鍵字堆砌。 雖然在 alt 標籤中使用關鍵字可以改善 SEO，但請注意不要過度使用。 關鍵字填充實際上會損害您的 SEO 並產生糟糕的用戶體驗。
• 不要使用圖像代替文本。 alt 標籤的主要目的是為無法處理和解釋頁面上的視覺元素的機器提供文本上下文。 因此，在圖像中使用文本是沒有意義的，尤其是標題和頁面標題。

在為您的圖像創建 alt 標籤時，請始終記住目標是向那些可能無法看到它的人描述圖像。 雖然考慮 SEO 和關鍵字絕對是一個聰明的主意，但考慮到真實用戶編寫替代標籤可以幫助產生更積極的結果。

結論

圖像有助於改善網頁的外觀，並使它們更有趣、內容更豐富、更吸引人。 然而，為了最大化它們的價值，最好用 alt 標籤補充它們。 這些簡短而描述性的解釋為用戶和搜索引擎提供了上下文。 圖片 alt 標籤有助於增強用戶體驗，提高可訪問性，並使相關關鍵字的排名更容易。

您對什麼是 alt 標籤或如何在 WordPress 中添加 alt 標籤有任何其他問題嗎？ 在下面的評論部分讓我們知道！

Honza Hruby/shutterstock.com 的特色圖片