画像最適化分析

チェック項目

Alt テキスト

• すべての <img> 要素に存在（装飾的な場合を除く：role="presentation"）
• 説明的である：画像コンテンツを説明し、「image.jpg」や「photo」ではない
• 関連キーワードを自然に含める、キーワード詰め込みでない
• 長さ：10～125 文字

良い例：

• "Professional plumber repairing kitchen sink faucet"
• "Red 2024 Toyota Camry sedan front view"
• "Team meeting in modern office conference room"

悪い例：

• "image.jpg"（ファイル名、説明ではない）
• "plumber plumbing plumber services"（キーワード詰め込み）
• "Click here"（説明的でない）

ファイルサイズ

画像カテゴリ別の段階的閾値：

画像カテゴリ	目標値	警告	重大
サムネイル	< 50KB	> 100KB	> 200KB
コンテンツ画像	< 100KB	> 200KB	> 500KB
ヒーロー/バナー画像	< 200KB	> 300KB	> 700KB

品質低下なしで目標値への圧縮を推奨します。

形式

形式	ブラウザサポート	ユースケース
WebP	97%+	デフォルト推奨
AVIF	92%+	最高圧縮、新しい形式
JPEG	100%	写真用フォールバック
PNG	100%	透明度付きグラフィックス
SVG	100%	アイコン、ロゴ、イラスト

JPEG/PNG より WebP/AVIF を推奨します。形式フォールバック付き <picture> 要素をチェックしてください。

推奨される <picture> 要素パターン

最も効率的な形式を優先したプログレッシブエンハンスメントを使用してください：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Descriptive alt text" width="800" height="600" loading="lazy" decoding="async">
</picture>

ブラウザは最初にサポートされた形式を使用します。現在のブラウザサポート：AVIF 93.8%、WebP 95.3%。

JPEG XL：新興フォーマット

2025 年 11 月、Google の Chromium チームは 2022 年の決定を撤回し、Rust ベースのデコーダを使用して Chrome で JPEG XL サポートを復元することを発表しました。実装は機能完全ですが、Chrome 安定版ではまだ提供されていません。JPEG XL は無損失 JPEG 再圧縮（品質低下なしで約 20% の節約）と競争力のある損失圧縮を提供します。Web デプロイはまだ実用的ではありませんが、将来の採用を注視する価値があります。

レスポンシブ画像

• 複数サイズ向け 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="Description"
>

遅延読み込み

• loading="lazy" をビューポート下の画像に設定
• ヒーロー画像/初期表示画像に遅延読み込みを使用しない（LCP を低下させる）
• ネイティブ vs JavaScript ベースの遅延読み込みをチェック

<!-- ビューポート下 - 遅延読み込み -->
<img src="photo.jpg" loading="lazy" alt="Description">

<!-- ビューポート上 - 即座読み込み（デフォルト） -->
<img src="hero.jpg" alt="Hero image">

検出された遅延読み込み方法（lazy_method フィールド）

scripts/parse_html.py は lazy_method フィールドで各画像の遅延読み込み機構を分類します。5 つの値：

lazy_method	検出信号	一般的なスタック
native	loading="lazy" HTML 属性	最新ブラウザ、プレーン HTML
perfmatters	data-perfmatters-src/-srcset または perfmatters-lazy クラス	WordPress + Perfmatters プラグイン
ewww	data-ewww-src / data-eio または lazyload-eio クラス	WordPress + EWWW Image Optimizer
js-generic	data-src / data-lazy-src / data-original / data-srcset または lazyload/lazyloaded/lazy クラス	Lazysizes、vanilla-lazyload、jQuery プラグイン
none	属性もクラスも検出されない	ページがこの画像を遅延読み込みしていない

画像 SEO を監査する場合、lazy_method を loading と一緒に報告して、サイトが JS 駆動の遅延ローダーを使用しているかどうかをユーザーが知ることができるようにしてください（この場合、ネイティブ loading="lazy" 属性は意図的に存在しません — これは後退ではありません）。

LCP 画像向け fetchpriority="high"

ヒーロー/LCP 画像に fetchpriority="high" を追加して、ブラウザのネットワークキューでのダウンロード優先度を高くします：

<img src="hero.webp" fetchpriority="high" alt="Hero image description" width="1200" height="630">

重要： ビューポード上/LCP 画像に遅延読み込みを使用しないでください。LCP 画像に loading="lazy" を使用すると、LCP スコアに直接悪影響を与えます。loading="lazy" はビューポード下の画像のみに予約してください。

非 LCP 画像向け decoding="async"

非 LCP 画像に decoding="async" を追加して、画像デコーディングがメインスレッドをブロックするのを防ぎます：

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

CLS 防止

• すべての <img> 要素に width と height 属性を設定
• CSS aspect-ratio を代替手段として使用
• 寸法のない画像にフラグを付ける

<!-- 良い例 - 寸法を設定 -->
<img src="photo.jpg" width="800" height="600" alt="Description">

<!-- 良い例 - CSS アスペクト比 -->
<img src="photo.jpg" style="aspect-ratio: 4/3" alt="Description">

<!-- 悪い例 - 寸法なし -->
<img src="photo.jpg" alt="Description">

ファイル名

• 説明的：IMG_1234.jpg ではなく blue-running-shoes.webp
• ハイフン区切り、小文字、特殊文字なし
• 関連キーワードを含める

CDN の使用

• CDN から画像が配信されているかチェック（別ドメイン、CDN ヘッダー）
• 画像が多いサイト向け CDN を推奨
• エッジキャッシングヘッダーをチェック

出力

画像監査サマリー

メトリクス	ステータス	数
画像総数	-	XX
Alt テキスト欠落	❌	XX
オーバーサイズ（>200KB）	⚠️	XX
形式が誤り	⚠️	XX
寸法なし	⚠️	XX
遅延読み込みなし	⚠️	XX

優先度付き最適化リスト

ファイルサイズ影響度でソート（最大節約順）：

画像	現在のサイズ	形式	問題	推定節約量
...	...	...	...	...

推奨事項

1. X 個の画像を WebP 形式に変換（推定 XX KB 節約）
2. X 個の画像に alt テキストを追加
3. X 個の画像に寸法を追加
4. X 個のビューポード下の画像で遅延読み込みを有効化
5. X 個のオーバーサイズ画像を圧縮

---

画像 SERP 分析

DataForSEO MCP が利用可能な場合、競争データで画像監査を強化します。

/seo images serp <keyword>

ページ上の画像を Google Images SERP ランキングと相互参照します。

ワークフロー：

1. serp_google_images_live_advanced 経由で Google Images 結果を取得（深度=100）
2. 抽出：トップドメイン、画像タイプ、alt テキストパターン
3. 競合先画像 SERP ランドスケープを出力

出力：

ランク	ドメイン	タイトル/Alt	画像 URL	ページ URL
1	example.com	"Blue running shoes..."	.../shoes.webp	/products/...

分析内容：

• ドメイン支配度：最も多くの画像ポジションを保有しているサイト（トップ 10 件数別）
• Alt テキストパターン：トップランキング画像の一般的なタイトル/alt パターン
• 形式分布：トップ結果の WebP vs JPEG vs PNG
• 機会スコア：ページランキングがあるが画像が無いキーワード

DataForSEO MCP が利用不可能な場合、ユーザーに通知し、拡張機能のインストールを提案します。

---

画像ファイル最適化

SEO 向けの画像ファイル最適化：形式変換、メタデータ挿入、圧縮。

/seo images optimize <path>

Web と 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

# WebP via ImageMagick（cwebp がインストールされていない場合のフォールバック）
convert input.jpg -quality 82 output.webp

# AVIF via FFmpeg（エンコード遅い、最高圧縮）
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 Images は IPTC Creator、Credit Line、Copyright を検索結果に表示します。 これはランキング要因ではありませんが、リッチ結果表示とブランド帰属を改善します。

exiftool で（推奨）：

# すべてのメタデータを読み取り
exiftool image.jpg

# Google Images リッチ結果向け IPTC + XMP メタデータを挿入
exiftool \
  -IPTC:ObjectName="Product Photo Description" \
  -IPTC:Caption-Abstract="Detailed image description" \
  -IPTC:By-line="Brand Name Photography" \
  -IPTC:Credit="Brand Name" \
  -IPTC:CopyrightNotice="Copyright 2026 Brand Name" \
  -IPTC:Source="brandname.com" \
  -XMP:Title="Product Photo Description" \
  -XMP:Description="Detailed image description" \
  -XMP:Creator="Brand Name Photography" \
  -XMP:Rights="Copyright 2026 Brand Name" \
  image.jpg

# ディレクトリ内のすべての画像にバッチ挿入
exiftool -overwrite_original \
  -IPTC:By-line="Brand Name" \
  -IPTC:CopyrightNotice="Copyright 2026 Brand Name" \
  *.jpg *.webp *.png

ImageMagick で（フォールバック）：

identify -verbose image.jpg | head -50

convert input.jpg \
  -set comment "Product Photo Description" \
  -set IPTC:2:80 "Brand Name Photography" \
  -set IPTC:2:116 "Copyright 2026 Brand Name" \
  output.jpg

重要： WebP は EXIF と XMP をサポートしていますが、IPTC はネイティブサポートしていません。WebP ファイルの場合は、IPTC の代わりに XMP フィールドを使用してください。exiftool はこの変換を自動処理します。

メタデータ監査

# exiftool で高速監査
exiftool -IPTC:all -XMP:all -EXIF:ImageDescription image.jpg

# バッチ監査 - IPTC Creator がない画像を検出
exiftool -if 'not $IPTC:By-line' -filename *.jpg *.webp *.png

完全な最適化パイプライン

最大の画像 SEO を実現するには、各画像でこのパイプラインを実行します：

1. 既存メタデータを監査：exiftool -IPTC:all -XMP:all image.jpg
2. IPTC/XMP メタデータを挿入：Creator、Copyright、Description
3. WebP に変換：cwebp -q 82 -metadata all image.jpg -o image.webp
4. レスポンシブバリアントを生成：400w、800w、1200w
5. メタデータ保存を確認：exiftool image.webp
6. <picture> HTML を生成：AVIF > WebP > JPEG フォールバックチェーン

Google Images にとって重要な要素と重要でない要素

要素	影響度	設定場所
Alt テキスト	重大（ランキング）	HTML <img alt="">
ファイル名	高（ランキング）	ファイルシステム（説明的、ハイフン区切り）
ページコンテキスト	高（ランキング）	周辺 HTML コンテンツ
ファイルサイズ/速度	中（CWV 経由の間接的影響）	圧縮 + 形式変換
IPTC Creator/Copyright	低（表示のみ）	画像ファイルメタデータ
EXIF カメラデータ	なし	SEO に無関係
IPTC キーワード	なし	Google は無視

---

エラーハンドリング

シナリオ	アクション
URL に到達不可	ステータスコード付き接続エラーを報告します。URL を確認し、サイトが認証を必要としているか確認することを提案します。
ページに画像が見つからない	<img> 要素が検出されなかったことを報告します。画像が JavaScript または CSS background-image 経由で読み込まれているかチェックすることを提案します。
CDN または認証の背後の画像	画像ファイルに直接アクセスできなかったことを注記します。利用可能なメタデータ（マークアップの alt テキスト、寸法、形式）を報告し、アクセス不可リソースにフラグを付けます。
exiftool がインストールされていない	ImageMagick にフォールバックします。推奨：sudo apt install libimage-exiftool-perl
cwebp がインストールされていない	ImageMagick または FFmpeg で WebP 変換にフォールバックします。推奨：sudo apt install webp
DataForSEO MCP が利用不可	画像 SERP 分析セクションをスキップします。拡張機能がインストールされていないことを注記します。