mcpField
3
30x-seo-images

30x-seo-images

github.com/norahe0304-artマーケティング・グロース5662 回インストール33 週間前に更新
リポジトリ

30x-seo-images について

SEO向けの画像監査スキルです。画像マークアップとファイルのアクセシビリティ情報、容量、形式、レスポンシブ設定、読み込み、レイアウト安定性を確認し、優先順位付きの改善案を出します。

主な機能

  1. 01代替テキストとファイル名の監査
  2. 02画像容量と形式の確認
  3. 03レスポンシブ画像属性の確認
  4. 04遅延読み込みと取得優先度の確認
  5. 05寸法不足とCLSリスクの指摘
  6. 06改善案の優先順位付け

活用シーン

  1. 01サイト画像のSEO上の問題を監査
  2. 02大容量または非効率な形式の画像を特定
  3. 03画像読み込みとレイアウト安定性の改善

インストール

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

$npx skills add https://github.com/norahe0304-art/30x-seo --skill 30x-seo-images

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

詳細

画像最適化の分析

チェック項目

代替テキスト
  • すべての <img> 要素に設定されている（装飾用の場合を除く：role="presentation"）
  • 内容を説明している：「image.jpg」や「写真」ではない
  • 不自然にならない範囲で関連キーワードを含め、キーワードを詰め込みすぎていない
  • 長さ：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>

ブラウザーは、最初に対応している形式を使用します。現在のブラウザー対応率：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">
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 のサイズが大きすぎる画像を圧縮します

[PROTOCOL]: 変更時にこのヘッダーを更新し、その後 CLAUDE.md を確認してください

コメント

Markdown 対応