如何寫出好的Alt圖片替代文字

如何寫出好的 Alt 圖片替代文字

作者:
3 分鐘讀完

一個好的Alt替代文字能夠幫助搜尋引擎辨別圖片所代表的涵義是什麼，因此撰寫Alt替代文字是SEO優化很重要的一環，如何撰寫Alt替代文字因此成為重要的課題之一，今天就幫大家介紹一下Alt與如何寫出好的Alt替代文字吧！

什麼是ALT?

ALT（替代文字），可以稱為"ALT屬性"、"ALT描述" ，ALT是HTML的一個屬性，主要是用來作為圖片的文字敘述，當圖片無法正常載入時，就顯示該圖片的ALT敘述，來替代未載入的圖片。

ALT屬性是HTML網頁語言當中，作為純文字的屬性，其作用是當圖片(IMG)屬性無法被渲染時，若圖片屬性當中有設定ALT的值，就會顯示ALT文字敘述作為補救的措施。

替代文本（替代文本），也稱為“alt屬性”，“alt描述”，在技術上不正確地稱為“alt標記”，在HTML代碼中用於描述頁面上圖像的外觀和功能。

ALT的使用方式：

我們可以幫圖片加入ALT的屬性，以提升使用者的訪問體驗，讓訪客能夠更了解圖片的代表含意，也能讓搜尋引擎更加準確的歸納該圖片與定義該圖片的真正意思。

當瀏覽器無法加載圖片時，就會以Alt標籤的敘述文字來替代圖片，顯示其文本內容。

Alt標籤能夠使搜尋引擎更了解圖片上下文的涵義，幫助搜尋引擎以更正確的方式索引圖片，更加了解文章上下文的意思，也能提升圖片的SEO排名。

ALT圖片替代文字標籤敘述
ALT圖片替代文字標籤敘述

你可以在程式碼內看到，圖片有設定Alt文字（alt屬性）。

Alt屬性範例

<img src="difference-between-sem-and-seo.png" alt="SEM與SEO的不同">

Alt最佳的寫法

Alt文字的最佳呈現方式就是要有足夠的描述性，這個文字敘述要真的能夠代表圖片所表達的意思，千萬不要試圖在圖片的Alt敘述當中堆疊、濫填關鍵字。

接著讓我們用以下例子來示範如何展示最佳Alt的寫法：

Stack of strawberry pancakes with powdered sugar
Stack of strawberry pancakes with powdered sugar

好的寫法你可以寫成：<img src="pancakes.jpeg" alt="pancakes">

這個寫法是「一般較正確」的寫法，這是 pancakes，但是你可以更加的描述這張圖片所代表的涵意，因此更棒的寫法你可以這樣寫：

更好的寫法： 

<img src="Stack-of-strawberry-pancakes-with-powdered-sugar.jpeg" alt="Stack-of-strawberry-pancakes-with-powdered-sugar">

這個Alt的撰寫方式是更加的選擇，因為這段敘述更加代表了這張圖片的意思，而非僅僅使用一個單字“pancakes”來做為代表。

註：圖片的檔案名稱我們建議統一使用英文，至於Alt的敘述內容（替代文字）可以使用中文來表示。

以下是不建議的寫法（非常糟糕的Alt寫法）：

<img src="123321.jpeg" alt="">

或是

<img src="pancakes.jpeg" alt="">

或是

<img src="pancakes.jpeg" alt="pancake pancake  pancake pancake pancake pancake pancake"> 

以上三種Alt的撰寫方式都不建議，第一個Alt是因為檔案名稱沒有對照相同意思，只用無意義的數字來命名，且Alt是空白的；第二個Alt撰寫方式雖然圖片名稱有使用有意義的pancake來命名，但Alt敘述仍然留空；第三種更是糟糕，其Alt的敘述是屬於濫填關鍵字，因此除了不正確的敘述之外，還有可能會被認為是黑帽SEO而導致被搜尋引擎懲罰的風險。

為什麼Alt替代文字很重要？

1.可訪問性

Alt替代文字是網頁設計當中可訪問性的宗旨，本來Alt的目的是提供沒有正常載入圖片的使用者，可以有一個文字敘述來告訴訪客原本這張圖片是什麼意思，而現在Alt除了仍然有這個意義之外，也額外提供了搜尋引擎更加了解這張圖片的意思，因此Alt對於「可訪問性」來說仍然是非常重要，且必須存在的屬性。

2.圖片SEO

在圖片當中完善Alt替代文字除了能夠提供更好的可訪問性與使用者體驗之外，也能告訴搜尋引擎這張圖片所代表的意思，完善你的圖片檔案名稱與Alt，能夠讓搜尋引擎更了解這張圖片所代表的涵意，也能讓使用者在搜尋相關圖片時，讓你的圖片能夠更容易出現在搜尋結果當中。

即使搜尋引擎的圖片技術在這幾年已經有了很大的進步，但搜尋引擎仍然無法非常容易的判斷每一張圖片所代表的完整含意，因此，搜尋引擎仍然會採集圖片的Alt敘述來作為定義這張圖片意思的依據，因此為了你的SEO，千萬不要忽略了Alt與圖片檔案名稱的重要性。

從這個定義上來說，Alt替代文字提供了一個機會，「讓你可以添加更多相關關鍵字內容的機會」，你可以添加更多的圖片甚至是影片來幫助你豐富你的文章，藉此使你的排名能在Google上獲得第一名的位置。

怎麼寫出好的Alt替代文字？

  1. 盡可能的描敘圖片所代表的意思，Alt是為了讓沒辦法看到圖片的使用者了解圖片所代表的意思，因此你要預想你的圖片沒辦法顯示時，該如何讓使用者知道你原本要給他們了解什麼樣的意思，而去撰寫出這個Alt替代文字。
  2. Alt替代文字不宜過長，Alt只是一個替代圖片的文字，因此一般來說一張圖片所代表的意思大約就是一段文字就可以解釋清楚，因此盡量講這張圖片的重點來作為Alt替代文字的敘述。
  3. 如今Alt替代文字除了本意（可訪問性）之外，還能提供你的文章內容一個包含目標關鍵字的機會，讓該頁面能夠擁有更多的機會在搜尋引擎當中獲得更好的排名，因此好好的完善圖片的Alt替代文字，能夠除了能夠幫助你的圖片本身會得更好的排名，也能間接幫助文章頁面獲得更的排名。
  4. Alt替代文字最怕的就是被拿來作為關鍵字濫填的手法，這種塞無意義的目標關鍵字的方式是黑帽的手法，這種方式會使你的圖片與文章都容易受到搜尋引擎的懲罰。要注意，Alt替代文字一定要符合圖片所敘述的內容，在合理的範圍之內，才加上你的目標關鍵字。

更多 SEO 優化教學文章

在〈如何寫出好的 Alt 圖片替代文字〉中有 13 則留言

    • Hi jiarong,
      替代文字可以中英文一起填入，但要記得，替代文字本意是取代，當圖片無法顯示時，能夠顯示文字來告訴訪客該圖片所代表的涵意。
      因此，不可為了要增加關鍵字而將其填寫在替代文字當中，應該要以「正確表達該張圖片的真正意思」來進行撰寫。

      回覆

  2. 您好
    若是電商平台網站
    插入圖片
    若圖片有10張
    10張圖 ALT 部分 重複置入商品名稱
    這樣可以嗎?
    謝謝

    回覆

    • Hi Smart,
      建議圖片不要輸入重複的內容。假設產品是一樣的但是規格或顏色不同，可以說明 xx 尺寸或是 xx 顏色來進行區隔，總而言之就是不要都將圖片的 ALT 設為相同的文字。

      回覆

  3. 您好
    我是使用wordpress.com自架部落格
    有在『媒體』庫中，替照片填上『替代文字』的內容
    可是在文章編輯『顯示程式碼』中卻看不到alt文字內容
    請問這樣算有成功嗎？還是應該要在文章的程式碼編輯器中直接輸入alt=的內容呢？

    另外，我的文章中圖片程式碼img src的部分顯示為一段網址
    https://xxx.files.wordpress.com/2020/09/img_111.jpg?w=1024
    且這段文字不能更改，更改的話圖片就會消失
    不知道有沒有解決辦法呢？

    感謝您

    回覆

    • Hi Sandy,
      在文章編輯器當中，當你插入圖片時，如果該圖片已經上傳至媒體庫中，並已輸入替代文字，那麼插入圖片時也會一起將替代文字插入進去。
      文章編輯 ALT 區塊
      當你在文章中插入圖片後，可以在右側區塊中查看「替代文字」區塊，看看是否有寫入正確的替代文字，若沒有可以在此添加。
      當你插入圖片卻沒有顯示「替代文字」，可能你是使用傳統編輯器，建議會升級至最新的 WordPress 版本，並使用 Gutenberg 編輯器，會是比較好的做法。
      SRC 後面的網址是你圖片的網址，如果更改這段網址，就無法對應到你的圖片，因此你的圖片就會消失，這裡通常都不會手動去調整。
      以上。若有問題歡迎隨時留言討論。

      回覆

  4. 請問alt的中文敘述可以有標點符號嗎?字數約莫多少比較恰當??
    (有範例可參考嗎? 謝謝~)

    回覆

    • Hi Yume,
      可以有標點符號沒問題，對於 Alt 敘述來說沒有特別的字數限制或建議值，主要功用是利用文字敘述該張圖片所代表的涵義，越清楚越好。

      回覆

  5. 您好!
    想請問如果是在Canva做好，輸出前已經有設定圖片alt替代文字，但到蝦皮的商品圖上船之後，我開啟網頁的檢視碼，卻沒有顯示，反而他的alt變成我在蝦皮打的商品標題，但這就會牴觸，因為關鍵字當然是越短越精準越好，但是我商品標題不可能只寫比如說：衛生紙，所以想請教這樣的問題有解法嗎？相當感謝您閱讀到這裡，期待您的回覆，謝謝！

    回覆

    • Hi 小儂,
      雖然在 Canva 當中可以設定元素的 ALT 替代文字，但是目前他僅支援在 PDF、PPTX、HTML、Canva 設計分享連結、Canva 展示模式...等等顯示 ALT。因此，當你下載成 PNG 格式時，實際上是不會帶有 ALT 替代文字的內容。

      此外，當你上傳至蝦皮之後，他的 ALT 應該是會自動抓取商品標題來顯示，因此若蝦皮沒有開放商品圖片的 ALT 編輯欄位，就只能依據他預設抓取商品標題來顯示。

      雖然蝦皮可能無法針對圖片 ALT 進行編輯，不過這其實不會太影響 Google 對該頁面的排名，ALT 只是因素之一，他的占比並沒有到非常大。而對於蝦皮這麼高權重的網站來說，這個影響更可以說是可以忽略的一個項目。

      我會比較建議，著重在蝦皮的標題上去抓取使用者搜尋偏好，因為更多人可能會在蝦皮當中去進行商品的搜尋，因此良好的標題可以讓你的商品更容易在蝦皮當中被搜尋到。

      以上是一些看法與建議，如果有問題歡迎隨時留言詢問哦!

      回覆

  6. 您好，打擾您了，這裡有個問題困擾我很久:

    在學習網頁設計時，我買了本網頁設計書，依照書中描述輸入了程式，因在image資料夾中找不到test.jpg的檔案，所以圖中應該要預留一個200*150 pixels的位置供圖像置入，並出現圖像的描述文字替代，且在中央出現一個圖像連結失敗的標誌。

    但我打出來的結果並沒有呈現預留位置的框框，且不論怎麼改結果都一樣。當我將替代文字alt刪除，預留位置就會顯示出來。

    簡單來說，原本的程式會顯示不出來預留位置格子，但將替代文字刪除就能顯示，兩者無法同時顯示。

    請問是為什麼無法同時顯示呢? 又要如何改動呢? 按照書中內容及附上的結果顯示都會同時有替代文字和預留位置的框框，或是是我有其他地方理解錯誤。希望您能為我解答。

    希望我有表達清楚，也感謝您閱讀到這裡，麻煩您了，祝您有個美好的一天。

    回覆

    • Hi 您好,
      大概了解您的意思。
      實際上，這和是否有設置 Alt 應該是沒有關係。
      當你希望某張 200*150 的圖片失效時，該位置會預留相同的尺寸 (200*150) 顯示，這應該是要在 CSS 當中，指定這張圖片的長與寬為 200*150，這樣即便該圖片失效，那麼也會占用 200*150 的空間。此時若你有設置 Alt 文字，那麼就會顯示圖片失敗的圖示，以及 Alt 文字；若沒有設置 Alt，則就只會顯示圖示。
      您可以先透過指定圖片長寬，再比對設置 Alt 與否，這樣應該就能解決您的疑問。
      若有任何問題，歡迎隨時留言!

      回覆

發佈留言

→ 目錄
Share to...
BufferCopyFlipboardHacker NewsLineLinkedInMessengerMixPinterestPocketPrintRedditSMSTelegramTumblrVKWhatsAppXingYummly