mcpField
I
image-seo-audit

image-seo-audit

github.com/indranilbanerjeeマーケティング・グロース913106 回インストール今日更新
リポジトリ

image-seo-audit について

image-seo-audit は、SEO・Web チーム向けの画像最適化監査スキルです。ページまたはサイト内の画像について、アクセシビリティ、パフォーマンス、SEO の問題を調べ、予想されるファイルサイズへの影響順に改善案を示します。

主な機能

  1. 01代替テキストとファイル名の監査
  2. 02ファイルサイズと画像形式の確認
  3. 03レスポンシブ画像設定の確認
  4. 04遅延読み込みと fetchpriority の確認
  5. 05寸法不足と CLS リスクの検出
  6. 06削減見込み順の改善案提示

活用シーン

  1. 01ページ表示を遅くする大容量画像の特定
  2. 02代替テキストの欠落や不備の発見
  3. 03サイト全体の SEO 監査で画像配信を確認

インストール

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

$npx skills add https://github.com/indranilbanerjee/digital-marketing-pro --skill image-seo-audit

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

詳細

/digital-marketing-pro:image-seo-audit

目的

SEO、パフォーマンス、アクセシビリティの観点から、ページまたはサイト上のすべての画像を評価する、画像最適化に特化した監査を実施します。ファイルサイズへの影響が大きい順に並べた、優先順位付きの最適化リストを作成します。

必要な入力

  • URL：監査対象のページまたはサイト
  • 範囲：単一ページまたはサイト全体のクロール（デフォルト：単一ページ）

プロセス

  1. ブランドコンテキストの読み込み：有効なブランドプロフィールを読み込み、業界のコンテキストを把握します。
  2. 画像の検出：すべての <img>、<picture>、CSS の background-image、および <source> 要素を検出します。
  3. 代替テキストの監査：有無、品質、キーワードの有無、長さ（10～125 文字）を確認します。欠落、ファイル名のみ（「image.jpg」）、キーワードの詰め込み、説明が不十分（「ここをクリック」）なものにフラグを付けます。
  4. ファイルサイズの監査：画像カテゴリごとに段階的な基準値を適用します。サムネイル（目標：50KB 未満、重大：200KB 超）、コンテンツ画像（目標：100KB 未満、重大：500KB 超）、ヒーロー／バナー画像（目標：200KB 未満、重大：700KB 超）。
  5. 形式の監査：最新の形式が使われているか確認します。JPEG/PNG よりも WebP（97% 以上のサポート率）または AVIF（92% 以上のサポート率）を推奨します。形式のフォールバックを含む <picture> 要素があるか確認します。注：JPEG XL は Chromium で復活しました（2025 年 11 月）が、Chrome の安定版ではまだ利用できません。現時点では推奨せず、動向を注視します。
  6. レスポンシブ画像：srcset と sizes 属性があるか、デバイスのピクセル比に適した解像度かを確認します。
  7. 遅延読み込み：ファーストビューより下にある画像で loading="lazy" が設定されているか確認します。ファーストビュー内／ヒーロー画像に loading="lazy" が設定されている場合はフラグを付けます（LCP に直接悪影響を与えます）。
  8. fetchpriority：LCP／ヒーロー画像に fetchpriority="high" が設定されているか確認します。LCP 以外の画像に decoding="async" が設定されているか確認します。
  9. CLS の防止：すべての <img> 要素に width と height 属性、または CSS の aspect-ratio が設定されているか確認します。寸法が設定されていない画像にフラグを付けます。
  10. ファイル名：一般的なファイル名（IMG_1234.jpg）ではなく、説明的で、ハイフン区切りの小文字のファイル名かを確認します。
  11. CDN の使用状況：画像が CDN から配信されているか確認します（異なるドメイン、CDN ヘッダー、エッジキャッシュ）。
  12. スコア付けと優先順位付け：ファイルサイズ削減の影響が大きい順に並べます。

推奨する 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>

ヒーロー／LCP 画像のパターン

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

ファーストビュー内／LCP 画像は遅延読み込みしないでください。LCP 画像に decoding="async" を追加しないでください。

出力

画像監査の概要
指標ステータス件数
画像の合計数—XX
代替テキストの欠落問題XX
サイズ超過（200KB 超）問題XX
不適切な形式（WebP/AVIF 以外）問題XX
寸法の指定なし（CLS リスク）問題XX
遅延読み込みなし（ファーストビューより下）問題XX
LCP の fetchpriority なし問題XX
優先順位付き最適化リスト

推定ファイルサイズ削減量の大きい順：

画像現在のサイズ形式問題推定削減量
hero.jpg450KBJPEGWebP なし、fetchpriority なし約300KB
...............
推奨事項（優先順位順）
  1. X 枚の画像を WebP 形式に変換する（推定合計削減量：XX KB）
  2. X 枚の画像に代替テキストを追加する
  3. X 枚の画像に width/height の寸法を追加する
  4. ファーストビューより下にある X 枚の画像で遅延読み込みを有効にする
  5. LCP 画像に fetchpriority="high" を追加する
  6. サイズ超過している X 枚の画像を圧縮する
  7. AVIF/WebP のフォールバックを含む <picture> 要素を実装する

使用エージェント

  • seo-specialist — 画像最適化分析、CWV への影響評価

使用スクリプト

  • tech-seo-auditor.py — ページを取得し、画像要素を分析

コメント

Markdown 対応