一、圖片 SEO 基礎概念
在現今的數位環境中，圖片不僅能提升網站的視覺吸引力，還能透過適當的優化來提升搜尋排名。圖片 SEO（Search Engine Optimization）指的是最佳化網站上的圖像，使其更易於搜尋引擎理解與索引，進而提升網站的可見度與流量。
圖片 SEO 的重要性
搜尋引擎，如 Google，會根據多項因素來判定網站的排名，而圖片的優化能夠：
- 提升網站的載入速度，提高用戶體驗
- 讓搜尋引擎更容易理解圖片內容，提高索引效果
- 透過圖片搜尋獲取更多流量
- 增加網站的相關性，提高主要關鍵字排名
圖片 SEO 的關鍵優化要素
想要讓圖片有助於 SEO，以下幾個要素至關重要：
| 優化要素 | 說明 |
|---|---|
| 檔案名稱 | 使用具描述性的檔名，例如 seo-friendly-image.jpg，避免 IMG1234.jpg |
| Alt 文字 | 替代文字（Alternative Text），有助於搜尋引擎理解圖片內容，也提升無障礙體驗 |
| 圖片格式 | 選擇適合的格式，如 JPEG 適合照片，PNG 適合透明背景，WebP 可提升壓縮效果 |
| 圖片大小 | 壓縮圖片以減少檔案大小，提高網站載入速度 |
| 圖片 Sitemap | 提交圖片地圖（Image Sitemap）給 Google 以確保圖像被索引 |
| 結構化數據 | 使用 Schema Markup 標註圖片相關資訊，提升在搜尋結果的曝光度 |
如何透過圖片優化提升搜尋排名
1. 使用高品質且相關的圖片
高解析度且與內容高度相關的圖片，能增強使用者體驗與網站專業度。避免使用模糊或與內容無關的圖片，這可能會降低網站信任感。
2. 優化圖片檔名
當搜尋引擎爬取網站時，會根據圖片檔名來理解其內容。因此，請避免使用無意義的數字或亂碼來命名，應選擇具有描述性的名稱，如 website-seo-guide.jpg。
3. 設置適當的 Alt 文字
Alt 文字不僅可幫助搜尋引擎理解圖片內容，也對於無障礙網站設計非常重要，例如視障使用者的螢幕閱讀器能夠讀取替代文字，使其了解圖片的意義。
4. 控制圖片尺寸與壓縮
圖片過大會影響網站載入速度，進而影響 SEO 表現。可使用如 TinyPNG 或 Squoosh 這類工具來壓縮圖片，確保畫質與效能的平衡。
5. 使用適當的圖片格式
圖片格式會影響載入速度與品質，因此應根據需求選擇最適合的格式：
| 格式 | 適用場景 |
|---|---|
| JPEG | 適用於一般照片與風景圖，壓縮率高且畫質良好 |
| PNG | 適合需要透明背景的圖片，如標誌與圖示 |
| WebP | Google 推薦的圖片格式，能提供更好的壓縮與畫質平衡 |
| SVG | 適用於向量圖，確保在任何解析度下都能清晰顯示 |
6. 建立圖片 Sitemap
圖片專屬的 Sitemap 能幫助搜尋引擎更輕鬆地發現與索引你的圖片，請透過 XML Sitemap 增加圖片的可見度。
7. 利用結構化數據為圖片提供更多資訊
透過 Schema.org 標記圖片，可以讓搜尋引擎更精確地理解圖片內容，進一步提升圖片在搜尋結果中的表現。
結語
圖片 SEO 是提升網站搜尋排名的重要策略之一，透過優化圖片檔名、Alt 文字、格式與大小等要素，能有效提升網站的可見度與使用者體驗。在接下來的章節，我們將更進一步探討圖片 SEO 的進階技巧與實踐策略。
二、選擇適合的圖片格式
選擇適合的圖片格式對於網站的效能與 SEO 影響甚大。不同格式有不同的壓縮方式、支援的瀏覽器以及適用的用途。以下我們比較常見的幾種圖片格式，幫助你選擇最適合網站的圖片類型。
常見圖片格式比較
| 圖片格式 | 優點 | 適用情境 | 支援瀏覽器 |
|---|---|---|---|
| WebP | 壓縮率高、畫質佳、支援透明背景和動畫 | 推薦用於大多數網站圖片，能有效減少圖片大小，提高加載速度 | Chrome、Edge、Firefox、Opera、Safari (部分支援) |
| JPEG | 高壓縮率，適合存放大量顏色變化的圖片 | 適合照片類圖片，但不支援透明背景 | 所有瀏覽器 |
| PNG | 支援透明背景，適合需要高解析度的圖片 | 適合圖標、LOGO 或有透明需求的圖片 | 所有瀏覽器 |
| SVG | 使用向量格式，不會因縮放而失真，適合圖形與圖標 | 推薦用於網站的圖標、Logo 或簡單的設計圖形 | 所有瀏覽器 |
哪種圖片格式最適合 SEO？
對於 SEO 來說，網站的加載速度是影響排名的重要因素。因此，建議優先使用壓縮率高且支援廣泛的 WebP。相較於 JPEG 和 PNG，WebP 檔案大小較小，能夠有效降低網站載入時間，提升使用者體驗。此外，若網站上的圖片需具備透明效果，可考慮使用 PNG 或 WebP 而非 JPEG。
圖片格式選擇建議
- WebP：推薦用於大部分網站圖片，以減少載入時間並提升 SEO 效果
- JPEG：適合用於照片類圖片，但不支援透明背景
- PNG：適合具備透明背景需求的圖片，例如 Logo 或 UI 元素
- SVG：適合用於圖標與向量圖，能保持最佳畫質且檔案小
如何轉換圖片格式？
若要將圖片轉換為 WebP，可以使用線上工具如 TinyPNG 或 Squoosh，亦或在 WordPress 中安裝相應的圖片壓縮外掛（如 ShortPixel 或 Imagify），以自動將圖片最佳化，提高網站效能及 SEO。
三、圖片檔案命名與 ALT 屬性最佳化
在進行圖片 SEO 優化時，圖片的「檔案命名」與「ALT 屬性」是影響搜尋引擎理解圖像內容的重要因素。正確的檔案命名方式能提高搜尋引擎對圖片的辨識度，而合理撰寫 ALT 屬性則能增強無障礙體驗，幫助視覺障礙者以及搜尋引擎理解圖片的內容。
圖片檔案命名方式
圖片檔案名稱對搜尋引擎來說是一項重要的排名因素，因此應避免使用無意義的預設名稱（如 IMG_12345.jpg），而是要以描述性且包含關鍵字的名稱命名圖片檔案。例如，下表示範了不同的圖片命名方式：
| 錯誤命名 | 正確命名 |
|---|---|
| IMG_001.jpg | red-sports-shoes.jpg |
| DSC1005.png | taipei-101-night-view.png |
| image123.gif | healthy-vegetable-salad.gif |
圖片命名重點：
- 使用簡單易懂的英文單字，避免亂碼或數字組成的名稱。
- 名稱與圖片主題相關，並包含關鍵字，例如「blue-running-shoes.jpg」優於「shoes.jpg」。
- 單字之間以「-」（連字號）連接，而非使用「_」（底線）或空格，因為搜尋引擎更容易辨識連字號。
如何撰寫 ALT 屬性提升搜尋引擎可讀性
ALT（替代文字）屬性是圖片的重要 SEO 屬性，不僅可讓搜尋引擎了解圖片內容，還能提升無障礙使用體驗，幫助視覺障礙者透過螢幕閱讀器理解圖片內容。良好的 ALT 屬性應該簡潔、描述準確並包含適當關鍵字。
撰寫 ALT 屬性的基本原則
- 清楚描述圖片內容，避免過於笼统，如「圖片」、「照片」等無意義字詞。
- 適度使用關鍵字，但避免關鍵字堆砌，例如：「紅色運動鞋，透氣舒適的運動鞋」比「運動鞋 運動鞋 運動鞋」更有效。
- 儘量控制在 125 個字元內，確保內容易讀且不影響使用者體驗。
- 如果圖片僅為裝飾用途，則可以使用空 ALT（alt=””）來避免干擾搜尋引擎與螢幕閱讀器。
ALT 屬性範例對照
| 錯誤 ALT 內容 | 正確 ALT 內容 |
|---|---|
| alt=”圖片” | alt=”一雙紅色的跑步鞋，適合戶外運動使用” |
| alt=”台北101″ | alt=”夜間燈光照耀下的台北101摩天大樓” |
| alt=”美食” | alt=”綜合水果沙拉搭配優格醬，健康又美味” |
撰寫良好的 ALT 屬性不只是提升 SEO，也能幫助更多使用者獲得更好的瀏覽體驗。適當的描述可以幫助搜尋引擎更精確地理解圖片內容，提高排名與可見度。
四、圖片尺寸與壓縮技巧
在網站優化方面，圖片的尺寸與壓縮方式對於網站速度與 SEO 影響重大。過大的圖片可能會導致頁面載入變慢，影響使用者體驗與搜尋排名，因此合理調整圖片尺寸並壓縮圖片是必須的。
調整圖片尺寸以提升效能
網站上的圖片不需要過大，應根據顯示裝置與用途來縮減尺寸。例如，若網站內容區最大寬度為 1200px，則不應上傳超過此尺寸的圖片。以下是不同圖片類型的建議尺寸：
| 圖片用途 | 建議尺寸（px） |
|---|---|
| 全寬橫幅（Banner） | 1200 – 1920 |
| 內容圖片 | 600 – 1200 |
| 縮圖（Thumbnail） | 150 – 300 |
使用圖片壓縮技術減少載入時間
除了控制尺寸外，圖片壓縮可進一步減少檔案大小，提升網站載入速度。目前有許多高效的壓縮工具可供使用，例如：
如何選擇合適的圖片格式？
不同的圖片格式適用於不同的情境，選擇合適的格式也能幫助減少檔案大小：
| 格式 | 特性 | 適合用途 |
|---|---|---|
| JPEG | 高壓縮率，適合照片 | 一般圖片、相片 |
| PNG | 無損壓縮，支援透明背景 | 圖示、LOGO |
| WebP | 高效壓縮，兼具畫質與體積 | 多用途，推薦使用 |
最佳實踐：如何有效優化圖片？
為了讓圖片既清晰又不影響網站載入速度，建議按照以下流程進行處理：
- 調整圖片尺寸，避免過大圖片影響載入速度。
- 選擇適當的圖片格式，如 WebP 來減少檔案大小。
- 使用壓縮工具（TinyPNG、Squoosh）進一步減少圖片大小。
- 確保圖片仍保持合理的畫質，不影響用戶體驗。
透過適當的圖片尺寸調整與壓縮技術，網站可大幅降低載入時間，提供更流暢的使用者體驗，同時提升 SEO 排名。
五、圖片結構化標記與 Lazy Loading
使用結構化標記提升圖片的搜尋可見性
結構化資料（Schema Markup）能幫助搜尋引擎更準確地理解你的圖片內容，進而提升圖片在 Google 圖片搜尋的可見性。Google 支援多種與圖片相關的結構化標記，例如 ImageObject，將其應用在網站圖片上，有助於提升 SEO 成效。
如何利用 Schema.org 設定圖片結構化標記
要在你的網站圖片中加入結構化標記，你可以使用 JSON-LD 格式，以下是一個範例：
{ "@context": "https://schema.org", "@type": "ImageObject", "contentUrl": "https://www.example.com/image.jpg", "creator": { "@type": "Person", "name": "作者名稱" }, "creditText": "© 2024 版權所有", "license": "https://www.example.com/license"}這段 JSON-LD 代碼告訴搜尋引擎圖片的來源、作者以及版權資訊，能夠進一步提升圖片的可辨識度，讓搜尋引擎更準確地索引你的圖片內容。
運用 Lazy Loading 改善網站效能
Lazy Loading（延遲載入）是一種優化網站效能的技術，其主要目的是只有當使用者滾動到圖片所在區域時，才進行圖片的載入，而非一次載入所有圖片。這樣的作法能顯著減少初始頁面加載時間，改善使用者體驗，並提升 SEO 表現。
Lazy Loading 的實作方式
你可以使用 HTML 標準屬性 loading="lazy" 來實現 Lazy Loading，例如：
<img src="https://www.example.com/image.jpg" alt="範例圖片" loading="lazy">此外，也可以透過 JavaScript 更進一步控制 Lazy Loading：
<script>document.addEventListener("DOMContentLoaded", function() { let lazyImages = document.querySelectorAll("img.lazy"); let observer = new IntersectionObserver(function(entries, observer) { entries.forEach(entry => { if (entry.isIntersecting) { let img = entry.target; img.src = img.dataset.src; img.classList.remove("lazy"); observer.unobserve(img); } }); }); lazyImages.forEach(img => { observer.observe(img); });});</script>Lazy Loading 與 SEO 的優勢
| 優勢 | 說明 |
|---|---|
| 減少頁面加載時間 | 僅在需要時載入圖片，避免初始載入的資源過大，提升網站速度。 |
| 節省頻寬與伺服器資源 | 未被載入的圖片不會消耗伺服器流量，節省頻寬成本。 |
| 提升使用者體驗 | 頁面能更快顯示主要內容，減少等待時間，提升首頁使用體驗。 |
| 有助於提升 SEO 排名 | Google 欣賞速度快的網站，使用 Lazy Loading 有助於核心網絡指標（Core Web Vitals）。 |
結合結構化標記與 Lazy Loading 技術，不僅能讓你的圖片更容易被搜尋引擎理解，也能提高網站整體效能，創造更加友善的瀏覽體驗。
