ヒトリデニ

ブログ/SEO自動化

ブログのアイキャッチ｜大きさと、画像に入れる文字の決め方

三橋竜彰・

「アイキャッチって、毎回作らないといけないの？1枚に30分かかっている」

「サイズは何ピクセルにすればいいのか、調べるたびに違う数字が出てくる……」

「記事のタイトルを、そのまま画像に大きく入れていいのかな」

記事を書き終えたあと、アイキャッチ画像で手が止まることがあります。作り方より先に、どこで使われる画像なのかが見えていないと、大きさも文字も決めにくいからです。

先に答えを書きます。アイキャッチは、記事を代表する1枚の画像です。同じ画像が、ブログの一覧やSNSでの共有、GoogleのDiscoverでも使われるので、使われる場所の条件から大きさと文字を決めます。

このサイトのアイキャッチは、記事ごとに決めた8〜15字の一言を、決まった型に描いて自動で作っています。大きさは1200×630ピクセルで、記事の題名は画像に入れていません。

この記事で分かることは、次の3つです。

読み終えると、作るたびに迷っていた大きさと文字を、決まった考え方で選べます。

アイキャッチ画像とは、記事を代表する1枚の画像です

アイキャッチ画像とは、記事を代表する1枚の画像のことです。WordPressの説明では、アイキャッチ画像は投稿サムネイルと呼ばれることもあり、テーマによって扱いが異なります。多くのテーマでは、ホームページで投稿を表すために使われます。

どこにどう表示されるかは、ブログの仕組みやテーマが決めます。同じ画像でも、記事の冒頭に大きく出るテーマもあれば、一覧の小さな画像にだけ使うテーマもあります。

WordPressで画像を設定する場所は、ワードプレスのブログの書き方｜公開までの手順と予約投稿の注意で、公開の前に決める設定の1つとして扱いました。記事の組み立て全体は、ブログの書き方｜書く前に決まる3つと、記事の組み立てにまとめています。

1枚の画像が、ブログの外でも使われます

アイキャッチ画像は、ブログの中だけで使われるものではありません。SNSで記事が共有されたときや、GoogleのDiscoverに記事が出たときにも、ページを代表する画像が表示されます。

使われる場所どの画像が使われるか
記事の冒頭・ブログの一覧ブログの仕組みやテーマが決める
SNSで共有されたときページの og:image で指定した画像
GoogleのDiscoverog:image か構造化データで指定した、ページを代表する大きな画像が選ばれやすい

og:imageは、ページを表す画像を指定する項目です。OGPの仕様では、og:imageは対象を表す画像のURLとされています。

GoogleのDiscoverについて、Googleは、schema.orgのマークアップかog:imageで、ページを代表する大きな画像を指定すると、Discoverのサムネイルとして選ばれる画像に影響を与えられると説明しています。

ブログの仕組みによっては、アイキャッチ画像がそのままog:imageに使われます。このサイトも同じで、アイキャッチとして作った画像がog:imageです。アイキャッチを1枚作ると、それが共有やDiscoverの画像にもなる、と考えて作ります。

大きさは「幅1,200ピクセル以上」を基準に決めます

アイキャッチの大きさは、幅1,200ピクセル以上を基準にします。GoogleはDiscoverで大きな画像を表示するために、次の仕様を満たす画像を勧めています。

一方で、比率の推奨は使われる場所によって違います。Googleは、記事の構造化データに指定する画像について、16x9・4x3・1x1の比率の高解像度画像を指定するよう案内しています。

1枚で、すべての場所の比率に合わせることはできません。どこで見られることが多いかを決めて、その比率を基準にします。

このサイトは、1200×630ピクセルの横長で作っています。幅はDiscoverの推奨を満たしますが、比率は16:9より少し横長です。比率の違う場所で端が切られても読めるよう、一言は画像の端に寄せていません。

画像に入れる文字は、題名ではなく一言にします

画像に入れる文字は、記事の題名をそのまま入れるより、短い一言に絞ります。Googleは、og:imageなどで指定する画像について、テキストが多すぎる画像は使わないよう案内しています。

題名は、ブログの一覧やSNSの共有では、画像とは別に文字として出ることが多くあります。画像の中でも同じ題名を繰り返すと、同じ情報が2回並ぶうえ、小さく表示されたときに読めません。

このサイトでは、記事ごとに8〜15字の一言を決め、それだけを画像に描いています。この記事の画像の一言は「文字は題名より一言」です。

画像に入れるもの入れないもの
記事の中心を表す一言（8〜15字ほど）記事の題名の全文
ブログ共通の型（色・配置）サイトのロゴだけの画像

ロゴだけの画像を使わないのも、Googleの案内に沿っています。Googleは、og:imageなどで、サイトのロゴのような一般的な画像を使わないよう説明しています。

代替テキストには、画像の中身を書きます

代替テキスト（alt）は、画像を見られない人や検索エンジンに、画像の中身を伝える文です。Googleは、画像について情報を伝えるうえで最も重要な属性は代替テキストだと説明しています。

書き方の要点は、Googleの案内では次の2つです。

  1. ページの内容に沿った、情報に富む、役に立つ文にする
  2. キーワードを羅列しない

OGPの仕様でも、og:imageを指定するなら、画像の中身を説明する og:image:alt も指定するよう書かれています。このサイトでは、画像に描いた一言は記事の中心を短くしたものなので、代替テキストには記事の題名を入れています。

毎回の手間は、型を1つ決めて減らします

アイキャッチに毎回時間がかかるなら、型を1つ決めて、記事ごとに変えるのは文字だけにします。色・配置・文字の大きさを毎回考えないだけで、迷う時間が減ります。

型を決めるときに確かめることは、次の3つです。

  1. 幅1,200ピクセル以上で作れるか
  2. 小さく表示しても、一言が読める文字の大きさか
  3. 端が切られても、一言が残る配置か

このサイトは型をコードで決めているので、記事の一言を書くと画像が自動で作られます。手で作る場合も、型を保存しておけば、毎回変えるのは一言だけで済みます。

ブログの仕組みを自分で持つと、テーマや画像の設定も自分で決めることになります。何を引き受けることになるかは、ブログをワードプレスで作る前に｜自分の側に移る4つの仕事で整理しました。

よくある質問

ブログのアイキャッチ画像は必要ですか？

多くのブログの仕組みでは、記事の一覧やSNSでの共有で、記事を代表する画像として使われます。WordPressの説明でも、多くのテーマでホームページで投稿を表すために使うとされています。用意しておくと、一覧や共有のときに記事の中身が伝わりやすくなります。

アイキャッチ画像のサイズは何ピクセルがいいですか？

幅1,200ピクセル以上を基準にします。GoogleはDiscoverで大きな画像を出すために、幅1,200ピクセル以上・合計30万ピクセル以上・比率16:9の画像を勧めています。このサイトは1200×630ピクセルで作っています。

記事のタイトルを画像に入れてもいいですか？

全文を入れるより、記事の中心を表す一言に絞るほうがよいと考えています。Googleは、og:imageなどで指定する画像に、テキストが多すぎるものを使わないよう案内しています。題名は一覧や共有で文字として別に出ることが多いので、画像では繰り返しません。

アイキャッチ画像の代替テキストには何を書けばいいですか？

画像の中身を、ページの内容に沿って短く書きます。Googleは代替テキストを、画像について情報を伝えるうえで最も重要な属性としていて、キーワードを羅列しないよう案内しています。

アイキャッチを作るのに時間がかかりすぎます。

型を1つ決めて、記事ごとに変えるのは文字だけにします。色や配置を毎回考えないだけで、迷う時間が減ります。このサイトは型をコードで決めていて、記事の一言を書くと画像が自動で作られます。

まとめ

アイキャッチ画像は、記事を代表する1枚の画像です。ブログの一覧だけでなく、SNSの共有やGoogleのDiscoverでも使われるので、使われる場所の条件から決めます。

大きさは幅1,200ピクセル以上を基準にし、比率はよく見られる場所に合わせます。画像に入れる文字は題名ではなく一言に絞り、代替テキストには画像の中身を書いてください。