你可能花了很多時間設計網站、選圖、上架商品，但圖片卻沒有出現在 Google 搜尋結果裡？問題很可能就出在你忽略了圖片的替代文字（Img Alt）。
Img Alt 是什麼？它是圖片中的一段「說明性文字」，寫得好可以提升 SEO 排名、增加圖片曝光率，同時也是打造無障礙網站不可或缺的關鍵元件。
Img Alt 是什麼？為什麼它這麼重要
Img Alt 的定義與作用
Img Alt（圖片替代文字）是提升圖片 SEO 的核心技巧。它不只幫助 Google 理解圖片內容，更影響整體網頁排名與流量！
我們可以想像 Img Alt 是「圖片的備註欄」，寫得越清楚，Google 就越容易知道這張圖片代表什麼，也能提升網站在搜尋引擎中的曝光率。
不只是為了SEO，Img Alt 對於視障用戶的輔助閱讀設備也非常重要！因此也是打造友善網站不可或缺的一部分。
⏩簡單來說：寫好 Alt，Google 看得懂、使用者也更有感。
為什麼它對 SEO 有幫助？
- 讓搜尋引擎理解圖片主題，增加圖片出現在 Google 圖片搜尋的機率
- 提升頁面整體關鍵字語意密度，加強排名
- 加強無障礙設計（Accessibility），改善 UX 並強化品牌形象
- 圖片失效時自動顯示備援內容，提升網站穩定性與信任感
Img Alt 與 Img Title 差在哪？差異解析
雖然看起來很像，但 Img Alt 和 Img Title 在 HTML 中的作用截然不同。別搞混，否則不但 SEO 沒幫助，還可能影響使用者體驗！
| 項目 | Img Alt（替代文字） | Img Title（提示文字） |
| 用途 | 圖片無法載入時顯示 | 滑鼠懸停時顯示 |
| 搜尋引擎讀取 | ✅ 是 | ❌ 否 |
| 視障輔助 | ✅ 螢幕閱讀器可讀 | ❌ 多數輔具忽略 |
| SEO 影響力 | ✅ 關鍵因素之一 | ❌ 幾乎無影響 |
📌 重點提醒：Img Alt 是 SEO 的必要欄位，Img Title 則屬於補充資訊，千萬不要混用！
Img Alt 要怎麼寫？HTML 語法與撰寫技巧
對網站完全不熟的新創 CEO 或自由業者來說，寫 HTML 語法可能看起來有點複雜，但其實只要學會一個格式就能搞定！
👩💻 新手也會寫的 HTML Alt 語法範例
你可能會以為寫程式碼很難，但其實只要記住這段結構，你就已經成功一半：
| <img src=“product.jpg” alt=“木製手工筆記本，封面刻有專屬客製字樣”> |
- src：圖片檔案的網址或路徑（本地或圖庫圖）
- alt：這張圖片的說明文字，也就是「替代文字」
📌 小提醒：不要用「圖片1」這種空泛的描述，Google 和使用者都不會知道這張圖片的意義。
🔎 什麼樣的 Alt 寫法是錯的？（錯誤 vs 正確範例比較）
| Alt 寫法 | 問題 | 評價 |
| alt=”圖片1″ | 沒資訊，SEO 失效 | ❌ |
| alt=”點這裡了解更多” | 過於口語，不說明圖片內容 | ⚠️ |
| alt=”紅茶、茶葉、烏龍、香片、綠茶、茶具” | 關鍵字堆疊，會被懲罰 | ⚠️ |
| alt=”手工紅茶禮盒包裝，內含三款茶葉與祝福卡片” | 有意義、具體、自然 | ✅ |
✅ 寫好圖片替代文字，其實只要掌握「五大原則」與「五步驟」就夠了！
五步驟教學：如何寫出 Google 喜歡的 Alt
1️⃣ 觀察圖片內容重點
問自己：「這張圖在幹嘛？它想讓人知道什麼？」
例：是產品？品牌場景？功能操作？活動回顧？
2️⃣ 用一句話具體描述
避免只有一兩個詞，也不要寫成一整段文案
✅ alt=”SaaS 工具後台，顯示用戶活躍度與統計圖表”
3️⃣ 自然帶入關鍵字（非硬塞）
⚠️ 錯：alt=”紅茶 紅茶葉 茶葉 香片”
✅ 正：alt=”三款台灣手工紅茶葉包裝組，適合送禮”
4️⃣ 控制字數（建議 125 字元內）
太短沒資訊，太長容易被忽略
✅ alt=”中秋禮盒內含茶葉與堅果，搭配精緻卡片與緞帶包裝”
5️⃣ 避免無意義詞彙或口語用語
❌ alt=”點這裡” / “好美喔” / “圖片1”
✅ alt=”創業講座現場，講者與學員正在互動討論”
Img Alt 對 SEO 有什麼幫助？如何影響搜尋排名？
你可能會想：「我又沒寫部落格，每張圖片真的會影響 SEO 嗎？」
答案是：絕對會。
Google 搜尋不只看你「寫了什麼文字」，還會試圖「理解圖片在說什麼」。而這一切的關鍵，就在於你寫得是否讓搜尋引擎能夠連結圖像與語意。
Img Alt 對 SEO 有什麼幫助？
📊 提升圖片曝光機會
Google 雖然越來越聰明，但仍無法 100% 理解圖片內容。正確撰寫 Alt 可以：
- 幫助圖片出現在相關搜尋中（尤其是圖片搜尋頁）
- 增強整體頁面與目標關鍵字的相關性
- 提升頁面整體 SEO 排名
💡 提升無障礙體驗（Accessibility）
對視障使用者來說，Alt 是閱讀器唯一能讀取的圖片資訊。缺少 Alt，等於讓圖片「消失」，直接影響可近性與使用者體驗。
視障者來說，他們是透過螢幕閱讀器（Screen Reader）來「聽見」網站內容。而 Img Alt 是這些輔助工具讀取圖片時所依賴的文字說明。
💡 小提醒：Google 也將「網站是否無障礙」納入 SEO 排名參考之一！
🧵 圖片失效時的備援資訊
若圖片載入失敗，Alt 文字可自動替代顯示，不僅維持版面完整，也確保資訊傳遞不中斷。
🔎 搜尋引擎怎麼看圖片？原來不靠「看」，靠「讀」
Google 雖然能辨識圖片輪廓、顏色與內容，但在精準理解上仍依賴這些文字線索：
| 資訊來源 | 說明 | 建議做法 |
| alt 替代文字 | 搜尋引擎理解圖片最主要的依據 | 寫出明確描述，並自然放入關鍵字 |
| 圖片檔案名稱 | 用於強化語意與分類搜尋 | 檔名用英文描述，例：matcha-latte.jpg |
| 圖片上下文文字 | 出現在圖片前後的文字 | 圍繞圖片的段落要與圖片主題一致 |
| HTML 標籤語意 | figure、figcaption 等 | 若有圖說請搭配語義標籤使用 |
🎯 Alt 替代文字如何影響你的關鍵字排名？
假設你經營一家手工甜點品牌，網站主打關鍵字是「客製化生日蛋糕」，你放上了幾張精美蛋糕照，但 Alt 卻這樣寫：
| html <img src=“cake.jpg” alt=“圖片1”> |
這樣 Google 完全不知道圖片的內容，也不會幫你提升「客製化生日蛋糕」這個關鍵字的排名。
但如果你改成這樣：
| html <img src=“cake.jpg” alt=“粉紅色客製化生日蛋糕，上面有手工糖花與生日祝福字樣”> |
不只 Google 會清楚知道這張圖是什麼，還能加強該網頁與「生日蛋糕」的語意連結，進而提升該頁在該關鍵詞下的整體排名。
💡 小型網站沒部落格也能靠圖片搶排名
對自由業、接案者、小電商來說，沒有時間寫長篇文章是常態。這時候，圖片 Alt 就成了「默默幫你做 SEO」的利器。
- 作品圖 → 用 Alt 寫出你的專業技能與風格
alt=”品牌顧問設計的簡報視覺風格，結合深藍與金色配色”
- 商品圖 → 寫出產品特色與適用對象
alt=”無香料手工護唇膏，適合敏感肌與孕婦使用”
- 使用者情境圖 → 傳達產品價值與場景
alt=”使用者在咖啡廳使用品牌筆記本進行手寫日記”
📌 沒有時間經營內容沒關係，你可以從圖片 Alt 下手，建立 SEO 底層優勢。
🔁 圖片能出現在 Google 首頁的「圖像精選區塊」
你可能看過某些搜尋結果的上方，會出現「圖片卡片」「知識圖譜」或「Google 圖像精選」。這些圖片的入選條件之一，就是 Alt 寫得夠清楚、夠準確，且語意與網頁主題高度吻合。
🧠 延伸知識：圖片也參與 E-E-A-T 評分！
Google 在評估網站可信度時，會根據 E-E-A-T 四項指標（經驗、專業、權威、可信）。當你的圖片 Alt 能夠：
- 展現你品牌的專業形象
- 描述使用場景、產品細節
- 強化網頁的主題一致性
這些都能讓搜尋引擎認為你提供的是有價值且具備專業性的內容。
替代文字怎麼寫才有效？原則 × 步驟 × 實例大全
寫 Alt 不是堆疊關鍵字、也不是填個空欄位就好。寫得好，它是你網站的隱形發聲器；寫不好，則形同沒有寫，甚至可能傷害 SEO 表現。
本章節將整合寫作的「五大原則」「五步驟流程」，再搭配正確 vs 錯誤實例對照表格，讓你一看就懂、馬上上手！
📌 寫好圖片 Alt 的五大黃金原則
| 原則 | 說明 | 正確範例 | 錯誤範例 |
| 具體描述內容 | 寫出圖片的主體與情境 | alt=”辦公桌上的筆電與咖啡” | alt=”好療癒的照片” |
| 自然放入關鍵字 | 不要刻意堆疊 | alt=”手工抹茶餅乾禮盒包裝” | alt=”抹茶、餅乾、點心、零食、甜點” |
| 控制字數 | 建議 80–125 字元 | alt=”中秋禮盒內含茶葉與堅果” | alt=”超棒的一個超值禮盒送給家人朋友讚！” |
| 說明圖片意圖 | 不只圖說，更強調「為何出現」 | alt=”創辦人在記者會上展示新產品” | alt=”一位男子拿著東西站在台上” |
| 功能性圖也需說明 | 清楚描述按鈕或介面功能 | alt=”提交聯絡表單按鈕” | alt=”點我” |
✏️5 步驟，寫出 Google 喜歡的 Alt 文字
-
觀察圖片主題與重點
- 重點是「這張圖是什麼」，不是寫文案。越具體、越清楚，Google 越能理解。
- 問自己：「這張圖想傳達什麼？是產品？情境？用途？」
- ✅ 寫法：alt=“木頭桌面上的手工餅乾，搭配手沖咖啡”
⛔ 避免：alt=“好療癒的一張照片”
-
用一句話具體描述圖片
- 最理想長度為 80~125 字元內，資訊完整但不冗贅。
- 例：alt=”客製化禮盒包裝，內含3款茶包與祝福卡片”
- ✅ 寫法：alt=”包裝精美的中秋禮盒，內含茶葉、堅果與祝福卡”
⛔ 避免：alt=”中秋節快樂，送這個給親朋好友真的很貼心、很划算又很喜歡超棒的選擇！”
-
自然融入關鍵字
- 關鍵字可以加進 Alt，但要「自然出現」，不要密集重複。
- 例：alt=”創業講座現場，講者正在分享營運策略”
- ✅ 寫法：alt=”綠色多肉植物擺設，辦公室療癒風格小物”
⛔ 避免：alt=”多肉、多肉植物、療癒小物、辦公小物、辦公室佈置”
-
控制字數 125 字以內
- 太長 Google 會忽略，太短資訊不完整
-
避免無意義詞彙
- Alt 描述的是「圖片在這頁中的角色」，不是只是表面圖說。
- 錯誤：alt=”圖片1″、alt=”超美的啦”、alt=”點這看更多”
- ✅ 寫法：alt=”創辦人在品牌週年演講中分享創業歷程”
⛔ 避免：alt=”一位男子拿麥克風站在台上”
正確與錯誤 Alt 寫法實例比較表
| 圖片情境 | 錯誤寫法（❌） | 正確寫法（✅） | 分析說明 |
| 抹茶拿鐵搭甜點 | alt=”圖片1″ | alt=”木桌上剛泡好的抹茶拿鐵，搭配起司塔甜點” | 正確描述畫面，語意自然，關鍵字融入 |
| 商品圖 | alt=”紅色產品” | alt=”紅色皮革筆記本，A5 尺寸，內頁為米白橫線” | 寫出功能與外觀資訊 |
| 活動照片 | alt=”大家聚會” | alt=”創業講座現場，學員參與小組討論活動” | 傳達活動主題與互動性 |
| 功能性圖示 | alt=”點我” | alt=”加入購物車按鈕” | 功能性圖需描述用途 |
| 使用者情境 | alt=”人使用手機” | alt=”使用者透過手機掃描 QR Code 登入平台” | 描述行為與目的 |
🧠 記憶口訣：Alt = 誰 + 在幹嘛 + 有什麼意圖
這句話能幫助你快速構思替代文字內容，並自然寫出一段「Google 懂、使用者也懂」的圖片說明。
💡 延伸：常見錯誤整理清單
| 錯誤類型 | 示範 | 問題說明 |
| 留空 | alt=”” | 完全沒有資訊，視障讀者無法理解圖片 |
| 無意義代碼 | alt=”圖片2″ | 機器或使用者都無法得知圖片內容 |
| 關鍵字堆疊 | alt=”蛋糕、生日蛋糕、甜點、派對蛋糕、草莓蛋糕” | 被 Google 認為是黑帽 SEO 手法 |
| 情緒詞彙 | alt=”超美超療癒超可愛” | 沒有資訊價值，影響可讀性 |
| 過長 | alt=”這個超棒又可愛的中秋禮盒不只好看還很實用，真的很推薦喔超適合送人” | 冗長不精簡，超過搜尋引擎推薦字數限制 |
不同產業怎麼寫 Img Alt？自由業、製造業、新創實戰範例
自由業 / 小電商
用圖片來展示商品、作品或人設，Alt 的任務就是讓這些圖「會說話」，幫你快速傳遞信任感與價值。
| 圖片類型 | 建議 Alt 寫法 |
| 個人形象照 | alt=”品牌顧問陳小姐，專注簡報設計與商業教學” |
| 作品展示圖 | alt=”品牌提案簡報，搭配客製化視覺設計風格” |
| 商品圖 | alt=”手工天然護唇膏，無香料配方，適合敏感肌” |
✅ 小提醒：商品圖不是只是「紅色口紅」「商品照」，而是「這是什麼」「為誰設計」「有何特色」。
傳產 / 製造業
許多 B2B 企業低估了 Alt 的行銷價值，其實圖片替代文字可以幫助你的網站：
- 在技術搜尋中被找見（如「鋁材加工」「自動化生產線」）
- 在品牌展示中傳遞「專業」「穩定」「可靠」的印象
| 圖片類型 | 建議 Alt 寫法 |
| 工廠現場照 | alt=”自動化生產線，操作人員檢測鋁件精度” |
| 企業團隊照 | alt=”物流公司內部團隊合影，慶祝10週年” |
| 產品應用照 | alt=”建材公司產品實際安裝於新北科技園區建案” |
✅ 實用建議：每張圖都能具備「可搜尋性」，讓你的技術資料與實景照都能被潛在合作夥伴看見。
新創團隊：
對新創公司而言，圖片往往與產品 UI、Demo 照、使用者情境高度相關。寫好 Alt 能幫你：
- 建立產品與「功能場景」的連結
- 提升品牌專業感與技術性形象
- 讓陌生人看圖就知道你的產品在解決什麼問題
| 圖片類型 | 建議 Alt 寫法 |
| 創辦人分享照 | alt=”教育平台創辦人在 Pitch Day 現場發表產品理念” |
| 使用情境照 | alt=”AI 語音助教系統，學生透過語音練習口說技巧” |
| UI 介面圖 | alt=”SaaS 工具後台介面，展示用戶管理與報表統計功能” |
✅ 建議句構：「產品是什麼」「誰在使用」「在哪裡」「在解決什麼痛點」
🧠 寫法公式彙整（萬用替代文字模板）
你可以用這個萬用句型來套用圖片 Alt：
alt=”【角色】在【情境】中使用【產品或服務】，解決【特定需求或痛點】”
例如：
| html <img src=“mentor.jpg” alt=“創業顧問在輔導會議中，協助創業者規劃營運策略”> |
這樣不僅使用者懂、Google 也懂，甚至能出現在知識圖譜或圖像精選中！
🔍 進階補充：圖片 SEO 進階技巧：Alt 之外還該注意哪些事？
寫好 alt 替代文字固然重要，但如果圖片本身設定錯誤、格式不當、上下文不連貫，仍會錯失 SEO 排名機會。
以下是進階的圖片 SEO 技術重點，幫助你從基礎寫法進階到專業優化。
🖋️ 圖片檔名命名原則：別再用「IMG_1234.jpg」
圖片檔名不只是管理上的便利，也會被 Google 納入語意理解依據。
| 錯誤檔名 | 建議命名 | 關鍵字優化說明 |
| IMG00123.jpg | matcha-latte-cake.jpg | 使用英文小寫、中線分隔 |
| P101001.jpg | handmade-notebook-cover.jpg | 融入關鍵字，精簡明確 |
| 圖片01.jpg | birthday-cake-custom.jpg | 避免中文或數字無語意字串 |
📌 建議：使用英文描述主題 + 關鍵詞 + 分類詞組合
🧩 上下文文字優化：圖片前後的內容很重要
Google 並不會單獨解讀圖片，而是會結合圖片附近的文字一起評估其語意與相關性。
| 圖片位置 | 建議做法 |
| 上一段落 | 描述圖片的主題或功能引導 |
| 圖片說明 | 可搭配 <figcaption> 提供輔助說明 |
| 圖片下方段落 | 繼續延伸該圖代表的產品/故事/案例 |
✅ 建議語意一致性：若圖片是「抹茶拿鐵」，其周邊文字就應出現「抹茶」「飲品」「下午茶」等語意群組。
📁 圖片格式選擇與壓縮設定：提升載入速度＝提升 SEO 表現
Google 明確指出：網站速度會影響 SEO 排名，而圖片往往是最拖慢速度的元兇。
| 格式 | 適用情境 | 優點 | 建議工具 |
| WebP | 大多數現代網站用圖 | 壓縮高、畫質佳、支援廣泛 | Squoosh、TinyPNG |
| JPEG (壓縮版) | 攝影類圖片、實景照 | 色彩豐富 | TinyJPG、ImageOptim |
| PNG | 圖標、透明背景 | 支援透明、畫質清晰 | Photoshop、Canva |
| SVG | 圖示、Logo | 向量格式、不失真 | Illustrator、Figma |
✅ 提示：圖片若過大，建議控制在 150–300KB 以內。
📱響應式設計支援：不同裝置顯示一致
圖片若無設定響應式尺寸，可能導致：
- 手機畫面破版
- 圖片模糊或變形
- 載入多餘檔案拖慢速度
✅ 建議做法：
| html <img src=“main.jpg” srcset=“main-480.jpg 480w, main-800.jpg 800w” sizes=“(max-width: 600px) 480px, 800px” alt=“響應式圖片展示”> |
使用 srcset 讓瀏覽器根據裝置載入對應大小圖片，有效節省頻寬與優化速度。
🎯圖片 sitemap 與結構標記：進階 SEO 強化（Optional）
若網站圖片量多，可考慮建立圖片專用 sitemap 或結構化資料標記，協助 Google 更完整索引圖片資訊。
| 方法 | 目的 | 參考工具 |
| 圖片 Sitemap | 提供圖片 URL 與說明給搜尋引擎 | 使用 Yoast SEO、自建 XML |
| 結構化標記（ImageObject） | 告訴搜尋引擎圖片用途、屬性 | Schema.org |
✅ 適合：電商、圖庫網站、攝影作品網站 等圖片數量大、希望提升圖片索引率者。
三款免費工具，快速檢查你網站的 Alt 標籤
你可能會寫 alt，但你知道網站上哪些圖片沒寫、哪些寫錯了嗎？
以下三種完全免費、無需安裝的工具，讓你立即檢查網站圖片的替代文字設定：
🛠️ 工具 1：Alt Text Tester（Chrome 擴充）
📌 適合對象：網站經營者、初學者、部落格主
🔍 功能說明：
- 直接在瀏覽器中顯示每張圖片的 Alt 設定
- 沒有 Alt 的圖片會用紅框標示，一眼看出問題圖
- 點開工具即可逐頁檢查，不需打開原始碼
🔗 工具連結：
Alt Text Tester – Chrome Web Store
✅ 使用建議：
可先用此工具快速檢查首頁、熱門頁面是否有圖片遺漏 Alt。
🛠 工具 2：Screaming Frog SEO Spider（免費版）
📌 適合對象：中大型網站、SEO 專職人員、內容團隊
🔍 功能說明：
- 可批量爬取整個網站圖片資料
- 查看每張圖片的 alt 是否設定、有無重複、是否過短
- 可輸出報表（CSV/XLSX），便於團隊討論與優化追蹤
🔗 工具連結：
Screaming Frog – Download SEO Spider Tool
✅ 使用建議：
免費版可掃描 500 個頁面，對於一般中小網站已足夠。
🛠 工具 3：WAVE Web Accessibility Tool
📌 適合對象：有品牌形象或政府機構網站、重視無障礙的企業
🔍 功能說明：
- 專門檢查網站的可近性（Accessibility）
- 可視化標示圖片是否有替代文字
- 檢查其他無障礙要素（如文字對比、ARIA 標籤等）
🔗 工具連結：
WAVE – Web Accessibility Evaluation Tool
✅ 使用建議：
適合用於品牌形象網站、醫療、教育、電商等需兼顧 UX 的產業。
📊 工具比較總覽表
| 工具名稱 | 特點 | 適合對象 | 推薦度 |
| Alt Text Tester | Chrome 擴充，快速視覺化檢查 | 網站經營新手 | ⭐⭐⭐ |
| Screaming Frog | 全站圖片分析 + 匯出報表 | 網站行銷/SEO 團隊 | ⭐⭐⭐⭐ |
| WAVE | 可視化無障礙診斷與 Alt 標記 | 品牌網站、政府網站 | ⭐⭐⭐⭐⭐ |
🎯 建議使用順序：
- 先用 Chrome 工具快速檢查首頁圖片
- 使用 Screaming Frog 全站掃描 + 匯出報告
用 WAVE 檢查可近性與結構完整性
讓圖片替代文字，成為你 SEO 的秘密武器
如果你還在想：
「我的網站沒什麼內容，真的有機會靠 SEO 拿到自然流量嗎？」
答案是：有的，從圖片替代文字開始。
1️⃣ 強化圖片搜尋曝光
2️⃣ 提升頁面主題一致性
3️⃣ 優化關鍵字排名
4️⃣ 打造無障礙網站體驗
5️⃣ 加速轉換與信任建立
🎯 Alt 不只是技術細節，而是讓圖片發聲的關鍵。無論你是自由業者還是品牌經營者，都可以透過一張圖，抓住使用者注意力。
-
- 自由業者、小電商經營者：產品圖、作品照就是你的線上招牌
- 中小企業與傳產網站：專業實力若沒寫進圖片說明，就無法被搜尋找到
- 新創或 SaaS 團隊：產品 UI / Demo 影片圖，都能轉化成關鍵字曝光機會
寫好 Img Alt 替代文字，你的網站就能多一條免費流量的入口。
–
如果你本身沒有網站，需要快速建立品牌形象網站，可以聯繫專業的網站設計公司，像是我們的專業團隊，可以輕鬆協助你建立形象網站！
我們的此服務適合「需要快速建立線上形象」，並非想要按部就班、在專業陪跑下穩定成長的人。透過啟動品牌運營，在短時間內快速提升影響力並實現變現能力。
歡迎你在下方訂閱我們的部落格，我們將於每周發送與網站架設相關的最新知識！感謝你的閱讀！
