ソーシャルメディア・SNSに欠かせないOGP設定ちゃんとやってますか？

こんにちは！WEB マーケティングのお手伝いをしているインファクトの望月です。

FacebookやTwitter、Google+などのSNSでは、ブログやHPのURLを入れた投稿をすると、自動的にURLから画像やタイトル、概要を表示してくれます。リンクをクリックする前にリンク先の内容がわかるので、とても便利な機能です。
皆さんも、もちろん見たことありますよね。

↑の画像はFacebookのニュースフィードに表示される画像サイズです。
今回はOGPとTwitterカードについて紹介していきます。

目次

• OGPとは
• 設定しないとどうなるの?
• 作成するときのサイズが重要
• Twitterカードとは

OGPとは

OGPは「Open Graph Protocol（オープン・グラフ・プロトコル）」の略です。
冒頭で説明した通り、SNSで表示される情報ってことですね。

設定しないとどうなるの?

OGPを設定しないと適当な画像が選ばれてしまったり、思っていたテキストが表示されません。

画像はサイズが重要

一番重要なのが表示される画像ではないでしょうか？
弊社のブログの場合は記事の一番最初の画像が表示されるようになっていて、上下が切り抜かれて真ん中が表示されるようにしています。

600×400で作成して↑の画像に書かれている600×315の部分がFacebookのニュースフィードに表示されるサイズで、濃い緑の部分は切り抜かれるようにしてます。
このような画像サイズにしたのは、ブログに表示させる画像と、記事一覧に表示されるアイキャッチ画像を一緒の画像にしたかったからです。
※Facebookの推薦サイズはもっと大きいサイズで、1200×630ピクセル以上を推奨しています。
ちょっと大きすぎて作るのが大変なので、今は600×400にしています。
これからのFacebookの状況によっては、画像サイズを変更するかもしれません。

OGPの画像をチェックするのにオススメなサイト

OGPの画像をチェックするのにオススメなサイトがあります。
画像を作成したら↓のサイトで試してみましょう。

◆OGP画像シュミレーター

間違えた画像がFacebookにキャッシュされてしまった場合

以前に弊社の岡田が紹介したFBのデバッガーを使うと便利です。

◆facebookでサムネイル画像が表示されないときの解決方法

◆FBのデバッガーはコチラ

◆新しくなったFacebookデバッカーの使い方

Twitterカードとは

Twitterでもfacebookと同じようにツイートの投稿時に画像や文言を設定することができます。
TwitterではOGPではなく”Twitterカード”とよびます。
OPGと同様アイキャッチ画像、タイトル、ディスクリプション等が表示されます。OPGと同様アイキャッチ画像、タイトル、ディスクリプション等が表示されます。

Twitterカードを設定することで、通常は文字とリンクだけなので、更新頻度の多いTwitterでは流されてしますことが多いです。
しかし、アイキャッチ画像が加わることで目に付きやすくなり、またブログ記事のイメージが伝わりやすくなるので、よりクリックされる確率が高くなります。

設定されているかどうかは、Twitterにログインしている状態で検証ツールにアクセスしてみましょう。
ぜひ活用してみてください！

まとめ

Facebookの仕様が変わると、こちらも作成するサイズを変えなくてはいけないので、OGPって奥が深くて結構大変なんですよね。
Facebookの仕様を確認するには、↓のサイトを参考してください。OGPのサイズなど書かれています。

◆Creating Object Types