SNSでシェアされやすいOGPの設定方法と画像サイズまとめ

TwitterやFacebookなどSNSの投稿時、URLを貼り付けると自動で挿入される画像やテキストがあります。それらをサイト制作者がきちんと意図したものにしておくことで、クリックされたりシェアされたりする可能性がグンと高くなるのをご存知でしょうか？
今回はホームページ作成サービス「BiNDup」で、いわゆるOGPを設定する方法をまとめました。

BiNDは自動でOGPを設定しますが、実はシェア率を上げるためにはカスタマイズした方がベター。SNSに適切な設定方法もあるので確認してみてください。

改めて解説！OGPとは

OGP（Open Graph Protocol：オープングラフプロトコル）は、主にFacebookなどのSNSに対して、「このサイトは、こういう内容です！」と伝えるための概要みたいなものです。
Facebook上でリンクをシェアしたときに、サイトの紹介文やサムネイルを表示させることができます。

FacebookでのOGPサンプル

BiNDupでのOGPの設定方法

前述のように、BiNDupではOGPに対して基本的には何もしなくても自動でやってくれます。
BiNDupではデフォルトで以下の情報が設定されるようになっています。

OpenGraph設定画面（プロパティ設定から）

それぞれの項目についての意味は下記になります。
そして各項目はBiNDupが自動で設定を補完するようになっています。（[BD:page_title]などの意味についてはこちらをご確認ください。）

上記以外にもTwitter用の設定「twitter:card」などもあるので、必要に応じて追加するとよいでしょう。

より丁寧な設定をするには

基本はBiNDが自動で設定を用意してくれるため、情報が共通しているようなページについては特に何もしなくても問題ない・・と言いたいところですが、少しでも多くの人にきちんとした情報を届けたい、知ってほしいと思うなら個別に設定するのがオススメです。

なぜなら、BiNDの設定ではデフォルトでサイト全体で共通化されているので、キャンペーンページやブログ記事のように個別にページのイメージ画像などを持たせたい場合には、内容と合わないことがあるからです。ここでは個別のカスタマイズ方法を解説します。

ページ毎で設定を変更したい場合

ページ毎で変更する場合は、ページ設定の「OpenGraph設定」で「サイト全体設定を使用する」のチェックを外します。
その上でタイトルや画像を設定すると、個別に情報を調整することができます。

ページ設定でのOpenGraph設定画面

ちなみに、BiNDではサイトシアターに並んでいるマイサイトのサムネイル画像が自動で挿入されるようになっています。そのサムネイルが意図したものと違う場合には、リソースエディタを使って任意の画像を設定することができます。

詳しくは以下の記事をチェックしてみてください。

シェア率が高まる任意のOGP画像をBiNDで設定する方法【後編】

BiND Pressで記事毎に画像を変える場合

BiND Pressで記事ごとに画像を変更する場合は、BiND Pressの投稿画面でSNS用の画像を登録する必要があります。

BiND PressでのSNS用の画像設定

画像の最適なサイズ

最後にSNS上で使用される画像について簡単にまとめたいと思います。

画像を用意するときの注意点としては、極力重要な要素は中央（正方形の範囲内）に収めるようにしましょう。
横長の画像の場合、左右がカットされ情報が切れてしまうかもしれません。

Facebookの場合

Facebook場合、推奨画像が設定されています。正方形ではなく600*315px（1.91:1）と少し横長の画像となります。高解像度のRetinaディスプレイも意識すると「1200*630px」の画像を用意すると良いと思います。
またその場合でも上記の通り、正方形内に重要な要素をまとめることをお勧めします。

下記のようなシミュレーターもあるようなので設定前に確認・調整してみると良いと思います。
http://ogimage.tsmallfield.com/

シミュレーターのサンプル。要素が収まっているか簡単に確認ができる

BiNDupでは各種SNSやYouTubeと連動できる機能も揃えているので、サイト集客には心強い味方です。ぜひご利用ください。

BiNDupと連携できる外部サービスをチェックBiNDの制作事例を見る