seo-images

圖片最佳化分析

檢查項目

替代文字

所有 <img> 元素都需有替代文字（裝飾性圖片除外：role="presentation"）
具描述性：描述圖片內容，而非「image.jpg」或「photo」
在自然的情況下包含相關關鍵字，避免關鍵字堆砌
長度：10-125 個字元

良好範例：

「專業水電工維修廚房水龍頭」
「紅色 2024 Toyota Camry 轎車正面視圖」
「現代辦公室會議室中的團隊會議」

不良範例：

「image.jpg」（檔名，非描述）
「水電工水電水電服務」（關鍵字堆砌）
「按這裡」（不具描述性）

檔案大小

依圖片類別分層門檻：

圖片類別	目標	警告	嚴重
縮圖	< 50KB	> 100KB	> 200KB
內容圖片	< 100KB	> 200KB	> 500KB
主視覺/橫幅圖片	< 200KB	> 300KB	> 700KB

建議在不影響品質的前提下，壓縮至目標門檻。

格式

格式	瀏覽器支援	使用情境
WebP	97%+	預設推薦
AVIF	92%+	最佳壓縮，較新格式
JPEG	100%	照片的備援格式
PNG	100%	含透明度的圖形
SVG	100%	圖示、標誌、插圖

建議使用 WebP/AVIF 取代 JPEG/PNG。檢查是否使用 <picture> 元素並提供格式備援。

建議的 `<picture>` 元素模式

使用漸進增強，將最高效的格式放在最前面：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="描述性替代文字" width="800" height="600" loading="lazy" decoding="async">
</picture>

瀏覽器會使用第一個支援的格式。目前瀏覽器支援率：AVIF 93.8%，WebP 95.3%。

JPEG XL：新興格式

第三方報導與維基百科指出，基於 Rust 的 JPEG XL 解碼器已於 Chrome 145 穩定版（2026-02-10）中隨附，但需透過 chrome://flags/#enable-jxl-image-format 旗標啟用，預設未啟用；未從 Google 官方取得確認資訊。由於預設支援尚未確認，目前不適合用於正式網頁傳遞。請繼續使用 AVIF/WebP 搭配 JPEG 備援，並持續關注。

響應式圖片

使用 srcset 屬性提供多種尺寸
sizes 屬性需符合版面配置斷點
根據裝置像素比例提供適當解析度

<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  alt="描述"
>

延遲載入

對摺頁以下的圖片使用 loading="lazy"
請勿對摺頁以上/主視覺圖片使用延遲載入（會影響 LCP）
檢查是使用原生延遲載入還是 JavaScript 實作

<!-- 摺頁以下 - 延遲載入 -->
<img src="photo.jpg" loading="lazy" alt="描述">

<!-- 摺頁以上 - 立即載入（預設） -->
<img src="hero.jpg" alt="主視覺圖片">

偵測到的延遲載入方法（`lazy_method` 欄位）

scripts/parse_html.py 會透過每個圖片項目的 lazy_method 欄位來分類圖片的延遲載入機制。共有五種值：

`lazy_method`	偵測到的訊號	常見技術棧
`native`	`loading="lazy"` HTML 屬性	現代瀏覽器、純 HTML
`perfmatters`	`data-perfmatters-src`/`-srcset` 或 class `perfmatters-lazy`	WordPress + Perfmatters 外掛
`ewww`	`data-ewww-src` / `data-eio` 或 class `lazyload-eio`	WordPress + EWWW Image Optimizer
`js-generic`	`data-src` / `data-lazy-src` / `data-original` / `data-srcset` 或 class `lazyload`/`lazyloaded`/`lazy`	Lazysizes、vanilla-lazyload、jQuery 外掛
`none`	無屬性也無 class 訊號	頁面未對此圖片使用延遲載入

在稽核圖片 SEO 時，請一併回報 lazy_method 與 loading，讓使用者知道網站是否使用 JS 驅動的延遲載入（在這種情況下，原生 loading="lazy" 屬性的缺席是正常的，並非回歸）。

為 LCP 圖片設定 `fetchpriority="high"`

為你的主視覺/LCP 圖片加上 fetchpriority="high"，以在瀏覽器的網路佇列中優先下載：

<img src="hero.webp" fetchpriority="high" alt="主視覺圖片描述" width="1200" height="630">

關鍵： 請勿對摺頁以上/LCP 圖片使用延遲載入。對 LCP 圖片使用 loading="lazy" 會直接損害 LCP 分數。請將 loading="lazy" 保留給摺頁以下的圖片。

為非 LCP 圖片設定 `decoding="async"`

為非 LCP 圖片加上 decoding="async"，以防止圖片解碼阻塞主執行緒：

<img src="photo.webp" alt="描述" width="600" height="400" loading="lazy" decoding="async">

CLS 預防

所有 <img> 元素都需設定 width 和 height 屬性
或使用 aspect-ratio CSS 作為替代
標記未設定尺寸的圖片

<!-- 良好 - 已設定尺寸 -->
<img src="photo.jpg" width="800" height="600" alt="描述">

<!-- 良好 - CSS 長寬比 -->
<img src="photo.jpg" style="aspect-ratio: 4/3" alt="描述">

<!-- 不良 - 無尺寸 -->
<img src="photo.jpg" alt="描述">

檔案名稱

具描述性：使用 blue-running-shoes.webp 而非 IMG_1234.jpg
使用連字號、小寫，無特殊字元
包含相關關鍵字

CDN 使用

檢查圖片是否透過 CDN 提供（不同網域、CDN 標頭）
對圖片量大的網站建議使用 CDN
檢查是否有邊緣快取標頭

輸出

圖片稽核摘要

指標	狀態	數量
圖片總數	-	XX
缺少替代文字	❌	XX
檔案過大（>200KB）	⚠️	XX
格式錯誤	⚠️	XX
無尺寸	⚠️	XX
未延遲載入	⚠️	XX

優先最佳化清單

依檔案大小影響排序（節省最多者優先）：

圖片	目前大小	格式	問題	預估節省
...	...	...	...	...

建議

將 X 張圖片轉換為 WebP 格式（預估節省 XX KB）
為 X 張圖片加入替代文字
為 X 張圖片加入尺寸
對 X 張摺頁以下圖片啟用延遲載入
壓縮 X 張過大圖片

圖片 SERP 分析

當 DataForSEO MCP 可用時，可透過競爭資料強化圖片稽核。

`/seo images serp <keyword>`

將頁面上的圖片與 Google 圖片 SERP 排名進行交叉比對。

工作流程：

透過 serp_google_images_live_advanced 取得 Google 圖片結果（深度=100）
擷取：頂級網域、圖片類型、替代文字模式
輸出競爭對手的圖片 SERP 概況

輸出：

排名	網域	標題/替代文字	圖片網址	頁面網址
1	example.com	"Blue running shoes..."	.../shoes.webp	/products/...

分析包含：

網域主導性：哪些網站佔據最多圖片位置（依數量前 10 名）
替代文字模式：排名頂尖圖片中常見的標題/替代文字模式
格式分佈：WebP 與 JPEG 與 PNG 在頂尖結果中的比例
機會分數：你的頁面有排名但圖片未出現的關鍵字

如果 DataForSEO MCP 不可用，請通知使用者並建議安裝擴充功能。

圖片檔案最佳化

針對 SEO 最佳化圖片檔案：格式轉換、中繼資料注入、壓縮。

`/seo images optimize <path>`

針對網頁與 SEO 最佳化圖片檔案。轉換為 WebP/AVIF、注入 IPTC 中繼資料、壓縮，並產生響應式變體。

使用的工具（依偏好順序）：

exiftool -- EXIF/IPTC/XMP 讀寫（安裝：sudo apt install libimage-exiftool-perl）
cwebp -- WebP 轉換（安裝：sudo apt install webp）
ImageMagick convert -- 格式轉換、調整尺寸（大多數系統已預裝）
FFmpeg -- 格式轉換的備援方案（已預裝）

執行前： 使用 which exiftool cwebp convert ffmpeg 檢查哪些工具可用。

格式轉換

將圖片轉換為現代格式並保留中繼資料：

# WebP（建議預設）- 保留中繼資料
cwebp -q 82 -metadata all input.jpg -o output.webp

# 透過 ImageMagick 轉換 WebP（若未安裝 cwebp 則使用備援）
convert input.jpg -quality 82 output.webp

# 透過 FFmpeg 轉換 AVIF（編碼較慢，壓縮最佳）
ffmpeg -i input.jpg -c:v libaom-av1 -crf 30 -still-picture 1 output.avif

# 響應式變體（400w、800w、1200w）
convert input.jpg -resize 400x -quality 82 image-400.webp
convert input.jpg -resize 800x -quality 82 image-800.webp
convert input.jpg -resize 1200x -quality 82 image-1200.webp

中繼資料注入（適用於 Google 圖片顯示的 IPTC）

Google 圖片會在搜尋結果中顯示 IPTC 創作者、信用額度與版權資訊。這並非排名因素，但可改善 Google 圖片的顯示與品牌歸屬。

使用 exiftool（建議）：

# 讀取所有中繼資料
exiftool image.jpg

# 注入 IPTC + XMP 中繼資料以獲得 Google 圖片豐富結果
exiftool \
  -IPTC:ObjectName="產品照片描述" \
  -IPTC:Caption-Abstract="詳細圖片描述" \
  -IPTC:By-line="品牌名稱攝影" \
  -IPTC:Credit="品牌名稱" \
  -IPTC:CopyrightNotice="版權所有 2026 品牌名稱" \
  -IPTC:Source="brandname.com" \
  -XMP:Title="產品照片描述" \
  -XMP:Description="詳細圖片描述" \
  -XMP:Creator="品牌名稱攝影" \
  -XMP:Rights="版權所有 2026 品牌名稱" \
  image.jpg

# 批次注入目錄中所有圖片
exiftool -overwrite_original \
  -IPTC:By-line="品牌名稱" \
  -IPTC:CopyrightNotice="版權所有 2026 品牌名稱" \
  *.jpg *.webp *.png

使用 ImageMagick（備援）：

identify -verbose image.jpg | head -50

convert input.jpg \
  -set comment "產品照片描述" \
  -set IPTC:2:80 "品牌名稱攝影" \
  -set IPTC:2:116 "版權所有 2026 品牌名稱" \
  output.jpg

注意：WebP 原生支援 EXIF 和 XMP，但不支援 IPTC。對於 WebP 檔案，請使用 XMP 欄位取代 IPTC。exiftool 會自動處理此轉換。

AI 生成圖片：`DigitalSourceType`（Merchant Center 要求）

對於由生成式 AI 產生的產品圖片，Google Merchant Center 要求 加入 IPTC DigitalSourceType: TrainedAlgorithmicMedia 中繼資料。這是營運政策要求，而非排名因素：若 AI 生成的圖片缺少此標籤，資料饋送可能會被拒絕。

主要來源（Merchant Center AI 生成內容政策）：
https://support.google.com/merchants/answer/14743464
（ai-optimization-guide 未記錄 DigitalSourceType/IPTC/Merchant 標籤。）

稽核指令：

# 稽核目錄中的 IPTC 標籤（統計：缺少、AI、拍攝等）
claude-seo run iptc_ai_label.py audit ./images/ --json

# 稽核單張圖片
claude-seo run iptc_ai_label.py audit ./hero.webp --json

# 將 AI 標籤注入圖片
claude-seo run iptc_ai_label.py inject ./ai-hero.webp \
    --source-type trainedAlgorithmicMedia

# 其他詞彙值：
#   compositeSynthetic               （拍攝與 AI 元素混合）
#   algorithmicMedia                 （完全由演算法建立，非來自取樣訓練資料）
#   compositeWithTrainedAlgorithmicMedia（例如在真實媒體上進行 AI 內補/外補）
#   digitalCapture                   （完全拍攝的照片）

原始 exiftool 等效指令（臨時使用）：

# 手動注入
exiftool \
  -XMP-iptcExt:DigitalSourceType="https://cv.iptc.org/newscodes/digitalsourcetype/trainedAlgorithmicMedia" \
  ai-generated-product.jpg

# 稽核：找出目錄中缺少標籤的圖片
exiftool -if 'not $XMP-iptcExt:DigitalSourceType' \
  -filename -DigitalSourceType *.jpg *.webp *.png

Google 會擷取這些 IPTC DigitalSourceType 值：

trainedAlgorithmicMedia：完全由 AI 生成（擴散模型產品圖片請使用此值）
compositeSynthetic：混合拍攝與 AI 生成元素
algorithmicMedia：完全由演算法建立，非來自取樣訓練資料
compositeWithTrainedAlgorithmicMedia：訓練過的演算法媒體與其他媒體的合成（例如在真實照片上進行 AI 內補/外補）
digitalCapture：完全拍攝的照片（注意：digitalCapture 不在 Google 的擷取值清單中，但為有效的 IPTC 值）

來源訊號（面向消費者）： SynthID 浮水印與 C2PA 內容憑證是新興的 AI 媒體識別訊號。請將產品層面的覆蓋範圍視為可能變動，除非從 Google 官方來源驗證。
這是偵測/透明度，非 IPTC DigitalSourceType 以外的額外必要 Merchant 資料饋送欄位。

可授權圖片： 若要獲得可授權徽章，請提供結構化資料（ImageObject 搭配 license 屬性 + acquireLicensePage 以提供「取得此圖片」連結）或嵌入的 IPTC 照片中繼資料（授權者網址 / 權利聲明網頁）。請交叉參考 seo-schema 以取得 ImageObject 標記。

探索注意事項： 圖片探索現在包含視覺搜尋擴散，涵蓋 Lens / AI Mode / Circle to Search（Gemini 多模態場景/物體理解），因此圖片可透過場景、物體和材質呈現，而非僅依賴替代文字。目前尚無新的已發布圖片 SEO 槓桿；請保持描述性替代文字 + 乾淨的結構化資料。

當對 AI 生成的資產執行 /seo images optimize 時，提示使用者確認來源類型，並自動注入對應的 IPTC 值。

對於 AI 生成的產品標題與描述，Google Merchant Center 也要求在資料饋送中單獨指定並標記 AI 生成的文字。這是在資料饋送層級而非頁面層級強制執行，請在交叉參考 seo-ecommerce 時標記此點。

中繼資料稽核

# 使用 exiftool 快速稽核
exiftool -IPTC:all -XMP:all -EXIF:ImageDescription image.jpg

# 批次稽核 - 找出缺少 IPTC 創作者的圖片
exiftool -if 'not $IPTC:By-line' -filename *.jpg *.webp *.png

完整最佳化流程

為達到最大圖片 SEO 效益，請對每張圖片執行以下流程：

稽核現有中繼資料：exiftool -IPTC:all -XMP:all image.jpg
注入 IPTC/XMP 中繼資料：創作者、版權、描述
轉換為 WebP：cwebp -q 82 -metadata all image.jpg -o image.webp
產生響應式變體：400w、800w、1200w
驗證中繼資料已保留：exiftool image.webp
產生 <picture> HTML：AVIF > WebP > JPEG 備援鏈

對 Google 圖片而言，哪些因素重要與不重要

因素	影響	設定位置
替代文字	關鍵（排名）	HTML `<img alt="">`
檔名	高（排名）	檔案系統（描述性、連字號）
頁面上下文	高（排名）	周圍的 HTML 內容
檔案大小/速度	中（間接透過 CWV）	壓縮 + 格式轉換
IPTC 創作者/版權	低（僅顯示）	圖片檔案中繼資料
EXIF 相機資料	無	與 SEO 無關
IPTC 關鍵字	無	Google 忽略這些

錯誤處理

情境	處理方式
網址無法連線	回報連線錯誤與狀態碼。建議確認網址是否正確，以及網站是否需要驗證。
頁面上未找到圖片	回報未偵測到任何 `<img>` 元素。建議檢查圖片是否透過 JavaScript 或 CSS background-image 載入。
圖片位於 CDN 或需驗證	註明無法直接存取圖片檔案進行大小分析。回報可用的中繼資料（來自標記的替代文字、尺寸、格式），並標記無法存取的資源。
未安裝 exiftool	改用 ImageMagick 處理中繼資料。建議安裝：`sudo apt install libimage-exiftool-perl`
未安裝 cwebp	改用 ImageMagick 或 FFmpeg 進行 WebP 轉換。建議安裝：`sudo apt install webp`
DataForSEO MCP 不可用	跳過圖片 SERP 分析章節。註明擴充功能未安裝。

您可能也喜歡

issue-triage

81Ksecurity

Issue triage: audit open issues, categorize, detect duplicates, cross-ref PRs, risk assessment, post comments. Args: "all" for deep analysis of all, issue numbers to focus (e.g. "42 57"), "en"/"fr" for language, no arg = audit only in French.

rtk-ai

獲取

caveman-setup

98Ksecurity

Wire the current repository through the Caveman Cloud gateway so every LLM request is measured — cost, tokens, latency — with zero behavior change. Use when the user pastes the Caveman setup prompt, says "set up caveman", or wants LLM spend observability added to an app. Requires the gateway URL and a Cave API key (the setup prompt carries both).

juliusbrussee

獲取

tasteforge-video

262Ksecurity

Use for file-driven multimodal image, video, and 3D-asset discovery; taste interviews; distill or apply workflows; style-pack validation; editable EDL/FCPXML export; provenance audits; and offline planning that must fail closed before provider generation.

affaan-m

獲取

繼續探索

瀏覽 security 熱門 Skills 最近更新