圖片 SEO 實戰｜香港網站點樣優化圖片、ALT 文字、速度與搜尋曝光

01 / SEO

張相存在，但 Google 未必搵到佢。

一張好相可以做好多嘢：展示上環舖頭門面嘅顏色、證明產品拎上手係咩樣，又或者喺文字之前，先畀學生睇到相機應該點擺。不過，網上有大量靚相其實著住隱形斗篷——放咗入 CSS background、檔案名係一串相機編號、冇 ALT、上載成 6MB，頁面仲要等到天荒地老先穩定落嚟。

呢個就係圖片 SEO嘅核心。你要幫搜尋系統同真人回答四條普通問題：呢張係咩？同呢頁有冇關？可唔可以快啲睇到？我有冇權用？漏一樣，張相對上載者嚟講仍然好靚，但搜尋世界唔係咁多情。

Google 嘅圖片 SEO 指引講到，系統會由圖片所在頁面抽取資料，包括附近文字、圖片說明、標題 同 ALT。亦建議用標準 HTML 圖片元素、支援嘅格式同 圖片網站地圖。重點其實好清楚：係 語境 同 可取用性，唔係 關鍵字 灑金粉。

“張相係頁面意思嘅一部分，唔係文章寫完之後先黐上去嘅貼紙。” — 圖片 SEO 實用原則

02 / SEO

Google 睇到咩，睇唔到咩？

先講最基本 實作。Google 現行文件指出，搜尋爬蟲 可以由 <img> 嘅 src 屬性搵到圖片，包括放喺 <picture> 入面嘅 img。至於 CSS 背景圖片，Google 搜尋 唔會用同樣方式將佢當作 圖片內容 去 編入索引。所以，如果產品相係重要證據，唔好只將唯一一張相藏喺 裝飾用樣式表 入面。

<!-- 容易被 crawl 嘅內容圖片 -->
<img src="tai-o-seafood-market.jpg"
     alt="香港大澳街市的新鮮海鮮檔"
     width="1600" height="1067">

<!-- 背景圖；唔好用佢承載唯一重要圖片 -->
<div class="hero" style="background-image:url(hero.jpg)"></div>

圖片網站地圖 文件話，圖片網站地圖 可以幫 Google 發現原本未必搵到嘅圖片，尤其係由 JavaScript 先叫出嚟嗰類。不過佢係 發現工具，唔係排名按鈕。如果圖片被 權限阻擋、藏喺 登入 後面，或者所屬頁面薄到得幾句字，網站地圖 都唔會突然變魔法。

仲有個容易漏嘅位：圖片同頁面要講同一個故事。檔案叫 `best-hong-kong-coffee.jpg`，附近段落卻係講鏡頭焦距，唔係聰明，係混亂。搜尋系統正努力拼一幅一致嘅頁面圖像，而你的檔案名就喺旁邊講另一套。咁就尷尬喇。

03 / SEO

檔案名、格式、容量：三角關係要平衡

檔案名係細節，但唔係完全冇用。`IMG_4821.JPG` 幾乎冇話畀 搜尋爬蟲 知；`north-point-chun-yeung-street-photographer.jpg` 至少講咗主題、地點同頁面關係。保持易讀，用連字號，唔好重複十次同一個 關鍵字；如果舊 URL 已經有 反向連結 或 圖片流量，更加唔好隨便改完就算。

Google 喺圖片最佳做法列出 BMP、GIF、JPEG、PNG、WebP、SVG 同 AVIF 等支援格式。實際指示好樸素：副檔名要配對檔案類型，畫質要夠用。太細太矇唔係 SEO 勝利；太大太靚亦唔係 UX 勝利。

之前
IMG_4821.JPG

之後
hong-kong-night-photography-workshop.webp

第二個名有描述性，但冇需要將「圖片 SEO」重複三次。
畀個檔案名抖下氣啦。

04 / SEO

ALT 唔係 關鍵字 垃圾桶

ALT 有兩份工作，互相有關但唔完全相同：無障礙 同 圖片理解。Google 稱 ALT 係提供圖片 圖片資料 最重要嘅 屬性，亦強調佢對 讀屏軟件 使用者和低頻寬讀者有用。優先次序其實幾明顯：先寫得似人話，再諗搜尋。

個空白格係有意義嘅。裝飾圖通常應該用空白 ALT——alt=——避免 輔助科技 逼人聽一段其實冇幫助嘅描述。最好唔好完全漏咗 屬性；空白 ALT 表示你係刻意保持安靜。

<!-- 有資訊嘅圖片 -->
<img src="north-point-noodle-shop.jpg"
     alt="北角一間茶記內，細枱上放住兩碗雲吞麵">

<!-- 裝飾圖 -->
<img src="paper-grain.svg" alt="">

圖片說明 又係另一回事。ALT 係貼住 圖片 元素 嘅短描述；圖片說明 係讀者睇到嘅 編輯 語境。如果相入面有值得留意嘅細節——濕地、取景角度、舊舖招牌——可以放 圖片說明 或附近段落。唔好叫 ALT 一個人扛晒成篇文章，佢會攰㗎。

複雜圖表、地圖、圖表，短 ALT 可以講清楚物件同結論，頁面就用普通文字提供數據或完整解釋。讀屏軟件 使用者唔應該靠幾粒 像素 估趨勢；搜尋引擎亦唔應該係唯一服務對象。

05 / SEO

速度：唔好等張相到先搬好屋企啲傢俬

最快嘅圖片，往往係唔使傳嗰張。之後先到按裝置實際需要輸出嘅版本。web.dev 自適應 圖片 指引提到，網站一般會準備幾個圖片尺寸，畀 瀏覽器 自己揀；手機訪客唔應該因為 CMS 得一張圖，就被送上一張 2400px 桌面版 相。

如果比例已知，就加 width 同 height，或者用 CSS 預留比例，避免圖片到達時整頁跳位。Chrome 關於 LCP 的文件講到，LCP 係最大可見內容元素完成 呈現 嘅時間；圖片主導嘅頁面，首屏主圖 好多時就係要先理解嘅那一個。

<img src="hong-kong-market-960.webp"
     srcset="hong-kong-market-480.webp 480w,
             hong-kong-market-960.webp 960w,
             hong-kong-market-1600.webp 1600w"
     sizes="(max-width: 760px) 100vw, 760px"
     alt="香港一條掛滿彩色遮棚的繁忙街市通道"
     width="1600" height="1067"
     loading="lazy" decoding="async">

‘Lazy’呢個字要加個 warning label。web.dev 瀏覽器 延遲載入 文件建議延遲載入 首屏以外 圖片，但首屏尤其 LCP 圖片應該一早可用。如果 CMS 將所有圖片一刀切 延遲載入，佢需要有人好好傾下。

06 / SEO

香港三語網站嘅圖片 SEO 難題

一張相唔識講廣東話、英文或者普通話，但圖片周圍嘅頁面會。用詞一轉，意思就可以唔同。‘茶店’ 未必等於「茶記」；‘街市’ 可能準確，但又未必捉到「街市」背後嘅本地搜尋意圖。如果頁面係寫畀香港人睇，ALT 同 圖片說明 要寫到香港讀者真係明，唔係逐字翻譯到似酒店 宣傳冊。

三語版本要保留重要視覺資料，但唔使逐字一模一樣。Google 嘅 手機版 指引要求 手機版 同 桌面版 版本有相若嘅圖片質素及 圖片資料；同一個原則都適用於語言版本。每頁有自己 canonical 同 語言版本關係，圖片本身如果係同一張，可以保持同一個穩定 URL。

做本地生意時，只喺真係睇得到或者頁面真係需要時加地點：例如相片係皇后大道中門面，而頁面亦有資料，寫「皇后大道中門面」就有幫助。唔好將每個 ALT 都逼去旺角、銅鑼灣、荃灣旅行。麵包店張相唔會因為一句 ALT 塞晒三個區就突然變得更 本地。

檔案名可以統一用英文，或者用公司可以長期管理嘅拼音／音譯。讀者見到嘅 ALT 同 圖片說明，比一場無止境嘅 檔案名 辯論更重要。揀一套 命名規則，寫低，之後唔好每逢新同事入職就重新發明一次。

07 / SEO

電商、作品集、本地店舖：整理啱嘅證據

產品 圖片集、攝影師作品集、餐廳地點頁，圖片用法本身就唔同。圖片 SEO 唔係將一個 模板 硬套落全部頁面，而係令證據配合目的。產品相要清楚、穩定、一致；作品集要交代作品、創作者、項目 同授權；本地店舖就應該展示真實地方、實用到訪資料，唔好用 素材相 演戲。

文章方面，Google Article 結構化資料 文件指 標記 可以幫 Google 理解文章、圖片、日期及標題；產品方面，商家資訊 文件講到 Product／Offer 標記 可能令頁面符合包括 Google 圖片 在內嘅 產品體驗；本地生意就可以參考LocalBusiness 結構化資料。但符合資格唔等於一定出現，頁面仍然要值得被睇。

版權值得獨立講，因為好多人係收到 下架電郵 先記得。Google 圖片 圖片資料 文件指出，如果想符合 可授權標記 資格，圖片 結構化資料 要有 license 屬性；網頁使用權聲明 就可以解釋圖片如何使用。但呢個唔代表你可以由工作坊頁面抄張相落自己網站，只係講有權使用時，點樣表達 使用權 資料。

IPTC 圖片資料、創作者 署名 同 使用權 頁面 對日常管理有用，但唔等於 授權，更唔係排名神掣。可以當係相片嘅 passport 同文件——相片流轉時重要，但唔係成個旅程。

08 / SEO

30 分鐘圖片 SEO 檢查：實際做法

1. 揀頁面先睇主要 登陸頁、產品頁、作品頁，同已經有 圖片曝光 嘅頁面。最有價值嗰幾張未處理之前，唔使急住 檢查 廢 縮圖。
2. 列出圖片 URL記錄現有 URL、檔案名、格式、容量、像素 尺寸、ALT、圖片說明、所屬頁面，以及係首屏上面定下面。
3. 檢查 crawlability用 私人瀏覽器 開圖片 URL，睇 HTML 有冇 img src，檢查 robots 規則，同埋頁面係咪要 登入 或 點擊 先出圖。
4. 檢查意思問自己：檔案名、ALT、圖片說明、附近文字同實際畫面係咪講同一件事？有一樣唔同，就先改最誤導嗰個。
5. 檢查 傳送測手機及 桌面版 尺寸、版面移動、LCP、延遲載入、快取標頭，同 瀏覽器 係咪下載大過 顯示位置 太多嘅圖。
6. 檢查權利記錄來源、攝影師、授權 或 使用權限。如果你講唔清點解有權刊登，停一停先，真係。
7. 記錄 基準用 Search Console、分析工具 同 速度測試 記低 圖片 點擊／曝光、頁面 轉化、圖片 位元組 同 實際效能。

喺Search Console 效能 報告，可以用 搜尋類型 篩選器 睇 網頁、圖片、影片 或 新聞。Search Console 說明頁亦講到，可以按 搜尋查詢、頁面、國家／地區、裝置 同 搜尋外觀 分組。咁你問嘅就唔再係「SEO 有冇升？」而係「香港手機用戶喺圖片搜尋見到邊啲產品頁？佢哋有冇 查詢？」——好好多。

指定一頁時用網址檢查，速度問題就配合 Lighthouse／PageSpeed 同 瀏覽器 DevTools。實驗室分數 唔代表全世界；實際使用數據 可能完全另一個故事，尤其係一個喺繁忙 MTR 月台、得一格訊號嘅香港用戶。唔係講笑，嗰種環境先係真實網絡。

09 / SEO

90 日計劃：唔使即刻大裝修個網站

唔使因為一張產品相有 4.8MB，就即刻換晒成個 網站。由痛點最大嘅地方落手。一間香港小企有五十張服務頁，可能由一份可重複使用嘅 上載 檢查清單 得益，多過一場最後喺第二個星期停擺嘅 媒體庫搬遷。我見過呢套戲，個中段好長。

10 / SEO

FAQ：圖片 SEO 成日被問嘅問題

圖片 SEO 會唔會保證 Google 圖片 排名？

唔會。Google 圖片指引講嘅係幫助發現及理解圖片嘅最佳做法，唔係保證位置。結果會受相關性、品質、競爭、搜尋查詢 語境 同你控制唔到嘅系統影響。有人保證第一格，通常係用一茶匙確定性賣你一桶幻想。

每一個 ALT 都要有「圖片 SEO」嗎？

唔使。頁面真係講圖片 SEO，先喺 標題、heading 或正文自然提到關鍵字。ALT 應該描述圖片同用途。「圖片 SEO 圖片 SEO 香港 圖片 SEO」對 讀屏軟件 使用者冇幫助，仲好似太用力。

香港 SEO 一定要用中文檔案名？

唔一定。統一用英文或者拼音都可以，前提係團隊長期管理到。自然嘅繁中／英文 ALT、準確頁面內容、本地 語境 同穩定技術 傳送，比檔案名爭論重要得多。揀一套 編輯人員 真係會跟嘅 命名規則。

WebP 一定比 JPEG 好？

冇一個格式可以贏晒所有圖片、瀏覽器、編輯流程 同畫質要求。要測真正輸出。太矇、冇 備用版本，或者容量仍然大過需要，就唔係勝利，只係 副檔名 新啲。

可唔可以每張圖都 延遲載入？

可以加 屬性，但唔好一刀切。web.dev 建議 首屏以外 圖片先 延遲載入，首屏／LCP 圖片就要早啲可用。主圖 延遲載入，往往只係令讀者更遲見到佢嚟睇嘅畫面。

EXIF 同相機設定會唔會直接提升排名？

有用嘅 創作者 同 使用權 圖片資料 可以保留，方便工作流程，但唔好將策略押晒落 EXIF。搜尋系統仍然需要可 爬取 檔案同有意義嘅頁面 語境；圖片資料 救唔返被 block 嘅圖片、空洞頁面，亦救唔返你冇權刊登嘅相。

一篇 blog 應該放幾多張圖？

解釋需要幾多就放幾多。一份實戰指南可能需要四張強而有用嘅圖；產品頁可能需要幾個角度；短公告一張已經夠。數 meaning，唔好數裝飾。六張一樣嘅 素材相，只係一個 idea 戴咗六頂帽。

今日第一樣應該修咩？

用手機開你最重要嗰頁，搵最大張圖。睇 URL、容量、尺寸、ALT、載入 模式、圖片說明 同 來源使用權；再檢查 HTML 係咪真正 img 元素。十分鐘，通常比再睇一個鐘 SEO 討論串 有用。

“令圖片容易被搵、容易被理解、容易載入，而且難以被誤解。” — 實用圖片 SEO 簡報

其實就係咁。唔係微型 技巧，唔係喺檔案名撒一撮 關鍵字，亦唔係 外掛程式儀表板 變綠但頁面仍然慢到似等緊升降機。當你將相片當 內容、將頁面當 語境、將讀者當真人，搜尋系統好多時會感受到。