Gallery 圖片集：作品集與空間照片的最佳展示

TL;DR

• Gallery 是多圖展示 block，三套模板會自動以網格排版顯示。
• 每張圖片有兩個欄位：url（圖片網址）、alt（替代文字）。
• alt 文字是 SEO 關鍵——Google 靠它理解圖片內容，無障礙閱讀器也靠它。
• 圖片建議先壓縮再上傳，單張建議控制在 500KB 以內。

---

Gallery 適合的場景

• 作品集：攝影師、設計師、插畫家、髮型設計師。
• 空間展示：餐廳、民宿、瑜珈教室、工作室、展演空間。
• 活動紀錄：過去課程、活動、市集、展覽的照片。
• 商品視覺：產品的使用情境照（不是上架用，那個用 Product List）。

跟 Before/After 區塊的差異：Gallery 是單張獨立展示，Before/After 是兩張成對對比。作品分享選 Gallery，服務成果對比選 Before/After。

---

編輯器欄位

• 標題（heading）：例如「作品集」、「空間」、「活動紀錄」。
• 圖片清單（images[]）：每張圖包含：
  • url：圖片網址。上傳後會存 R2 並回傳網址，或貼外部連結。
  • alt：替代文字（SEO + 無障礙用）。
• i18n 分頁：heading 與 alt 都支援多語切換。

---

alt 文字怎麼寫

這是整個 block 最容易被忽略、卻最有 SEO 價值的欄位。三個原則：

1. 描述圖片內容，不是描述「這是什麼」。好：「木紋長桌配皮革椅與綠植的室內設計」；壞：「IMG_8293」、「作品 1」。
2. 含關鍵字但不堆砌。自然帶入地區、風格、產業詞。
3. 15-25 字通常夠用。太短沒資訊，太長像塞滿關鍵字。

---

圖片優化小提示

• 檔案大小：500KB 以內為佳，超過的話上傳前先用工具壓縮（TinyPNG、Squoosh）。
• 尺寸：寬度 1200-1600px 足夠網頁展示，4K 原圖沒必要。
• 格式：JPG 適合照片、PNG 適合有透明背景的去背圖、WebP 壓縮最好但相容性稍差。
• 比例統一：同一個 Gallery 裡盡量用同比例（全橫、全直、或全正方形），混排會跳動得很厲害。

---

搭配建議

Gallery 常見位置：

• 單獨作品頁：Hero → 作品介紹（Rich Text）→ Gallery → CTA Banner（預約 / 詢問）。
• About 頁輔助：Hero → About → Gallery（空間照）→ Team，建立信任感。
• 服務頁案例：服務說明後放 Gallery 展示過往案例照片。

---

三個常見錯誤

1. alt 全空白：最常見的錯誤。圖片上傳完忘記填 alt，直接損失 Google Images 流量。寫個範本貼一輪都好。
2. 每張圖超過 1MB：10 張 1MB 的圖 = 載入 10MB，手機用戶直接跳出。上傳前壓縮。
3. 用熱連結 stock photo：外部 stock 圖片網址會失效，而且版權風險高。自己拍的、或合法授權的 stock 下載後上傳到 R2 比較安全。

---

寫在最後

Gallery 在視覺產業是主視覺，在文字產業是輔助素材。不管哪一種，alt 文字決定了它的 SEO 效益——花 10 分鐘幫 20 張圖寫 alt，比什麼都實際。

登入 AHHA 後台 → 頁面管理 → 加入 Gallery block → 上傳圖片並逐張填 alt，儲存即完成。