seo-images

Name: seo-images
Author: agricidaniel

圖片最佳化分析

檢查項目

替代文字

所有 <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 分析章節。註明擴充功能未安裝。

您可能也喜歡

ads-create

7.7Ksecurity

Create source-grounded paid-ad campaign concepts, messaging, copy, creative briefs, and production plans from a validated brand profile, campaign objective, platform requirements, and optional audit evidence. Triggers on: campaign brief, campaign concepts, create a campaign, ad concepts, ad copy, ad messaging, creative brief, headlines, descriptions.

agricidaniel

獲取

notion

384Ksecurity

Notion CLI/API for pages, Markdown content, data sources, files, comments, search, Workers, and raw API calls.

steipete

獲取

network-config-validation

237Ksecurity

Pre-deployment checks for router and switch configuration, including dangerous commands, duplicate addresses, subnet overlaps, stale references, management-plane risk, and IOS-style security hygiene.

affaan-m

獲取

繼續探索

瀏覽 security 熱門 Skills 最近更新