サイトURLをFacebookに貼り付けたときのOGP画像を作成して表示する

新しくサイトを作成したときにやっておいた方がいいことは色々あるのですが、その中でもFacebookなどのSNSでシェアされたときの画像を適切に指定しておく、ということは重要なことです。
特にFacebookは拡散力が強いので、Facebookでいい感じに表示される画像の作り方を考えてみました。

Facebookに表示するOGP画像の最適なサイズについて

色々検索してみたところFacebookに表示するOGP画像の最適なサイズは

横1200 x 縦630 ピクセル

かなと思います。少なくとも 600 x 315 ピクセル ということですが、大きい方がより良いということが多く言われているので新しく作るなら大きいサイズの方で作っておいた方が良さそうです。

ということでとりあえず作ってみました。

example

実際にはとても大きいです→こちら

Facebookの表示をシミュレートできるサービス og:image Simulator

このOGPイメージがどのように表示されるのかをシミュレートできるサービスを見つけました。

og:image Simulator

このサイトの 画像をドラッグ&ドロップしてください… と書いてあるあたりに先ほど作った画像をドラッグします。

すると、

こんな感じに、FacebookにURLを書いたときの画像表示がこういう感じになるんだな~ということがとてもリアルに分かりました。

2014/1 時点での仕様のようなので多少現在と違っているところもあるかもしれませんが、ドラッグ&ドロップだけでどんな感じに表示されるかがすぐにわかるのでとても便利だと思います。

OGP画像を指定する方法

OGP画像を指定する方法は色々あるのですが、HTMLに直接書くのならば、headタグ内に

こんな感じに書きます。og:image という行に先ほど作ってアップロードしておいたOGP画像のURLを書きます。

このURLをFacebookでシェアすると、

このように先ほど作った画像が表示されました。

また、WordPressでJetpackを使っている場合なのですが、コンテンツ内に何か画像があればその画像が使われる可能性もあるのですがなにもないと、

こんな感じで表示されます。content=”https://s0.wp.com/i/blank.jpg” となっているためFacebookにURLを書くと、

こんな感じで、画像が空白の四角になって表示されてしまいます。画像があるか無いかでクリックする率も変わると思いますので、ここは必ず画像を表示したいところです。そこで子テーマのfunctions.phpに

このように追加しました。og:image が https://s0.wp.com/i/blank.jpg だったときに子テーマにアップしたexample.pngに置き換えるというコードです。これで表示すると

このように指定したOGP画像が表示されました。

HTMLで指定するときもWordPressで指定するときもOGP画像はキャッシュがきついので、Facebookデバッガーでキャッシュを作り直してください。方法については、こちらを参照してください。

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/ 無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る