image-optimization

Name: image-optimization
Author: kostja94

github.com/kostja94マーケティング・グロース1.1k1.2k 回インストール2 日前に更新

リポジトリ

image-optimization について

ウェブページの画像発見、アクセシビリティ、読み込み性能を改善するSEOスキルです。画像マークアップ、形式、メタデータ、レスポンシブ配信、検索結果での表示を案内します。

主な機能

01画像の発見とインデックスを改善
02形式とレスポンシブ配信を選択
03代替テキストとキャプションを作成
04読み込みと遅延読み込みを最適化
05優先画像と構造化データを設定

活用シーン

01ヒーロー画像のLCP最適化
02記事画像の検索プレビュー準備
03画像のアクセシビリティと索引性の改善

インストール

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

$npx skills add https://github.com/kostja94/marketing-skills --skill image-optimization

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

詳細

SEO オンページ：画像の最適化

Google 検索（テキスト検索結果、画像パック、Google 画像検索、Discover）、Core Web Vitals（LCP）、アクセシビリティのための画像最適化を案内します。コンポーネント（hero、trust-badges）やページ（landing-page）に関する画像のベストプラクティスをまとめています。参考資料：Google 画像検索の SEO、Semrush の画像 SEO。

呼び出し時：初回の使用時は、このスキルで扱う内容とその重要性について、役立つ場合は1～2文で説明してから主要な出力を提示します。2回目以降の使用時や、ユーザーから説明を省略するよう求められた場合は、すぐに主要な出力を提示します。

対象範囲

検出とインデックス登録：HTML の img 要素、画像サイトマップ
形式とパフォーマンス：WebP、レスポンシブ画像、遅延読み込み、LCP。CWV の最適化全般については core-web-vitals を参照してください
メタデータ：代替テキスト、ファイル名、キャプション
優先画像：primaryImageOfPage、og:image。検索結果のタイトル／説明の横に表示されるサムネイル
構造化データ：ImageObject、Article/Product などの画像

初期評価

プロジェクトのコンテキスト： ルートに contextus.md がある場合は読み込み、このタスクに関連するモジュールのみを読み込んでください。Contextus がない場合は、利用可能なプロジェクト資料またはユーザーから提供された情報を使い、不足情報を確認してください。独自のコンテキストシステムを作成しないでください。

次の項目を特定してください。

コンテキスト：ヒーロー、コンテンツページ、製品、信頼バッジ、ソーシャルプレビュー
ファーストビュー内／外：LCP 候補（ヒーロー）と遅延読み込み可能な画像
画像数：ヒーロー画像1枚か、ギャラリーか、プログラム生成ページか

1. 検出とインデックス登録

HTML 画像要素を使用する

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>

データ URI（インライン画像）

Base64 データ URI（data:image/...;base64,...）を使うと HTTP リクエスト数を減らせますが、HTML のサイズは大きくなります。小さなアイコンに限って使用し、大きな画像では避けてください。web.devを参照してください。

サイズ変更と圧縮

最大幅：一般に2,500px以下にし、コンテナーの max-width に合わせてください
圧縮：WebP を推奨します。非可逆圧縮では品質75～85、ウェブ向けには72dpiを使用してください
LCP：ヒーロー画像やファーストビュー内の画像は LCP 候補です。積極的に最適化してください

遅延読み込み

loading="lazy" はファーストビュー外の画像にのみ使用してください。ファーストビュー内の画像（ヒーロー）はすぐに読み込む必要があります。遅延読み込みすると LCP が悪化します。

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

3. 代替テキスト

代替テキストは、アクセシビリティ（スクリーンリーダー、低速回線）とSEO（Google はコンピュータービジョンと併用して画像を理解します）の向上に役立ちます。また、画像がリンクの場合はアンカーテキストとしても機能します。

ベストプラクティス

推奨事項	避けること
役立つ、情報量の多い説明	キーワードの詰め込み
ページの内容に沿った説明	「画像」や「写真」のような冗長な表現
最大約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-snippet を参照してください
画像パック	alt、キャプション、ファイル名は画像パックでの表示に役立ちます。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 は複数のソースからサムネイルを自動的に選択します。次の方法で選択に影響を与えられます。

スキーマ：primaryImageOfPage

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

または、mainEntity もしくは mainEntityOfPage を介して、メインエンティティ（BlogPosting、Article など）に image を設定します。

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 画像検索のリッチリザルト（バッジ、追加情報）のために構造化データを追加してください。対象となるには画像属性が必須です。ImageObject、Article、Product、Recipe などについては schema-markup を参照してください。

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

コンテキスト	優先事項	備考
ヒーロー	LCP、alt、遅延読み込みなし	hero-generator を参照してください。ファーストビューに表示され、すばやく読み込まれます
記事／ブログのヒーロー	幅 1200–1600px、高さは比率に合わせる、og:image は 1200×630	Schema、Open Graph、Twitter Cards で同じ画像を使用してください。200 KB 未満にし、WebP を推奨します。内容を説明する alt を設定し、CLS を防ぐため width/height を指定してください。レスポンシブ対応には 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 のドキュメントを参照してください。
SafeSearch：該当する場合は、露骨なコンテンツを含むページにラベルを付けてください。

出力形式

画像ごとの alt テキストの候補
キャプション（該当する場合。スニペット／画像パックのコンテキスト）
ファイル名の推奨
形式（WebP、フォールバック）
レスポンシブ対応（srcset/sizes または picture）
遅延読み込み（ファーストビュー内か、ファーストビュー外か）
画像サイトマップ（画像が多い場合）
主要ページ向けの 推奨画像（schema、og:image）

基本情報

作者: kostja94
リポジトリ: kostja94/marketing-skills
カテゴリ: マーケティング・グロース
インストール数: 1,157
GitHub スター: 1,066

問題を報告