一個好的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替代文字?
- 盡可能的描敘圖片所代表的意思,Alt是為了讓沒辦法看到圖片的使用者了解圖片所代表的意思,因此你要預想你的圖片沒辦法顯示時,該如何讓使用者知道你原本要給他們了解什麼樣的意思,而去撰寫出這個Alt替代文字。
- Alt替代文字不宜過長,Alt只是一個替代圖片的文字,因此一般來說一張圖片所代表的意思大約就是一段文字就可以解釋清楚,因此盡量講這張圖片的重點來作為Alt替代文字的敘述。
- 如今Alt替代文字除了本意(可訪問性)之外,還能提供你的文章內容一個包含目標關鍵字的機會,讓該頁面能夠擁有更多的機會在搜尋引擎當中獲得更好的排名,因此好好的完善圖片的Alt替代文字,能夠除了能夠幫助你的圖片本身會得更好的排名,也能間接幫助文章頁面獲得更的排名。
- Alt替代文字最怕的就是被拿來作為關鍵字濫填的手法,這種塞無意義的目標關鍵字的方式是黑帽的手法,這種方式會使你的圖片與文章都容易受到搜尋引擎的懲罰。要注意,Alt替代文字一定要符合圖片所敘述的內容,在合理的範圍之內,才加上你的目標關鍵字。
更多 SEO 優化教學文章:
- (影片教學) Google 線上數位課程,5 部影片帶你認識 SEO 搜尋引擎優化!
- 搜尋「SEO」出現的長尾關鍵字都是什麼意思?
- 各種SEO優化技巧你真的了解嗎?
- Google Trends 從趨勢中找熱門SEO關鍵字
- SEO 關鍵字優化權威指南
- 《自學SEO》10個免費優化技巧自己動手做(下)
- 《自學SEO》10個免費優化技巧自己動手做(上)
- 零預算也能用SEO技巧達到Google自然搜尋結果第1名
- 2023 年如何透過 SEO 在 Google 搜尋結果當中獲得第一名的排名
- 【WordPress SEO 優化】10 個步驟讓你網站獲得更高的排名
- SEO 2023 教學 - 5 分鐘懶人包了解什麼是 SEO 以如何優化 Google SEO 提升網站排名
- Google 告訴你如何才能加快網站索引速度,關鍵是內容品質與流量
請問替代文字內容可以中文跟英文一起填入,會被當成關鍵字堆砌嗎?
Hi jiarong,
替代文字可以中英文一起填入,但要記得,替代文字本意是取代,當圖片無法顯示時,能夠顯示文字來告訴訪客該圖片所代表的涵意。
因此,不可為了要增加關鍵字而將其填寫在替代文字當中,應該要以「正確表達該張圖片的真正意思」來進行撰寫。
您好
若是電商平台網站
插入圖片
若圖片有10張
10張圖 ALT 部分 重複置入商品名稱
這樣可以嗎?
謝謝
Hi Smart,
建議圖片不要輸入重複的內容。假設產品是一樣的但是規格或顏色不同,可以說明 xx 尺寸或是 xx 顏色來進行區隔,總而言之就是不要都將圖片的 ALT 設為相同的文字。
您好
我是使用wordpress.com自架部落格
有在『媒體』庫中,替照片填上『替代文字』的內容
可是在文章編輯『顯示程式碼』中卻看不到alt文字內容
請問這樣算有成功嗎?還是應該要在文章的程式碼編輯器中直接輸入alt=的內容呢?
另外,我的文章中圖片程式碼img src的部分顯示為一段網址
https://xxx.files.wordpress.com/2020/09/img_111.jpg?w=1024
且這段文字不能更改,更改的話圖片就會消失
不知道有沒有解決辦法呢?
感謝您
Hi Sandy,

在文章編輯器當中,當你插入圖片時,如果該圖片已經上傳至媒體庫中,並已輸入替代文字,那麼插入圖片時也會一起將替代文字插入進去。
當你在文章中插入圖片後,可以在右側區塊中查看「替代文字」區塊,看看是否有寫入正確的替代文字,若沒有可以在此添加。
當你插入圖片卻沒有顯示「替代文字」,可能你是使用傳統編輯器,建議會升級至最新的 WordPress 版本,並使用 Gutenberg 編輯器,會是比較好的做法。
SRC 後面的網址是你圖片的網址,如果更改這段網址,就無法對應到你的圖片,因此你的圖片就會消失,這裡通常都不會手動去調整。
以上。若有問題歡迎隨時留言討論。
請問alt的中文敘述可以有標點符號嗎?字數約莫多少比較恰當??
(有範例可參考嗎? 謝謝~)
Hi Yume,
可以有標點符號沒問題,對於 Alt 敘述來說沒有特別的字數限制或建議值,主要功用是利用文字敘述該張圖片所代表的涵義,越清楚越好。