Anthropic Claudeソフトウェア開発⭐ リポ 0品質スコア 50/100

image-optimization

Name: image-optimization
Author: kostja94

画像のSEO対策やパフォーマンス最適化を行いたい場合に使用します。「alt テキスト」「figcaption」「WebP」「遅延読み込み（lazy loading）」「LCP」「画像サイトマップ」「レスポンシブ画像」「srcset」「ヒーロー画像の最適化」などに関する要件が挙がった際にも活用できます。なお、Core Web Vitals に関する最適化には core-web-vitals スキルを使用してください。

description の原文を見る

When the user wants to optimize images for search engines and performance. Also use when the user mentions "image SEO," "alt text," "image captions," "figcaption," "image optimization," "WebP," "lazy loading," "LCP," "image sitemap," "responsive images," "srcset," "image format," or "hero image optimization." For CWV, use core-web-vitals.

SKILL.md 本文

SEO オンページ: 画像最適化

Google 検索（テキスト結果、Image Pack、Google 画像、Discover）、Core Web Vitals（LCP）、アクセシビリティのための画像最適化をガイドします。コンポーネント（ヒーロー、信頼バッジ）とページ（ランディングページ）から画像関連のベストプラクティスを統合しています。参考資料: Google Image SEO, Semrush Image SEO.

呼び出し時: 初回使用時に、役に立つ場合は、このスキルがカバーする内容とそれが重要な理由について 1～2 文で始め、その後メイン出力を提供します。以降の使用時またはユーザーが省略を求めたときは、メイン出力に直接進んでください。

スコープ

検出とインデックス: HTML img 要素、画像サイトマップ
フォーマットとパフォーマンス: WebP、レスポンシブ画像、遅延読み込み、LCP; 完全な CWV 最適化は core-web-vitals で
メタデータ: Alt テキスト、ファイル名、キャプション
推奨画像: primaryImageOfPage、og:image; 検索結果のタイトル/説明の横のサムネイル
構造化データ: ImageObject、Article/Product 等の image

初期評価

最初にプロジェクトコンテキストを確認: .claude/project-context.md または .cursor/project-context.md が存在する場合、ブランドとページコンテキストについて読み込みます。

以下を特定します:

コンテキスト: ヒーロー、コンテンツページ、商品、信頼バッジ、ソーシャルプレビュー
折り目上下: LCP 候補（ヒーロー）vs 遅延読み込み可能
画像数: 単一ヒーロー vs ギャラリー、プログラマティックページ

1. 検出とインデックス

HTML Image 要素を使用する

Google は <img> の src 属性（<picture> 内を含む）の画像を検出します。CSS 背景画像はインデックスされません。

する	しない
`<img src="puppy.jpg" alt="Golden retriever puppy" />`	`<div style="background-image:url(puppy.jpg)">`

画像サイトマップ

Google が見落とす可能性のある画像の検出を支援するため、画像サイトマップを送信します。画像サイトマップには CDN からの URL（他のドメイン）を含めることができます; クロールエラーレポートについて Search Console で CDN ドメインを確認します。

構造（Google より）:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>https://example.com/page</loc>
    <image:image>
      <image:loc>https://example.com/image.jpg</image:loc>
    </image:image>
  </url>
</urlset>

xml-sitemap についてはサイトマップインデックスと送信を参照。画像サイトマップは拡張; スタンドアロンまたはページサイトマップと組み合わせることができます。

2. フォーマットとパフォーマンス

サポートされているフォーマット

Google が対応: BMP、GIF、JPEG、PNG、WebP、SVG、AVIF。ファイル名の拡張子をフォーマットと一致させます。

フォーマット	最適な用途	備考
WebP	写真、グラフィック	ファイルサイズ小、読み込み速い; ロッシー+ロスレス; 透明度、アニメーション
AVIF	モダンブラウザ	WebP より小; サポートを確認
JPEG	標準写真	フォールバック; 広くサポート
PNG	透明度、詳細	大きい; 必要な場合に使用
SVG	アイコン、ロゴ	スケーラブル; インライン SVG に `<title>` を使用
GIF	シンプルアニメーション	プレビューは最初のフレームのみ

レスポンシブ画像

異なる画面サイズに対応する <picture> または srcset を使用します。フォールバック src を常に提供—一部のクローラーは srcset を理解しません。

<img
  srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w"
  sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
  src="image-800w.jpg"
  alt="Descriptive alt text">

Picture 要素（フォーマットフォールバック、例: WebP → PNG）:

<picture>
  <source type="image/webp" srcset="image.webp">
  <img src="image.png" alt="Descriptive alt text">
</picture>

Data URI（インライン画像）

Base64 data URI（data:image/...;base64,...）は HTTP リクエストを削減しますが HTML サイズを増加させます。小さいアイコンに対してまれに使用; 大きい画像は避けます。web.dev を参照。

リサイズと圧縮

最大幅: 一般に ≤2,500px; コンテナ max-width と一致
圧縮: WebP 推奨; ロッシー 75～85 品質; web 用 72dpi
LCP: ヒーロー/折り目上の画像は LCP 候補; 積極的に最適化

遅延読み込み

loading="lazy" を折り目下の画像にのみ使用。折り目上の画像（ヒーロー）は即座に読み込む必要があります—遅延読み込みすると LCP が悪化します。

<img src="hero.jpg" alt="..." loading="eager">
<img src="below-fold.jpg" alt="..." loading="lazy">

3. Alt テキスト

Alt テキストはアクセシビリティ（スクリーンリーダー、低速帯域）と SEO（Google がコンピュータビジョンと共に使用して画像を理解）を改善します。画像がリンクの場合、アンカーテキストとしても機能します。

ベストプラクティス

する	しない
有用で情報豊富な説明	キーワードスタッフィング
ページコンテンツのコンテキスト	「image of」または「photo of」（冗長）
最大約 125 文字（一部の支援技術は切り詰め）	意味のある画像への空の alt
機能的な画像に対する説明的	純粋に装飾的な画像への alt（`alt=""` を使用）

例（Google より）:

❌ 欠落: <img src="puppy.jpg"/>
❌ スタッフィング: alt="puppy dog baby dog pup pups puppies..."
✅ より良い: alt="puppy"
✅ 最適: alt="Dalmatian puppy playing fetch"

キャプション

Google はキャプションと近隣のテキストから画像コンテキストを抽出します。<figcaption> または画像の近くに説明テキストを使用します。

使用	目的
トピック関連性	キャプションが画像の主題を説明; インデックス作成をサポート
Featured Snippets	答えの近くの画像とキャプションはサムネイルスロットをキャプチャできます; featured-snippet を参照
Image Pack	Alt + キャプション + ファイル名が Image Pack 表示をサポート; serp-features を参照

インライン SVG

SVG 内の <title> をアクセシビリティに使用します:

<svg aria-labelledby="svgtitle1">
  <title id="svgtitle1">Descriptive text for the SVG</title>
</svg>

4. ファイル名

説明的なファイル名は Google に主題についての軽い手がかりを与えます。

する	しない
`apple-iphone-15-pink-side-view.jpg`	`IMG00353.jpg`
短く、ハイフン区切り	一般的: `image1.jpg`, `pic.gif`
翻訳されたページのファイル名をローカライズ	過度に長いファイル名

5. 推奨画像（SERP サムネイルと Discover）

ユーザーがキーワードを検索すると、最適化された画像は検索結果でページのタイトルと説明の横にサムネイルとして表示される可能性があり、可視性と CTR を向上させます。Google はこれらの画像を Google Discover にも使用します。Search Engine Land

Google は複数のソースからサムネイルを自動的に選択します。以下を通じて選択に影響を与えます:

Schema: primaryImageOfPage

{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "url": "https://example.com/page",
  "primaryImageOfPage": "https://example.com/images/cat.png"
}

または mainEntity または mainEntityOfPage 経由で image をメインエンティティ（例：BlogPosting、Article）に添付します。

Open Graph

<meta property="og:image" content="https://example.com/images/cat.png">

推奨画像ルール: 関連性、代表的; 一般的（ロゴなど）またはテキスト多い画像を避ける; 極端なアスペクト比を避ける; 高解像度。社交仕様については open-graph、twitter-cards を参照。

Google Discover（Discover を対象とする場合）: ≥1200px 幅; ≥300KB; 16:9 アスペクト比推奨; 重要なコンテンツがランドスケープクロップで見える。

6. ページコンテキスト

タイトルとメタ説明: Google は画像結果スニペットのページタイトルとメタを使用します。title-tag、meta-description を参照。
配置: 関連するテキストの近くに画像を配置; ページの主題がイメージインデックス作成に影響します。
同じ URL: キャッシュ効率とクロール予算のため、ページ間で同じ URL の同じ画像を参照。

7. 構造化データ

Google 画像でのリッチリサルツ用に構造化データを追加（バッジ、追加情報）。Image 属性は適格性に必須です。ImageObject、Article、Product、Recipe 等については schema-markup を参照。

8. コンテキスト別の仕様

コンテキスト	優先度	備考
ヒーロー	LCP、alt、遅延読み込みなし	hero-generator を参照; 折り目上、高速読み込み
Article / ブログヒーロー	1200～1600px 幅; 比例する高さ; og:image に 1200×630	Schema、Open Graph、Twitter Cards に同じ画像; 200KB 未満; WebP 推奨; 説明的な alt; CLS を防止するため幅/高さを設定; レスポンシブに srcset/sizes を使用; 関連画像のある記事は約 94% 多くのビューを取得
信頼バッジ	Alt テキスト	trust-badges-generator を参照; 例：「Norton Secured」
ランディングページ	上記すべて	landing-page-generator 納品前チェックリストを参照
OG / Twitter	1200×630、1200×675	open-graph、twitter-cards を参照
プラットフォーム	プラットフォームごと	X、LinkedIn、Pinterest—プラットフォームスキルを参照

9. オプトアウトと SafeSearch

インラインリンクオプトアウト: HTTP リファラチェック（200 または 204）経由で Google 画像での全サイズ画像表示を防止。Google docs を参照。
SafeSearch: 該当する場合、明示的なコンテンツについてページにラベル付け。

出力フォーマット

Alt テキスト提案（画像ごと）
キャプション（該当する場合; スニペット/Image Pack コンテキスト）
ファイル名推奨
フォーマット（WebP、フォールバック）
レスポンシブ（srcset/sizes または picture）
遅延読み込み（折り目上 vs 折り目下）
画像サイトマップ（多くの画像の場合）
推奨画像（キーページの schema、og:image）

詳細情報

作者: kostja94
リポジトリ: kostja94/marketing-skills
ライセンス: MIT
最終更新: 不明

GitHubで原本を見る →フィードバックを送る

Source: https://github.com/kostja94/marketing-skills / ライセンス: MIT