ブログの画像SEOは、altにキーワードを詰め込むことではありません。

大切なのは、画像の内容が読者にもGoogleにも分かりやすい状態にすることです。

具体的には、画像の置き場所、ファイル名、altテキスト、画像の軽さ、表示速度、Googleに見つけてもらう設定を整えていきます。 さらに、Google Discoverを意識する場合は、アイキャッチ画像の品質やサイズ、大きな画像プレビューを許可する設定も大切です。

初心者さんは、まず次のように考えると分かりやすいです。

• 読者が見て分かりやすい画像を使う
• 画像の内容をGoogleにも伝える
• ページの表示が遅くならないようにする
• 画像が検索エンジンに見つかるようにする
• Discoverを意識するなら、アイキャッチ画像にも力を入れる

つまり画像SEOとは、「画像を貼る前後の整え方」まで含めたSEO対策です。

画像SEOの正しい手順

ここからは、ブログに画像を貼るときに意識したいポイントを、初心者さんにも分かりやすく順番に解説します。

1. 画像は記事内容と近い場所に置く

画像は、ただ記事内のどこかに貼ればよいわけではありません。

その画像と関係のある文章の近くに置くことが大切です。

Googleは、画像そのものだけでなく、画像の周囲にある本文、見出し、キャプション、ページ全体の内容を見て、 その画像が何を表しているのかを理解します。

たとえば、「ブログ画像SEOのチェックリスト」を説明している文章のすぐ近くに、チェックリスト画像を置くと、 読者にもGoogleにも画像の意味が伝わりやすくなります。

良い配置の例：

<h3>ブログ画像SEOのチェックリスト</h3>

<p>
  画像SEOでは、ファイル名、altテキスト、画像サイズ、表示速度を確認することが大切です。
</p>

<img
  src="/images/blog-image-seo-checklist.webp"
  alt="ブログ画像SEOで確認すべき項目をまとめたチェックリスト"
  width="800"
  height="450"
  loading="lazy">

逆に、記事内容と関係のない場所に画像を置くと、読者もGoogleも画像の意味を理解しにくくなります。

参考： Google 画像検索のベストプラクティス

2. ファイル名を分かりやすくする

画像をアップロードする前に、画像ファイル名を確認しましょう。

カメラやスマホで撮影した画像は、よく次のような名前になっています。

IMG_1234.jpg
DSC_0001.png
screenshot-2026-05-25.png

このようなファイル名だと、Googleにも読者にも、画像の内容が伝わりにくくなります。

画像ファイル名は、画像の内容が分かる短い名前に変更してからアップロードするのがおすすめです。

良い例：

wordpress-image-seo-alt-text.webp
tokyo-cafe-interior.jpg
furusato-nozei-ranking-2026.png
blog-image-seo-checklist.webp

ファイル名を付けるときは、次のポイントを意識します。

• 画像の内容が分かる名前にする
• 日本語より英数字のファイル名にする
• 単語の区切りにはハイフンを使う
• 長すぎる名前にしない
• キーワードを不自然に詰め込まない

たとえば、画像SEOのチェックリスト画像なら、 blog-image-seo-checklist.webp のようなファイル名が分かりやすいです。

Googleはファイル名を画像理解の手がかりとして使うため、 短く説明的なファイル名が推奨されています。

3. altテキストは「画像を見られない人に説明する文」にする

altテキストとは、画像の内容を説明するための文章です。 HTMLでは、画像タグの alt に書きます。

たとえば、次の部分です。

<img
  src="blog-image-seo-checklist.webp"
  alt="ブログ画像SEOで確認すべき項目をまとめたチェックリスト">

altテキストは、SEOのためだけに書くものではありません。 画像が表示されないときや、目の不自由な方がスクリーンリーダーでページを読むときにも使われます。

そのため、altテキストは「画像を見られない人に、その画像の内容を説明する文」として書くのが正解です。

悪い例：

<img
  src="seo.jpg"
  alt="SEO SEO対策 画像SEO ブログ アクセスアップ 上位表示">

このようにキーワードを並べただけのaltテキストは不自然です。 読者にも分かりにくく、SEO目的の詰め込みに見えてしまいます。

良い例：

<img
  src="blog-image-seo-checklist.webp"
  alt="ブログ画像SEOで確認すべき項目をまとめたチェックリスト">

良いaltテキストは、次のような特徴があります。

• 画像の内容を具体的に説明している
• 文章として自然に読める
• 必要なキーワードだけが自然に入っている
• 長すぎない
• 画像を見なくても内容が想像できる

ただし、すべての画像に詳しいaltテキストが必要なわけではありません。

たとえば、区切り線、背景装飾、意味を持たないアイコンなど、記事内容と直接関係しない装飾画像の場合は、 無理にキーワードを入れず alt="" にして構いません。

<img src="decoration-line.webp" alt="">

初心者さんは、次のように覚えると分かりやすいです。

• 記事内容に関係ある画像：altを書く
• 読者に意味を伝える画像：altを書く
• ただの飾り画像：alt="" にする

4. 画像サイズを軽くする

ブログに使う画像は、見た目がきれいなだけでなく、ファイルサイズを軽くすることも大切です。

画像が重すぎると、ページを開いたときに表示が遅くなります。 表示が遅いページは、読者が離脱しやすくなります。

さらに、ページの表示速度はユーザー体験に関わるため、SEOでも無視できません。

たとえば、ブログ本文の横幅が800px程度なのに、横幅4000pxの写真をそのまま貼る必要はありません。 見た目では小さく表示されていても、実際には大きな画像ファイルを読み込んでいるため、ページが重くなります。

画像をアップロードする前に、次のような目安で調整しましょう。

横幅：本文幅の2倍程度まで
形式：写真は WebP / AVIF / JPEG
図解・ロゴ：WebP / SVG / PNG
容量：できれば100〜300KB前後に圧縮

たとえば、本文エリアの横幅が800pxなら、画像の横幅は800px〜1600px程度で十分なことが多いです。

ただし、Google Discoverを意識するアイキャッチ画像については、少し考え方が変わります。 Discoverでは大きな画像プレビューが使われることがあるため、アイキャッチ画像は横幅1200px以上の高品質な画像を用意するのがおすすめです。

画像形式は、写真なら WebP や JPEG、図解やイラストなら WebP、PNG、SVG などを使います。

最近は、画像を軽くしやすい WebP 形式がよく使われます。

表示速度を確認したい場合は、次のツールを使うと便利です。

PageSpeed Insights

画像が重い場合は、「適切なサイズの画像」や「次世代フォーマットでの画像配信」などの改善項目が表示されることがあります。

5. アイキャッチ画像は lazy load しない

lazy loadとは、画像を最初からすべて読み込まず、 画面に近づいたタイミングで画像を読み込む仕組みのことです。

日本語では「遅延読み込み」と呼ばれます。

ただし、すべての画像にlazy loadを付ければよいわけではありません。

特に注意したいのが、記事上部にあるアイキャッチ画像です。

ブログ記事を開いた直後、読者の画面には次のような内容が表示されます。

• 記事タイトル
• アイキャッチ画像
• 冒頭文

このように、ページを開いた瞬間に見える範囲を「初期表示」や「ファーストビュー」と呼びます。

初期表示内にある画像は、読者がすぐ見る画像です。

そのため、アイキャッチ画像には基本的に loading="lazy" を付けないようにします。

たとえば、次のような書き方は避けたほうがよいです。

<img
  src="main-image.webp"
  alt="ブログ画像SEOのポイントを説明するアイキャッチ画像"
  width="1200"
  height="630"
  loading="lazy">

このようにアイキャッチ画像に loading="lazy" を付けると、 ブラウザが「この画像はあとで読み込めばよい画像」と判断して、読み込みを後回しにすることがあります。

すると、記事を開いたときにアイキャッチ画像の表示が遅れて、 ページ全体の表示が遅く感じられる場合があります。

これは Core Web Vitals、特に LCP に悪影響を与えることがあります。

参考： web.dev - LCP image lazy loading

Core Web Vitalsとは

Core Web Vitalsとは、Googleが「そのページがユーザーにとって快適かどうか」を見るための重要な指標です。

簡単に言うと、次の3つをチェックします。

LCP：

ページのメイン部分がどれくらい早く表示されるか。 ブログでは、アイキャッチ画像や大きな見出しが対象になりやすいです。

INP：

クリックやタップをしたときに、ページがどれくらい早く反応するか。 ボタンを押しても反応が遅いページは不利になりやすいです。

CLS：

ページを読んでいる途中で、文章や画像、ボタンの位置がガタッとずれないか。 画像サイズを指定していないと、CLSが悪くなることがあります。

つまりCore Web Vitalsは、 「表示が早いか」「操作しやすいか」「レイアウトがズレないか」を見る指標です。

画像SEOでは特に、アイキャッチ画像の表示が遅いとLCPに影響しやすく、 画像にwidthとheightを入れていないとCLSに影響しやすいです。

6. LCPとは？初心者向けにさらに分かりやすく解説

LCPとは、Largest Contentful Paint の略です。

難しく聞こえますが、ざっくり言うと、 ページを開いたときに、メインとなる大きな要素がどれくらい早く表示されたか を見る指標です。

ブログ記事では、次のようなものがLCPの対象になりやすいです。

• アイキャッチ画像
• 記事上部の大きな画像
• メインビジュアル
• 大きな見出しや本文ブロック

特にブログでは、記事の上に大きなアイキャッチ画像を置くことが多いため、 その画像がLCPの対象になることがあります。

つまり、アイキャッチ画像の表示が遅いと、次のような流れになる可能性があります。

• アイキャッチ画像の表示が遅い
• ページのメイン部分が表示されるのが遅いと判断される
• Core Web Vitalsに不利になる可能性がある

そのため、最初に見える重要な画像は早く読み込ませることが大切です。

7. lazy loadの正しい使い分け

lazy loadの基本は、次のように覚えると分かりやすいです。

• 最初に画面に見えている画像：すぐ読み込む
• スクロールしないと見えない画像：あとで読み込む

つまり、記事上部のアイキャッチ画像にはlazy loadを付けず、 記事の途中や下のほうにある画像にはlazy loadを付けます。

記事上部のアイキャッチ画像の書き方

アイキャッチ画像は、読者がページを開いた直後に見る画像です。

そのため、loading="lazy" は付けません。

<img
  src="/images/main-image.webp"
  alt="ブログ画像SEOのポイントを説明するアイキャッチ画像"
  width="1200"
  height="630">

さらに重要な画像であれば、次のように fetchpriority="high" を付けてもよいです。

<img
  src="/images/main-image.webp"
  alt="ブログ画像SEOのポイントを説明するアイキャッチ画像"
  width="1200"
  height="630"
  fetchpriority="high">

fetchpriority="high" は、 「この画像は重要なので、できるだけ早めに読み込んでください」 とブラウザに伝える指定です。

ただし、何でもかんでも fetchpriority="high" を付けるのはおすすめしません。 基本的には、記事上部のメイン画像など、本当に重要な画像だけに使います。

記事の途中や下のほうにある画像の書き方

一方で、記事の途中や下のほうにある画像は、読者がスクロールしないと見ません。

たとえば、次のような位置にある画像です。

• 見出し1
• 本文
• 見出し2
• 本文
• 画像
• 見出し3
• 本文
• 画像

このような画像は、ページを開いた瞬間に読み込む必要はありません。 読者がその場所までスクロールして近づいたときに読み込めば十分です。

そのため、次のように loading="lazy" を付けます。

<img
  src="/images/seo-checklist.webp"
  alt="ブログ画像SEOで確認すべき項目をまとめたチェックリスト"
  width="800"
  height="450"
  loading="lazy">

これは、ブラウザに対して 「この画像は画面に近づいてから読み込めばよい画像です」 と伝える指定です。

8. lazy loadする具体的なやり方

lazy loadの設定はとても簡単です。

画像タグに loading="lazy" を追加するだけです。

通常の画像をlazy loadする例：

<img
  src="/images/checklist.webp"
  alt="画像SEOのチェックリスト"
  width="800"
  height="450"
  loading="lazy">

それぞれの意味は次のとおりです。

初心者さんは、まず次の形を基本として覚えておけばOKです。

<img
  src="画像ファイルのURL"
  alt="画像の内容説明"
  width="画像の横幅"
  height="画像の高さ"
  loading="lazy">

ただし、繰り返しになりますが、記事上部のアイキャッチ画像には loading="lazy" を付けないようにしましょう。

9. width と height を入れる

画像タグには、できるだけ width と height を入れましょう。

width は画像の横幅、height は画像の高さです。

これを入れておくと、ブラウザが画像の表示スペースを先に確保しやすくなります。

画像の表示スペースが先に分かっていれば、画像が読み込まれたあとに文章やボタンの位置がガタッと動きにくくなります。

たとえば、次のように書きます。

<img
  src="/images/example.webp"
  alt="画像SEOの設定例"
  width="800"
  height="450"
  loading="lazy">

逆に、width と height がないと、 画像が読み込まれるまでブラウザが画像の大きさを判断しにくくなります。

その結果、ページを読んでいる途中で本文やボタンの位置がずれることがあります。

WordPressでは、多くの場合、画像を挿入すると自動で width と height が入ります。

ただし、テーマやカスタムHTMLによっては入らない場合もあるため、HTMLを確認できる場合はチェックしておきましょう。

10. SEO対象にしたい画像はCSS背景画像にしない

SEOで評価してほしい画像は、CSSの background-image ではなく、 通常の <img> タグで挿入するのがおすすめです。

なぜなら、Googleは通常の <img src=""> で指定された画像を見つけやすい一方で、 CSS背景画像は画像検索の対象として扱われにくいからです。

たとえば、記事内容を説明する図解、商品写真、アイキャッチ画像、手順解説の画像などは、 <img> タグで入れましょう。

良い例：

<img
  src="puppy.jpg"
  alt="芝生で遊ぶゴールデンレトリバーの子犬"
  width="800"
  height="450"
  loading="lazy">

避けたい例：

<div style="background-image:url(puppy.jpg)"></div>

CSS背景画像は、デザイン装飾として使う分には問題ありません。

しかし、検索結果に出したい画像や、記事内容を説明する重要な画像には向いていません。

初心者さんは、次のように覚えておきましょう。

• 記事内容に関係ある画像：<img> で入れる
• 検索結果に出したい画像：<img> で入れる
• ただの背景や装飾：CSS背景画像でもよい

11. OGP画像・構造化データも設定する

ブログ記事では、記事内に画像を貼るだけでなく、記事の代表画像を分かりやすく指定しておくことも大切です。

代表画像とは、SNSでシェアされたときや、検索エンジンが記事内容を理解するときに使われるメイン画像のことです。

代表画像を伝える方法として、よく使われるのが og:image と構造化データです。

Google Discoverを意識する場合も、ページ内容を正しく表す大きな画像を og:image や構造化データで指定しておくことが重要です。 サイトロゴだけの画像や、記事内容と関係ない画像を代表画像にするのは避けましょう。

OGP画像とは？

OGP画像とは、X、Facebook、LINEなどで記事URLがシェアされたときに表示される画像のことです。

たとえば、記事URLをSNSに貼ったときに、タイトルや説明文と一緒に表示される大きな画像があります。 それがOGP画像です。

OGP画像の例：

<meta
  property="og:image"
  content="https://example.com/images/blog-image-seo.webp">

WordPressでは、SEOプラグインやテーマの設定画面からOGP画像を指定できることが多いです。

構造化データとは？

構造化データとは、Googleなどの検索エンジンに対して、 「このページはブログ記事です」「この記事のタイトルはこれです」「代表画像はこれです」 と分かりやすく伝えるためのコードです。

ブログ記事では、BlogPosting の image に代表画像を指定できます。

構造化データの例：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "mainEntityOfPage": "https://example.com/blog/image-seo",
  "headline": "ブログ画像SEOの正しいやり方",
  "image": "https://example.com/images/blog-image-seo.webp"
}
</script>

初心者さんが最初から手書きで設定するのは少し難しいかもしれません。 WordPressを使っている場合は、SEOプラグインやテーマ機能で設定できることが多いので、まずは管理画面を確認しましょう。

12. 画像サイトマップを使う

画像サイトマップとは、Googleに対して 「このサイトには、このような画像があります」 と伝えるためのファイルです。

通常、Googleはページをクロールしながら画像を見つけます。

しかし、サイトの作り方によっては、画像が見つかりにくい場合があります。

たとえば、次のようなサイトでは画像サイトマップが役立つことがあります。

• 画像が多いブログ
• JavaScriptで画像を表示しているサイト
• CDNを使って画像を配信しているサイト
• 商品画像やギャラリー画像が多いサイト

WordPressを使っている場合は、SEOプラグインやサイトマップ機能によって、 自動的に画像URLがサイトマップに含まれることがあります。

初心者さんは、まず次の2点を確認すれば十分です。

• XMLサイトマップが作成されているか
• サイトマップに画像URLが含まれているか

よく分からない場合は、使っているSEOプラグインのサイトマップ設定を確認してみましょう。

13. Discoverを意識するなら横幅1200px以上の高品質な画像を使う

Google Discoverでは、画像が非常に重要です。

通常の検索結果は、タイトルや説明文を読んでクリックされることが多いですが、Discoverは視覚的なフィードです。 そのため、記事タイトルだけでなく、画像の印象によってクリック率が大きく変わる可能性があります。

Google公式では、Discover向けの画像について、次のような条件が推奨されています。

• 横幅1200px以上の大きな画像を使う
• 高解像度で、合計30万ピクセルを超える画像を使う
• 16:9の横長画像を意識する
• 画像の大きなプレビューを許可する
• 記事内容を正しく表す画像を使う
• サイトロゴだけの画像は避ける
• 文字だらけの画像は避ける

初心者さんは、まずアイキャッチ画像を横幅1200px以上、できれば16:9の横長画像で作ることを意識してください。

たとえば、次のような画像が向いています。

• 記事内容をひと目で連想できる画像
• 実際に撮影したオリジナル写真
• 商品レビューなら商品の写真
• 旅行記事なら現地の写真
• 車の記事なら対象車種が分かる画像
• ノウハウ記事なら内容を図解した画像

逆に、次のような画像はおすすめしません。

• サイトロゴだけの画像
• 記事内容と関係ないフリー素材
• ぼやけた低画質画像
• 文字が多すぎる画像
• スマホで見たときに何の画像か分からない画像

Discoverに載るときは、画像が大きく表示されることがあります。 そのため、画像が弱いとクリックされにくくなります。

Discoverを狙うなら、記事本文だけでなく、アイキャッチ画像にも力を入れてください。

参考： Google 検索セントラル「Discover とウェブサイト」

14. max-image-preview:largeを設定する

Discoverで大きな画像プレビューを表示してもらうには、ページ側で大きな画像プレビューを許可しておく必要があります。

そのために使うのが、次のmetaタグです。

この1行を確認：

<meta name="robots" content="max-image-preview:large">

この指定は、Googleに対して「このページの画像を大きなプレビューとして表示してもよいです」と伝えるための設定です。

ただし、このタグを入れたからといって、必ずDiscoverに表示されるわけではありません。 Discoverに表示されるかどうかは、記事内容、ユーザーの興味、サイトの評価、画像の関連性など、さまざまな要素が関係します。

それでも、Discoverを意識するなら、横幅1200px以上の高品質画像を用意したうえで、 max-image-preview:large を設定しておくことは重要です。

WordPressで確認する方法

WordPressの場合、テーマやSEOプラグインによっては、すでにこの設定が入っていることがあります。

まずは、自分の記事ページのHTMLソースを確認し、 max-image-preview:large が入っているかチェックしてください。

入っていない場合は、SEOプラグイン側の設定や、テーマ側の設定で追加できる場合があります。

初心者向けの注意点

初心者の方が無理に header.php を直接編集すると、サイトが崩れる可能性があります。

WordPressのテーマファイルを直接編集するのが不安な方は、まずSEOプラグインやテーマ設定で対応できないか確認してください。

どうしても header.php を編集する場合は、必ずバックアップを取り、子テーマを使ってから作業しましょう。

ブログ投稿時のチェックリスト

画像SEOでは、難しいことを一度にすべて完璧にやろうとする必要はありません。

まずは、記事を公開する前に次の項目を確認しましょう。

やってはいけない画像SEO

画像SEOでは、「やるべきこと」だけでなく、「やってはいけないこと」も知っておくと失敗を防げます。

一番おすすめの画像タグの型

ブログ記事の途中や下のほうに貼る画像は、基本的に次の形を使えばOKです。

<img
  src="/images/blog-image-seo-checklist.webp"
  alt="ブログ画像SEOで確認すべきファイル名、alt、圧縮、表示速度のチェックリスト"
  width="800"
  height="450"
  loading="lazy">

この形には、画像SEOで大切な要素が入っています。

• src で画像の場所を指定している
• alt で画像の内容を説明している
• width と height で画像サイズを指定している
• loading="lazy" で下部画像の読み込みを後回しにしている

ただし、記事上部のアイキャッチ画像だけは別です。

アイキャッチ画像には loading="lazy" を付けず、必要に応じて fetchpriority="high" を使います。

さらに、Discoverを意識する場合は、アイキャッチ画像を横幅1200px以上の高品質画像にして、 og:image にも同じく記事内容を正しく表す画像を指定しておくのがおすすめです。

アイキャッチ画像のおすすめ例：

<img
  src="/images/main-image.webp"
  alt="ブログ画像SEOの基本を説明するアイキャッチ画像"
  width="1200"
  height="630"
  fetchpriority="high">

大きな画像プレビューを許可するmetaタグ：

<meta name="robots" content="max-image-preview:large">

初心者さん向けの覚え方

画像SEOは、最初は難しく感じるかもしれません。

しかし、基本はとてもシンプルです。

• 画像は、関係ある文章の近くに置く
• ファイル名は、画像の内容が分かる名前にする
• altは、画像を見られない人に説明するつもりで書く
• 画像は、できるだけ軽くしてからアップロードする
• アイキャッチ画像はlazy loadしない
• 記事の下のほうの画像はlazy loadする
• 画像にはwidthとheightを入れる
• 重要な画像はCSS背景ではなく <img> で入れる
• 代表画像はOGPや構造化データでも伝える
• Discoverを意識するなら横幅1200px以上の高品質なアイキャッチ画像を使う
• max-image-preview:large が設定されているか確認する

特に大切なのは、「読者が理解しやすい画像にすること」です。

Googleのためだけに画像を最適化するのではなく、読者にとって分かりやすく、読みやすく、表示が速い記事を作ることが、 結果的に画像SEOにもつながります。

画像SEOで一番大事なのは、検索エンジンのためではなく、読者が理解しやすい画像にすることです。

そのうえで、ファイル名、alt、画像の軽量化、lazy load、構造化データ、サイトマップ、Discover向けの高品質画像、 max-image-preview:large を整えるのが正しいやり方です。

以上です。