seo-images について
seo-imagesは、ウェブサイト画像のSEO監査と最適化を行うスキルです。代替テキスト、形式、ファイルサイズ、レスポンシブ配信、読み込み、寸法、メタデータを確認し、DataForSEO MCPが利用可能な場合は画像検索結果も分析します。
主な機能
- 01代替テキストと画像寸法の監査
- 02形式・サイズ・読み込み方法の確認
- 03レスポンシブ画像設定の確認
- 04画像ファイルの変換と圧縮
- 05画像メタデータの確認と追加
- 06DataForSEOによる画像検索結果の分析
活用シーン
- 01不足または不適切な代替テキストの発見
- 02大きすぎる画像ファイルの縮小
- 03画像配信と読み込み設定の確認
- 04AI生成の商品画像へのラベル付与
- 05画像検索での可視性の評価
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ infrasity-labs/ dev-gtm-claude-skills --skill seo-imagesインストール後、Claude Code で/seo-imagesを入力して読み込まれたか確認します。
詳細
画像最適化分析
チェック項目
代替テキスト
- すべての
<img>要素に設定されていること(装飾目的の場合を除く:role="presentation") - 内容がわかる説明であること。「image.jpg」や「photo」ではなく、画像の内容を説明します
- 不自然にならない範囲で関連キーワードを含め、キーワードを詰め込みすぎないこと
- 長さ:10〜125文字
良い例:
- 「キッチンの蛇口を修理するプロの配管工」
- 「正面から見た赤い2024年式トヨタ・カムリのセダン」
- 「モダンなオフィスの会議室で行われているチームミーティング」
悪い例:
- 「image.jpg」(ファイル名であり、説明になっていません)
- 「配管工 配管工事 配管工サービス」(キーワードの詰め込み)
- 「ここをクリック」(説明になっていません)
ファイルサイズ
画像カテゴリ別の段階的な基準値:
| 画像カテゴリ | 目標 | 警告 | 重大 |
|---|---|---|---|
| サムネイル | < 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%削減)と、競争力のある非可逆圧縮を実現します。現時点ではウェブへの導入は実用的ではありませんが、今後の採用に向けて動向を注視する価値があります。
レスポンシブ画像
- 複数のサイズを指定する
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 に悪影響を及ぼします)
- ネイティブと 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 の監査では、loading と併せて lazy_method も報告してください。これにより、サイトが JavaScript 駆動の遅延読み込み方式を使用しているかどうかがわかります(この場合、ネイティブの 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">
<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 |
| 代替テキストがない画像 | ❌ | 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 画像検索の結果を取得します(depth=100)- 上位ドメイン、画像の種類、代替テキストのパターンを抽出します
- 競合の画像 SERP の状況を出力します
出力:
| 順位 | ドメイン | タイトル/代替テキスト | 画像 URL | ページ URL |
|---|---|---|---|---|
| 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 (recommended default) - with metadata preserved
cwebp -q 82 -metadata all input.jpg -o output.webp
# WebP via ImageMagick (fallback if cwebp not installed)
convert input.jpg -quality 82 output.webp
# AVIF via FFmpeg (slower encode, best compression)
ffmpeg -i input.jpg -c:v libaom-av1 -crf 30 -still-picture 1 output.avif
# Responsive variants (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 の Creator、Credit Line、Copyright が表示されます。 これはランキング要因ではありませんが、リッチリザルトでの表示やブランドの帰属表示を改善します。
exiftool を使用する場合(推奨):
# Read all metadata
exiftool image.jpg
# Inject IPTC + XMP metadata for Google Images rich results
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
# Batch inject to all images in directory
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 はこの変換を自動的に処理します。
AI 生成画像:DigitalSourceType(Merchant Center の要件)
生成 AI で作成された商品画像について、Google Merchant Center では
IPTC DigitalSourceType: TrainedAlgorithmicMedia メタデータが必要です。これは
運用ポリシー上の要件であり、ランキング要因ではありません。このラベルがない
AI 生成画像を含むフィードは不承認となる場合があります。
主な情報源: https://developers.google.com/search/docs/fundamentals/ai-optimization-guide (AI メディアのラベル付けに関する Merchant Center の基本ポリシーを参照しています)。
監査コマンド:
# Audit a directory for the IPTC label (counts: missing, ai, captured, etc.)
python scripts/iptc_ai_label.py audit ./images/ --json
# Audit a single image
python scripts/iptc_ai_label.py audit ./hero.webp --json
# Inject the AI label into an image
python scripts/iptc_ai_label.py inject ./ai-hero.webp \
--source-type trainedAlgorithmicMedia
# Other vocabulary values:
# compositeSynthetic (mix of captured + AI elements)
# digitalCapture (fully captured photograph)
exiftool の直接実行に相当するコマンド(個別に使用する場合):
# Inject manually
exiftool \
-XMP-iptcExt:DigitalSourceType="https://cv.iptc.org/newscodes/digitalsourcetype/trainedAlgorithmicMedia" \
ai-generated-product.jpg
# Audit: find images missing the label across a directory
exiftool -if 'not $XMP-iptcExt:DigitalSourceType' \
-filename -DigitalSourceType *.jpg *.webp *.png
IPTC の語彙では、次の値も定義されています。
trainedAlgorithmicMedia— 完全に AI で生成(拡散モデルで生成した商品画像にはこれを使用)compositeSynthetic— 撮影画像と AI 生成要素を組み合わせたものdigitalCapture— 完全に撮影された写真(AI 要素なし)
AI 生成アセットに対して /seo images optimize を実行する際は、ユーザーにソースタイプの確認を求め、一致する IPTC 値を自動で挿入してください。
AI 生成の商品タイトルと説明文についても、Google Merchant Center では、AI 生成テキストをフィード内で個別に指定し、ラベル付けする必要があります。これはページではなくフィードのレイヤーで適用されます。seo-ecommerce と相互参照する際に、この点を明記してください。
メタデータの監査
# Quick audit with exiftool
exiftool -IPTC:all -XMP:all -EXIF:ImageDescription image.jpg
# Batch audit - find images missing IPTC Creator
exiftool -if 'not $IPTC:By-line' -filename *.jpg *.webp *.png
最適化パイプライン全体
画像 SEO を最大限に高めるには、各画像に対して次のパイプラインを実行してください。
- 既存のメタデータを監査する:
exiftool -IPTC:all -XMP:all image.jpg - IPTC/XMP メタデータを挿入する:Creator、Copyright、Description
- 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 Creator/Copyright | 低(表示のみ) | 画像ファイルのメタデータ |
| EXIF カメラデータ | なし | SEO には関係ありません |
| IPTC Keywords | なし | Google はこれらを無視します |
エラー処理
| シナリオ | 対応 |
|---|---|
| URL に到達できない | ステータスコードとともに接続エラーを報告します。URL を確認し、サイトで認証が必要かどうかを確認するよう案内します。 |
| ページに画像が見つからない | <img> 要素が検出されなかったことを報告します。画像が JavaScript または CSS の background-image で読み込まれているか確認するよう案内します。 |
| CDN または認証の背後にある画像 | サイズ分析のために画像ファイルへ直接アクセスできなかったことを記載します。利用可能なメタデータ(マークアップ内の代替テキスト、寸法、形式)を報告し、アクセスできないリソースを明記します。 |
| exiftool がインストールされていない | メタデータには ImageMagick を代わりに使用します。次を推奨します:sudo apt install libimage-exiftool-perl |
| cwebp がインストールされていない | WebP への変換には ImageMagick または FFmpeg を代わりに使用します。次を推奨します:sudo apt install webp |
| DataForSEO MCP を利用できない | Image SERP Analysis セクションを省略します。拡張機能がインストールされていないことを記載します。 |