WordPressのアイキャッチ画像は、コンテンツを視覚的にアピールするための重要な要素です。ユーザーに記事を読んでもらうため、写真やグラフィックで有益な情報を提示するのが一般的です。
コンテンツは、戦略的な「導入」によってより魅力的になります。退屈な見栄えのサイトを美しいものに変えることで、テキストの単調さを解消し、コンテンツに活気を与えることができます。
今回は、そんな重要な役割を持つWordPressのアイキャッチ画像が適切に（あるいは全く）表示されない場合のさまざまな対処法をご紹介します。
WordPressのアイキャッチ画像が表示されない場合の対処法について、動画での解説もご用意しています。
WordPressのアイキャッチ画像とは
WordPressでは、デフォルトですべての投稿と固定ページにアイキャッチ画像を設定することができます。
アイキャッチ画像は、雑誌の表紙のように、投稿や固定ページの「表紙」として機能し、好きなものをアップロード可能です。記事が外部サイトやSNSで共有されるときには、このアイキャッチ画像がサムネイルとして表示されます。
また、ブログ記事のようなウェブページのフィードやギャラリーにも、アイキャッチ画像が表示されます。これにより、テキストだけのリンクだけでなく、メディアポートフォリオのように記事を紹介することができます。
記事の共有用に別の画像を用意する必要はありません。
アイキャッチ画像に関する問題のトラブルシューティング
時折、何らかの理由でアイキャッチ画像が表示されないことがあります。原因としては、使用中のテーマやプラグインの不具合などが考えられます。
たとえばサイトでは問題なく表示されるのに、FacebookなどのSNSで共有される場合に適切にレンダリングされないなど、問題の程度はさまざまです。
いずれにしても、アイキャッチ画像が表示されないというのは厄介です。
アイキャッチ画像は、サイトの視覚的な要素の多くの部分を占めています。アイキャッチ画像なしでは、テキストと記事のリンクしか表示されないことになります。また、公開した投稿をSNSで共有しても、画像が表示されなければ魅力が半減します。
この問題を解決するには、以下のようなトラブルシューティングを行います。
- 正確な問題を把握する（SNS上では表示されないが、サイトでは問題なく表示されているなど）
- プラグイン間の競合やコーディングエラーなど、問題を引き起こしている可能性のあるWordPressエラーを特定する
- 手間をかけずに解決するため、エラーを解決してくれるプラグインをインストールする
このようにまとめると単純なプロセスですが、実際にはもっと細かな作業が必要になります。というのも、アイキャッチ画像の不具合にはさまざまな原因が考えられ、状況に応じて異なります。
ここからは、考えられる原因をすべて取り上げ、それぞれの対処法をご紹介していきます。
アイキャッチ画像が表示されない原因
アイキャッチ画像の表示に何かしらの問題があることが判明したら、まず、最も簡単なトラブルシューティングとして、アイキャッチ画像の正しいアップロード方法から見直しましょう。
アイキャッチ画像をアップロードする方法を確認する
まずは基本の基として、アイキャッチ画像のアップロード方法から。
アイキャッチ画像は、以下の手順で適切にアップロードしましょう。
注）WordPressのアイキャッチ画像は、投稿と固定ページにアップロードできますが、WooCommerceの商品ページやカスタム投稿タイプなどにも設定することができます。今回は、デフォルトのWordPressの投稿と固定ページに焦点を当てます。WooCommerceの商品の構造化データなどのより高度なものについてはこちらをご覧ください。
まず、WordPressの管理画面にログインし、「投稿」＞「新規追加」で投稿を作成します。既存の投稿にアイキャッチ画像を追加する場合は、「すべての投稿」から該当の記事を選択してください。
タイトルを付け、本文を執筆し、必要に応じて画像なども挿入します。
なお、投稿の本文にアップロードする画像は、アイキャッチ画像とは別物であることに注意してください。
アイキャッチ画像は別のセクションで設定します。
アイキャッチ画像を見つけてアップロードするには、右側の設定パネルに注目します。右側のパネルではさまざまな投稿の設定を行うことができ、Gutenbergブロックを選択している場合はブロック固有の設定も表示されます。
「投稿」タブを選択した状態で下にスクロールすると、「アイキャッチ画像」の項目があります。
「アイキャッチ画像」をクリックして設定を展開すると、「アイキャッチ画像を設定」ボタンが表示されます。これをクリックすると、WordPressのメディアライブラリが表示されます。
「メディアライブラリ」タブには、WordPressにアップロード済みの画像が一覧表示されます。任意の画像を選択し、右下の「アイキャッチ画像を設定」をクリックします。
別の方法として、「ファイルアップロード」タブを開くと、コンピュータ上のファイルをメディアライブラリにアップロードして使用することもできます。
画像を選択し、アイキャッチ画像に選択すると、エディター右側の「アイキャッチ画像」の設定パネルにサムネイルが表示されます。
サムネイルの下には、「編集または更新する画像をクリック」と「アイキャッチ画像を削除」が表示され、必要に応じて、画像を編集したり削除したりすることができます。
「プレビュー」でアイキャッチ画像が記事に表示される様子を確認することができますが、「公開」をクリックして記事を公開するまでは、アイキャッチ画像も公開されることはありません。
テーマの設定や、画像設定を変更する特定のプラグインなどにもよりますが、アイキャッチ画像は公開されたブログ記事の最初に表示されます。
本文に挿入した画像は、以下のように2番目に表示されます。
アイキャッチ画像は、作成したブログの「最近の投稿」ギャラリーやフィードにも表示されます。
たとえば「最近の投稿」には、ブログ記事のアイキャッチ画像がサムネイルとして表示されます。これにより、コンテンツをより視覚的に見せることができます。
アップロードの方法に特に問題がない場合は、次に進みましょう。
カバーブロックとアイキャッチ画像
WordPressでありがちな誤解として、投稿や固定ページにカバーブロックを実装して画像を設定すると、それがアイキャッチ画像になるというものがあります。
カバーブロックの画像とアイキャッチ画像は、いずれも投稿や固定ページの上部に大きく表示されますが、違いがあります。なお、カバーブロックはWordPressのブロックエディター「Gutenberg」のブロックです。クラシックエディターを使用している場合は、次のセクションまで読み飛ばしてください。
カバーブロックの画像とアイキャッチ画像の違い
カバーブロックには、サイト上の任意の場所にフルサイズで表示したい画像を設定し、新たなセクションや記事の始まりを示すことができます。カバーブロックに設定する画像は、投稿や固定ページの冒頭だけでなく、どこにでも挿入することができます。したがって、投稿や固定ページの一部となり、アイキャッチ画像のように分離されることはありません。
アイキャッチ画像は、サイト上や別の場所で記事が共有されたり、公開されたりする際、その記事の「顔」として機能します。アイキャッチ画像は、エディターとは別にアップロードする専用のセクションがあり、投稿や固定ページの上部に配置されるのが一般的です。
通常、テーマのコードは、アイキャッチ画像の位置とフォーマットを構造化します。そのため、カスタムコードを使用してアイキャッチ画像の見た目をカスタマイズする必要がある可能性があります。
カバーブロックの画像は、上にテキストを重ねたり、フィルターを追加したりなど、カスタマイズが可能です。アイキャッチ画像と異なり、WordPress管理画面から直接編集することができます。
カバーブロックの画像
カバーブロックの画像とアイキャッチ画像の違いを具体的に見てみます。「投稿」または「固定ページ」を開いて新規投稿するか、既存のコンテンツを開きます。
アイキャッチ画像は、コンテンツとは別に右側の設定パネルに表示されます。
一方、カバーブロックは、Gutenbergのブロックライブラリにあり、エディター内に出現する「+」（ブロックを追加）をクリックして追加することができます。
「カバー」と検索するか、スクロールしてカバーブロックを見つけて、投稿または固定ページに挿入します。
カバーブロックは、アイキャッチ画像とは異なり、エディター上に配置されます。
「アップロード」または「メディアライブラリ」で、表紙となる画像を設定することができます（「アイキャッチ画像を使用」を選択して、アイキャッチ画像をカバーブロックで使用することも可能）。
追加した画像はエディターのプレビューに表示され、右側のパネルでカバーブロックの設定を編集することも可能です。
カバーブロックの画像は、以下のようにページの幅いっぱいに広げることもできるため、記事の紹介やセクションごとの区切りとして使用するのに適しています。
カバーブロックや標準のメディアライブラリの画像を編集していると、アイキャッチ画像の存在を忘れることは珍しくなく、これがアイキャッチ画像が表示されない原因になっているかもしれません。記事の最初にカバーブロックを実装して画像を設定しても、他の場所（「最近の投稿」ウィジェットなど）では表示されません。
アイキャッチ画像が重複している
WordPressで画像を適切にアップロードしても、画像が重複して表示されてしまうことがあります。この問題は、投稿一覧や固定ページ/投稿の最初で見られるのが一般的です。
これは、アイキャッチ画像と同じ画像が誤ってカバーブロックや本文内に挿入されている可能性が高いです。
これを確認するには、記事のエディターを開き、右側にある設定パネルから「投稿」（固定ページの場合は「ページ」）タブを選択します。
「投稿」タブを下にスクロールし、「アイキャッチ画像」を展開します。
「アイキャッチ画像」とエディター内に同じ画像が表示されている場合は、これが原因です。
アイキャッチ画像を非表示しにしたい場合は、「アイキャッチ画像を削除」をクリックして削除すれば問題解決です。
アイキャッチ画像として画像を残したい場合には、エディターに表示されている画像を削除してください。
画像ブロックを削除するには、ブロックを選択してツールバーの3つの点をクリックします。
展開されるメニューから「削除」を選択してください。
これでエディターから画像が削除され、右側の設定パネルの「アイキャッチ画像」にサムネイルが表示されるのみになります。
これで、画像が重複することなく、アイキャッチ画像を適切に表示することができます。
アイキャッチ画像が美しく表示されない
正しくアイキャッチ画像をアップロードし、正しくエディターで設定したら、あとは公開するのみ。
しかし、その画質やサイズに問題があることがあります。
- 画像が小さすぎるまたは大きすぎる
- サムネイルが表示されない
- サムネイルが適切なサイズで表示されない
WordPressにはさまざまな写真編集機能が組み込まれており、アイキャッチ画像を本格的な仕上がりに編集することができます。また、どのようなファイル形式がアイキャッチ画像と相性がいいのかを知っておくと便利です。
アイキャッチ画像と相性のいいファイル形式
WordPressでどのような画像が美しく見えるかは知っておいて損はありません。また、アイキャッチ画像は、投稿や固定ページに挿入する標準的な画像とは異なるという点も重要です。
まずは寸法ですが、サイト、厳密にはサイトで使用するテーマによって、アイキャッチ画像の寸法が異なります。アップロード前に適切なサイズを把握しておけば、アイキャッチ画像が引き伸ばされたり、意図せず切り抜かれたりするのを防ぐことができます。
アイキャッチ画像の推奨サイズは特にありませんが、1200 x 628ピクセルを目安にすることをお勧めします。
しかし、すべての写真がアイキャッチ画像に適しているとは限らないため、推奨サイズに合わせて画像を編集してからアップロードするようにしてください。
1200×628ピクセルというのはあくまでも目安であり、テーマによってはこの数値が前後する可能性があります。
アイキャッチ画像のベストプラクティスは以下のとおりです。
- 縦長よりも横長─横幅が縦幅よりも長い方が見栄えが良くなる
- テスト投稿で複数のサイズの写真をアップロードして、それぞれのサイズをメモしておく─テーマに適したアイキャッチ画像のサイズを見極められる
- 大きすぎるまたは小さすぎる画像は避ける─大きな画像は圧縮されて画質が落ち、小さな画像は引き伸ばされてぼやける
- アップロード済みで編集が必要なアイキャッチ画像にはWordPressの画像編集機能を使用する
WordPress管理画面の「設定」＞「メディア」ページで、適したアイキャッチ画像のサイズを見つけて設定することもできます。
このページは、WordPressサイト全体のメディア設定で、サイトに表示する最大寸法を設定することができます。
「サムネイルのサイズ」「中サイズ」「大サイズ」の3種類があります。
「サムネイルのサイズ」は、最近の投稿一覧やトップページのブログフィードなど、投稿以外にも適用されます。
「サムネイルを実寸法に切り抜く」を選択すると、アイキャッチ画像のサムネイルを正確なサイズに切り抜くように設定することができますが、チェックを外すと、サムネイルの寸法を目安にし、予期せぬ切り抜きを防ぐことができます。
投稿や固定ページの上に表示されるアイキャッチ画像のサイズは、通常「大サイズ」で決まります。他の設定が優先されることもありますが、アイキャッチ画像に適した幅を知るために、この寸法をメモしておくのは良いアイデアです。
アイキャッチ画像の高さはそれほど高くないため、高さよりも幅の最大値の方が重要になります。
アイキャッチ画像を編集する方法
WordPressのアイキャッチ画像を編集することは、大きすぎるものや切り抜きが必要な画像に対処する最も手っ取り早い方法です。
基本的には、アップロード前に編集することをお勧めしますが（サードパーティツールの方がより高度な機能がある）、WordPressにも簡単な編集機能が組み込まれているため、すでにアップロード済みのアイキャッチ画像を編集する場合は、こちらの方が効率的です。
WordPressでアイキャッチ画像を編集するには、投稿を開いて、右側にある設定パネルの「アイキャッチ画像」までスクロールします。
アイキャッチ画像のサムネイルをクリックすると、設定ウィンドウが出現します。または、「メディア」＞「ライブラリ」を開いて、画像一覧から同じ画像を見つけることも可能です。
メディアライブラリからアクセスする場合は、必ず正しいアイキャッチ画像を選択してください。
選択したら、「画像を編集」をクリックします。
「画像の編集」には複数の機能が搭載されていますが、「切り抜き」を選択すると、「画像縮尺の変更」セクションが表示されます。ここで、幅と高さを調整することができます。なお、元のサイズより大きくしてしまうと、画像がぼやけるため、小さくすることをお勧めします。
寸法を設定したら横にある「伸縮」をクリックします。
すると、「画像を保存しました」というメッセージとともに画像の縮尺の変更が保存されます。
「切り抜き」以外にも、「伸縮」や「画像の回転」などの機能もあります。
「切り抜き」の機能をもう少し掘り下げてみます。
「切り抜き」機能を選択すると、プレビューには点線のボックスが表示されます。このボックスの大きさを変更して（点線に沿った小さな正方形を選択したままサイズを変更）、寸法を調整することも可能です。
ボックスで設定した寸法は、「画像切り抜き」の「選択範囲」に自動的に表示されます。「切り抜きを適用」をクリックすると、選択した寸法で画像を切り抜くことができます。
また、縦横比を固定して画像を切り抜くこともできます。
「画像切り抜き」の「縦横比」に比率を入力すると、ボックスの縦横比が固定され、縦横比を維持しながら、画像の切り抜きを行うことができます。
画像の編集を終えたら、「切り抜きを適用」をクリックして保存します。その後、投稿や固定ページ、アイキャッチ画像など、任意の場所に編集した画像を挿入してください。
ちなみに、同じ画像の編集ウィンドウを再度開くと、「元の画像を復元」をクリックして、いつでも元の寸法に戻すことができます。
固定ページや投稿にアイキャッチ画像が表示されない
正しくアップロードしているにもかかわらず、投稿や固定ページのアイキャッチ画像が表示されない場合は、サイトの設定、テーマ、プラグインなど、何かしらに問題があることが予想されます。以下のようなシナリオが一般的です。
- 画像をアップロードしようとするとHTTPエラーが表示される（アップロード制限や画像形式に問題がある可能性が高い）
- 検索エンジンが不審なコードやマルウェアを含むアイキャッチ画像をブロックしている
- アイキャッチ画像をアップロードまたは表示するために必要なページへのアクセス権がブロックされている
- テーマまたはプラグインにエラーがある、またはアイキャッチ画像の動作と競合している
- テーマでアイキャッチ画像がサポートされていない、またはテーマ設定で無効になっている
- アイキャッチ画像のアップロード方法がわからない
- テーマのコードがアイキャッチ画像に対応していない
- 遅延読み込みプラグインがアイキャッチ画像の表示や読み込みを妨げている
- アイキャッチ画像が固定ページや投稿テンプレートの適切な場所にない
- サイト設定でアイキャッチ画像のフィールドが完全に無効になっている
アイキャッチ画像のHTTPエラーを解決する方法
WordPressのメディアライブラリに画像をアップロードする際、エラーが発生することがあります。
最近では、WordPressエラーの原因は特定しやすくなっていますが、以下のように「HTTPエラー」とだけ表示される曖昧なものも存在します。これは通常、画像自体に何かしらの問題があるか、WordPressサイトへの重たいデータのアップロードを許可する必要があることを意味します。
画像や動画をアップロードしようとして、「このサイトのアップロードサイズ上限を超えています」と具体的なエラーメッセージが表示される方が一般的です。
いずれにしても、エラーによって作業が妨げられるのは厄介です。
一般に画像が大きすぎる、または現在アップロードに対応していないというエラーコードには、以下の解決策が効果的です。
WordPressのメモリ制限を増やす
お使いのホスティング会社がWordPressのメモリ制限を設定していることがよくあるため、現在のホスティング会社に問い合わせ、PHPの制限を引き上げてもらうことができます。
許可されている場合は、サイトのwp-config.phpファイルを編集することで、PHPのメモリ制限を自分で変更することも可能です。場合によっては、より多くのリソースを使用するためにホスティングプランのアップグレードが必要になるかもしれません。
WordPressのメモリ制限の詳細はこちらをご覧ください。
画像ファイルサイズを縮小する
WordPressサイトに大きなファイルをアップロードすると、パフォーマンスの問題が発生し、ホスティングサーバーに過負荷がかかることがあります。そのため、多くのホスティング会社、そしてWordPress自体が最大アップロードファイルサイズを定義しています。
前提として、アイキャッチ画像を含め、サイトには大きすぎる画像を使用するべきではありません。圧縮や切り抜き、リサイズなどを行なっても、画質は保つことができます（画像を小さくしすぎない限り）。
したがって、PHPのメモリ制限を増やす前に、ツールを使用して切り抜き、圧縮、リサイズなどを行うことをお勧めします。
WordPress以外の画像編集ツールには、GIMP、Photoshop Express、Paint.NETなどがあります。
WordPressで直接編集することも可能ですが、解決策になることはほとんどありません。OptimoleやImagifyなど、WordPressにアップロード済みの画像を自動的に縮小、最適化してくれる画像圧縮プラグインを使用するのがお勧めです。これにより、重たい画像でサイトのリソースを消耗することがなくなります。
不審なコードが埋め込まれた画像を修正する方法
マルウェアやウイルスに感染した画像は危険で、WordPressにはこのような画像を検出してブロックする機能があります。
疑わしいコードを削除する簡単な方法には限りがあります。Googleから直接取得したり（これは技術的には違法）、怪しいサイトから画像を拾ってくるのではなく、正規で購入した画像や、自分で撮影した写真を使用するのが最善です。
また、マルウェアへの取り組みを重視し、セキュリティ保持誓約を提供しているホスティング会社のサービスを利用することをお勧めします。
アイキャッチ画像の閲覧を許可する権限を変更する方法
WordPressのパーミッションは、ユーザーのサイトファイルの読み取り、書き込み、編集などの権限を決定し、ユーザー役割は、WordPress管理画面とフロントエンドのどの領域に誰がアクセスできるかを指定します。
現在付与されているユーザー役割では、アイキャッチ画像のアップロードや閲覧が許可されていない可能性も考えられます。また、WordPressファイル内の特定の固定ページや投稿にアクセスする権限を持っていないかもしれません。
これを解決するには、ユーザー役割とパーミッションが正しく設定されていることを確認してください。
WordPressのユーザー役割に関する詳細はこちらをご覧ください。サイトを管理するすべてのユーザーがアイキャッチ画像を閲覧できるようにすることをお勧めします。
テーマやプラグインとの競合や問題を解決する方法
テーマやプラグインは、アイキャッチ画像が表示されない、またはブロックされる主な原因です。
すべてのテーマでアイキャッチ画像の設定が同じであるわけではなく、アイキャッチ画像が完全にブロックされていることも考えられます。また、アイキャッチ画像の表示場所が特殊であることも。
また、アイキャッチ画像が表示されるように、別途設定を行わなければならないテーマも存在します。
これについては、テーマの設定を調べるか、テーマ開発者に問い合わせる必要があるため、状況に応じて手順が大きく異なります。
プラグインの競合に関しては、時折コードに問題があったり、しばらく更新されていなかったりなどの原因があります。
また、メディアライブラリへのアクセスや画像の機能を変更できるプラグインが、アイキャッチ画像の問題を引き起こすことも珍しくありません。
いずれにしても、以下の手順に従うようにしてください。
- サイトにインストールしているすべてのプラグインを更新する
- これで問題が解決する場合は、古いプラグインによるエラーであることがわかる
- 解決しない場合は、すべてのプラグインを無効にする
- 解決しない場合は、すべてのプラグインを有効化し、別のトラブルシューティングに移る
- プラグインの無効化でアイキャッチ画像が表示されるようになったら、いずれかのプラグインに原因があることがわかる
- 各プラグインを1つずつ有効化し、問題が再び現れるかどうかを確認していく
- 有効化したことでアイキャッチ画像が再び非表示になったものが問題のプラグインであることがわかる
- 該当のプラグインをアンインストールし、必要に応じて類似プラグインを探す
テーマがアイキャッチ画像をサポートしていない場合の対処法
WordPressテーマによっては、アイキャッチ画像をサポートしていない場合があります。これにはコードの品質が低い、あるいは開発者が意図的に無効にしているなど、いくつかの理由があります。
いずれにしても、お使いのテーマがアイキャッチ画像をサポートしていない場合は、テーマの設定にある画像のカスタムエリアを使って解決することができます。
しかし、テーマがコードでアイキャッチ画像を削除しており、アイキャッチ画像の欠如を上書きするツールがない場合もあります。
この場合は、テーマ開発者に問い合わせるか、公式ドキュメントに目を通すか、functions.phpファイルを確認して、アイキャッチ画像のサポート状況をチェックしてください。
functions.phpファイルを見る場合は、以下のコードがあるかどうかを確認してみてください。見つからない場合は、追加することができます。
add_theme_support( 'post-thumbnails');遅延読み込みによるアイキャッチ画像の問題を解決する方法
遅延読み込みは、サイトのパフォーマンスを向上させるための画像最適化の1つで、ページ上の画像が実際に画面に表示されるまで、画像の読み込みを延期させる手法です。たとえば長尺の記事の最後に配置されている画像は、そこまでスクロールされるまで読み込む必要はありません。
しかし、一部の遅延読み込みプラグインは、アイキャッチ画像を通常の画像として扱うため、問題を引き起こします。「最新の投稿」一覧でアイキャッチ画像を非表示にしたり、アイキャッチ画像も遅延読み込みしてしまうプラグインは使用を避けましょう。
画像最適化プラグインの多くは、アドオンとして遅延読み込み機能を提供しているため、この機能が有効になっているかどうかを確認してみてください。
問題を引き起こしているプラグインを特定できたら、遅延読み込みを無効にし、サイトのキャッシュをクリアして、アイキャッチ画像の問題が解決するかどうかを確かめます。
遅延読み込み機能を持つプラグインには、以下のようなものがあります。
- ShortPixelやOptimoleのような画像最適化ツール
- WP Rocket提供のLazy Loadのような遅延読み込みプラグイン
- Autoptimizeのようなデータベースおよびサイト最適化ツール
- Jetpackのような多機能プラグイン
- W3 Total Cacheのようなキャッシュプラグイン
アイキャッチ画像が正しい位置に表示されない場合の対処法
アイキャッチ画像の位置は、各固定ページと投稿テンプレートで指定されています。通常は、テーマやプラグインが定義します。
アイキャッチ画像は通常、タイトルと本文の最初の行の間に表示されますが、テーマによってこの位置が変わることがあります。アイキャッチ画像は、導入となる文章の下や、投稿者名の上などに配置されるのが理想的です。
アイキャッチ画像の位置を変更するには、固定ページまたは投稿テンプレートに移動し、ファイル内の次のコードを検索します。
the_post_thumbnail();アイキャッチ画像は以前「post thumbnail」（投稿サムネイル）と呼ばれており、このコードはアイキャッチ画像を表示する位置を指示します。the_post_thumbnail();は固定ページまたはテーマの設定により、タイトルの前か本文の後にあります。
アイキャッチ画像の位置を変更するには、このコードを切り取り、テンプレート内の別の場所に貼り付けます。これにより、フロントエンドの別の場所にレンダリングするように指示することができます。
なお、例によって、コードを編集する前にはWordPressサイトをバックアップしておくことをお勧めします。また、WordPressのコアファイルではなく、子テーマを編集するのが得策です。
管理画面の設定で原因でアイキャッチ画像が表示されない場合の対処法
アイキャッチ画像の問題は、WordPress管理画面の設定が原因になっていることも。
WordPressには、アイキャッチ画像セクションを表示するかどうかの設定があります。
これには、以下2つの状況が考えられます。
- 管理画面の投稿一覧や固定ページ一覧で、アイキャッチ画像のサムネイルが表示されない
- 固定ページや投稿を編集または新規作成する際、エディターにアイキャッチ画像セクションが表示されない
まず、固定ページや投稿の一覧にサムネイルが表示されない場合は、「投稿」＞「投稿一覧」で確認します。通常は、「日付」の前に「アイキャッチ画像」という欄があり、サイトのフロントエンドに表示される記事のサムネイルが表示されます。
この一覧にサムネイルが表示されない場合は、管理画面の「アイキャッチ画像」欄が非表示になっています。
投稿一覧でアイキャッチ画像を表示するには、投稿または固定ページ一覧ページで、右上の「表示オプション」を展開します。
「表示オプション」には、WordPress管理画面に表示できるさまざまな項目が表示されます（タグ、カテゴリー、投稿者など）。必要に応じて、任意の項目を表示したり非表示にしたりすることができます。
このメニューで「アイキャッチ画像」にチェックが入っているかどうかを確認してみてください。チェックが外れている場合は、選択するとアイキャッチ画像のサムネイルが表示されるようになります。
別の問題として、エディターの右側にある「投稿」設定パネルに「アイキャッチ画像」のメニューが表示されない場合もあります。
管理画面の右上にある3つの点をクリックしてメニューを開き、「設定」を開きます。すると、ポップアップウィンドウが表示されます。
「設定」ウィンドウの「一般」タブにある「文書設定」を確認します。
「文書設定」にある「アイキャッチ画像」のトグルスイッチをオンにすると、アイキャッチ画像の設定がエディターに表示されるようになります。
Gutenbergではなく、クラシックエディターを使用している場合は、エディターの右側にある「アイキャッチ画像」を探します。見当たらない場合は、右上の「表示オプション」を開いて、「アイキャッチ画像」にチェックを入れてください。これで表示されるようになります。
ギャラリーページにアイキャッチ画像が表示されない場合の対処法
アイキャッチ画像は、ブログ記事のフィードをサイトのトップページなどに掲載することができますが、うまくいかない場合があります。
ブログの最新の投稿を文字だけで紹介しても、あまり目立ちません。
WordPressで他の場所に投稿を一覧表示するには、適切な設定が必要になる場合があります。
注）これを実現するにはサードパーティのギャラリーや投稿一覧プラグインを使用するのが一般的です。プラグインが原因でアイキャッチ画像が表示されない場合は、開発元に問い合わせてみてください。今回は、WordPressに組み込まれている機能でアイキャッチ画像を修正する方法をのみを取り上げます。
最近の記事のギャラリーや一覧を表示するには、トップページにGutenbergブロック要素を追加します。
WordPress管理画面で「設定」＞「表示設定」から、任意のページをトップページにすることができます。
「ホームページの表示」で「固定ページ」になっていることを確認してください。「固定ページ」は、Gutenbergのようなページビルダーでブロックを追加したり削除したりしてカスタマイズするページを意味します。「最新の投稿」を選択しないように注意してください。
「ホームページ」のドロップダウンを選択すると、現在公開されているページが一覧表示されます。以下のスクリーンショットの例では、「Homepage」というタイトルのページですが、この名前はサイトによって異なります。
注）サイトのトップページにする固定ページは、この画面でいつでも変更することができます。たとえば、トップページをリニューアルする場合は、現在のページを直接編集する代わりに、新たに作成する方が効率的です。
続いて、選択したページでアイキャッチ画像が正しく表示されるかを確認します。
トップページにコンテンツを追加し、そのページのブログフィードの設定を編集するには、「固定ページ」＞「固定ページ一覧」を開きます。
一覧の中からトップページに割り当てた固定ページを見つけると、「フロントページ」というラベルがついているのがわかります（ここでも「Homepage」というタイトルは実際に付けた名前によって異なる）。
フロントページとして指定したページを開きましょう。
最新の投稿ブロックの追加
すでに「最新の投稿」ブロックが有効になっている可能性がありますが、そうでない場合は追加しましょう。「+」をクリックし、「最新の投稿」を検索します。
追加したら、適切な位置にブロックをドラッグします。
アイキャッチ画像の話に戻りますが、「最新の投稿」ブロックを設置しても、ブログ記事のアイキャッチ画像がデフォルトで表示されるわけではありません。このブロックを追加した直後は、リンクとその記事の説明文が表示されるだけです。
アイキャッチ画像を追加するには、追加した「最新の投稿」ブロックをクリックします。すると、右側のパネルにブロックの設定が表示されます。
「ブロック」でない場合は、「固定ページ」から「ブロック」に切り替えてください。
「ブロック」タブには様々な設定があり、最初のいくつかはアイキャッチ画像と無関係ですが、ブロック内の投稿の表示方法などを調整することができます。
「投稿コンテンツ」「投稿者名の表示」「投稿日を表示」などの設定は、最近の投稿をアイキャッチ画像とともに強調表示するのに効果的です。
今回重要になるのが、その下にある「アイキャッチ画像」の設定です。
「アイキャッチ画像を表示」のトグルをオンにすると、「最新の投稿」ブロックに表示される記事のアイキャッチ画像が表示されるようになります。なお、アイキャッチ画像が割り当てられていない記事については、空白が表示されます。
また、アイキャッチ画像の見せ方も調整可能です。これは、トップページで最新の投稿をアピールしたい場合に特に重要になります。
例えば、「解像度」は、一覧やギャラリーに掲載するアイキャッチ画像の大きさを指定します。「サムネイル」を選択すると、画像がわずかに縮小されて正方形になります。
「大」または「中」を選択すると、アイキャッチ画像のサイズに応じて以下のように横長表示になります。
また、「幅」と「高さ」にも注目しましょう。このフィールドで、「最新の投稿」ブロックに表示されるアイキャッチ画像のサイズを柔軟に制御することができます。独自の数値を入力するか、その下からパーセンテージを選びます。たとえば、「25%」を選択すると、画像の元のサイズを25%に縮小したものにすることができます。
また、「画像の位置」もなし、左寄せ、中央揃え、右寄せの4種類から選ぶことができます。
また、ブロック内に表示する記事の数も指定することができ、この設定もアイキャッチ画像の表示方法やサイズに影響を与えます。
「項目数」を変更し、トップページに美しくアイキャッチ画像が並ぶよう、調整してみてください。
すべての設定を終えたら、「公開」をクリックして変更を保存します。プレビューすると、ブロックを設置した場所に最新の投稿が並び、各記事のアイキャッチ画像が投稿タイトルとリンクの上に表示されます。
Facebookにアイキャッチ画像が表示されない
アイキャッチ画像は、投稿や固定ページがSNSで共有された際にも埋め込み画像として表示されます。
SNSプラットフォームには、それぞれ共有されるコンテンツに対する独自の表示方法がありますが、主要プラットフォームとして、Facebookでアイキャッチ画像が表示されれば、他のSNSでも表示される可能性が高いです。
懸念される課題としては、Facebookでリンクをシェアした際に、その投稿のアイキャッチ画像が正しくレンダリングされるかどうか。画像なしでシェアされる記事は、他のユーザーの目をあまり引きません。
Facebook上のアイキャッチ画像については、以下のような問題がよく見られます。
- 違う記事のアイキャッチ画像が表示される
- 記事をアピールするアイキャッチ画像が表示されない
- 投稿から複数の画像が取り出され、どれを使用するか選択しなければならない
上記のいずれも、似たような原因で引き起こされており、FacebookがサイトのOpen Graphデータにアクセスできないか、そもそもOpen Graphデータが存在しないかのいずれかを意味します。
アイキャッチ画像がFacebookに正しく表示されるかテストする方法
投稿が共有された際、アイキャッチ画像とコンテンツが問題なく表示されている場合は、トラブルシューティングは不要ですが、アイキャッチ画像がFacebookに表示されるかどうかをテストすることをお勧めします。
まずは、Facebookアカウントを開き、新規投稿フィールドにリンク（個人ページやビジネスページでも可）を貼り付けて、投稿内容とアイキャッチ画像が表示されるかどうかを確認します。
以下のスクリーンショットは、投稿内容の概要、リンク、タイトル、そしてアイキャッチ画像が表示され、実際の投稿にも問題なくすべてが表示される例です。
注）アイキャッチ画像はWordPressからOpen Graphを通じて取得されます。Kinstaのホスティングでは、Yoast SEOでこれを制御する可能性があるとともに、Open Graphサポートも提供していることから競合を引き起こす恐れがあるため、多くのOpen Graphプラグインの使用を禁止しています。Kinsta以外でサイトをホスティングしている場合は、問題を解決するためにOpen Graphプラグインを使用を検討してみてください。
また、サイトにソーシャルボタンを設置している場合は、Facebookの共有アイコンをクリックし、ポップアップウィンドウにアイキャッチ画像が表示されるかどうか確認する手もあります。
Facebookのシェアデバッガーを使って確認することもできます。このツールは任意のURLをスクレイピングし、Facebookが情報を取得する際にエラーが発生するかどうかをチェックしてくれます。また、URLをFacebookに貼り付けたり、共有したりした場合に表示されるプレビューも確認可能です。
「シェアデバッガー」ページのフィールドにURLを貼り付けて、「デバッグ」をクリックするだけでOKです。
Facebookのシェアデバッガーの詳細はこちらをご覧ください。
次のページには数々の情報が表示されますが、今回はプレビューの確認のみで問題ありません。「リンクをプレビュー」セクションには、FacebookでURLが共有された場合にどのように表示されるかが正確に表示されます。
下のスクリーンショットは、アイキャッチ画像がうまく表示されている例です。
これらいずれかの方法で、アイキャッチ画像を確認し、うまく表示されないことがわかった場合には、以下の手順に従ってください。
注）新規サイトでこの手の問題が表示される場合は、FacebookなどのSNSプラットフォームがまだサイトをクロールしていないことが原因である可能性があります。特にFacebookの場合は、このシェアデバッガーにURLを貼り付けてデバッグすることで、問題をすぐに解決できるかもしれません。
Open Graphデータがサイトで有効になっているかを確認するには、SEOプラグインを使用します。SEOプラグインの多くで、FacebookなどのSNSでの表示方法をチェックすることができます。
また通常、プラグインでOpen Graph Protocolを設定することができます。
今回は、特に人気の高いSEOプラグイン、All in One SEOとYoast SEOで、Open Graph Protocol（OGP）を設定する方法を見ていきます。
All in One SEOの場合、「All in One SEO」を開き、「ソーシャルネットワーク」をクリックします。
「Facebook」タブを選択し、「オープングラフマークアップを有効にする」を見つけます。デフォルトではこの機能が有効になっているはずですが、無効になっているかもしれません。
また、デフォルトの「デフォルト投稿Facebook画像」を設定することも可能で、投稿の最初の画像やアイキャッチ画像を指定することができます。
設定を終えたら「変更を保存」をクリックします。Facebookで投稿を共有し、アイキャッチ画像が表示されるかをテストしてみましょう。
Yoast SEOもまた、ソーシャルシェア機能とOpen Graph機能の設定を行えるプラグインです。
Yoast SEOの強みとして、インストールするだけで、ソーシャルシェア用のOGPを設定できます。
それでも問題が解決しない場合は、WordPress管理画面の「SEO」＞「ソーシャル」を開きます。
「Facebook」タブを選択します。TwitterやPinterestのようなSNSでも試すことができます。
「Add Open Graph Meta Data」を見つけて、「Enabled（有効）」になっていることを確認してください。
また、投稿にアイキャッチ画像がない場合に表示されるデフォルト画像のURLを「Image URL」に設定することも可能です。
「Save Changes」をクリックして変更を保存したら、投稿を共有し、アイキャッチ画像が表示されるかどうかをテストしてみてください。
変更を加えるたび、Facebookのシェアデバッガーに戻り、Facebookに投稿の情報をクロールするように促すことをお勧めします。
「もう一度スクレイピング」をクリックするか、ページを更新して投稿URLを再度フィールドに貼り付けましょう。
Facebookで複数のURLを一括でデバッグする
Facebookで投稿が共有された際、アイキャッチ画像が表示されない古い投稿がたくさんある場合は厄介です。
その場合は、シェアデバッガーの横にある「バッチインバリデイター」タブを使用することができます。
この画面では、最大50までURLを貼り付けることができ、Facebookにメタデータを再び適切にスクレイピングしてもらうことができます。
URLを集めるには、手作業でサイトの各投稿や固定ページをクリックするか、URLをドキュメントにまとめます。
あるいは、Export All URLsのようなプラグインを使用する手もあります。サイトのすべてのURLを取得し、シンプルなドキュメントにエクスポートしてくれる優れものです。これで、効率的にコピー＆ペーストすることができます。
「デバッグ」をクリックすると、リスト内のすべてのURLが処理され、Facebookでの共有時のアイキャッチ画像やその他の投稿データが表示されるようになります。
SNSでアイキャッチ画像を表示させるその他の方法
FacebookなどのSNSでアイキャッチ画像を表示するためには、WordPressサイトでOGPを設定することが欠かせません。
上でご紹介したSEOプラグインに問題がある場合、または単にSEOプラグインを使用する予定がない（それゆえOGPを簡単に設定できない）場合は、他にも方法があります。
OGプラグイン
OGは、Open Graph Protocolを設定し、あらゆるウェブページをSNS向けのリッチオブジェクトに変換するのに便利です。軽量で余計な機能もないため、Open Graphの問題だけを解決したい場合には理想的な選択肢です。
まずはWordPressサイトにOGプラグインをインストールし、有効化します。
OGのようなプラグインの利点は、インストール後の設定が不要なこと。すべての投稿と固定ページに対してOGPが自動的に設定されます。
有効化したら、Facebookアカウントを開き、新規投稿フィールドに記事のリンクを貼り付けて、アイキャッチ画像が表示されるかどうかを確認してみてください。
OGプラグインを有効にすると、プレビューに投稿内容とアイキャッチ画像が表示されるようになるはず。
それでもうまくいかない場合は、シェアデバッガーを使用して、Facebookにクロールしてもらいましょう。
Open Graph and Twitter Card Tagsプラグイン
Open Graph and Twitter Card Tagsプラグインを使用して、Open Graph Protocolを設定してアイキャッチ画像を表示することもできます。すべてのSNS向けにOGPを設定するだけでなく、Twitter（現X）の共有結果を向上させるカードタグを追加することもできます。
なお、再三となりますが、すでに同等のサポートが組み込まれているため、Kinstaでは基本的にOpen Graphプラグインの使用を禁止しています。Kinsta以外をご利用の場合は、使用を検討してみてください。
WordPressサイトにOpen Graph and Twitter Card Tagsをインストールし、有効化します。
次に、「設定」＞「Open Graph and Twitter Card Tags」で、Open Graph Protocolを有効化し、SNSで共有された際に表示される投稿や固定ページのコンテンツ要素を調整することができます。
「General」タブを開き、「Description Settings」セクションにある「Description Length（説明の長さ）」「Homepage Description（トップページの説明）」「Default Description（デフォルトの説明）」などのフィールドを入力します。いずれもアイキャッチ画像の設定に直接影響を与えるものではありませんが、アイキャッチ画像のすぐ下に表示される内容のため重要です。
その下にある「Image settings」セクションでは、SNSに投稿や固定ページを共有する際、画像の取得先を設定することができます。
最初の2つの項目にチェックを入れると、Open Graphの画像、固定ページや投稿のアイキャッチ画像が使用されるようになります。
これはソーシャルシェア用の一般設定で、FacebookやTwitterが記事やサイトの他の場所から無作為に画像を取得しないようにします。
続いて、「Open Graph」タブを開きます。ここでは、Open Graph Protocolにまつわる設定、またFacebook固有の設定を行うことができます。
例えば、サイト名や投稿タイトルを表示して、URLは非表示にするということができます。設定項目が多数あるため、自由に設定を調整してみてください。
アイキャッチ画像に関する重要な設定は、「Include Image」です。これにチェックを入れると、WordPressサイトの投稿や固定ページがFacebookで共有されると、アイキャッチ画像が表示されるようになります。
「Cards」タブでは、Twitterのカードダグに関する設定を変更することができます。
Twitterのカードタグは、Facebookの共有モジュールとは少し異なるため、設定を確認し適切に表示されるようにしましょう。「Title」「URL」「Description」にチェックを入れることをお勧めします。
またここでも、「Include Image」にチェックを入れましょう。これにより、Twitterで投稿や固定ページのアイキャッチ画像が取得されるようになります。
設定を終えたら、変更を保存して完了です。
全体として、SNSでコンテンツやアイキャッチ画像を適切に表示して共有されるようにするため、OGPを設定するベストな方法は、Yoast SEOやOGのようなプラグインを使うことです。また、KinstaのようなマネージドWordPressホスティングを使用するのも良いアイデアです。
アイキャッチ画像が常に表示されるようにする
固定ページや投稿は、新規作成するたびにアイキャッチ画像を手動でアップロードしなければなりません。そのため、アイキャッチ画像にまつわる人為的なミスは起こりがちです。
このプロセスを自動化するのはやや高度な技になりますが、アイキャッチ画像を常に投稿や固定ページに表示させるようにするコツがあります。
デフォルトのアイキャッチ画像を設定する
まずアイキャッチ画像が欠けているという状況を防ぐ方法としては、デフォルトのアイキャッチ画像を設定しておくことです。
これには、Default Featured Imageが便利です。このプラグインの気の利いた特徴として、デフォルトのアイキャッチ画像がすでに設定済みの画像を置き換えることはありません。アイキャッチ画像がないことを検出すると、デフォルトのアイキャッチ画像を設定します。
まずはDefault Featured Imageをインストールし、有効化しましょう。
WordPress管理画面の「設定」＞「メディア」に移動します。
下にスクロールすると、「Default featured image」というフィールドが出現します。
「Select default featured image」をクリックします。
表示されるメディアライブラリで、デフォルトのアイキャッチ画像を選択してください。
画像を選択したら、右下の「Set default featured image」をクリックして決定します。
アイキャッチ画像が設定されていないすべての投稿に表示されるデフォルトの画像のサムネイルが表示されます。
「Save Changes」をクリックして、設定を保存すれば完了です。
デフォルトのアイキャッチ画像が実際にどのように表示されるかを必ず確認しましょう。
「投稿」＞「投稿一覧」に移動します。
アイキャッチ画像を設定していない記事を1つを選択します。エディター右側にある設定パネルで「アイキャッチ画像」セクションを展開します。
ここに画像のサムネイルが表示されない場合は、アイキャッチ画像が設定されていないことを意味します。
Default Featured Imageを有効にしているため、このまま何もせず「更新」をクリックします。
これで、先ほどの「アイキャッチ画像」セクションにデフォルトに設定した画像が表示されます。
これで、今後公開する投稿にアイキャッチ画像を設定し忘れても、このデフォルトの画像が表示されるようになります。ただし、既存の投稿については、この手順で投稿を更新する必要がある可能性があります。
すでにアイキャッチ画像を設定済みの投稿を見てみると、デフォルトの画像に置き換えられることなく、別の画像が表示されていることがわかります。
アイキャッチ画像を一括アップロード＆編集する
長年サイトを運営しコンテンツを公開していると、過去の記事に新しいアイキャッチ画像を設定したい場合もあるはず。あるいは、同じカテゴリーの投稿や固定ページにすべて同じアイキャッチ画像を設定したいということもあるかもしれません（解説系記事をプロフェッショナルに見せる画像を用意したり、すべての画像に自社のロゴを追加したりなど）。
いずれにしても、アイキャッチ画像を一括で編集することができればかなり便利です。すでに何百、何千件もの投稿を公開しているサイトでは、特に一括編集ツールが欠かせません。
Quick Featured Imagesは、すべての投稿にデフォルトのアイキャッチ画像を設定したり、プリセットを設定したりなど機能豊富で、アイキャッチ画像の一括編集を行うことができるプラグインです。
今回は、一括編集機能に注目します。この機能を使用すると、アップロード済みの複数のアイキャッチ画像をすべて同じ画像に差し替えることができます。
プラグインをインストールして有効化したら、「アイキャッチ画像」＞「一括編集」に移動します。
ページ上部には、「プログレスバー」が表示され、アイキャッチ画像の一括編集の進行状況を示します。
一括編集は半永久的な操作になるため、各ステップを慎重に進めください。
アイキャッチ画像の一括編集を始めるには、このページを下にスクロールします。
「画像を1枚必要とするアクション」セクションには、以下3つの選択肢があります。
- 選択した画像を新たなアイキャッチ画像として設定する
- 選択した画像で現在のアイキャッチ画像を置き換える
- 選択した画像が使用されているアイキャッチ画像を削除する
目的に応じていずれかを選択してください。例えば、古くなったアイキャッチ画像をすべて削除したい場合や、アイキャッチ画像をすべて特定の画像に設定したい場合には、1つ目か3つ目を選択してください。
それ以外は基本的に、2つ目の「選択した画像で現在のアイキャッチ画像を置き換える」を選択することになります。このオプションでは、別の画像をアップロードして、現在のアイキャッチ画像を置き換えることができます。
「画像の選択」をクリックして次に進みます。
続いて、新しく使用したいアイキャッチ画像を選択し、「画像の選択」をクリックして決定します。
すると、選択した画像が設定ページに表示されます。正しい画像を選択できているか見直してください。
ページの一番下までスクロールし、「次へ」をクリックして続行します。
次の「フィルタの追加」のステップでは、置き換えたい画像を選択します。「選択の調整」の下にある「画像の選択」をクリックしてください。
ここでは、メディアライブラリから複数の画像を選択することができます。ちょっとした欠点として、アイキャッチ画像に使用されている画像以外もすべて表示されます。
Shiftキーを押しながら画像を選択し、「画像の選択」をクリックして決定します。
選択した画像のサムネイルが表示されます。選択し忘れたものがあれば、同じ手順で追加することができます。
「プレビューの絞り込み」をクリックすると、画像の一括置換をプレビューすることができます。
次のページでは、どの既存のアイキャッチ画像が、置き換えられるかが表示されます。このスクリーンショットの例では、選択した4点の画像のうち、2点だけがアイキャッチ画像として保存されているため、この2点のみが置き換えられます。
確認の上「適用」をクリックすると、一括編集が実行されます。
最後に一括編集の結果が表示され、アイキャッチ画像が置き換えられた投稿の詳細を確認することができます。
「投稿」＞「投稿一覧」を見ると、アイキャッチ画像が置き換わっていることがわかります。
Quick Featured Imagesでは、他にもアイキャッチ画像に対してさまざまな操作を行うことができます。デザインを修正したいアイキャッチ画像を置き換えたり、特定のアイキャッチ画像が表示されない問題を修正したりするための優れたツールです。
例えば、単一のページではなく、複数のページで一括操作を行いたい場合には、メディアライブラリから画像を選択し、複数のアイキャッチ画像をランダムに設定することができます。
また、複数の投稿で重複しているアイキャッチ画像を削除したり、既存の画像ファイルがないアイキャッチ画像をすべて削除したりなど、画像を選択しない操作を実行することも可能です。
Quick Featured Imagesは多機能なプラグインです。古い画像や機能していない画像がある場合は、一括編集を行って、サイト全体の質を上げてみてください。
アイキャッチ画像のエラーを解決してくれるおすすめプラグイン
アイキャッチ画像のエラーを引き起こす原因はさまざまです。ベストな解決策は、必要な機能を提供してくれるプラグインを使うことです。
結局のところ、テーマやプラグインが問題になっている可能性もあるため、アイキャッチ画像の問題を解消するためだけにテーマを切り替えたり、サイトのデザインを変更したりするよりも、競合を上書きしてくれるプラグインを活用する方が効率的です。
すべてのプラグインに同等の機能が組み込まれているわけではありませんが、サイトを抜本的に変更する前に、以下のプラグインをチェックしてみてください。
Featured Image from URL（FIFU）
Featured Image from URL（FIFU）を使用すると、外部の画像を投稿や固定ページのアイキャッチ画像として使用することができます。WordPressのメディアライブラリに画像をアップロードして、アイキャッチ画像として選択する、という従来のプロセスを回避するプラグインです。
このため、アップロードサイズの上限やパーミッションの設定などの問題も避けることができます。フィールドに画像のURLを貼り付けて、その画像を「アイキャッチ画像」セクションに挿入します。
画像は外部でホスティングされることになるため、長期的に同じ場所でホスティングする必要があります。したがって、メディアホスティングプラットフォームか、別途ホスティングサービスを利用することをお勧めします。ただオンラインで画像を検索してURLを取得し、アイキャッチ画像に使用すると、URLのホスティング先がわからないため、違法行為になる可能性があります。
FIFUには、iframeタグなどを使って画像や動画からアイキャッチ画像を自動設定する機能もあります。また書籍のAPIやISBN、投稿タイトルや検索エンジンなどのソースからアイキャッチ画像を設定することも可能です。
Quick Featured Images
先ほどすでにご紹介しましたが、Quick Featured Imagesは主にアイキャッチ画像の一括置換に使用され、手作業で画像をアップロードする手間を大幅に省くことができます。
特筆すべき別の機能として、過去（既存の投稿）と未来（今後の投稿）のアイキャッチ画像にルールを設定可能です。例えば、コンテンツの冒頭の画像をアイキャッチ画像にしたり、投稿者、タグ、投稿タイプに基づいてアイキャッチ画像を生成したりすることができます。
既存のアイキャッチ画像の上書きや、アイキャッチ画像のなかった投稿でのアイキャッチ画像の修正など、あらゆることを実現できる万能プラグインです。
Default Featured Image
Default Featured Imageは、アイキャッチ画像が固定ページや投稿に設定されていないインスタンスを上書きすることができるプラグインです。アイキャッチ画像を設定し忘れたり、満足がいかずにアイキャッチ画像を削除した投稿を整理するのに役立ちます。ボタンをクリックするだけで、デフォルトのアイキャッチ画像を追加できるシンプルなツールです。
アイキャッチ画像が設定されていない投稿をすべて検出し、デフォルトの画像を割り当てます。一時的な対処として使用することもできれば、ベーシックな画像だけが必要な固定ページや特定の投稿に恒久的にアイキャッチ画像を設定することもできます。
このプラグインの設定は、「設定」＞「メディア」にあります。項目は1つだけで、画像をアップロードして「Save」で保存するだけでOKです。
Auto Featured Image
Auto Featured Imageは、アイキャッチ画像のエラーを解決する他にはない機能があり、アイキャッチ画像のアップロードプロセスを簡素化してくれます。
アイキャッチ画像が設定されていない場合は、投稿の最初の画像が自動的にアイキャッチ画像に割り当てられるようになるため、画像をアップロードし忘れても、アイキャッチ画像がないという状況を避けることができます。
投稿に挿入された1つ目の画像がアイキャッチ画像に割り当てられることで、投稿に関連しない画像がアイキャッチ画像になる、ということがないのがこのプラグインを使用するメリットです。デフォルトのアイキャッチ画像をファイルから取得して、複数の投稿に同じ画像が割り当てられる心配がありません。
また、このプラグインにはGoogle、Pixabay、Unsplashなどの検索エンジンも搭載され、GutenbergやElementorのようなページビルダーとも相性が良いのも利点です。アイキャッチ画像の一括生成機能も組み込まれています。
Multiple Featured Images
Multiple Featured Imagesもまた、アイキャッチ画像のトラブルシューティングや問題解決に便利な機能を提供してくれるプラグインです。最大の特徴として、WordPressデフォルトの「1つの投稿につき1つのアイキャッチ画像」という制限を取り除き、複数のアイキャッチ画像をアップロードし、サイトに表示する画像を選択することができます。
このプラグインは、ウィジェットとショートコードを使用し、何かを実装するたびにアイキャッチ画像の選択を促します。例えば、1つのアイキャッチ画像をサイドバーに表示し、トップページのブログ記事一覧には別のアイキャッチ画像を表示することができてしまいます。
カスタム投稿やWooCommerceの商品ページでも動作し、制限なく画像をアップロードすることができます。画像を配置する場所や大きさも選択可能です。
アイキャッチ画像を選ぶことができない場合や、記事の冒頭には適しているがサイドバーには別の画像を使用したい場合などにうってつけです。
アイキャッチ画像のベストプラクティス
アイキャッチ画像を正しく表示させるには、WordPressにアップロードする前にベストプラクティスを知っておくことが重要です。アイキャッチ画像が表示されない場合のトラブルシューティングや、アイキャッチ画像の編集にも役立ちます。
問題を最小限に抑えるには、アイキャッチ画像の扱い方を理解するのが最短の道。最後に、推奨デザインからアップロード方法まで、あらゆるアイキャッチ画像に当てはまり、アイキャッチ画像に費やす時間を削減するベストプラクティスをご紹介します。
アイキャッチ画像に関連性を持たせる
デフォルトのアイキャッチ画像を設定する欠点は、投稿によってはアイキャッチ画像との関連性が希薄になる可能性があることです。アイキャッチ画像の根本的な目的は、記事を視覚的に紹介することにあります。
例えば、Instagramに関する記事を公開する場合、アイキャッチ画像には、記事を魅力的に見せるグラフィックとともに、Instagramを瞬時に連想させる要素（合法的に使用できるInstagramのロゴなど）も盛り込むのが得策です。
記事のアイキャッチ画像を手動で挿入する際にも同様です。アイキャッチ画像は、記事の「表紙」になります。記事に関連する画像を用意するのは簡単ですが、ユーザーの気を引き、記事を読んでもらうためには、時間をかけて効果的なアイキャッチ画像を選択することが重要です。
掲載前にアイキャッチ画像の著作権を確認する
ウェブをブラウジングして適当に見つけた写真やグラフィックスを使用することは、深刻なトラブルに巻き込まれる可能性があります。写真やグラフィックの所有者から削除を求められたり、最悪の場合は法的措置が行われる可能性もあります。
基本的に、自分で撮影または作成した写真か、著作権使用料を支払った写真でない場合は、使用することができない可能性があります。
PexelsやUnsplashのようなサイトで無料で共有可能な画像を手にすることができます。
ただし、これらのサイトでも通常は著作権表示が必要になります（アイキャッチ画像ではキャプションを掲載できないことが多いためこの点が課題に）。
アイキャッチ画像に関する違反行為を避けるためには、以下のルールに従ってください。
- 自分で撮影した写真を使用する（法的問題を避ける最も確実な方法）
- クリエイティブ・コモンズ・ライセンスの写真サイトを利用する（UnsplashやPexelsなどがこれに該当）
- アイキャッチ画像には通常キャプションを設定できないため、記事のどこかにクレジットを明記する
- ShutterstockやiStockPhotoのようなサイトで写真を購入する
- CanvaやAdobe Sparkのような無料デザインツールを使用して自分でグラフィックを作成する
- どうしても使用したい写真を見つけたら、撮影者に連絡を取り、掲載していいかどうかを確認する（無料、有料、または著作権表示の有無を確認し、契約書を用意すること）
アイキャッチ画像のテーマを統一する
アイキャッチ画像が、投稿に関連したものであるべきというのは先に述べたとおり。
すべてのアイキャッチ画像に統一感を持たせることも重要です。テーマを決めることで、アイキャッチ画像を作成しやすくなり、同時にブランディングの一貫性も保つことができます。
例えば、すべてのアイキャッチ画像に白黒のフィルターをかけるなど。また、独自のアニメーションでそれぞれの投稿内容を表現するのも方法です。
縮小可能な高解像度画像を使用する
アイキャッチ画像は、サイトで使用する他の画像と同じで、印刷物ほどの高解像度でなくても美しく表示することができます。全体として、サイトに掲載する画像はサーバーのスペースを占有し、サイトの表示時間に悪影響を与える可能性があります。とはいえ、見栄えを考慮し、できるだけ高解像度の画像を使用したいもの。
アイキャッチ画像を探す際には、まず高解像度の画像を探し、後からデジタルインターフェース用に縮小することをお勧めします。
画像の拡大縮小は行うべきではありませんが、高解像度の大きな画像を元のフォーマットで掲載すると、確実に読み込みに問題が生じます。
画像サイズ変更・最適化ツールを使用する
高解像度の画像をアイキャッチ画像としてアップロードする際には、自動の画像最適化を実装するのがベストです。アップロードする予定の画像を一つずつ縮小、リサイズ、切り抜きするのは気の遠くなる作業です。
画像最適化プラグインを使って、最適化を自動化すれば、手間をかけずにサイトの表示速度を維持することができます。
WordPressの画像を最適化するヒントはこちらでご紹介しています。基本的には、自分のサーバーで問題が発生するのを避けるため、外部のサーバーを使って画像を最適化してくれるプラグインがベストです。OptimoleやImagifyのようなツールを使用してみてください。
アイキャッチ画像のSEO
画像最適化といえば忘れてはならいのが、検索エンジン最適化（SEO）。アイキャッチ画像は、投稿や固定ページが上位に表示されるために欠かせません。アイキャッチ画像を含め、ホストするすべての画像には、検索エンジンが投稿や固定ページの内容を把握するためにクロールするメタデータが含まれています。
ターゲットにするキーワードがある場合、検索エンジンに画像に関連性があることを示すのにこのメタデータを利用しない手はありません。キーワードをひたすら詰め込むことは避けましょう。検索結果の上位に表示されるようにするには、画像に何が写っているかを簡潔に説明し、必要なキーワードを追加することが重要です。
画像のメタデータで最も重要なのは、代替テキスト（Altテキストとも）です。WordPressのメディアライブラリでアイキャッチ画像を開くと確認することができます。
画像に適した代替テキストを設定することは、SEOだけでなく、アクセシビリティの観点からもベストプラクティスです。
目の不自由なユーザーの多くは、スクリーンリーダーを使ってインターネットを利用しています。サイトでアクセシビリティに配慮することは、非常に重要です。
Open Graph Protocolを設定する
Open Graph Protocolについては先でご説明したとおり。利用しているホスティングサービスがアイキャッチ画像のレンダリングに必要な機能を提供しているかどうかを確認し、そうでない場合は、OGPを設定できるプラグインを探してください。
誰かが投稿や固定ページをSNSで共有する際には、より効果的にシェアされるよう、アイキャッチ画像が表示されることが非常に重要です。リンクと簡単な説明文だけでは、ユーザーに質の低いコンテンツという印象を与える恐れがあります。
アイキャッチ画像をアップロードし忘れた時に備えてプラグインを使用する
こちらもすでに取り上げましたが、時にはうっかりアイキャッチ画像のアップロードを忘れてしまうことがあります。
プラグインを使ってデフォルトのアイキャッチ画像を設定しておけば、そんなときにも確実にアイキャッチ画像を（一時的または恒久的に）設定することができます。適切なアイキャッチ画像のない過去の記事にも有用です。
まとめ
サイトでこだわりのコンテンツを公開しても、アイキャッチ画像が表示されないと、サイトの見栄えが大きく損なわれてしまう可能性があります。今回は、アイキャッチ画像の問題にまつわる情報を詳細かつ包括的にご紹介しました。高度な解決策を講じる前に、まずはアイキャッチ画像を正しくアップロードし、設定できているかを確認することから始めてみてください。
また、画像編集のコツやワークフローを改善するヒントもぜひ取り入れてみてください。画像最適化の詳細はこちらをご覧ください。WordPressサイトの高速化についてはこちらでご紹介しています。
アイキャッチ画像に関するご質問、またはその他のアイキャッチ画像に関する問題がありましたら、以下のコメント欄でお知らせください。
コメントを残す