WordPress 替代屬性解釋：什麼是圖像替代文本？

我們都知道在整個頁面和文章中使用圖像是多麼重要。 僅僅是文本塊變得更加生動，您以更直觀的方式吸引訪問者，並傳遞您的信息。 但是當添加一個時，你會情不自禁地專注於一個聽起來很奇怪的領域。 “嗯，替代文本，現在會是什麼”，你思考。 它肯定不能是 WordPress 開發人員隨機添加的某個字段——如果它在那裡，它可能是有目的的。

替代文本是添加到圖像標籤的 HTML 屬性。 它們是短文本字符串，如果 WordPress 無法顯示圖像，則會顯示它們。 替代文本可改善您的圖像搜索引擎優化。 它們還幫助使用屏幕閱讀器和搜索引擎的視障用戶理解圖像的內容。

替代文本也有一些隨意使用的名稱，例如“alt 標籤”、“alt 文本”或“alt 屬性”。 為了充分利用它，我發現最好將 alt 標籤考慮為這樣：alt 屬性就像一份冗長報告的“執行摘要”。 它非常簡要和具體地總結了圖像（即報告）包含的內容。

一些現有的 CMS 平台和許多定製網站要求您直接在每個頁面的代碼中手動添加該部分。 但是，像我們這樣的幸運者在 WordPress 中更容易獲得該功能。

圖像替代文本如何在 WordPress 中工作？

替代文本並不是什麼新鮮事。 它們也不是只有 WordPress 才能提供的獨一無二的東西。 事實上，它們是一個非常古老的功能，可以追溯到 20 世紀末互聯網的最初幾天。

自 1995 年 HTML 2.0 發布以來，alt 標籤具有三個具體目的：

• 如果瀏覽器由於某種原因無法加載圖片，則 Alt 標籤會出現在您的頁面上，而不是圖像上。
• 屏幕閱讀器為瀏覽互聯網時使用視覺輔助的人大聲朗讀替代文本。
• 像谷歌這樣的搜索引擎機器人使用它們來更好地理解圖像的內容。

因此，替代文本是一個很好的輔助功能，不需要添加太多額外的工作。

WordPress 中的圖像替代文本示例

現在讓我們看一些替代文本的示例。 我已經突出顯示了哪些好的和壞的例子，以便您可以準確地理解您想要包含在您的 alt 標籤中的內容。

一個好的替代文本的例子

這是我們在其中一篇博客文章中插入的圖片。 正如您在下面看到的，圖像的目的是準確地展示讀者如何實現文章中描述的結果。

我們創建的 alt 標籤的最終結果是“聯繫我們頁面上 NAP 的好例子”。

因為圖像添加了上下文並幫助用戶解決他們的問題，所以我們正確標記它並指出這一點很重要。

糟糕的替代文本示例

同時，您還可以創建無用的替代文本。 假設完全相同的圖像具有“NAP”或“企業 NAP”的 alt 標籤。

這個替代文字很糟糕，因為它不為任何人服務，而且只會消耗時間。 那麼是說沒有替代文字比一些替代文字更好嗎？ 雖然這是有爭議的，但我們的觀點是，從用戶可訪問性的角度來看，此類 alt 標籤沒有幫助。 他們也不為 Google 的爬蟲添加任何上下文。 即使在圖像無法顯示的最壞情況下，用戶仍然會感到困惑，因為他們在頁面上看到的只是一個隨機的詞——而不是一個簡潔的字符串，讓他們知道那裡應該有什麼。

因此，我們認為浪費時間來創建糟糕的 alt 標籤是不值得的。 相反，當我們決定檢查我們的網站並這樣做時，我們發現實際創建有用的替代標籤是更好的時間投資。

在 WordPress 中編寫出色圖像替代文本的 9 個最佳實踐

現在您知道如何在 WordPress 中使用圖片的 alt 屬性了。 有了這個，讓我們回顧一些技巧和最佳實踐，以確保您正確使用它。

1. 替代文本應少於 125 個字符

保持你的 alt 標籤少於 125 個字符。 對於 alt 標籤的長度沒有嚴格的規定，因此請將此建議用作經驗法則。 但是，只要相關，請隨意犧牲此一般規則以獲得更具描述性的文本。 然而，這通常是不需要的。

最重要的是，這是 125 個字符的示例：

“阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿

這是很多文字！ 大多數情況下，您可以將替代文本放入其中。

2.要么寫好Alt標籤要么根本不寫

但是較低的利潤呢？ 技術上沒有（當然，除了 0）。 就個人經驗來說，偷懶，只寫一兩個字也不值得花時間。 也就是說，如果您不打算編寫好的 alt 標籤，它們就像您一開始沒有它們一樣好。

3. 保持相關的 Alt 標籤相似但獨特

讓你的 alt 標籤相似是完全可以接受的——但要確保它們仍然是獨一無二的。 假設您有圖片解釋了操作指南中的兩個連續步驟。 在這種情況下，有些重複的部分是不可避免的。

但是，在這裡您可以通過清楚地解釋每個步驟並用正確的數字標記來確保每個替代文本都足夠獨特。

例如： alt=”這是我的 WordPress alt 文本教程的第一步” vs. alt=” WordPress alt 標籤教程的第二步”

4. 避免使用“Image of”，除非它是相關的

通常，您不需要在替代文本中寫入“圖像”或“屏幕截圖”。 搜索引擎和屏幕閱讀器知道他們正在處理圖像，因此無需添加該文本。 相反，可以更好地利用剩餘空間。

這當然是正確的，除非您想在 Google 中出現這些關鍵字查詢。 如果您的目標關鍵字包含短語，例如“屏幕截圖”，那麼將其添加到圖像中確實有助於它在 Google 搜索中的排名更高。

例如，假設您在新聞中聽到政治家電子郵件通信的洩露圖像。 自然地，您可能會尋找諸如“洩露電子郵件的圖像 [政治家的虛構名稱]”之類的內容。

在這裡，在替代文本中添加“圖像”短語將幫助您顯示該搜索查詢 - 當然，僅憑這一點並不能保證您的網站會靠近頂部。

同樣，假設您的帖子以主題的“靈感”為目標關鍵字。 在這種情況下，使用“[主題]的鼓舞人心的圖片”之類的短語也是可以接受的。

5. 不要在替代文本中使用垃圾郵件關鍵字

編寫替代標籤時，請保持文本相關並避免垃圾郵件關鍵字。

也就是說，如果您的圖片展示了一隻狗，請不要寫類似於“dogs canine pet puppy hound man's best friend dog crazy pup”這樣的替代文字。 相反，選擇更具描述性的內容來添加上下文。

考慮到圖像周圍的內容和段落，該文本可能會自然地解釋圖像。 我將在下面的部分中向您展示具體示例。

6. 最後添加圖片有助於寫出好的替代文本

在您完全準備好您的博客文章後添加圖像可以確保您不會錯過任何 alt 標籤，並且以後必須花費額外的時間來修復它們。 有時，您甚至可能在插入圖像後編輯 alt 標籤，卻發現它沒有在頁面上更新。

請記住，在創建頁面和帖子時，最好在 WordPress 中添加圖像作為最後一步。

7. 使用圖像名稱作為替代文本

在獲取圖像時，只需記住為它們命名與您所寫內容非常相關的名稱。 而不是使用空格，只需使用破折號來分隔單詞。 有了這個，一旦你上傳了圖片，你就可以簡單地複制你已經寫好的名字並刪除破折號。 這樣做會給你一個完美的 alt 標籤，而不會浪費任何時間。 要準確了解我如何執行此過程，請閱讀有關在 WordPress 中添加 alt 標籤的指南中的這一部分。

8. 偉大的 Alt 標籤詳細描述圖像

在編寫 alt 標籤時，描述性很重要。 您對圖像上的內容描述得越好，視障用戶就越容易理解為什麼要將圖像放在那裡。 這同樣適用於搜索引擎。 當有人搜索此類圖像時，這種做法使您有更好的機會讓 Google 展示您的網站。 即使對於比您優化的確切搜索更長的、不同的搜索（也稱為長尾關鍵字），也會發生這種情況。

9. 將您的網站設計圖片放入 CSS 中

如果純粹出於設計原因製作圖像，則應在網站樣式的 CSS 中實現它。 這樣做將設置正確的站點代碼結構/層次結構。 它還允許搜索引擎和屏幕閱讀器區分有助於內容的圖像和純粹用作設計特徵的圖像。

按照這個邏輯，您現在已經了解到實際上所有圖像都應該有一個 alt 標籤。 在 HTML 中實現圖像意味著圖像向頁面添加上下文 - 並且它允許您添加替代文本。 同時，在您的 CSS 中實現圖像意味著圖像不會添加上下文，而是幫助呈現頁面——因此您無法訪問添加 alt 標籤的功能。

結束語

對於大多數網站來說，添加替代文本不需要大量的時間投入。 同時，隨之而來的好處是巨大的。 您使您的網站更易於訪問 - 您可能會因此獲得 Google 的獎勵。

學習如何編寫 alt 標籤的最佳方法是查看一些示例並自己嘗試一下。 要了解如何在 WordPress 中為圖像添加或更改替代文本的實際過程，請閱讀此處鏈接的指南。

最後，始終確保在 WordPress 中保存更改並確認 alt 標籤可見。 否則，由於它的製作方式，有時 WordPress 不會顯示您的新替代文本。 如果您之前遇到過這種情況，請閱讀本指南，了解如何修復 WordPress 不顯示 alt 標籤。