【SWELL】アイキャッチ・OGP画像の推奨サイズと正しい設定方法

【おすすめ】アイキャッチ・OGP画像共に”1200×630px”が推奨サイズ

実は、SWELLに限らず基本的にアイキャッチ画像とOGP画像の推奨サイズは同じなんです！

「1200×630px」のアスペクト比「1.91：1」

上記サイズ・比率で作成しておけば、基本的にシェアされた場合でもきれいに表示されます！

OGP画像の場合、シェアするSNSなどで表示範囲が異なる

画像サイズ自体は「1200×630px」が推奨サイズですが、SNSなどのツールによっては表示される範囲が異なります。

各SNSでのOGP画像の見え方などは、すでに多数の記事があるため、ここでの説明は割愛します。

【OGP画像制作のコツ】主要SNSできれいに表示させるなら、横幅1100px程度に要素をおさめる+中心に寄せる

Facebook・X(旧Twitter)・LINEなどの主要SNSで、OGP画像をきれいに見せたい場合。

OGP画像を制作する時に、私は文字などの切れては困る要素を「横幅1100px」以内におさめるようにしています。

縦のサイズが「628px」のSNSもあるため、「1100×628px」内で上下左右に余白を持たせて切れては困る文字などを入れるようにしています。

デザインにもよりますが、不安な方は下記のように「1:1の正方形」内で上下左右に余白があれば確実です！

ちなみに、LINEのOGP画像は、以前は上記のような1:1の正方形で表示されていました。

そのため、OGP画像に文字などを配置すると、推奨サイズで制作しても端の文字が切れてしまう･･･

ということもありました。

しかし、LINEでの表示サイズが正方形から横長比率に変更されたため、「1100px」以内に要素をおさめておけば綺麗に表示されるようなりました！

左上のコピーテキストがギリギリですが、気になる方は横幅を「1000～1050px」ぐらいにおさめて文字を入れましょう！

はてなブックマークでのシェアも視野に入れている場合は、OGP画像の推奨サイズが「1200×縦840px」のため、「1：1」の正方形内で中心に寄せての要素配置をおすすめします。

アイキャッチ画像とOGP画像は同じでもいいの？

決まりはありませんが、結論、アイキャッチ画像とOGP画像は同じものでもかまいません！

私の場合、一部装飾を変えることもありますが、基本的に同じものを使用します。

ちなみに、当サイトでは、アイキャッチは「枠あり」・OGPは「枠なし」で統一していますが、内容は同じです。
（小さなこだわり･･･）

アイキャッチ・OGP画像共に”ユーザー”にページ内容をわかりやすく伝える画像

表示される箇所や設置場所・方法は違いますが、両者共に「ページの内容をわかりやすくユーザーに伝えて、見てもらえるようにする」という目的があります。

• アイキャッチ画像は「この記事を読めば何がわかるか」を画像で表示
• OGP画像は「これから移動するページ・サイトにはどんな内容が書かれているか」をタイトルやディスクリプションと合わせて表示

おおまかな役割としては、どちらも同じ役目の画像になるわけです。

OGP画像について触れていますが、OGPとは本来「シェアされたときに、画像・タイトル・説明分などを設定した通りに表示させるためのHTMLコード」のことです。WordPressの場合、プラグインの追加で記事作成画面から設定できます。ページ内容をユーザーや検索エンジンに正しく伝えるためにも設定しておきましょう。

アイキャッチとOGP画像が全く別物だと、ユーザーが戸惑うこともある

両者共に、ページの内容と全く違う説明画像はもちろん避けたいところ。

いくらおしゃれでも、ユーザーの目的が果たせないため、ページから離脱される原因に繋がります。

両者の違いとして、OGP画像は、SNSやweb上でシェアされた時に表示されます。

つまり、外部のユーザーが自ら見たいとクリックしてくれる画像＝ページやサイトへの入り口になります。

OGP画像を見て「この記事読みたい！」と思ってクリックしたら、全くデザインの違うアイキャッチ画像がトップに表示されて、画像内のテキストも微妙に違う･･･

となると、戸惑うユーザーもいます。

例えば、記事のシェアに関して言えば、下記画像のような場合。

極端な例ですが「違う記事のページに来たのかな？」と思いますよね。

意図的に表示を変えたい場合は別ですが、ユーザーが戸惑わないような誘導とデザインの統一が必要です。

【結論】アイキャッチ・OGP画像は1つでOK！

画像の用途・画像サイズ・デザインの一貫性が必要という点から、アイキャッチ・OGP画像は共通でも問題ありません。

表示サイズの範囲がある「OGP画像」を先に用意すれば、そのままアイキャッチ画像にできますね。

もう一度サイズをまとめておきます！

• 画像自体の推奨サイズ：1200×630px
• 要素を配置できる推奨サイズ：1000~1100×628px+上下左右の余白を意識（中心に寄せる）
• 画像アスペクト比「1.91：1」

ちなみに、共通で使う場合、アイキャッチ画像をOGP画像に指定するコード記述もあります。

今回は、SWELLのテーマでプラグインを使った設定方法を解説するため、コードの詳細は割愛します。

SWELL版：アイキャッチ画像の設置・設定とポイント解説

それでは、早速アイキャッチ画像を設定しましょう！

①アイキャッチ画像を挿入したいページを開き、追加する

投稿ページ・固定ページ共に設置する場所は同じ。

右側のメニューからアイキャッチ画像の設定ができます。

そして、SWELL以外のテーマでも同じ場所から設置できます。

※2024年7月頃から、設定する場所やボタン表示が若干変わっています。（WordPressの仕様）

ページを開くと右側メニューの上部に表示されるようになりましたので、前よりわかりやすくなりましたね！

画像が表示されれば追加できています。

画像の変更やアイキャッチの表示削除も同じ箇所でできます。

②SWELLのカスタマイズメニューへ移動

SWELLのアイキャッチ画像の表示調整はすべて「カスタマイズ」からできます。

「外観」→「カスタマイズ」をクリックします。

③アイキャッチ画像の表示設定をする

「投稿・固定ページ」→「アイキャッチ画像」の順にクリックします。

アイキャッチ画像の「投稿ページ」で「本文の始めにアイキャッチ画像を表示」にチェックを入れます。

これで、記事ページのトップに自動でアイキャッチ画像が表示されます。

必要に応じて「NO IMAGE画像」を設定しておけば、アイキャッチ画像がなくても、記事一覧ページでサムネイル画像を表示してくれたり、記事トップに「NO IMAGE画像」を表示させたりできます。当サイトでは毎回アイキャッチ画像を追加するため「NO IMAGE画像を代わりに表示する」のチェックを外しています。

NO IMAGE画像の設定についてはこちらで解説しています！

ちなみにアイキャッチ画像の表示は、ページごとに変更も可能。

右側のメニュー内「表示の上書き設定」からページ単体で表示の切り替えができます。

④アイキャッチ画像の表示サイズを調整する

次に、表示サイズの調整をします。

• 画像サイズ：1200×630px
• 画像アスペクト比「1.91：1」

本記事で紹介した推奨サイズもしくは同比率で作ったもので調整をします。

まず、「記事一覧リスト」をクリックします。

「リストレイアウト」で、記事一覧リストの表示スタイルを下記から選択できます。

• カード型
• リスト型
• リスト型（左右交互）
• サムネイル型
• ブログ型
• テキスト型（※画像表示なし）

リストレイアウトに合わせて画像比率を選択

【まとめ】選んだ”リストレイアウト”と”ブログカード”の2箇所の画像比率を変更

アイキャッチ画像やリンクを設置した時のブログカードをきれいに見せるなら

SWELL版：OGP画像の設置方法と注意点

SWELLでOGP画像の設定をする1番簡単な方法は「プラグインの使用」です。

SEO対策やOGP設定が簡単にできるプラグインはいくつかありますが、SWELLなら「SEO SIMPLE PACK」をおすすめします。

その理由は、SWELLの開発者が作成したSEO対策プラグインだから！

また、必要項目が簡単に設定できるのでとても使いやすいです。

①プラグイン「SEO SIMPLE PACK」のインストール

まず、管理画面から「プラグイン」→「新規プラグインを追加」をクリックします。

右上の検索BOXに「SEO SIMPLE PACK」と入力。

「今すぐインストール」をクリックし、完了するまで待機します。

完了後にボタンの表示が変わるため、「有効化」をクリックしましょう。

プラグイン一覧画面でも「有効化」にできます。

下記のように「無効化」の表示があれば、現状で有効化されています。

②「SEO SIMPLE PACK」でOGP設定をクリック

プラグインのインストールが済んだら、管理画面に「SEO PACK」という表示が追加されます。

OGP画像は「OGP設定」からできます。

③OGP設定でOGP画像を追加

タブの「基本設定」からサイト全体のOGP画像を設定できます。

「画像を選択」でメディアから画像を追加しましょう。

ここで設定するOGP画像はサイト全体に反映されます。投稿ページでアイキャッチ画像の指定が無い場合や、個別にOGP画像の設定をしていない場合は、ここで追加した画像がOGP画像として表示されます。

④OGP設定でFacebook・Twitterの設定

「基本設定」からタブをそれぞれ切り替えて設定できます。

基本的に初期設定の「メタタグを使用する」にチェックが入っている状態でOKです！

それぞれアカウント情報を追加します。

Twitterのカードタイプをチェック

Twitterの場合「カードタイプ」の選択ができます。

カードタイプが「summary_large_image」になっているか確認しましょう。

summary→比率1：1の正方形
summary_large_image→比率約1.91：1
なので、推奨サイズ「1200×630px」の画像を使う場合はカードタイプのチェックを忘れずにしましょう。

【おまけ1】ページごとにOGP画像を変更したい場合

• 固定ページでOGP画像を変えたい
• 投稿ページでアイキャッチ画像以外のOGP画像を使いたい

という場合は、各ページから個別に設定できます。

OGP画像を変えたいページの編集画面を開く

固定ページ・投稿ページ共に手順は同じ。

まずは、編集画面へ移動します。

「SEO SIMPLE PACK 設定」の箇所から画像を追加

編集画面で下の方までスクロールすると、ページ単体でのOGP設定を入力できる箇所があります。

下記のように「このページの”og:image”」に設定したいOGP画像を追加すれば完了です！

投稿ページでは、アイキャッチ画像がOGP画像として使用される設定のため、共通の画像を使う場合はOGP画像は追加しなくてもOKです。

補足として、特に投稿ページの場合は、SEO対策やユーザービリティの観点から「このページのディスクリプション」を毎回入力しておくことをおすすめします。

タイトルはページタイトルをそのまま使うことが多いため、管理画面の「SEO PACK」→「一般設定」からスニペットタグで設定できます。

上記画像では、仮でタイトル部分を入力していますので、タグの使い方を参考にしてください。

ここでの詳しい説明は割愛しますが、タイトルは「一般設定」の方で設定しておけば、毎回入力する必要はありません。

「SEO SIMPLE PACK」一般設定の手順はこちらを参考にしてください！

【おまけ2】OGP画像の変更が反映されない場合

ページ公開後にOGP画像を変更した場合、反映されるのに数日～数週間かかることが多いです。

そのため、すぐに反映させたいなら各SNSツールなどでの「キャッシュクリア」が必要です。

OGPのキャッシュクリアは、ブラウザのキャッシュクリアとは方法が異なり、各ツールごとに手順も異なるため詳細は割愛します。

SWELLで設置したブログカードのOGP情報をすぐに更新させたい場合

例えば、サイト内で下記画像のように関連記事などをブログカードで設置している場合。

ブログカードのキャッシュをクリアすれば、OGP画像の変更が反映されます。

管理画面の「SWELL設定」→「リセット」タブから「キャッシュのクリア（ブログカード）」の「キャッシュを削除する」をクリック。

すぐにブログカードのOGP画像を反映させたい場合は、参考にしてください。

まとめ

最後まで読んでいただきありがとうございます！

今回の記事では

1. アイキャッチ・OGP画像の推奨サイズと作成のポイント
2. SWELLでのアイキャッチ画像の設定方法とポイント解説
3. SWELLでのOGP画像の設定方法とOGP画像変更時の注意点

以上、3点について解説させていただきました！

特に重要なポイントは、以下の3つです。

SWELLでアイキャッチ画像やOGP画像をきれいに設置したい方、画像作成時の推奨サイズを知りたい方、サイト制作を始めようとしている方の参考になりましたら幸いです。

今後もwebに関する運用情報を発信していく予定ですので、是非ご覧ください！