mcpField
S
seo-images

seo-images

github.com/agricidanielマーケティング・グロース23.3k6.9k 回インストール6 日前に更新
リポジトリ

seo-images について

seo-imagesは、サイト運営者やSEO担当者向けに画像SEOを監査・最適化するスキルです。画像の説明、形式、寸法、読み込み方法を確認し、画像ファイルの最適化やSERP分析も扱います。

主な機能

  1. 01代替テキストと画像ファイル名の確認
  2. 02サイズ・形式・レスポンシブ設定の評価
  3. 03遅延読み込みとLCP優先度の確認
  4. 04寸法とレイアウトシフトリスクの監査
  5. 05画像変換・圧縮とメタデータ処理
  6. 06画像SERPの競合分析

活用シーン

  1. 01サイト画像SEOの問題監査
  2. 02画像形式とファイルサイズの最適化
  3. 03AI生成商品画像のIPTCラベル確認
  4. 04Google画像検索結果での競合比較

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/agricidaniel/claude-seo --skill seo-images

インストール後、Claude Code で/seo-imagesを入力して読み込まれたか確認します。

同梱ファイルLICENSE.txt

詳細

画像最適化の分析

チェック項目

代替テキスト
  • すべての <img> 要素に設定されている(装飾目的の場合を除く:role="presentation")
  • 内容を説明している。「image.jpg」や「photo」ではない
  • 自然な範囲で関連キーワードを含めている。キーワードを詰め込みすぎていない
  • 長さ:10~125 文字

良い例:

  • 「キッチンの蛇口を修理するプロの配管工」
  • 「赤い 2024 Toyota Camry セダンの正面」
  • 「モダンなオフィスの会議室でのチームミーティング」

悪い例:

  • 「image.jpg」(ファイル名であり、説明ではない)
  • 「配管工 配管 配管工サービス」(キーワードの詰め込み)
  • 「ここをクリック」(説明的でない)
ファイルサイズ

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

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

画質を損なわずに可能な場合は、目標の閾値まで圧縮することを推奨します。

フォーマット
フォーマットブラウザーのサポート状況用途
WebP97% 以上デフォルトで推奨
AVIF92% 以上圧縮率が最も高い新しいフォーマット
JPEG100%写真のフォールバック
PNG100%透過を含む画像
SVG100%アイコン、ロゴ、イラスト

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>

ブラウザーは、最初に対応しているフォーマットを使用します。世界全体のブラウザー対応状況(caniuse.com、2026-09-28 確認):AVIF は約 95.4%、WebP は約 96.8% です。数値を引用する前に caniuse を再確認してください。

JPEG XL:新興フォーマット

サードパーティの報道と Wikipedia によると、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="Description"
>
遅延読み込み
  • ファーストビューより下の画像に loading="lazy" を設定する
  • ファーストビューやヒーロー画像は遅延読み込みしない(LCP に悪影響を与えます)
  • ネイティブ方式と JavaScript ベースの遅延読み込みを確認する

<img src="photo.jpg" loading="lazy" alt="Description">


<img src="hero.jpg" alt="Hero image">
検出される遅延読み込み方式(lazy_method フィールド)

"${CLAUDE_PLUGIN_ROOT}/scripts/claude-seo" run parse_html.py は、各画像の遅延読み込み方式を、各画像エントリーの lazy_method フィールドで分類します。値は 5 種類です。

lazy_method検出されたシグナル一般的な構成
nativeloading="lazy" HTML 属性最新のブラウザー、プレーンな HTML
perfmattersdata-perfmatters-src/-srcset またはクラス perfmatters-lazyWordPress + Perfmatters プラグイン
ewwwdata-ewww-src/data-eio またはクラス lazyload-eioWordPress + EWWW Image Optimizer
js-genericdata-src/data-lazy-src/data-original/data-srcset またはクラス lazyload/lazyloaded/lazyLazysizes、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 属性を設定します
  • 代替手段として aspect-ratio CSS を使用します
  • 寸法が指定されていない画像にフラグを設定します

<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
優先度順の最適化リスト

ファイルサイズへの影響が大きい順(削減量が多い順):

画像現在のサイズ形式問題推定削減量
...............
推奨事項
  1. X 枚の画像を WebP 形式に変換します(推定 XX KB 削減)
  2. X 枚の画像に代替テキストを追加します
  3. X 枚の画像に寸法を追加します
  4. ファーストビューより下にある X 枚の画像で遅延読み込みを有効にします
  5. サイズ超過の X 枚の画像を圧縮します

画像の SERP 分析

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

/seo images serp <keyword>

ページ上の画像を、Google SERP に表示される画像検索結果と照合します。

ワークフロー:

  1. ピン留めされた DataForSEO MCP サーバー(2.8.10)には、Google Images SERP ツールがありません。 SERP に画像がある場合は serp_organic_live_advanced の images 要素(depth=100)を使用し、 画像 SERP データを利用できない場合は、その旨を明確に伝えます
  2. 上位ドメイン、画像の種類、代替テキストのパターンを抽出します
  3. 競合の画像 SERP の状況を出力します

出力:

順位ドメインタイトル/代替テキスト画像 URLページ URL
1example.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 Images 表示用の IPTC)

Google Images では、検索結果に IPTC の Creator、Credit Line、Copyright が表示されます。 これはランキング要因ではありませんが、Google Images での表示やブランドの帰属表示を改善できます。

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 生成画像を含むフィードは、不承認になる可能性があります。

一次情報(Merchant Center の AI 生成コンテンツポリシー): https://support.google.com/merchants/answer/14743464 (ai-optimization-guide には DigitalSourceType/IPTC/Merchant のラベル付けに関する記載はありません。)

監査コマンド:

# Audit a directory for the IPTC label (counts: missing, ai, captured, etc.)
"${CLAUDE_PLUGIN_ROOT}/scripts/claude-seo" run iptc_ai_label.py audit ./images/ --json

# Audit a single image
"${CLAUDE_PLUGIN_ROOT}/scripts/claude-seo" run iptc_ai_label.py audit ./hero.webp --json

# Inject the AI label into an image
"${CLAUDE_PLUGIN_ROOT}/scripts/claude-seo" run iptc_ai_label.py inject ./ai-hero.webp \
    --source-type trainedAlgorithmicMedia

# Other vocabulary values:
#   compositeSynthetic               (mix of captured + AI elements)
#   algorithmicMedia                 (created purely by algorithm, NOT from sampled training data)
#   compositeWithTrainedAlgorithmicMedia (e.g. AI inpainting/outpainting over real media)
#   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

Google が抽出する IPTC DigitalSourceType の値は次のとおりです。

  • trainedAlgorithmicMedia:完全に AI で生成(拡散モデルで商品画像を生成した場合に使用)
  • compositeSynthetic:撮影画像と AI 生成要素を組み合わせたもの
  • algorithmicMedia:アルゴリズムのみで作成され、サンプリングされたトレーニングデータに基づかないもの
  • compositeWithTrainedAlgorithmicMedia:トレーニング済みアルゴリズムによるメディアとその他のメディアを組み合わせたもの(例:実写写真に AI インペインティング/アウトペインティングを適用)
  • digitalCapture:完全に撮影された写真(注:digitalCapture は Google の抽出値リストにはありませんが、有効な IPTC 値です)

出所を示すシグナル(消費者向け): SynthID ウォーターマークと C2PA Content Credentials は、AI メディアを識別するための新たなシグナルです。現在の Google 公式情報で確認できない限り、 商品上での対応範囲は変更される可能性があるものとして扱ってください。 これは検出/透明性に関するものであり、IPTC DigitalSourceType 以外に Merchant フィードで追加必須となる項目ではありません。

ライセンス可能な画像: Licensable バッジを取得するには、構造化データ(license プロパティと「この画像を入手」リンク用の acquireLicensePage を含む ImageObject)または埋め込み IPTC 写真メタデータ(ライセンサー URL/権利に関する Web ステートメント)のどちらかを指定します。 ImageObject マークアップについては seo-schema と相互参照してください。

発見に関する注記: 画像の発見には、Lens/AI Mode/Circle to Search にわたるビジュアル検索のファンアウト (Gemini のマルチモーダルなシーン/オブジェクト理解)も含まれるようになったため、画像は alt テキストだけでなく、 シーン、オブジェクト、素材を通じても表示されます。新たに公開された画像 SEO の施策はまだありません。説明的な alt テキストと 適切な構造化データを維持してください。

/seo images optimize を AI 生成アセットに対して実行する際は、ユーザーにソースタイプの確認を促し、一致する 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 を最大限に高めるには、各画像に対して次のパイプラインを実行してください。

  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 画像検索で重要な要素と重要でない要素
要素影響設定場所
Alt テキスト非常に重要(ランキング)HTML <img alt="">
ファイル名高(ランキング)ファイルシステム(説明的で、ハイフン区切り)
ページのコンテキスト高(ランキング)周囲の HTML コンテンツ
ファイルサイズ/速度中(CWV に間接的に影響)圧縮+形式変換
IPTC Creator/Copyright低(表示のみ)画像ファイルのメタデータ
EXIF カメラデータなしSEO には関係ありません
IPTC KeywordsなしGoogle は無視します

エラー処理

シナリオ対応
URL に接続できないステータスコードを含む接続エラーを報告します。URL を確認し、サイトで認証が必要かどうかを確認するよう提案します。
ページに画像が見つからない<img> 要素が検出されなかったことを報告します。画像が JavaScript または CSS の background-image で読み込まれているか確認するよう提案します。
CDN または認証で保護された画像サイズ分析のために画像ファイルへ直接アクセスできなかったことを記載します。利用可能なメタデータ(alt テキスト、寸法、マークアップから取得できる形式)を報告し、アクセスできないリソースを明示します。
exiftool がインストールされていないメタデータの取得には ImageMagick を使用します。次を推奨します:sudo apt install libimage-exiftool-perl
cwebp がインストールされていないWebP への変換には ImageMagick または FFmpeg を使用します。次を推奨します:sudo apt install webp
DataForSEO MCP を利用できないImage SERP Analysis セクションをスキップします。拡張機能がインストールされていないことを記載します。

コメント