2016/11/16 Marketing

バズらせるためのFacebookとTwitterのOGPの設定方法

バズらせるためのFacebookとTwitterのOGPの設定方法

どうも@De_webdesignです。

今回はマーケティング関係の記事を最近書いていなかったので、OGPについてとその設定方法を書いていきたいと思います。これを設定してるのとしてないのでは、SNSでシェアされたときにかなり違ってきますのでまだ設定してないという方は、急いで設定することをオススメいたします。

 

目次

  • OGPとは
  • OGPの設定方法
  • Facebook用 OGP設定
  • Twitter用 OGP設定

OGPとは

Open Graph Protocolの略称で、FacebookやTwitterなどのSNSでシェアされたときに、その記事 or ページのタイトル・URL・説明・サムネイル画像を表示させる仕組みです。

Facebook OGP設定時の表示

facebook ogp

OGPを設定すると上記の画像のように表示されるので、SNSでの拡散を狙っている場合は必ず設定した方がいいです。スクロールして自分の投稿が現れた時に、一瞬で興味あるかないかを判断されてしまうのでOGPを設定することで最大限に自分の記事をアピールすることができます。

OGPの設定方法

1.OGPの使用宣言

これからOGPを使いますという宣言を <head></head> 内に書き込みます。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

※記述してもしなくてもOGP設定は反映されますが、記述するのが正式です。

2.必須のプロパティ設定

OGPで必ず設定しなければいけないプロパティ(og:title,og:type,og:url,og:image)の設定を行います。

<meta property="og:title" content="タイトル" />
<meta property="og:type" content="タイプ" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="画像のURL" />

上記が必須のプロパティとなりますが、他にも設定できるプロパティがありますので詳しく知りたい方は、下記の参考URLからご覧下さい。

http://ogp.me/#optional

では上から順に説明していきます。

・og:title

名前の通りタイトルです。content＝””の部分にタイトルを入力します。このプロパティがない場合、titleタグの中身が参照されます。

・og:type

こちらはこのOGP設定をしているコンテンツがどういうタイプなのかを記述する部分になります。
このタイプによってFacebookでシェアされたときの表示が変わります。
例：
website：一般的なWebサイト
article：ブログやニュースなどの記事
profile：人物

・og:url

シェアをするコンテンツのURLを絶対パスで記述する部分です。設定しない場合は自動で取得されるので変なURLを取得されないように設定しときましょう。

・og:image

シェアをするときに表示させたい画像のURLを絶対パスで記述する部分です。
Facebookなどは画像が自動的にカットされてしまいますので、サイズをしっかり確認して自分の思い通りの表示になるようにしましょう。
例：Facebook 600px × 315px

3.オプションプロパティの設定

必須プロパティだけでも大丈夫なのですが、オプションを追加することでさらに高度なOGP設定をすることができます。
どうせやるならいいOGP設定をして、シェアを拡大させましょう。

・og:site_name

サイト名

・og:description

ページ or コンテンツの説明分。

Facebook用 OGP設定

上記の必須プロパティの他に、「fb:admins」、「fb:app_id」のどちらかを追加する必要があります。

fb:app_id

ページに紐付けしたいFacebookアプリケーションIDで指定する記述になります。個人情報保護の観点からもこちらの方法が推奨されています。

<meta property="fb:app_id" content="App-ID（15文字の半角数字）" />

FacebookのアプリケーションIDの取得につきましては、下記の記事を参考にして取得してください。

https://admin.begeeek.com/marketing/ogp-facebook-appid/

fb:admins

ページ管理者をFacebookのユーザーIDで指定する記述です。

<meta property="fb:admins" content="adminID（15文字の半角数字）" />
adminIDの取得方法

1.Facebookで、個人のアカウントページに移動
2.プロフィール写真をクリック
3.写真が拡大表示されたら、URLの最後の方を確認
4.12222442324222424&type=!&の$typeの前の15桁の数字がadminIDになります。

Twitter用 OGP設定

TwitterでのOGPは「Twitter Cards」と呼ばれていて、name属性を用いて設定します。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@[Twitter ID]">
・twiiter:card

カードの種類を記述します。summary、summary_large_image、photo、galleryなどが設定できます。下記のURLから詳しいカードの種類を確認することができます。僕はFacebookの時と同じような見た目にしたかったので「summary_large_image」のカードを使用しています。

カードタイプ | Twitter Developers

・twitter:site

必須でないので記述しなくても大丈夫です。記述するとカードのフッター部分に「@[Twitter　ID]」が表示されるようになります。

OGP 表示確認方法

Facebook – Debugger

https://developers.facebook.com/tools/debug/にアクセスし、表示チェックしたい記事をテキストボックスの中に入れてDebugを押してください。

facebookdebugger-01

 
少し待つと下記のようなデバッグの結果が表示されます。(この画像は結果の一部抜粋ですので、実際の結果はもっといろんなことが書いてあります。)

facebookdebugger-02

 
こちらに自分の設定した通りの情報が表示されていればOKです。もう少し下の方に実際の表示が確認できるところがあるのでそちらで表示確認をして問題なければOGPの表示確認は以上です。

もしデータがちゃんと取れていなかったり、古いもののままだった場合は、URLを入力したしたにFetch new scrape informationというボタンがあるのでそこをクリックするともう一度データを取得しなおしてくれます。

fetchnewinfo

Twitter – Card validator

Card validatorにアクセスしてください。（Twitterにログインした状態で）
アクセスすると下記のような画面にいくので、URLをテキストボックスに入力し、Preview Cardのボタンをクリックしてください。

twittercard-01

少し経つと結果が右側に表示されますので、確認してください。

twittercard-02

しっかりとデータが取れていない場合などは、右下のLogにエラーメッセージが出ますのでそれを参考にして修正し、もう一度試してみてください。

まとめ

いいコンテンツや記事を書いても、こういうOGPなどの設定をしていないとせっかくのシェアしてもらう機会を失いかねないので、必ず設定しておくようにしましょう。

このブログはまだFacebookのOGPしか設定していませんが、のちのち時間があるときに進めていこうと思います。

では。

関連する記事