它是什麼、如何編寫以及為什麼它對 SEO 很重要

如今，近 19% 的 Google SERP 顯示圖像。 這意味著，儘管您盡了最大的搜索引擎優化努力，您仍然可能會錯過另一個有機流量來源：您網站的圖像。

如何獲得這個流量來源？ 圖像替代文本。 在這篇文章中，我們將介紹如何編寫圖像替代文本，以便您的圖像在搜索引擎中排名靠前並增加流量。

目錄

無論您是否為您的業務執行搜索引擎優化，優化網站的圖像替代文本都是為訪問者創造更好的用戶體驗的門票，無論他們是如何第一次找到您的。

為什麼圖像替代文本很重要？

圖像替代文本很重要，原因有三個：可訪問性、用戶體驗和圖像流量。 了解這些原因將幫助您為所有圖像編寫有效的替代文本。 讓我們深入了解一下。

無障礙

1999 年，W3C 發布了Web 內容可訪問性指南 1.0，解釋如何使殘障用戶更容易訪問內容。 其中一項指導方針是“提供聽覺和視覺內容的等效替代方案”。 這意味著任何帶有圖像（或電影、聲音、小程序等）的網頁都應包含與其視覺或聽覺內容等效的信息。

首先，描述性文本替代聽覺和視覺內容可確保每個人都能從您共享的內容中受益，尤其是那些有視覺障礙的人，他們可能會使用屏幕閱讀器來吸收網頁上的內容。 沒有描述的圖像對於使用該技術的人來說沒有幫助，並且會造成糟糕的用戶體驗，並且在某些情況下還會造成糟糕的品牌認知度。

例如，假設網頁包含鏈接到目錄的向上箭頭的圖像。 等效文本可能是“轉到目錄”。 這將允許使用屏幕閱讀器或其他輔助技術的用戶無需看到圖像即可理解圖像的用途。

換句話說，替代文本有助於確保所有用戶都可以訪問您的視覺內容，無論他們的視覺能力如何。

用戶體驗

替代文本可提高可訪問性，並為所有用戶提供更好的用戶體驗。 例如，假設訪問者的帶寬連接較低，因此您的圖像無法加載。 他們不僅會看到損壞的鏈接圖標，還會看到替代文本以收集圖像傳達的內容。

例如，您網站上的用戶可能能夠看到左側的圖像。 如果他們無法，無論出於何種原因，他們都會聽到或看到右側的替代文本。 與沒有替代文本相比，這將有助於提供更好的用戶體驗。

圖片來源

圖片流量

替代文本為您做的另一件重要的事情是在搜索結果中顯示您的圖像，無論是在 Google 圖片中還是作為圖像包。 圖像包是顯示為水平行圖像鏈接的特殊結果，可以出現在任何有機位置（包括 SERP 上的#1 位置，如簡介中的示例所示）。

而且，出現在兩種類型的搜索結果中的圖像是接收自然訪問者的另一種方式。 這可能會帶來數千名更多的訪問者——至少在 HubSpot 的例子中是這樣。

從 2018 年開始，HubSpot 博客團隊實施了一項新的 SEO 策略，該策略在一定程度上更加專注於優化圖像替代文本。 這使得博客的圖片流量在不到一年的時間內增加了 779%，自然瀏覽量增加了 160,000 次。 您可以在這篇博文中詳細了解該團隊的成功。

如何向圖像添加替代文本

在大多數內容管理系統 (CMS) 中，單擊博客文章正文中的圖像會生成圖像優化或富文本模塊，您可以在其中創建和更改圖像的替代文本。

下面讓我們逐步了解 CMS Hub 和 WordPress 的後續步驟。

如何在 HubSpot CMS 中添加替代文本

在 HubSpot 中，一旦您單擊圖像並單擊編輯圖標（看起來像鉛筆），就會出現圖像優化彈出框。

這是 HubSpot 門戶內 CMS 中的圖像優化窗口的外觀：

然後，您的替代文本會自動寫入網頁的 HTML 源代碼中，如果您的 CMS 沒有易於編輯的替代文本窗口，您可以在其中進一步編輯圖像的替代文本。 文章源代碼中的 alt 標籤可能如下所示：

如何在 WordPress CMS 中添加替代文本

在 WordPress 中，單擊圖像將自動打開側邊欄中的“阻止”選項卡。 在標有“圖像設置”的部分下，在空白字段中添加替代文本。

準備好後，單擊屏幕頂部工具欄中的“更新” 。

替代文本最重要的規則是什麼？ 具有描述性和具體性。 但請記住，如果您的替代文本不考慮圖像的上下文，則此替代文本規則可能會失去其價值。 替代文本可能會以三種不同的方式錯過標記。 考慮下面的例子。

3 個圖像替代文本示例（好的和壞的）

1. 關鍵詞與細節

錯誤的替代文本

alt="HubSpot office wall Singapore inbound marketing workplace murals orange walls ship it"

上面的替代文本行有什麼問題？ 對 HubSpot 的引用太多。 使用替代文本將關鍵字填充到支離破碎的句子中會給圖像帶來太多的冗餘，並且沒有足夠的上下文。 這些關鍵字可能對發布商很重要，但對網絡爬蟲來說並不重要。

事實上，上面的替代文本使谷歌很難理解圖像與其發布的網頁或文章的其餘部分的關係，從而阻止圖像對具有更高興趣度的相關長尾關鍵詞進行排名。

最糟糕的是，谷歌會對關鍵詞堆砌行為進行處罰。

好的替代文本

考慮到上面的錯誤替代文本，該圖像的更好替代文本可能是：

alt="Orange mural that says 'ship it' on a wall at HubSpot's Singapore office"

2. 細節與特異性

圖片來源

錯誤的替代文本

alt="Baseball player hitting a ball at a baseball field"

從技術上講，上面的替代文本行遵循替代文本的第一條規則 - 具有描述性 - 但它沒有以正確的方式進行描述。 是的，上圖顯示了一個棒球場和一個正在擊球的球員。 但這也是一張芬威球場的照片，以及紅襪隊的 34 號大衛·奧爾蒂斯 (David Ortiz) 在右外野打了一球。 如果圖像出現在有關波士頓體育的博客文章上，那麼這些都是 Google 需要正確索引圖像的重要細節。

好的替代文本

考慮到上面的錯誤替代文本，該圖像的更好替代文本可能是：

alt="David Ortiz of the Boston Red Sox batting from home plate at Fenway Park"

3. 特異性與背景

圖片來源

上面的兩張圖片都有清晰的上下文，可以幫助我們寫出好的替代文本——一張來自 HubSpot 辦公室，另一張來自芬威球場。 但是，如果您的圖像沒有用來描述它的官方上下文（例如地名）怎麼辦？

您需要在此處使用要向其發布圖像的文章或網頁的主題。 根據您發布替代文本的原因，以下是一些不好和好的替代文本示例：

有關就讀商學院的文章

錯誤的替代文本

alt="Woman pointing to a person's computer screen"

上面的替代文本行通常會作為不錯的替代文本，但考慮到我們的目標是將此圖像與一篇有關去商學院的文章一起發布，我們錯過了一些可以幫助 Google 關聯該圖像的關鍵字選擇與文章的某些部分。

好的替代文本

考慮到上面的錯誤替代文本，該圖像的更好替代文本可能是：

alt="Business school professor pointing to a student's computer screen"

有關商學院教師教育軟件的網頁

錯誤的替代文本

alt="Teacher pointing to a student's computer screen"

上面的替代文本行幾乎與上一個示例中的替代文本一樣具有描述性和具體性，那麼為什麼它不足以滿足有關教育軟件的網頁呢？ 此示例更深入地探討了商學院的主題，並指定該網頁的理想受眾是教師。 因此，圖像的替代文本需要反映這一點。

好的替代文本

考慮到上面的錯誤替代文本，該圖像的更好替代文本可能是：

alt="Professor using education software to instruct a business school student"

圖像替代文本最佳實踐

最終，圖像替代文本需要具體，但也要代表其所支持的網頁主題。 到目前為止你明白了嗎？ 以下是編寫有效的圖像替代文本的一些重要關鍵：

• 描述圖像，並且要具體。
• 使用圖像的主題和上下文來指導您。
• 添加與頁面主題相關的上下文。
• 如果圖像沒有可識別的地點或人物，則根據頁面內容添加上下文。
• 例如，在計算機上打字的人的庫存圖像的替代文本可能是“女性優化 WordPress 網站以進行 SEO”或“女性研究免費博客平台”，具體取決於網頁的主題。
• 使您的替代文本少於 125 個字符。
• 屏幕閱讀工具通常會在此時停止閱讀替代文本，在為視障人士描述此描述時在尷尬的時刻切斷冗長的替代文本。
• 不要以“...的圖片”或“...的圖像”開頭替代文本，直接跳到圖像的描述中。
• 屏幕閱讀工具（以及 Google）會將其識別為文章 HTML 源代碼中的圖像。
• 使用您的關鍵字，但要謹慎。 僅當文章的目標關鍵字可以輕鬆包含在替代文本中時，才包含該關鍵字。 如果沒有，請考慮語義關鍵字，或僅考慮長尾關鍵字中最重要的術語。 例如，如果您的文章的主要關鍵字是“如何生成潛在客戶”，您可以在替代文本中使用“潛在客戶生成”，因為“如何”可能很難自然地包含在圖像替代文本中。
• 不要將關鍵字塞入每張圖片的替代文本中。 如果您的博客文章包含一系列人體圖片，請在其中至少一張圖片中包含您的關鍵字。 確定您認為最能代表您的主題的圖像，並將其指定為您的關鍵字。 堅持周圍媒體中更美觀的描述。
• 檢查拼寫錯誤。 圖片替代文本中拼寫錯誤的單詞可能會損害用戶體驗或使抓取您網站的搜索引擎感到困惑。 您應該像查看頁面上的任何其他內容一樣查看替代文本。
• 不要向每個圖像添加替代文本。 出於搜索引擎優化 (SEO)、用戶體驗 (UX) 和可訪問性的考慮，您應該向網頁上的大多數圖像添加替代文本 - 但是，也有例外。 例如，純粹裝飾性的圖像或附近文本中描述的圖像應具有空的 alt 屬性。 有關何時添加替代文本和何時不添加替代文本的更詳細信息，請查看此決策樹。

Alt 文本如何影響 SEO

據谷歌稱，替代文本與計算機視覺算法和頁面內容相結合，用於理解圖像的主題。

因此，替代文本不僅可以幫助 Google 更好地理解圖像的含義，還可以幫助理解整個網頁的含義。 這可以幫助增加您的圖像出現在圖像搜索結果中的機會。

隨著 Google 推出搜索生成體驗 (SGE)，高質量且上下文相關的替代文本可確保您的內容融入新的人工智能驅動的關鍵信息快照中。

例如，谷歌指出，其 SGE 可以為人們提供全面的購物體驗，在一個快照中包含值得注意的選項、產品描述、定價和圖像。 如果您的產品圖片具有描述性和特定的替代文本，則您可以為搜索引擎提供上下文，以了解何時將您的產品作為某人的結果中的高質量選擇顯示。

創建有關某個主題的內容時，請考慮您的受眾可能更喜歡如何找到有關該主題的問題的答案。 在許多情況下，Google 搜索者不想要經典的藍色超鏈接搜索結果 - 他們希望圖像本身嵌入到您的網頁中。

例如，查找如何刪除 Excel 中的重複項的訪問者可能更喜歡屏幕截圖，這樣他們就能一目了然地了解如何完成任務。

圖片來源

由於該圖像已優化替代文本，因此它會出現在長尾關鍵字“如何刪除 Excel 中的重複項”的圖像搜索結果中。 由於該帖子也出現在同一關鍵字的網絡搜索結果中，因此訪問者可以通過這兩個不同的渠道登陸該博客帖子。

將圖像替代文本添加到您的網站

那麼，在為博客文章和網頁開發替代文本時，您從哪裡開始呢？ 考慮對現有內容進行基本審核，看看可以在哪裡將替代文本合併到以前未標記的圖片中。 觀察您賦予新 alt 標籤的頁面之間的自然流量如何變化。

您優化的圖像越多，您的 SEO 策略就會進展得越好。

編者註：這篇文章最初發表於 2018 年 9 月，為了全面性已進行了更新。