圖片連結 Alt Tag 設定說明：提升網頁可及性與 SEO 效果的標記要點

說真的，我為什麼要浪費時間寫一篇 Alt Tag 的文章？

老實說，每次開內容會議，講到 SEO，一定會有人跳出來問：「圖片的 Alt Tag 要怎麼寫？」然後大家就開始拋出一堆規則，什麼「要塞關鍵字啊」、「不能太長」、「聽說對 SEO 很好」...。每次聽到這些，我頭都蠻痛的。🤕

感覺大家把這件事當成一個待辦事項，一個為了討好 Google 演算法而不得不做的苦差事。但你知道嗎？Alt Tag，或者說「替代文字」，它的第一個服務對象，從來就不是 Google，而是「人」。

所以我決定，一次把它講清楚。這不只是一份「寫作說明書」，更是我想分享的一種心態：把重點放回使用者身上，好的 SEO 效果自然會跟著來。這篇文章我會從「為什麼你該在乎」開始，而不是直接跳到「怎麼做」。

先別管 SEO，你懂視障者怎麼「看」網頁嗎？

我想請你先做個小實驗。閉上眼睛，然後想像你正在瀏覽一個美食部落格，文章介紹著一家新開的甜點店。你看不到任何圖片，只能靠一個機器聲音朗讀網頁上的所有文字。

當聲音讀到一張圖片時，你可能會聽到幾種情況：

狀況一（最糟的）：「檔名 DSC_8734.jpg」。...嗯？這啥？我完全不知道圖片是什麼。
狀況二（沒比較好）：「圖片」。...對，我知道這是張圖片，但圖片裡有什麼？是一盤鬆餅？還是店門口？
狀況三（稍微有點良心）：「草莓鬆餅」。OK，至少我知道主題了。
狀況四（這才是及格！）：「疊了三層的美式鬆餅，淋上楓糖漿，旁邊點綴著新鮮草莓與一球香草冰淇淋」。哇！雖然我看不見，但我腦中已經有畫面了，我甚至感覺都聞到香味了！

這就是 Alt Tag 最核心、最原始的用途：為了「網頁可及性」（Web Accessibility）。對於視覺障礙的使用者來說，他們依賴「螢幕閱讀器」(Screen Reader) 這個輔助工具，將網頁上的文字內容轉換成語音。當螢幕閱讀器遇到圖片時，它讀出來的，就是你寫在 `alt` 屬性裡的那段文字。如果你沒寫，或寫得很爛，那張圖片對他們來說，就等於一個黑洞，完全不存在。

好啦，我知道你們還是在意 SEO 的...

我知道，光談理想不能當飯吃。說服老闆或客戶最好的理由，通常還是「這對 SEO 有幫助」。沒錯，寫好 Alt Tag 確實對 SEO 有不少好處。

最直接的一點，就是讓你的圖片有機會出現在 Google 圖片搜尋的結果頁中。 Google 的爬蟲雖然越來越聰明，但它本質上還是個「讀字」的機器人，它沒辦法像人類一樣「看懂」圖片裡的複雜情境。 Alt Tag 就等於是你貼在圖片上的一張標籤，直接告訴 Google：「嘿！我這張圖是在講『紅色特斯拉 Model Y 在陽光下的側面照』喔！」這樣當有人搜尋相關字詞時，你的圖片就有機會被找到。

再來，Alt Tag 也能幫助 Google 理解你整篇文章的「上下文」。如果你的文章在講「電動車保養」，裡面放了一張電池的照片，Alt Tag 寫著「電動車鋰電池模組的內部結構」，這就讓 Google 更確定你的文章主題跟電動車高度相關，進而可能提升你主文章的排名。它強化了整個頁面的主題一致性。

哦對了，還有一個很實際的狀況：當圖片因為網路太慢、路徑錯誤或伺服器掛掉而顯示不出來時（俗稱「破圖」），瀏覽器就會在原本圖片的位置顯示你的 Alt 文字。這至少能讓使用者知道這裡原本有張圖，而且圖的內容是什麼，而不是看到一個醜醜的破碎圖示，使用者體驗好很多。

所以，到底要怎麼寫？（這才是重點）

規則講了一堆，不如直接來看範例。寫 Alt Tag 的核心精神就是：用簡潔、準確的文字描述圖片的核心內容。想像你在跟一個沒看到畫面的朋友，用一句話解釋這張圖是什麼。

基本原則：

要具體描述：不要只寫「貓」，要寫「一隻橘貓在沙發上睡覺」。
不要廢話：不需要寫「...的圖片」、「...的照片」或「這是一張...」，螢幕閱讀器自己會知道這是圖片，加上這些反而很囉嗦。
簡潔有力：盡量控制在一個短句內。W3C 雖然沒有硬性規定字數，但太長的話，使用者可能會沒耐心聽完。
適度加入關鍵字：如果自然，可以把文章的關鍵字放進去。例如文章關鍵字是「筆電推薦」，圖片是某台筆電，Alt Tag 可以寫「Dell XPS 15 筆電打開放在木桌上」。但千萬不要硬塞！❌

真正的大魔王：情境 (Context) 決定一切

這是最多人忽略的一點。同一張圖片，在不同文章裡，它的「目的」可能完全不同，因此 Alt Tag 也應該跟著改變。

假設我們有下面這張圖：一個人在咖啡廳用筆電。

文章主題	❌ 不理想的 Alt Tag	✅ 理想的 Alt Tag	💡 思考邏輯
一篇關於「遠端工作」的文章	`alt="人在用電腦"`	`alt="一名男子在明亮的咖啡廳靠窗座位使用筆電工作"`	重點是「遠端工作」的氛圍和情境，所以要描述出那種自由、彈性的感覺。
一篇「MacBook Pro 評測」的文章	`alt="MacBook Pro"`	`alt="一台 MacBook Pro 放在咖啡桌上，螢幕正顯示著程式碼編輯器"`	圖片的「主角」是筆電本身。描述它的型號和使用狀態，才能支撐文章內容。
一篇介紹「某家咖啡廳」的文章	`alt="咖啡廳"`	`alt="[店家名稱] 咖啡廳的靠窗座位，午後陽光灑落在木桌上"`	這時候，圖片的重點是「環境」。要描述出店裡的氛圍和特色，吸引讀者前往。

那些特殊情況怎麼辦？

不是所有圖片都那麼單純，你還會遇到一些討厭的傢伙：

裝飾性圖片 (Decorative Images)：如果圖片純粹是為了美觀，比如背景花紋、分隔線，它不傳達任何實質資訊。這種情況下，你應該給它一個「空的」Alt Tag，也就是 `alt=""`。這不是忘記寫喔！這是刻意告訴螢幕閱讀器：「這張圖不重要，請直接忽略它」，才不會用「圖片」之類的雜音干擾使用者。
當圖片本身就是連結：如果整張圖片是一個可以點擊的按鈕或連結，那 Alt Tag 就要說明「點了會發生什麼事」。例如，一個放大鏡圖示的搜尋按鈕，Alt Tag 就該寫 `alt="搜尋"`，而不是 `alt="放大鏡"`。
複雜圖表 (Charts & Graphs)：如果是一張複雜的統計圖表，一句話根本講不完。這時，Alt Tag 應該給出圖表的「摘要結論」，例如 `alt="長條圖顯示 2024 年第二季度的用戶增長率為 15%"`。如果圖表非常複雜，W3C 建議可以在圖片附近提供完整的文字說明，或使用 `longdesc` 屬性連結到一個更詳細的說明頁面（雖然 `longdesc` 現在比較少用了）。

國際標準 vs. 在地規範：W3C 與台灣的 NCC

基本上，全球通用的标准是 W3C 協會制定的《Web Content Accessibility Guidelines (WCAG)》。幾乎所有關於 Alt Tag 的好習慣，都源自於此。W3C 提供了一個超實用的「決策樹」，幫助你判斷在各種情況下該怎麼寫 Alt Tag。

而在台灣，政府網站或是有申請「無障礙網頁標章」的網站，則需要遵循國家通訊傳播委員會（NCC）的《無障礙網頁開發規範》。這份規範基本上與 WCAG 的精神一致，但也提供了一些更具體的指引。

...這點跟我們在國際上看到的通用建議就有点不一樣。例如，在 NCC 的規範「H101106」中就提到：「當 alt 屬性的文字陳述大於 150 個英文字元時，考慮另外提供文字敘述」。這不是一個硬性規定，而是個「建議」。它提醒我們，Alt Tag 應該力求簡潔，如果一張圖真的複雜到需要長篇大論，或許就該思考用其他方式（例如圖下的說明文字）來輔助，而不是把所有東西都塞到 Alt Tag 裡。我自己是覺得這個建議很實際。

拜託不要再犯的幾個常見錯誤

每次幫同事或客戶看網站，都還是會看到一堆奇奇怪怪的寫法，真的會讓人想翻白眼🙄。我整理幾個最常見的，大家拜託對照檢查一下：

❌ 關鍵字亂塞： `alt="台北美食, 台北餐廳推薦, 牛肉麵, 好吃牛肉麵"`。這會被 Google 認為是黑帽 SEO，不但沒加分，還可能被懲罰。
❌ 萬年不變的檔名： `alt="IMG_001.jpg"` 或 `alt="logo"`。完全沒有提供任何有用資訊。
❌ 過於籠統： `alt="產品圖"`。是哪個產品？它長怎樣？有什麼特色？都沒說。
❌ 資訊重複： 如果圖片下方已經有很詳細的圖說文字，那 Alt Tag 就不需要把一模一樣的話再講一次。這時候或許可以稍微簡化，或從不同角度描述。