【OGP設定】AFFINGER、CocoonでSNS用のアイキャッチを用意しよう！OGPに最適な画像サイズとは？

OGP設定でSNSシェア時の画像を用意する

OGPはOpen Graph Protocol（オープングラフプロトコル）の略です。
HTMLのmetaタグで設定しておくとSNSでWebページがシェアされた時にそのページのページタイトルや概要、そしてアイキャッチ画像などを表示する仕組みです。

当サイトのOGP表示例

一番身近で分かりやすい使用例がTwitterカードかと思います。
ブログによっては検索エンジンからのアクセスよりもSNSからのアクセスの方が多いところもあり、重要な設定です。

OGPは１ページごとに設定するものですが、WordpressのテーマにOGP設定機能が付いている場合は半自動的に全ページに設定することが出来ます。

人気テーマ「AFFINGER」や「Cocoon」には簡単にOGP設定をする機能が付いていますので、今回これを使ってSNS用のアイキャッチ画像を設定してみます・ｗ・

テーマの機能で設定できるのはトップページ用の画像となります。
初めての方にはややこしいと思いますので、ページ後半に詳しく書いています。

OGPに最適な画像サイズ

設定をする前に、まずSNS用のアイキャッチ画像を用意しましょう。

OGPに関して特に気を付けたいのが画像のサイズです。

2021年現在も推奨されている王道の画像サイズは1200×630pxのサイズです。
最低でも600×315px以上の横長の画像が推奨されています。

また、アスペクト比も重要で2021年現在は「1.91:1」が推奨されています。
Twitter用に先ほどの1200×630pxよりも小さい1024×536px(512px)程度のサイズを使っている所も多いですが、どちらもアスペクト比は「1.91:1」となっています。

そして画像サイズについて、もう１つ重要なポイントがあります。
それはアイキャッチが正方形で表示されても綺麗に表示されるようにすることです。
TwitterやFacebook、はてぶやLineなど様々なSNSサービスでの使用が想定されますが、サービスや端末によって画像が正方形に切り取られることがあるためです。

横幅630pxを超える領域には切り取られても差し支えない、いわば背景のような画像を配置しておくのが理想的です。

OGPに推奨される画像サイズ

まとめると、OGPに使用するアイキャッチ画像のサイズは1200×630px（1.91:1）で作成し、さらに正方形で表示された時のことも考えて630×630pxのゾーンに表示したい画像が収まるように作成することを意識しましょう！

なお1200×630px以上の画像でもOKなのですが、記事ページ上部にアイキャッチとして表示する場合はページが重たくなる可能性があるのでその点は注意しましょう。

OGP画像の表示例を確認するサイト

実際にSNSで記事がシェアされた時に画像がどのように表示されるのか？
見切れないかなどを確認するのに便利なサイト様があります。

「ラッコツールズ」というサイト様です。
こちらのサイト様でも画像サイズは1200×630pxが推奨されていました。

先ほど作成した当サイトの1200×630pxの画像を実際に検証してみます。
サイトにアクセスし、作成した画像をアップロードします。
（OGP設定があるページのURLを入力して確認することも可能。）

ラッコツールズでのOGP画像の表示確認例

長方形、正方形で表示された時の例が確認できます。
630×630pxの中に表示したい部分を配置したので、正方形にトリミングされた場合でも見切れることなく自然に表示されていることが確認できました。

テーマの機能でOGP画像を設定する

OGPに使用する画像を作成したら設定は簡単で、すぐに終わります。

ここでは「AFFINGER」及び「Cocoon」の設定方法を確認します。
大体の人気テーマには同じような機能が付いているはずです。

Facebook App IDはフェイスブックの開発者向けのサービスであるFacebook for Developersに登録して取得する必要があります。
取得方法は別の記事で解説しています。

FacebookだけOGPがおかしい時はFacebook App IDを確認しましょう。

OGP設定-AFFINGERの場合

人気有料テーマAFFINGERのOGP設定は以下で設定できます。

Facebookのマーク？がありますがTwitterもコチラで設定します。

AFFINGER管理＞SNS＞OGP設定

設定画面に進んだら「アップロード」をクリックして、メディアから先ほど作成した画像を選択しましょう。
Twitterのアカウントがある場合はIDも入力しておきます。

Twitterカードサイズは大（summary_large_image）に設定しておきましょう。
設定後はSAVEするのをお忘れなく。

この設定だけだとTwitter、Lineのみの対応となりますのでご注意ください。
Facebookやはてぶで表示するにはAPP IDを設定するか、テーマの編集が必須です。

OGP設定-Cocoonの場合

人気無料テーマCocoonのOGP設定は以下の場所です。

Cocoon設定＞OGP＞ホームイメージ

ホームイメージというところでOGP画像を設定します。
Cocoonの場合もほとんど同じですが、OGPタグの挿入にチェックを入れておくことで、Twitter以外のOGP用のタグもHEADに出力されます。

これだけでサイトがシェアされた時にOGP画像が表示されます。

大体のテーマでOGPに関するタグは半自動的に出力するようになっているため、画像をアップロードするだけで済むことがほとんどです。
（FacebookのOGP表示にはAPPが必須。）

LineでのOGP動作確認

LineでもトップページのURLを貼り付けると画像が表示されました。

プラグインを使ってOGP設定をする

テーマによってはOGPに関する設定機能がないテーマもあります。
そんな時はプラグインを使う方法でOGPタグを出力することができます。

例えば、SEO対策を行えるプラグインである「All in One SEO」や「Yoast SEO」にはOGP設定機能が含まれています。もともとOGP設定がないテーマの場合は、これらのプラグインの使用を前提としているものもあります。

また「Open Graph and Twitter Card Tags」などOGPタグの出力に特化したシンプルなプラグインもいくつかあります。

テーマにOGP設定機能がなく、プラグインも使用したくない場合はfunctions.phpで対応することになりますが、長くなるのでこの記事では割愛します。

以下は補足になりますが、知っておいた方が良い情報です。

TwitterのOGPキャッシュをクリアする

OGP設定してTwitterを確認したけど画像が表示されていない！！

そんな時が多々あります。原因はTwitterのOGPキャッシュです。
Twitterでシェア時の画像が表示されない場合はキャッシュクリアしましょう。

上記のTwitterカードのデベロッパーにアクセスします。
※Twitterへのログインが必要です。

Card Validator | Twitter DevelopersにURLを入力する

続いてCard URLにOGP画像を反映したいページのURLを入力して「Preview card」を押せばキャッシュが再取得され、Twitter上にも反映されます。

当サイトトップページのOGP確認例

ちなみにキャッシュは一定期間で更新されるようで、放っておけば全ページに反映しますのでわざわざ全ページのキャッシュをクリアしなくてOKです！

当サイトではOGP設定前にシェアされたページであっても後からアイキャッチ画像が反映され、追加されるようになっていました。

おかしいな？と思った時や画像をすぐに反映したい時にこの方法を使いましょう。

OGPには記事ページのアイキャッチが使われる

最後に、Wordpressで初めてOGPを使う方に重要な補足です。

冒頭でも触れましたが、今回設定したアイキャッチ画像はサイトトップの画像です。
記事ページがシェアされた場合は記事に設定したアイキャッチ画像が使用されます。

記事に設定したアイキャッチとは、Wordpressで記事を書くページの右メニューにある「アイキャッチ画像」で設定できる画像のことです。

記事のシェア例

上の画像は当サイトの記事をTwitterでシェアしていただいた時のものです。
このようにシェアされた記事のアイキャッチ画像が使われます。

盛大に見切れていますｗ
当サイトは記事上部にアイキャッチを表示しており、SNSでのシェア時の見栄えよりもサイト内での見栄えと高速化を重視しているのでこんな感じになっています。

もしも全記事のアイキャッチ画像をSNS上でも上手く表示したいのであればページに設定するアイキャッチ画像も全部考える必要があります。

ページ上部にアイキャッチを表示する場合、画像サイズとページスピードは基本的にトレードオフになると思っておいてください。

フロントページが固定ページの場合の対応

もう１つ補足です。
WordPressでフロントページ（トップページ）を固定ページにしている場合はテーマのOGP設定で設定した画像が表示されません。

この場合はフロントページである固定ページの「アイキャッチ画像」にOGPに使用したい画像を設定すれば使用されます。

執筆ページのメニューにある

OGPに使用される画像は記事ページに設定したアイキャッチ画像です。
（何回言うのよｗ）

ひとこと

以上、OGPに最適な画像サイズとAFFINGERやCocoonなどに付属しているテーマのOGP機能を使ってSNSシェア時のサイト情報を設定する方法、その他の注意点でした。

当初書こうと思っていた内容から随分ズレてしまいました...
OGPのコードの書き方なども書こうと思ったのですが、最近のWordpressテーマではその必要がなさそうなので辞めました。

サイトのトップページがシェアされるのは少なそうですが、設定しておいて損はないですね＾ｗ＾