圖片也可以提升網站曝光？圖片 SEO 必學 8 技巧！

圖片對網站 SEO 有什麼影響？

我們都知道人類是一種感官動物，視覺與聽覺最能抓住注意力，留下深刻印象。一篇好的文章搭配精美的圖片，無疑是吸引讀者、提升閱讀體驗的最佳組合！

💡 提問：圖片能提升網站曝光？

Google 搜尋引擎的「圖片搜尋結果」，也是一種增加網站曝光的機會！當你的文章圖片出現在這個區塊，用戶便多了一個點擊進入網頁的機會。

在了解圖片對 SEO 有哪些影響前，我們要先知道搜尋引擎是如何索引與理解圖片！Google 圖片搜尋的運作方式與文字相同，都會經過這 3 個過程：

• 檢索／爬取（Crawl）
• 建立索引（Index）
• 提供結果

▋圖片對網站 SEO 的影響主要有 2 個：

📌 幫助爬蟲、用戶了解圖片

為了讓搜尋引擎的爬蟲能理解你的圖片內容並將其索引，你需要提供足夠的資訊。

由於現階段的爬蟲技術還無法直接「看懂」圖片，因此 Google 爬蟲需要借助一些技巧，如圖片檔名、Alt 替代文字、上下文等資訊，再搭配圖像識別技術，才能有效理解圖片內容。

另外，圖片 SEO 如 Alt 替代文字，在圖片可能因為網速過慢、瀏覽器禁用等原因而無法正常顯示時，仍可以透過替代文字來輔助用戶了解圖片內容！

📌 影響網站載入速度

如果你的網頁有許多圖片，卻忽略了圖片優化，可能會造成使用者體驗下降。當網站因為圖片過多而載入速度太慢，用戶就可能會失去耐心而離開網頁，導致網頁跳出率提升。

讓圖片幫網站 SEO 加分！8 個圖片 SEO 優化技巧

1️⃣ 使用正確的圖片格式

Google 搜尋目前支援的圖片格式類型有：JPEG、PNG、WebP、BMP、GIF、SVG 和 Jpegli。

📍補充說明：有損壓縮 vs 無損壓縮

• 有損壓縮 ➤ 會盡量刪除多餘的數據來減少檔案大小，因此可能導致圖片品質下降。
• 無損壓縮 ➤ 不會從圖像文件中刪除任何關鍵數據，但相對就無法節省太多空間。

不同圖片格式的檔案大小、壓縮品質和載入速度都有所不同！

• WebP 格式的檔案大小較小，載入速度也更快。相同的一張圖片，WebP 格式的載入速度比 PNG 快 5 倍、JPG 快近 2 倍！
• Jpegli 格式可以比傳統 JPEG 編解碼器多壓縮 35% 的高品質影像

因此，WebP 與 Jpegli 都是網頁圖片格式不錯的選擇！

2️⃣ 客製化圖片檔名（Img Title）

簡單且具描述性質的圖片檔名能夠幫助 Google 爬蟲更有效地了解圖片內容，例如：

• ✅：apple-iphone-15-pink-side-view.jpg
• ❌：IMG00353.jpg

⚠️ 檔案名中不可以使用空白符號，所以記得使用「-」分隔單字！

3️⃣ 使用 Alt 替代文字（Alt text）

Alt 替代文字（Alt text）是一段存儲在網頁代碼中的圖像描述，替代文字的主要目的有 3 個：

1. 當圖片失效的時候，可以作為延續閱讀體驗的輔助。
2. 幫助視力障礙者，透過電腦輔助工具，理解圖片內容。
3. 幫助搜尋引擎爬蟲理解圖片內容，有助於圖片 SEO 排名。

Alt 替代文字（Alt text）與圖片檔名（Img Title）不同之處在於 Alt 替代文字是在圖片失效時才會出現，而圖片檔名則是滑鼠移動就能看到了。

撰寫 Alt 替代文字時可以盡量添加更多描述性的字眼，盡可能還原圖像，以下提供一些不好與好的 Alt 替代文字範例：

• ❌ 0 分範例：< img src="cat.png"/>
• ⭕️ 及格範例：< img src="cat.png" alt="橘貓">
• 💯 滿分範例：< img src="cat.png" alt="一隻蜷曲四肢、躺在木地板中央，瞇起眼睛睡覺的橘貓">

4️⃣ 響應式圖片尺縮放

現在人使用手機、平板的時間大幅提升，使用響應式的設計，能讓網站的圖片根據用戶裝置視窗的大小自動調整。

響應式設計能確保圖片在各種設備上都能提供良好的用戶體驗，避免圖片在手機上看起來過大，或在電腦上看起來過小。

此外，響應式圖片縮放可以最小化加載時間，這也是為什麼它對圖片 SEO 有好處的原因之一！

5️⃣ 壓縮圖片

圖片的檔案大小會直接影響網頁的加載速度，如果網頁上的圖片檔案很大，用戶可能會需要等待很久才能跑完網頁內容，這容易讓用戶失去耐心，導致他們離開網站。

因此，壓縮圖片的檔案變得非常重要！但壓縮圖片可能會導致圖片品質下降，像是 JPEG 使用有損壓縮，而 PNG 使用無損壓縮，所以 JPEG 雖然可以比 PNG 壓縮更多，但卻會損失圖片品質。

這也是為什麼上面提到的 WebP 會是你的最佳選擇，因為它既可以更有效的壓縮圖片，同時還可以維持圖片的品質！以下提供 3 個常見的圖片壓縮工具給你：

• TinyPNG
• Squoosh
• IloveIMG

6️⃣ 實施延遲加載

延遲加載是指延後載入那些尚未進入用戶視窗內的圖片，也就是說用戶還沒瀏覽到的圖片都不會載入，這樣能減少初始載入時間，顯著改善最大內容繪製（LCP）指標。

只要在 < img> 標籤中添加 loading="lazy" 屬性就可以執行延遲加載，如：

• < img src="image.jpg" loading="lazy" alt="替代文字">

最好不要對一點進網頁就可以看到的圖片使用延遲加載，因為這可能會對首次內容繪製（FCP）造成負面影響！

7️⃣ 提交圖片 Sitemap

如同一般 Sitemap 一樣，圖片 Sitemap 能幫助 Google 爬取與收錄你的網站圖片。你可以另外新建一個專屬於圖片的 Sitemap，或是更新在原有的網站 Sitemap 中。

Google 官方文件中有提到，為了確保 Google 能找到你的圖片 Sitemap，你需要正確使用 image:image 或 image:loc 標記！

8️⃣ 添加結構化資料

結構化資料（英文：Structured Data）意思是按照標準化格式來書寫的一段資料，使搜尋引擎資料庫可以更有效率讀懂你的網頁內容，並將內容分門別類。

📌 結構化資料的好處：

1. 幫助搜尋引擎快速理解網頁內容
2. 在搜尋引擎上有機會以複合式搜尋結果出現

在圖片中添加結構化資料可以讓搜尋引擎更了解你的圖片資訊，並將圖片的內容以更好的方式提供給用戶。

舉例：你可以在產品圖片中添加名稱、價格、評分等詳細資訊，讓你的產品資訊在搜尋結果中更完整！

參考資料 1：12 Important Image SEO Tips You Need To Know

參考資料 2：Image SEO: How to Optimize Images for Search Engines & Users

以上就是關於圖片 SEO 的介紹，如果您想要了解更多 SEO 資訊，或者想要獲取免費的 SEO 健檢報告，都可以透過下方黃色按鈕與 Welly 團隊聯繫！