アイキャッチの作り方と設定5つの手順｜登録ブログ7,561件の共有画像の有無

記事をX(旧Twitter)やLINEで共有したら、設定したアイキャッチではなくテーマの画像や「NO IMAGE」の画像が出ることがあります。共有したときの画像は、記事のアイキャッチとは別に、テーマやプラグインの設定で決まる場合もあるからです。

この記事では、アイキャッチに描く中身と大きさの決め方からWordPressでの設定と共有したときの画像の確かめ方までを、5つの手順で解説します。材料は、みんなのブログランキング(みんブロ)に登録されたブログ7,561件のトップページと、ブログ相談ドットコムのアイキャッチの相談20件です。

記事を読めば、記事の中身が伝わるアイキャッチを作り、一覧とSNSの両方で思った画像を出せます。登録ブログのトップページの29.8%には共有したときの画像を指定するタグが無く、SWELLのブログでは60.6%にありませんでした。アイキャッチは推奨の大きさで作って投稿の「アイキャッチ画像」に設定し、ページのソースで画像のタグまで確かめるのが基本の流れです。

アイキャッチの作り方5つの手順と、登録ブログの共有画像のタグ

アイキャッチは、記事の中身をひと目で伝える記事の代表の画像です。WordPressでは投稿の「アイキャッチ画像」に設定し、多くのテーマがトップページや記事の一覧で記事を見せるのに使います。アイキャッチを作って設定する手順は、以下の5つです。

1. アイキャッチに描く中身を記事ごとに決める
2. テーマの推奨の大きさと形で画像を作る
3. WordPressの投稿の「アイキャッチ画像」に設定する
4. 共有したときの画像として出ているかを確かめる
5. 思った画像が出ないときは共有画像のタグと設定を見直す

SNSで記事を共有したときに出る画像(共有画像)は、ページのHTMLにあるog:imageのタグで指定します。og:imageはページを表す画像のURLを書くタグで、Open Graph protocolで必ず入れる4つの項目の1つです。

みんブロは、みんブロ調べと同じ株式会社メリルが運営するブログのランキングサービスです。2026年10月30日に有効だった登録サイト13,005件のトップページを1回ずつ取り、取れた7,561件のHTMLで共有画像のタグを探しました。Xのカードの形を決めるtwitter:cardのタグも数えています。

トップページに共有画像のタグがあったブログは5,308件(70.2%)でした。twitter:cardのタグはあるのに共有画像のタグが無いブログも、1,705件(22.5%)あります。ブログの作りごとに数えた結果は、以下の表のとおりです。

ブログの作り	ブログの数	共有画像のタグがある	割合	twitter:cardだけある
ページを取れた全部	7,561	5,308	70.2%	1,705
WordPress	6,773	4,840	71.5%	1,672
はてなブログ	110	108	98.2%	0
WordPress・はてなブログ以外	678	360	53.1%	33

トップページのHTMLにproperty="og:image"の形が1つでもあれば「共有画像のタグがある」に数えました。タグの中にある画像のURLや、中身が空でないかは見ていません。

数えたのはトップページを1回取った結果で、記事のアイキャッチがある割合ではありません。トップページには、記事のアイキャッチではなくサイト全体の既定として設定した画像を出すテーマやプラグインがあります。母数は、2021年から続くみんブロに登録されたブログのうち、取った時点でトップページを読めたブログです。日本のブログ全体の割合とは違います。

ブログ相談ドットコム(株式会社メリル運営)に2021年8月〜2026年9月に公開された相談は、1,398件です。アイキャッチ・サムネイル・OGPなどの語や共有したときの画像の言い方を含む相談と、回答にだけ語が出る相談の計66件を読みました。主な問いがアイキャッチだった20件を、中身で分けた結果は以下の表のとおりです。

相談の中身	相談の件数	対応する手順
大きさ・形・画質・ファイルの重さ	6件	手順2
WordPress・テーマでの設定と表示	5件	手順3
SNSで共有したときの画像	5件	手順4・手順5
アイキャッチに使ってよい画像か	2件	手順1
何を描くか・文字か写真か	1件	手順1
検索結果に出る画像	1件	手順5

1件に1つ、主な問いで分けました。20件の内訳は2021年6件・2022年5件・2023年4件・2024年5件です。

手順1：アイキャッチに描く中身を記事ごとに決める

アイキャッチは、一覧やSNSでほかの記事と並んだときに、記事を開くかを決める材料になります。描く中身を決めるときに見ることは、以下の3つです。

• 記事で答えていることがひと目でわかる画像にする
• ロゴや文字だけの画像にしない
• 使ってよい素材かを使う前に確かめる

記事で答えていることがひと目でわかる画像にする

アイキャッチに向くのは、記事で答えていることを表す写真や絵です。画像と記事の中身が合っていないと、画像を見て開いた人の思っていた内容と記事が食い違います。記事の主題を表す道具・画面・場面を写真か絵にし、色と配置はブログ全体でそろえます。

相談20件のうち、何を描くかの相談は1件でした。文字を入れた画像と写真の画像のどちらがよいか・そろえるべきかを聞いた相談で、回答では読者の印象に残る方を選ぶよう指摘されています。回答したのは相談サイトの利用者で、専門家ではありません。

アイキャッチに入れる一言は、記事のタイトルの要点から取るとタイトルと画像がそろいます。タイトルの付け方は、以下の記事で解説しています。

» ブログ記事のタイトルの付け方5つの手順｜相談26件で多かった検索結果の迷い

ロゴや文字だけの画像にしない

Google検索に優先して使ってほしい画像として伝えるなら、ロゴや文字が入った画像は選びません。Googleは検索結果やDiscoverに出す画像を自動で選び、選ぶときの材料の1つに共有画像のタグが入ります。優先してほしい画像の選び方は、以下の5つです。

• ページに関連があり、ページを代表する画像を選ぶ
• サイトのロゴのような一般的な画像を使わない
• 文字が入った画像を使わない
• 幅が極端に狭い画像や広い画像を使わない
• できるだけ高い解像度の画像を使う

Cocoon・AFFINGER・SEO SIMPLE PACKでは、記事のアイキャッチが記事の共有画像にもなります。文字を大きく並べたアイキャッチは、共有画像でも文字が主役の画像です。

一覧で読ませる一言を入れる場合も、文字は短くし、写真や絵で記事の中身が伝わる画像にします。検索結果の画像にも使われてほしい記事なら、文字を入れないアイキャッチにして、一言は記事のタイトルに任せるのも1つの方法です。

使ってよい素材かを使う前に確かめる

アイキャッチに使う写真や絵は、使ってよい素材かを先に調べます。相談20件のうち2件は、本の表紙の写真や通販サイトの商品画像をアイキャッチに使ってよいかを聞いた相談でした。2件とも、回答では権利を持つ会社に問い合わせるか、画像を自分で用意するよう指摘されています。

アイキャッチに使う素材を選ぶ順は、以下のとおりです。

1. 自分で撮った写真や自分で作った図を使う
2. 素材サイトの画像は、そのサイトの利用規約で使える範囲を読んでから使う
3. 他人が作った画像は、権利を持つ人や会社の決まりを確かめてから使う

使ってよいかがわからない画像は、アイキャッチに使わずに自分で撮った写真か作った図に替えます。

手順2：テーマの推奨の大きさと形で画像を作る

アイキャッチの大きさと形は、使っているテーマの推奨に合わせて決めます。相談20件では、大きさ・形・画質・ファイルの重さの相談が6件と最も多くありました。画像を作るときの手順は、以下の4つです。

• テーマのマニュアルで推奨の大きさを確かめる
• 細長すぎない形と高い解像度で作る
• 画像を作る道具は使い慣れたものから選ぶ
• 書き出す形式とファイルの重さを見る

テーマのマニュアルで推奨の大きさを確かめる

アイキャッチを作る前に、使っているテーマのマニュアルで推奨の大きさを確かめます。テーマは決めた大きさに合わせてアイキャッチを縮めたり切り抜いたりして出せるため、推奨と違う形の画像では端が切れることがあります。テーマのマニュアルで見つけた大きさは、以下の表のとおりです。

テーマ	マニュアルにある大きさ	どの画像の大きさか
Cocoon	1200×630ピクセル(1.91：1)	OGP画像の推奨サイズ
AFFINGER	200×200ピクセル以上・8MB以下	トップページなど投稿・固定ページ以外の共有画像

2026年11月3日に各テーマの公式マニュアルで確かめました。AFFINGERの値は、画像の大きさの下限とファイルの重さの上限です。

表に無いテーマは、マニュアルで「アイキャッチ」「OGP」「サムネイル」の項目を探します。

細長すぎない形と高い解像度で作る

アイキャッチは、極端に細長い形を避け、解像度の高い画像で作ります。鮮明な画像は検索結果のサムネイルで目立ち、ぼやけた画像より読む人の目を引くからです。

WordPressは、アップロードした画像から小さい大きさの画像も作ります。WordPress 7.1.4が初めの設定で作る大きさは、以下の4つです。

• サムネイル：幅150×高さ150ピクセル(切り抜く)
• 中サイズ：幅と高さ300ピクセルまで
• 幅768ピクセルまでの画像(設定の画面に名前が出ない大きさ)
• 大サイズ：幅と高さ1024ピクセルまで

テーマは、WordPressが作った大きさか自分で足した大きさから、アイキャッチに使う大きさを選んで出します。相談のうち、アイキャッチがぼやけた・粗いと書かれた2件では、回答でアップロードした画像より小さく縮めた画像が使われていると指摘されました。

WordPressが縮めた画像は、ファイル名の後ろに-150x150のような大きさが付きます。アイキャッチがぼやけたときは、ページのソースで画像のファイル名を見ると、どの大きさが使われているかがわかります。

画像を作る道具は使い慣れたものから選ぶ

アイキャッチを作る道具は、推奨の大きさで新しい画像を作れて、決まった形式で書き出せるものなら何でも使えます。ブラウザで使うデザインの道具・スライドを作るソフト・画像を編集するソフト・スマートフォンのアプリのどれでも、作る流れは以下のとおりです。

1. 推奨の大きさで新しい画像を作る
2. 記事の主題を表す写真か絵を置く
3. 一言を短く書いて写真や絵と重ならない位置に置く
4. 画像をJPEGやPNGなどの形式で書き出す

相談のうち1件は、スマートフォンで撮った写真をサムネイルの大きさに加工するやり方の相談でした。回答では大きさを変えるウェブの道具が挙がり、相談した人から助かったと返信がありました。

書き出す形式とファイルの重さを見る

画像を書き出すときは、形式とファイルの重さを見ます。画像はページの大きさを増やし、読み込みを遅くする原因になりやすいからです。Google検索が対応している画像の形式は、BMP・GIF・JPEG・PNG・WebP・SVG・AVIFの7つです。

書き出した後は、ファイルの重さを見てからアップロードします。ファイル名はIMG00023.JPGのような番号ではなく、画像の中身がわかる短い名前にすると、画像の中身を伝える材料の1つになります。

手順3：WordPressの投稿の「アイキャッチ画像」に設定する

作った画像は、WordPressの投稿の設定にある「アイキャッチ画像」に設定します。相談20件のうち5件は、WordPressやテーマで設定したアイキャッチが思った所に出ない相談でした。WordPressで設定するときに見ることは、以下の3つです。

• 投稿の設定の「アイキャッチ画像を設定」から画像を選ぶ
• 「投稿のアイキャッチ画像」ブロックは表示の部品として使う
• 一覧やカードに出ないときはテーマの設定とマニュアルを見る

投稿の設定の「アイキャッチ画像を設定」から画像を選ぶ

アイキャッチは、投稿の編集画面の右にある投稿の設定の「アイキャッチ画像」の欄で設定します。WordPress 7.1.4の日本語の画面で設定する手順は、以下のとおりです。

1. 投稿の編集画面を開き、右の投稿の設定で「アイキャッチ画像を設定」を押す
2. メディアライブラリで画像を選ぶか、新しい画像をアップロードする
3. 画像の「代替テキスト」に画像の中身を短く書く
4. 右下の「アイキャッチ画像を設定」を押して投稿を保存する

画像を替えるときは設定した画像の「置換」を、外すときは「アイキャッチ画像を削除」を押します。

「アイキャッチ画像」の欄は、テーマがアイキャッチに対応しているときだけ出る作りです。欄が見当たらないときは、使っているテーマがアイキャッチに対応しているかをマニュアルで確かめましょう。

「投稿のアイキャッチ画像」ブロックは表示の部品として使う

WordPressの「投稿のアイキャッチ画像」ブロックは、設定したアイキャッチを表示するための部品です。主に、記事の一覧を作るブロックの中やサイトのテンプレートに置いて使います。

記事の代表の画像を決めるのは、投稿の設定の「アイキャッチ画像」の欄です。ブロックを本文に置く前に、投稿の設定でアイキャッチが選ばれているかを見ます。

相談のうち1件は、テーマを替えた後に設定したアイキャッチが記事のページでぼやける相談でした。相談した人は、ブロックで設定していたことが原因だとテーマのフォーラムで答えをもらい、投稿の設定の欄から設定し直すと直ったと書き込んでいます。

一覧やカードに出ないときはテーマの設定とマニュアルを見る

アイキャッチが記事の一覧やおすすめのカードに出ないときは、テーマの設定とマニュアルを見ます。アイキャッチを一覧やカードのどこにどう出すかは、テーマごとに違うからです。設定と表示の相談5件で聞かれていたことは、以下の4つです。

• おすすめのカードにアイキャッチが出ない
• ピックアップに同じ記事のアイキャッチばかり出る
• 一覧の「NO IMAGE」に画像を入れたい
• 一覧の表紙の画像が全部同じになる

5件のうち3件では、回答でテーマのフォーラムや公式の説明を見るよう指摘されました。表紙が全部同じになる相談には、投稿の画面の「アイキャッチ画像」の欄で設定する方法が答えられていました。

Cocoonは、本文の画像を使う設定などをしていなければ、アイキャッチが無い記事に「NO IMAGE」の画像を代わりに使います。Cocoon設定のタブの使い方は、以下の記事にまとめました。

» Cocoonの使い方5つの手順｜相談125件でわかった設定でつまずく所

手順4：共有したときの画像として出ているかを確かめる

アイキャッチを設定したら、共有したときの画像として出ているかを確かめます。共有画像のタグを出すのはテーマかプラグインで、トップページと記事で出る画像の決まり方も違うからです。確かめるときに見ることは、以下の3つです。

• 共有画像のタグはテーマかSEOのプラグインが出す
• トップページの共有画像は記事と別に決める
• ページのソースで共有画像のタグを探す

共有画像のタグはテーマかSEOのプラグインが出す

WordPress 7.1.4の本体には、自分のページに共有画像のタグを出す仕組みがありません。本体のファイルでog:imageを扱っているのは、ほかのサイトのURLから情報を読み取る1つのファイルだけです。共有画像のタグは、使っているテーマかSEOのプラグインが出します。

テーマごとに数えると、トップページに共有画像のタグがあった割合は、SWELLが39.4%と最も低く出ました。100件以上のブログで使われていた7つのテーマの結果は、以下の表のとおりです。

テーマ	ブログの数	共有画像のタグがある	割合	twitter:cardだけある
THE THOR	165	165	100.0%	0
JIN	557	554	99.5%	1
Cocoon	1,730	1,720	99.4%	6
JIN：R	124	123	99.2%	0
SANGO	230	228	99.1%	2
AFFINGER	554	465	83.9%	68
SWELL	2,101	828	39.4%	1,204

テーマのフォルダ名が1つの製品だけだったWordPressのブログで数えました。

トップページに共有画像のタグが無かったWordPressのブログ1,933件のうち、1,273件(65.9%)がSWELLでした。SWELLは、本体に共有画像などのmetaタグを出す機能がないテーマです。共有画像のタグは、SWELLと同じ開発者が作ったSEO SIMPLE PACKなどのプラグインで出します。

SEOのプラグインを入れていれば足りるわけではありません。All in One SEOの名前がトップページに出たWordPressのブログ814件でも、共有画像のタグがあった割合は72.4%でした。名前が出なかったブログの71.3%と、ほぼ同じ割合です。登録ブログで使われているテーマの割合は、以下の記事にまとめています。

» ワードプレスのテーマおすすめの選び方5つの手順｜登録ブログ6,773件の割合

トップページの共有画像は記事と別に決める

トップページの共有画像は、記事のアイキャッチとは別に、テーマかプラグインの設定で決めます。記事のページには記事のアイキャッチを出し、トップページには設定で決めた画像を出すテーマとプラグインがあるからです。確かめたテーマとプラグインで決める所は、以下の表のとおりです。

テーマ・プラグイン	トップページの共有画像を決める所	決めていないとき
SEO SIMPLE PACK	「SEO PACK」→「OGP設定」の「基本設定」の画像	共有画像のタグが出ない
Cocoon	「Cocoon設定」→「OGP」タブの「ホームイメージ」	Cocoonの画像が出る
AFFINGER	「トップページなど投稿・固定ページ以外のアイキャッチ画像」	-
JIN	「外観」→「カスタマイズ」→「OGP設定」の「トップページの画像設定」	-

各テーマとプラグインの公式マニュアルで確かめました。マニュアルで見つからなかった所は「-」にしました。AFFINGERでトップページに固定ページを使っている場合は、その固定ページに設定したアイキャッチを使います。

SEO SIMPLE PACKでは、記事のアイキャッチがあれば記事の共有画像になります。アイキャッチが無い記事とトップページに使うのは「OGP設定」の「基本設定」で選んだ画像です。初めの状態では「基本設定」の画像が選ばれていないため、共有画像のタグを出しません。

SWELLのブログの57.3%は、twitter:cardのタグはあるのに共有画像のタグがありませんでした。初めの状態のSEO SIMPLE PACKはtwitter:cardのタグをsummaryの形で出し、トップページの共有画像のタグは出しません。

数字は、初めの状態のSEO SIMPLE PACKが出すタグの組み合わせと合います。ただし、どのプラグインを使っているかはトップページのHTMLから数えられないため、確かめていません。

ページのソースで共有画像のタグを探す

共有画像のタグが出ているかは、ページのソースで見ます。トップページと記事のページでは出る画像が違うことがあるため、両方を開きます。ソースで共有画像のタグを探す手順は、以下のとおりです。

1. トップページと、アイキャッチを設定した記事を、ブラウザで開く
2. ブラウザの機能でページのソースを表示する
3. ソースの中でog:imageを検索する
4. タグが1つだけあり、contentの中に思った画像のURLが入っているかを見る

contentの中が、記事のアイキャッチではなくテーマの画像や「NO IMAGE」の画像なら、記事のアイキャッチかテーマの設定を見直します。記事にアイキャッチもSNS用の画像も無く本文の画像を使う設定もしていないと、Cocoonは共有画像に「NO IMAGE」の画像を使います。

ページのソースで説明文のタグを探すやり方も同じです。説明文の書き方は、以下の記事で解説しました。

» メタディスクリプションの書き方5つの手順｜登録ブログ7,561件の説明文の長さ

手順5：思った画像が出ないときは共有画像のタグと設定を見直す

共有したときや検索結果に思った画像が出ないときは、共有画像のタグと設定を順に見直します。SNSで共有したときの画像の相談5件のうち4件では、回答でテーマかプラグインの設定の場所が案内されていました。思った画像が出ないときに見直すことは、以下の3つです。

• 共有画像のタグが2つあればどちらかの機能を止める
• 直しても前の画像が出るときはキャッシュを疑う
• 検索結果の画像は優先してほしい画像をタグで伝える

共有画像のタグが2つあればどちらかの機能を止める

ソースで共有画像のタグが2つ見つかったら、テーマかプラグインのどちらかで共有画像を出す機能を止めます。同じタグが複数あるときに上のタグを優先するのが、Open Graph protocolの決まりです。後ろのタグに入れた画像は使われにくくなります。

CocoonとSEOのプラグインを一緒に使うと、OGPのタグが二重に出る場合があります。登録ブログでも、Cocoonのブログ1,730件のうち243件(14.0%)は、All in One SEOの名前がトップページに出ていました。タグが2つ出ているかは、取得のときに数を残していないため数えていません。

相談のうち1件は、記事をLINEで送ると設定と違う画像が出る相談でした。回答した人がページのソースを見て共有画像のタグが2つあると見つけ、相談した人はSEOのプラグインを止めて直したと書き込んでいます。

直しても前の画像が出るときはキャッシュを疑う

共有画像の設定を直しても前の画像が出るときは、SNSの側やサーバーに前の内容が残っている(キャッシュ)ことを疑います。SNSは、一度読んだページの共有画像を残しておくことがあるからです。キャッシュを疑うときの手順は、以下のとおりです。

1. ページのソースで、共有画像のタグが直った画像になっているかを見る
2. サーバーやキャッシュのプラグインのキャッシュを消す
3. SNSの側で読み直されるのを待つ

ソースの共有画像のタグが前の画像のままなら、SNSではなくブログの側を直します。共有したときの画像の相談5件のうち2件では、回答でキャッシュが原因の1つとして挙がっていました。

検索結果の画像は優先してほしい画像をタグで伝える

Googleの検索結果に出る画像は、Googleが自動で選びます。サイトの側でできるのは、共有画像のタグか構造化データで優先してほしい画像を伝えることです。

優先してほしい画像を伝えても、検索結果に伝えた画像が出るとは限りません。

検索結果に画像がまったく出ないページは、robotsのメタタグにmax-image-preview:noneの指定が入っていないかもソースで見ます。noneを指定したページでは、検索結果に画像のプレビューが出ません。相談20件のうち1件は、スマートフォンの検索結果に記事のサムネイルが出たり出なかったりする相談でした。

アイキャッチは記事の中身が伝わる画像で作り、共有画像のタグまで確かめましょう

アイキャッチを作って設定する5つの手順は、以下のとおりです。

• 手順1：アイキャッチに描く中身を記事ごとに決める
• 手順2：テーマの推奨の大きさと形で画像を作る
• 手順3：WordPressの投稿の「アイキャッチ画像」に設定する
• 手順4：共有したときの画像として出ているかを確かめる
• 手順5：思った画像が出ないときは共有画像のタグと設定を見直す

登録ブログのトップページでは29.8%に共有画像のタグが無く、SWELLのブログでは60.6%にありませんでした。アイキャッチの相談20件では、大きさ・形・画質の相談が6件と最も多く、共有したときの画像の相談も5件ありました。記事のアイキャッチとトップページの共有画像を両方決めておけば、一覧でもSNSでも思った画像を出せます。

最初に、自分のブログのトップページと最新の記事のソースを開き、og:imageのタグにどの画像が入っているかを見てください。