1. ホーム
  2. コラム
  3. SNSからの送客効率UP前編~OGP設定とは~

SNSからの送客効率UP前編~OGP設定とは~

日常で触れているアプリ、FacebookやLINEなど……SNSは私たちの暮らしにかかせないものとなっています。そんな「大SNS時代」に効果的な、OGP設定についてのご紹介をしたいと思います。

OGPとは…

まずはじめに、OGPとは何か? OGPとは、各SNSで用いられる要素の一つ。ウェブサイトのリンクをFacebookの記事に挿入した場合、あらかじめ設定したウェブサイトの説明文や画像が表示されるというものです。

Facebookを例にした活用イメージは以下となります。

OGP投稿表示例1

投稿にリンクを挿入すると、このようにウェブサイトの説明文が表示されます。また、画像を指定することができ、見栄えが変化します。

ちなみに、Facebookの場合だとOGPで画像を設定していなくても、投稿の際に画像を付け足すこともできます。が、他のユーザーが投稿する際にOGPを設定していれば、ウェブサイトのリンクを投稿に挿入した場合にOGPを読み込んでくれるので、とても重要なものです。

OGPを設定しよう

では実際にOGPを設定しましょう。やり方はウェブサイトに特定のコードを埋め込むだけです。

「準備するもの」

  • 1200×630px OGP用の画像
  • FacebookアプリID

OGPを設定するには上記2つの準備が要ります。画像はFacebookを基準としたサイズで、上記のサイズ・比率でないと切り取られ、小さく表示される場合があるので注意してください。
画像は各々でご用意いただくとして、アプリIDの取得についてご説明します。

https://developers.facebook.com/apps/
まずは上記ページにアクセスし、開発者として登録していなければ開発者として登録後、「Create a New App」または「Add a New App」というボタンを押してください。

Add a New App

ボタンを押すとこのようなポップアップが出るので、ウェブサイトを選択し、アプリ名をつけます。

Add a New App

次のページでOGPを設定したいウェブサイトのURLを入力し、「Next」を選択した後、下の画像と同じく「Skip to Developer Dashboard」のリンクをクリックし、ダッシュボードに移動しましょう。

Add a New App

ダッシュボードが表示されれば、画像の赤枠で囲んでいる部分がFacebookアプリIDとなりますので、メモしておきましょう。

Add a New App

アプリIDを取得後、下記のコードをウェブサイトのhead内に入れて完了です。
content=”"内を書き換えて挿入してください。


<meta property="og:title" content="ページタイトル" />
<meta property="og:type" content="article" />
<meta property="og:url" content="ページURL" />
<meta property="og:image" content="OGP用に用意した画像のURL" />
<meta property="og:site_name"  content="サイト名" />
<meta property="og:description" content="ページの簡単な説明" />
<meta property="fb:app_id" content="アプリID" />
<meta name="twitter:card" content="summary_large_image">

まとめ

いかがでしたか? 設定が完了したら、実際に投稿を行いテストしてみてくださいね。
また、このOGPはSNS共通のプロトコルのためLINEや、Google+、Twitterなども読み込むんです。
ちゃんと設定したのに、Facebookで上手く表示されない!という方は、デバッガー(https://developers.facebook.com/tools/debug/)にアクセスし、URLを入れてデバッグしてみてください。

次回は、後編~効果的なOGP設定について~をお送りします!

————————————————

【著者紹介】

遠藤大知(えんどうだいち)
2014年4月株式会社メンバーズ入社。部署「第1ビジネスユニットアカウントサービス第10ユニット」に所属。ソーシャルマーケティング・広告を中心に日々勉強中。

カテゴリ: Facebook, LINE, Twitter
2016年02月29日

RSS