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

一個好的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屬性範例

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

Alt最佳的寫法

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

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

好的寫法你可以寫成：<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替代文字一定要符合圖片所敘述的內容，在合理的範圍之內，才加上你的目標關鍵字。