Community画像github.com

orlandoneto/claude-seo-seo-images

SEOとパフォーマンスのための画像最適化分析。代替テキスト、ファイルサイズ、フォーマット、レスポンシブ画像、遅延読み込み、CLS対策、DataForSEOによる画像SERP分析、画像ファイルの最適化（WebP/AVIF変換、IPTC/XMPメタデータ注入）をチェックします。

claude-seo-seo-images とは？

このスキルは、Webサイトの画像に対する包括的なSEO監査と最適化を提供します。Claude CodeなどのAIエージェント上で動作し、画像の代替テキストの有無と品質、ファイルサイズ（サムネイル、コンテンツ画像、ヒーロー画像のカテゴリ別の閾値に基づく）、ファイル形式（WebP、AVIF、JPEG XLなどの最新フォーマットへの対応状況）、レスポンシブ画像の実装（srcset/sizes属性）、遅延読み込み方法、レイアウトシフトを防ぐためのwidth/height属性、CDN利用状況などを詳細にチェックします。 さらに、DataForSEO MCPサーバーと連携して画像のSERP分析を行うことで、競合サイトの画像ランキング状況を把握し、改善の機会を特定できます。また、exiftoolやcwebpなどのツールを使った画像ファイル自体の最適化（WebP/AVIF変換、IPTC/XMPメタデータの注入）も実行可能で、Google Merchant Centerの要件に対応したAI生成画像のラベリングにも対応しています。parse_html.pyスクリプトを利用し、実際にブラウザが受け取るフォーマット（served_format）を判定するため、拡張子と実際の配信形式の不一致を正しく検出できます。

対応✓Claude Code~Codex CLI~Cursor✓Gemini CLI
npx skills add https://github.com/orlandoneto/agent-skills/tree/HEAD/skills/community/claude-seo-seo-images

Installed? Explore more 画像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

プレビュー

スキル README より

claude-seo-seo-images preview
claude-seo-seo-images preview
claude-seo-seo-images preview
claude-seo-seo-images preview
claude-seo-seo-images preview
claude-seo-seo-images preview

ドキュメント

画像最適化分析

チェック項目

代替テキスト

  • すべての <img> 要素に存在すること（role="presentation" を持つ装飾画像は除く）。parse_html.py はこれらの画像に decorative: true をマークするので、それらに対して代替テキスト欠落を報告しないでください。
  • 説明的であること：「image.jpg」や「photo」ではなく、画像の内容を説明していること。
  • 自然な形で関連キーワードを含み、キーワードの詰め込み過ぎではないこと。
  • 長さ：10〜125文字。

良い例:

  • 「キッチンの蛇口を修理するプロの配管工」
  • 「赤色の2024年型トヨタカムリセダン 前面」
  • 「モダンなオフィスの会議室でのチームミーティング」

悪い例:

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

ファイルサイズ

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

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

品質を損なわずに可能な限り、目標閾値への圧縮を推奨します。

フォーマット

フォーマットブラウザサポート率ユースケース
WebP97%以上デフォルトで推奨
AVIF92%以上最高の圧縮率、より新しい
JPEG100%写真のフォールバック
PNG100%透明度が必要なグラフィック
SVG100%アイコン、ロゴ、イラスト

JPEG/PNGよりもWebP/AVIFを推奨します。フォーマットのフォールバックを持つ <picture> 要素を確認してください。

配信されているフォーマットを判定し、URLの拡張子に惑わされないこと

多くのサイト（WordPressのEWWW、ShortPixel、WebP Express、ImagifyなどのWebPプラグイン、Cloudflare Polish、画像CDN）は、ブラウザが要求した場合に .jpg や .png のURLからWebPやAVIFを配信します。拡張子は訪問者が実際に受け取るフォーマットではありません。以下を実行してください。 "${CLAUDE_PLUGIN_ROOT}/scripts/claude-seo" run parse_html.py --url <url> --probe-images --json このコマンドは、ブラウザの Accept ヘッダーを使って各画像を取得し、すべての画像エントリに以下のフィールドを追加します（遅延読み込み画像の場合は、src がプレースホルダーであるため、実際のソースである resolved_src を調査します）:

フィールド意味
served_format実際に配信されたフォーマット（webp、avif、jpeg、png、gif、svg、jxl）。マジックバイトから判定され、判定できない場合は null
served_bytes実際に配信されたサイズ（Content-Length）。サーバーが省略した場合は null
negotiatedレスポンスに Vary: Accept があり、フォーマットがブラウザに依存する場合は true
probe_error画像がチェックできなかった理由（フェッチ失敗、不正なURL、またはHTMLエラーやホットリンク保護ページなどの認識されない画像レスポンスの場合）。それ以外は null
  • 「間違ったフォーマット」およびサイズ削減の報告は、served_format / served_bytes からのみ行ってください。.jpg のURLで served_format: webp のものはすでに最適化されています：変換を推奨しないでください。
  • probe_error が設定されている場合は、フォーマットを「未確認」として報告してください。拡張子から推測しないでください。
  • HTTP 200が返ってくることを確認せずに、置き換え画像URL（例：photo.webp）を提案しないでください。

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

最も効率的なフォーマットを最初に使用し、プログレッシブエンハンスメントを適用します：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="説明的な代替テキスト" width="800" height="600" loading="lazy" decoding="async">
</picture>

ブラウザは最初にサポートされているフォーマットを使用します。グローバルブラウザサポート率（caniuse.com、2026年9月28日確認）：AVIF約95.4%、WebP約96.8%。引用する前にcaniuseを再確認してください。

JPEG XL: 新しいフォーマット

サードパーティのレポートとWikipediaによると、RustベースのJPEG XLデコーダーがChrome 145安定版（2026年2月10日）に chrome://flags/#enable-jxl-image-format フラグの背後で出荷されましたが、デフォルトでは有効になっていません。Googleが所有する確認はファクトパックでは取得されていません。デフォルトのサポートが確認されていないため、プロダクションでのWeb配信にはまだ実用的ではありません。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="説明"
>

遅延読み込み

  • スクロールして見える領域より下の画像には loading="lazy"
  • スクロールして見える領域より上の画像やヒーロー画像は遅延読み込みしないでください（LCPに悪影響を与えます）
  • ネイティブの遅延読み込みとJavaScriptベースの遅延読み込みを確認
<!-- 画面外 - 遅延読み込み -->
<img src="photo.jpg" loading="lazy" alt="説明">

<!-- 画面内 - 通常読み込み（デフォルト） -->
<img src="hero.jpg" alt="ヒーロー画像">

検出された遅延読み込み方法（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 を報告し、ユーザーが自分のサイトがJS駆動の遅延読み込みを使用しているかどうかを認識できるようにします（その場合、ネイティブの loading="lazy" 属性は意図的に存在しません。これは問題ではありません）。

LCP画像の fetchpriority="high"

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

<img src="hero.webp" fetchpriority="high" alt="ヒーロー画像の説明" width="1200" height="630">

重要: スクロールして見える領域より上/LCP画像は遅延読み込みしないでください。LCP画像に loading="lazy" を使用すると、LCPスコアに直接悪影響を与えます。loading="lazy" はスクロールして見える領域より下の画像のみに留めてください。

LCP以外の画像の decoding="async"

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

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

CLS（レイアウトシフト）対策

  • すべての <img> 要素に width と height 属性が設定されていること
  • 代替としてCSSの aspect-ratio
  • 寸法が設定されていない画像をフラグ
<!-- 良い - 寸法が設定されている -->
<img src="photo.jpg" width="800" height="600" alt="説明">

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

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

ファイル名

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

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画像SERPツールはありません。SERPに画像要素がある場合は serp_organic_live_advanced（depth=100）の images 要素を使用し、画像SERPデータがない場合はその旨を明確に伝えます。
  2. 上位ドメイン、画像タイプ、代替テキストパターンを抽出
  3. 競合の画像SERPの状況を出力

出力:

順位ドメインタイトル/代替テキスト画像URLページURL
1example.com「ブルーランニングシューズ...」.../shoes.webp/products/...

分析内容:

  • ドメイン優位性: どのサイトが最も多くの画像ポジションを獲得しているか（上位10件を件数順に表示）
  • 代替テキストパターン: 上位ランキング画像の一般的なタイトル/代替テキストパターン
  • フォーマット分布: 上位結果における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

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

# FFmpeg経由のAVIF（エンコードは遅いが、最高の圧縮率）
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画像検索結果には、IPTC Creator、Credit Line、Copyrightが表示されます。これはランキング要因ではありませんが、Google画像表示とブランド帰属の改善に役立ちます。

exiftoolを使用する場合（推奨）:

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

# Google画像検索のリッチリザルトのためにIPTC + XMPメタデータを注入
exiftool \
  -IPTC:ObjectName="プロダクトフォトの説明" \
  -IPTC:Caption-Abstract="詳細な画像説明" \
  -IPTC:By-line="ブランド名 フォトグラフィー" \
  -IPTC:Credit="ブランド名" \
  -IPTC:CopyrightNotice="Copyright 2026 ブランド名" \
  -IPTC:Source="brandname.com" \
  -XMP:Title="プロダクトフォトの説明" \
  -XMP:Description="詳細な画像説明" \
  -XMP:Creator="ブランド名 フォトグラフィー" \
  -XMP:Rights="Copyright 2026 ブランド名" \
  image.jpg

# ディレクトリ内のすべての画像に一括注入
exiftool -overwrite_original \
  -IPTC:By-line="ブランド名" \
  -IPTC:CopyrightNotice="Copyright 2026 ブランド名" \
  *.jpg *.webp *.png

ImageMagickを使用する場合（フォールバック）:

identify -verbose image.jpg | head -50

convert input.jpg \
  -set comment "プロダクトフォトの説明" \
  -set IPTC:2:80 "ブランド名 フォトグラフィー" \
  -set IPTC:2:116 "Copyright 2026 ブランド名" \
  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ラベルは記載されていません。）

監査コマンド:

# ディレクトリ内のIPTCラベルを監査（カウント: missing, ai, capturedなど）
"${CLAUDE_PLUGIN_ROOT}/scripts/claude-seo" run iptc_ai_label.py audit ./images/ --json

# 単一画像の監査
"${CLAUDE_PLUGIN_ROOT}/scripts/claude-seo" run iptc_ai_label.py audit ./hero.webp --json

# 画像にAIラベルを注入
"${CLAUDE_PLUGIN_ROOT}/scripts/claude-seo" run iptc_ai_label.py inject ./ai-hero.webp \
    --source-type trainedAlgorithmicMedia

# その他の語彙値:
#   compositeSynthetic               （キャプチャ画像 + AI要素の混合）
#   algorithmicMedia                 （アルゴリズムのみで作成、サンプルトレーニングデータから作成されたものではない）
#   compositeWithTrainedAlgorithmicMedia （例：実際のメディアに対するAIインペインティング/アウトペインティング）
#   digitalCapture                   （完全にキャプチャされた写真）

生のexiftoolコマンド（アドホックな使用の場合）:

# 手動で注入
exiftool \
  -XMP-iptcExt:DigitalSourceType="https://cv.iptc.org/newscodes/digitalsourcetype/trainedAlgorithmicMedia" \
  ai-generated-product.jpg

# 監査: ディレクトリ内でラベルのない画像を検索
exiftool -if 'not $XMP-iptcExt:DigitalSourceType' \
  -filename -DigitalSourceType *.jpg *.webp *.png

Googleは次のIPTC DigitalSourceType 値を抽出します:

  • trainedAlgorithmicMedia: 完全にAI生成（拡散モデルによる商品画像にはこれを使用）
  • compositeSynthetic: キャプチャ画像とAI生成要素の混合
  • algorithmicMedia: アルゴリズムのみで作成、サンプルから作成されたものではない

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

orlandoneto/aaron-short-video-scripter

Use when the user asks to "script this short video", "write a TikTok / Reels / Shorts script", "给这条抖音或视频号视频写脚本", or "fix the hook — viewers drop off in the first seconds"; produces timestamped beat-sheet scripts on the retention-gate model (0-2s hook / 2-5s confirmation / 5-15s payoff / loop-or-CTA) with per-scene script lines, on-screen text for muted viewing, asset keywords, and 9:16 format-param rows per platform norm card for TikTok, Reels, Shorts, 抖音, and 视频号 — plus 2-3 hook options from named hook families and an AI-content disclosure line by default on realistic synthetic media. Spec-only: rendering, TTS, and publishing stay with the user's own tools — no pipelines, no upload automation. Not for creator video briefs — use brief-generator; long-form video SEO belongs to content-writer. 短视频脚本/抖音分镜/开头钩子/竖屏9:16

関連スキル

steipete/songsee

Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.

community

affaan-m/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

community

mattpocock/improve-codebase-architecture

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

community

lobehub/add-provider-doc

Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.

community

addyosmani/browser-testing-with-devtools

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

community

bytedance/chart-visualization

This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.

community
← More 画像 skills