アイキャッチ画像は、ブログ記事を読むユーザーの目を惹きつけるための画像と言われますが、実際はそんな単純な物ではありません。
画像の見た目をおしゃれで可愛くするのも良いですが、ブログ運営に役立つアイキャッチ画像サイズや、記事の画像に行えるSEO対策の方が重要です。
WordPressで使うアイキャッチ画像は大きく分けて2種類。
- 記事タイトル下のアイキャッチ画像
- 見出し直下や記事の解説で使うアイキャッチ画像
これらのアイキャッチには最適な画像サイズや役割があり、SNSと連携させた運用も可能です。
また、画像SEO（画像検索SEO）対策を行う事でSEO効果も期待できます。
この記事では、アイキャッチの画像サイズについての解説と、記事内の画像に対して出来るSEO対策について解説しています。
画像に対して出来る施策や気を付けるポイントは沢山あります（alt属性に代替テキストを入れるだけではありません。）
ブログへのアクセスを増やしたい方だけでなく、そもそもアイキャッチ画像はいらないと考えている方も参考にして下さいね。
この記事の目次
アイキャッチ画像とは
アイキャッチ画像は、文字通り読者の目（eye）を興味を惹き付ける（catch）もの。でもそれだと何のことかよく分かりませんよね。
英語圏でアイキャッチは「thumbnail（サムネイル）」や「preview image（プレビュー画像）」と呼ぶのが一般的。アイキャッチは記事やビデオなどのコンテンツの目を引く部分や要約した画像、動画のスクリーンショットを指すことがあります。
つまり、ブログでもアイキャッチ画像を設置すれば記事の概要を視覚的に表現する事が出来ます。これにより、読者に対して記事への興味・関心を示してもらうのが狙いです。
一般的なアイキャッチの表現方法は以下の様な物です。
- 目を引くカラフルなデザイン
- 鮮やかな色彩やグラフィックを使ったデザインは、視覚的に興味を引きつける効果が期待できます。
- 特徴的で一貫性のあるビジュアル
- 特徴的なアイコンやモチーフを使用し、デザイン的な統一性を持たせます。複数のアイキャッチに共通項を持たせる事で、認識されやすいアイキャッチになります。
- 魅力的なイラスト
- キャラクターやアニメーションを使用したアイキャッチは写真とは違う魅力があり、人目を引きます。キャラクターのポーズや表情が興味や好奇心を引き起こします。
- 美しい風景写真
- 自然の風景や都市の街並みなど、美しい風景写真を使用したアイキャッチも効果的。写真のインパクトが視覚的な魅力となります。
- ダイナミックな動き
- 動きや流れを感じさせるデザインや絵を描くことで、視覚的な活気やエネルギーを表現します。勢いや空気感が伝わってくる様な魅力的なアイキャッチになります。
WordPressで使うアイキャッチ画像はコンテンツや目的によって異なるため、記事内容に合ったデザインやイメージを選ぶことが重要。アイキャッチ画像は単に目立てば良い訳ではありません。
更に言えば、画像SEOや画像検索SEOと呼ばれるものがあり、デザイン同様にアイキャッチ画像の使われる場所により目的や役割があります。
具体的に、WordPressのアイキャッチ画像について解説していきます。
WordPressのアイキャッチ画像が使われる場所
アイキャッチ画像は大きく分けて2種類あり、よく使われるのは以下の場所です。
- 記事タイトル下のアイキャッチ画像
- 見出し直下や記事解説などで使うアイキャッチ画像
「いや知ってるよ」と思うかも知れんせんが、そもそもなぜアイキャッチ画像を入れるのか？目を惹かせる以外の理由はご存じでしょうか？
次に、アイキャッチ画像を入れる目的や役割にはどんなものがあるのか解説していきます。
アイキャッチ画像を入れる目的や役割
アイキャッチ画像を入れる場所により違いはありますが、目的としては以下の通りです。
- 記事内容を理解しやすくするため
- SNSで共有して貰いアクセスを増やすため
- Google画像検索からアクセスを増やすため
- ユーザーが飽きて離脱するのを防ぐため
- 記事にオリジナリティを出すため
それぞれ考慮すべきポイントは変わりますが、アイキャッチ画像はSEO対策につながります。
アイキャッチ画像だけでなく、図版など記事内の画像にも同様に行えるSEO施策が沢山あります。
画像に対する施策を知っているブロガーは少ないので、競合との差別化を図るチャンスでもあります。
それぞれ解説しますので、出来るところから取り入れてみて下さいね。
アイキャッチの画像サイズを軽量化
WordPressのアイキャッチ画像サイズと言った場合、次の様な2つの意味があります。
- 画像のデータサイズ（容量）
- 画像の縦横サイズ（長さ）
物理的な縦横サイズが大きい事や、高解像度が要因で画像データサイズは肥大します。アイキャッチ画像でなくとも、画像を使うならデータの軽量化は必要です。
画像サイズが大きいと読み込みに時間が掛かる為、いわゆる「ページが重い」状態。その結果、ブログの表示が遅くなりユーザーが離れてしまうわけです。また、ページの表示が遅い事は検索エンジン的にも好ましくありません。
特にスマホで撮った写真や素材サイトの画像はデータサイズも長さも大きすぎるので、軽量化が必要です。
そこで、簡単にできる画像軽量化の方法を紹介します。
① 画像のデータサイズ（容量）
画像軽量化には無料で使える画像圧縮ツールのSquooshが便利です。WebP形式での保存にも対応しています。詳しい使い方は以下の記事をご覧ください。
画像データサイズの目安は？
どれくらい軽量化すべきか正解はありません。目視で確認して画質が荒れない程度にまで圧縮します。もちろん小さいサイズほど良いです。
アイキャッチ画像の幅サイズくらいなら、WebP形式を使えば50KB以下に抑えるのは簡単です。
画像によっても最適な保存形式があり、例えば写真とシンプルなイラストではデータサイズも大きく違ってきます。
② 画像の縦横サイズ（長さ）
画像のデータサイズと同様に、画像の縦横サイズが無駄に大きいのもデータが重くなる原因です。
例えば、サイドバー付きの2カラムで記事を書いているなら、まずPCでそのコンテンツ幅を確認し、最低でもコンテンツと同じ横幅サイズの画像をアイキャッチ画像として設定します。
※コンテンツ幅とは記事が書かれているエリアの事です。
自分の使っているWordPressのコンテンツ幅の調べ方が分からない方は以下を参考にしてみて下さいね。
WordPressの人気テーマのコンテンツ幅一覧
WordPressで人気テーマのコンテンツ幅を一覧にしました。
テーマによってコンテンツ幅の左右に余白が入っているものや、可変するものがありますので、あくまで目安です。ご了承ください。
| テーマ名称 | 2カラムコンテンツ幅 – 可変あり | 推奨アイキャッチ画像幅 |
|---|---|---|
| COCOON | 800px～ | 1280px以上 |
| JIN:R | 680px～ | 1320px以上 |
| STORK19 | 728px～ | 特に記載なし |
| SWELL | 680px～ | 1200以上 |
| THE THOR | 760px～ | 1920px以上 |
| AFFINGER6 | 740px～ | 1200px以上 |
例えば、初心者に人気のSWELLならアイキャッチ画像は幅1200ピクセル、高さ628ピクセルになっています。
WordPressで画像サイズは設定しておくべき？
WordPressの管理画面の【設定】→【メディア】から画像のサイズをあらかじめ設定しておく事も出来ますが、特に理由がなければ必要ありません。
ブログ記事で使うアイキャッチ画像は、テーマの推奨幅かコンテンツ幅で作れば大丈夫。
画像へのSEO効果を確認する
画像サイズや保存形式を修正し、ブログがどれくらい改善されたのか確認するならPageSpeed Insightsが便利です。
実際の体験談として前述したツールで画像軽量化し、推奨されているWebP形式でファイルを保存した事で画像に関するエラー項目が改善しました。
以下、難しければ読み流す程度でも大丈夫です。
コアウェブバイタルを確認
PageSpeed Insightsではスコアが大きく表示されており、もしかしたら点数が気になるかも知れません。ただ、エラーを修正してもスコアアップに繋がらない項目や、すぐに反映されないものもあります。
スコアの高得点も良いですが、今回見て欲しいのはコアウェブバイタルです。
- コアウェブバイタル(Core Web Vitals)とは
- コアウェブバイタル(Core Web Vitals)とは、Webサイトのパフォーマンスを測定するための指標。Webサイトのユーザー体験向上は重要であり、Googleはコアウェブバイタルの評価をランキングに反映させるとしている。
重要度の高いコアウェブバイタルの3つの項目内容は以下の通りです。上記画像の赤枠で囲った部分に記載してあるものです。評価は棒グラフで表されています。
緑の表示部分がどんな状態（良好である）かを確認して下さい。
- LCP（Largest Contentful Paint）読み込み速度を示す
- ページでメインとなる最も大きなコンテンツが表示されるまでの時間。ページの最初の読み込み開始時と比較。値が小さいほどUXが良好。
- FID（First Input Delay）操作性を示す
- ユーザーが最初に行ったクリックやタップなどへのブラウザの反応時間。値が小さいほどUXが良好。
- CLS（Cumulative Layout Shift）視覚的な安定性を示す
- 閲覧中にレイアウトのズレがどれくらい発生したか。画像の読み込み遅延で起きる。値が小さいほどUXが良好。
2024年3月に、FIDの代わりに新たに採用されるINPがCore Web Vitalsの指標の一つとなります。
これらを改善する事で、Webサイトのユーザーエクスペリエンス（ユーザー体験）が向上し、SEOにおけるランキングの向上につながるとされています。
Webサイト運営者にとっては重要な指標ですが、大事なのは訪問ユーザーへ良い体験を提供する事です。
Google検索セントラル：ページエクスペリエンスの Google 検索結果への影響について
アイキャッチの画像比率は黄金比やOGP画像サイズがおすすめ
記事タイトル直下のアイキャッチ画像は記事にとっての顔。デザインは大事ですが、載せる画像サイズにもポイントがあります。
実はアイキャッチの画像サイズには、美しいとされる黄金比やSNSで使う共有サイズが存在します。
- 黄金比で美しい画像サイズ
- 自然界にも多く存在し、美的なバランス感など安定感があり心地よいとされる。
- SNSで推奨される画像サイズ
- ブログの場合、SNSで推奨されたOGP画像サイズと相性が良い。
アイキャッチ以外で使う画像でもサイズに迷ったら参考にしてみて下さい。
いつも比率を揃える事が必要な訳ではありません。記事が読み易い画像サイズに調整する事も大切です。
黄金比が美しい画像サイズ
黄金比とは、長方形や正方形、芸術作品、建築物などにおいて美しいとされる比率の事。これはアイキャッチ画像にも適した画像サイズです。
黄金比は「約1.6180339887…」となっており、おおよそ「1：1.6」の比率とされています。横長で使う時は「1.6：1」ですね。
この「1：1.6」の比率を自分で計算するのは難しいのですが、自動で計算できるサイトがあるので後ほど紹介します。
SNSで推奨されるOGP画像サイズ
SNSでブログ記事がシェアされる際に文章と共に使われる画像をOGP画像と呼び、記事内のアイキャッチ画像とは別に設定可能です。魅力的な画像であればSNSでのクリック率も上がります。
ただ、別途用意するのが手間な場合はアイキャッチ画像を流用するのも一つの手。そうなると、やはりアイキャッチの画像サイズが重要になります。
OGP画像の設定をしていない場合、記事内の意図しない画像が使われます。タイトル下のアイキャッチ画像が勝手に拾われる事が多いのですが、SNSを上手に活用するならOGP画像はきちんと設定しておきましょう。
使いどころにもよりますが、以下の画像比率がSNSで良く使われている比率。アスペクト比と呼ばれるものです。
- 1.91：1
- 16：9
- 1：1
画像サイズなら以下の様に共通のサイズもあります（小数点以下は調整されています）。
- 高解像度用は、1200 x 630 ピクセル（約1.91：1）
- 大きめ画像なら、600 x 315 ピクセル（約1.91：1）
これらはTwitterもFacebookも共通で使えます。高解像度画像を用意するのが大変なら、横幅はブログのコンテンツ幅に合わせ、上記の比率で高さを計算すればOK。
これらのサイズとピッタリではなく、少し大きくても比率が合っていれば大丈夫。比率を合わせる理由は、シェアされた画像の端が中途半端に切れるのを防ぐためです。
Facebook（meta）：アスペクト比のベストプラクティス
OGP画像の設定は、WordPressのテーマ側で記事毎に設定出来るものもあります。設定が無い場合は「Yoast SEO」などのSEO系プラグインを使うのが簡単です。
肝心の画像サイズですが、画像の縦横比率を計算できるサイトをご紹介します。
画像比率を計算できるサイト
幾つか参考になりそうなオンラインサービスを探し回って使ってみたのですが、良いと思ったのは以下のサイト。
参考サイト：ハコイリオヤジ – 画像サイズ計算機
サイズを入力すると様々なアスペクト比で横幅、縦幅、自分好みの比率も追加できる優れものです。
「1.91：1」の様な小数点の計算が出来ないサイトばかりだったので、コレ一択です。見た目もキレイな日本のサイト。使い方は直感的に分ると思います。
SNSで使われるアスペクト比から黄金比や白銀比などが同時に計算されます。
必要な画像の横幅を入れると画面下に各比率で計算された結果が出ます。小数点の切り捨てでも良いです。
ブログ運営での画像活用方法としては、記事内のアイキャッチ画像は黄金比で作成し、SNS用にはOGP画像サイズを別途用意して設定すれば良いです。
Google Discoverの画像サイズ
Google Discover（グーグルディスカバー）とはスマホでGoogle検索する際にトップに出てくるプレビューコンテンツ（タイトル、スニペット、画像）の事。Discoverに表示されるとサーチコンソールからアクセスを確認出来ます。
Discoverで使われる画像サイズは、ブログのコンテンツ幅やSNS用の画像サイズと同じなので相性は良いです。
掲載されるには推奨設定などの条件がありますので解説します。
Google Discoverの推奨設定
検索結果に画像サムネイルが掲載される条件は以下の通り。コンテンツポリシーを満たすのは当然として、画像サイズやmetaタグの設定がポイントです。
また、Discoverへの掲載を判断する判断として、Google検索ランキングシステムやユーザーに有用なコンテンツなど、検索ランキングの要因と共通しているものが多いです。
- Google Discoverで推奨される画像サイズは1200px以上。
- これはブログの推奨アイキャッチ画像幅や、SNSで度々出てくる画像サイズと同じなので相性は良いです（コンテンツ幅の画像サイズでも表示はされます）。
- robots metaタグでmax-image-preview:largeの設定
- viewportの幅に合わせて大きな画像を表示させるもの
もし、metaタグが何か分からなくても大丈夫。この記事で取り上げたWordPressであればどのテーマでも最初から設定してあります。
<meta name="robots" content="max-image-preview:large">Discoverに表示されるとアクセスUPを期待できる訳ですが、過剰反応してはいけません。
以下の理由から掲載のハードルは高め。掲載基準も不確定要素が多く、自分から狙うものでは有りません。
Discover からのトラフィックは検索と比べて予測可能性や信頼性が低く、検索トラフィックの補完的なものと考える必要があります。Discoverのユーザーエクスペリエンスを改善するための Google の取り組みによって、コンテンツの品質や公開頻度とは関係のない変化がサイトのトラフィックで見られる可能性があります。
Google検索セントラル：Discoverと検索の違い
コンテンツが Googleにインデックス登録されていて、かつ Discover のコンテンツ ポリシーを満たしていれば、そのコンテンツは自動的に Discoverの表示対象になります。特別なタグや構造化データは必要ありません。なお、Discoverの表示対象になっていても、必ず表示されるとは限りませんのでご注意ください。
Google検索セントラル：Discoverのコンテンツが表示される仕組み
その他、ユーザーの興味関心やアプリ側での表示設定なども関係しています。掲載を狙うのでは無く「表示されたら嬉しい」くらいに考えておいた方が良いです。
画像SEOで出来る事
画像SEOとはSEO対策の一種。実は画像に対しても行えるSEO対策は沢山あり、画像SEOを適切に行えば、ブログの検索ランキングを押し上げる事に繋がります。
また、画像検索SEOとして、画像検索でコンテンツ内の画像が表示される可能性を高めます。魅力的な画像は意外とクリックされますし、露出を高める事でブログの認知度も上がります。
以下に画像SEOで出来る事を挙げました。解説しますので出来る所からでも良いので取り入れてみて下さいね。
参考：Google 画像検索SEO ベストプラクティスよりブログ向けに要約。
- ページに関連した画像やコンテキストの使用
- 重要な画像には代替テキストとキャプションを入れる
- 画像の配置を最適化する
- 画像に適したURLやファイル名を付ける
ページに関連した画像やコンテキストの使用
画像なら何でも良い訳では無く、ページ内容に関連した画像のみを使用します。特にオリジナルの画像が好まれます。
また、コンテキストとは文章の文脈の事で、Googleなどの検索エンジンは画像近くの文脈から画像の内容を判断するため、画像の近くには関連する文章を入れます。
これらは記事タイトル下のアイキャッチや、各見出しの下に画像を配置する理由でもあります。
また、魅力的な画像でユーザーを飽きさせない効果もあります。動画ほどでは無いですが、滞在時間も伸びる可能性があります。
丁寧に作られた図解などを使えば、ユーザビリティ（読みやすさ）向上にも寄与しますし、関連する情報を視覚的に認識でき、コンテンツをより理解できるようになるからです。
重要な画像には代替テキストとキャプションを入れる
alt属性に入れる代替テキストとは、画像が意図せず表示されなかった際、代わりに表示される説明文です。これにより、ユーザーはページの内容を理解するのに役立ちます。
検索エンジンに対しても、画像のコンテキストをより深く理解出来るよう、alt属性には画像の代替テキスト入れるのがおすすめです。
目を引かせる為だけの画像や、装飾に使う画像に代替テキストを入れる必要はありません。キーワードを無理に詰め込むのも止めましょう。
また、画像にキャプションを設定することも大切です。画像に関するテキストや情報を追加する事はGoogle画像検索への最適化にもなります。これにより画像検索でユーザーが見つけやすくなり、その結果、ブログへの流入につながります。
画像の配置を最適化する
可能な限り、関連するテキストの近くに画像を配置しましょう。適宜、最も重要な画像をページ上部に配置することを検討してください。
ブログであればアイキャッチと記事タイトルですね。検索エンジンは画像とその近くのテキストから関連性を判断します。
画像検索で表示される情報にはページタイトルやmetaタグの説明など、いくつかあります。
画像に適したURLやファイル名を付ける
GoogleはURLパスと画像ファイル名を参照して、画像について把握します。画像ファイルを分類して整理し、URLが論理的に構成されるようにします。
ブログでWordPressを使っているなら画像のURLは整理されていると思います。しかし、画像ファイル名は投稿者が考えるもの。「img01」や単なる数字の羅列の様に適当な名前を付けてはいけません。
ブログの画像は見せ方にも気をつける
画像SEOとは少し違いますが、ブログ内での画像の見せ方（特に図解など）には気を付けるポイントがあります。
それは、PCとスマホでの画像の見え方の違い。知らないとせっかく用意した画像が台無しです。
そこで、ブログで画像を使う際に考えておく事をお伝えします。重要なので、実践出来ずとも頭の片隅には入れておいて欲しい内容です。
PCとスマホでの画像の見え方の違いに注意
レスポンシブ（ウェブ）デザインが主流の現在、ブログ自体のレイアウトはテーマ側でレスポンシブに対応しています（パソコン表示ではサイドバーが表示され、スマホの時は非表示など）。
一方で、記事内で使う画像は画面幅に合わせて伸縮されるだけ。パソコンでは大きく見えていた画像もスマホではとても小さく表示されます。
特に図解の様な画像内にテキストを重ねている場合だと小さすぎて読めない事が多いです。
スマホの画像の見せ方に困ったら、以下のステップに当てはめてみて下さい。
スマホでも問題無く見える画像サイズなのか考える。特に図解など。
無理なら、パソコン用とスマホ用でサイズ違いの画像を用意。
CSSやHTMLで画像を出し分ける。
それも難しければ、ライトボックス系のプラグインで画像を拡大表示出来る様にする。
WordPressのテーマによってはPCとスマホ、タブレットでの画像の出し分け機能が用意されています。
またこれらとは逆に、パソコンで見た際の高さが物凄く大きい画像の場合、出し分けをしていない画像はそのままスマホ画面いっぱいに表示されてしまいます。これはこれで見辛くて不便です。
パソコンのコンテンツ幅に合わせた画像サイズでも、この記事で紹介した画像比率で調整すればサイズ感的には丁度良いはずです。
まとめ
画像で出来るSEO対策について解説しました。すぐに取り入れる事が出来るものや、知っておけば役に立つ事ばかりなので参考にして下さいね。
- 画像は軽量化する
- アイキャッチ画像のサイズは黄金比やSNSアスペクト比などを参考にする
- 画像SEOの方法を取り入れる
- 画像はPCとスマホでの見え方に注意する
本当はまだまだ沢山あるのですが、技術的に難しい物は外しました。
