サイト拡散に役立つOGPとは？FacebookやTwitterでの設定方法
Facebookやツイッターで役に立つOGPについて、ご存じですか？
これを設定できると、SNSなどで拡散される場合に、ページの概要をしっかりと表示できます。
意外と知られていないこの機能ですが、設定するだけでクリック率の上昇を見込めます。
SNSの拡散を行うときに、この設定をしていないともったいないです。最後までご覧いただき、設定を行ってみてください。
（※プロトコルとは……コンピューターによる通信時の約束事）
OGPを設定してサイトURLを張り付けると、以下のものを表示されることができます。
・タイトル
・説明文
・設定した画像
こちらが表示されると、ただURLが張られているよりも情報が伝わりやすくなるので、クリック率の上昇を見込めます。
また、「いいね！」を押される回数の上昇も見込めますので、「いいね！」を押してくれた方の友人にも拡散されやすくなる可能性もあります。
OGPは、SNSの拡散の際に設定しておかないと非常に不効率といえるでしょう。
設定したいサイトのheadタグ内にこれからお伝えするコードを埋め込むことで、設定は完了です。
Facebookやツイッター上で反映させたいときの設定方法は、後述します。
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/websaite#">
「websaite」の部分は、TOPページの場合は上記のままでOKです。TOPページ以外の場合は、「article」にしましょう。
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta property="og:image" content="サムネイル画像の URL" />
<meta property="og:title" content="ページの タイトル" />
<meta property="og:url" content="ページの URL" />
このとき、相対パスではなく、絶対パスを設定してください。これができていないとうまくいきませんので注意が必要です。
（※絶対パス……URLでページを明確に指定する）
（※相対パス……今いる場所を起点にして、情報がどこにあるのか示す）
OK：絶対パス
<meta property="og:url" content="https://○○○.com/images/">
NG：相対パス
<meta property="og:url" content="/images/">
こちらのサイトは英語ですが、さまざまな種類のページタイプが掲載されています。
よく分からないときは、TOPページの場合は「website」、それ以外は「artcle」にしておくとよいでしょう。
<meta property="og:type" content="ページの種類"/>
（※ディスクリプション……ページ内容の説明書き）
<meta property="og:description" content="ページのディスクリプション" />
<meta property="og:site_name" content="サイト名" />
<meta name="twitter:card" content="カードタイプ" />
<meta name="twitter:site" content="@ユーザー名" />
<meta property="og:url" content="記事のURL" />
<meta property="og:title" content="記事のタイトル" />
<meta property="og:description" content="記事の要約（ディスクリプション）" />
<meta property="og:image" content="画像のURL" />
ツイッターの場合は、上記を各記事のheadタグ内に記載すればOKです。
ツイッターカード（twitter:card）とツイッターサイトtwitter:siteについて、以下に説明します。
<meta name="twitter:card" content="カードタイプ" />
カードタイプは、以下の４つです。もともとは7種類あったのですが、2019年現在一般的に使えるのは以下の4つのみになりました。
・"summary"……タイトルと、説明文。右に小さく画像が表示されます。あまり大きくは表示されません。
・"summary large image"……"summary"の画像が大きいバージョン。文章の下に大きく画像が表示されます。Facebookの表示に似ています。
・"photo"……画像が最も優先されるタイプです。説明文の表示がなく、画像をクリックして初めてツイートの内容が見られます。
ビジュアル重視で宣伝したい場合に向きます。
・"player"……動画を埋め込めるタイプです。
動画を流したい場合はこちらを使用しましょう。
・"app"……アプリ紹介のときに便利なタイプです。
アプリのアイコンが表示されるだけではなく、アプリ名・紹介文・評価などもまとめて表示されます。
<meta name="twitter:site" content="@ユーザー名" />
こちらで、ツイッターのOGP設定をすることができます。
<meta property="fb:app_id" content="App-ID（15文字の半角数字）" />
<meta property="fb:admins" content="adminID（15文字の半角数字）" />
それぞれについてお伝えします。
<meta property="fb:admins" content="adminID（15文字の半角数字）" />
取得方法は、以下の通りです。
（１） Facebookでアカウントページを開く
（２） プロフィール画像をクリック
（３） 拡大画像が表示された画面の、URL末尾をチェック
（４） 「.〇〇〇〇〇〇〇〇〇〇〇〇〇〇＆type=1＆」の、〇部分15桁の数字がadminID
ただ、こちらは個人番号をさらすことになりますので、個人情報が漏れてしまいます。
あまりおすすめできる方法ではありません。おすすめは、次に紹介するappIDを使用する方法です。
<meta property="fb:app_id" content="App-ID（15文字の半角数字）" />
取得方法は、以下の通りです。
（１） Facebookにログインして、facebook for
developers（https://developers.facebook.com/）にアクセス
（２） 右上のマイアプリをクリックし、「新しいアプリを追加する」をクリック
（３） 「表示名」「連絡先メールアドレス」を入力し、「アプリIDを作成してください」をクリック
（４） セキュリティチェックを入力
（５） ダッシュボードを開くとアプリIDが表示される
こちらで取得することができます。
ツイッターとFacebookで確認する方法をそれぞれお伝えします。
Card Validator（https://cards-dev.twitter.com/validator）を使います。
記事のURLを入力し、「Preview card」をクリックするだけと簡単です。
プレビュー画面が表示されるので、そこで思うように表示されていればOKです。
デバッカー（https://developers.facebook.com/tools/debug/)を使います。
こちらも操作は簡単で、確認したい記事のURLを入力し「デバック」をクリックするだけです。画像が表示されればOKです。エラーがある場合は、その旨表示してくれます。
初めは少し面倒に感じるかもしれませんが、一度設定してしまえばあとは簡単です。
せっかく用意したWebサイトですから、多くの方に拡散したいものです。
表示のされ方は拡散を考えると重要ですので、まだ設定していない方はぜひ活用してみてください。
これを設定できると、SNSなどで拡散される場合に、ページの概要をしっかりと表示できます。
意外と知られていないこの機能ですが、設定するだけでクリック率の上昇を見込めます。
SNSの拡散を行うときに、この設定をしていないともったいないです。最後までご覧いただき、設定を行ってみてください。
OGPとは？ OGPを使うメリット
OGPとは、Open Graph Protocolの略で、SNSなどにサイトURLを記載するとき、何が表示されるか決定するプロトコルのことです。（※プロトコルとは……コンピューターによる通信時の約束事）
OGPを設定してサイトURLを張り付けると、以下のものを表示されることができます。
・タイトル
・説明文
・設定した画像
こちらが表示されると、ただURLが張られているよりも情報が伝わりやすくなるので、クリック率の上昇を見込めます。
また、「いいね！」を押される回数の上昇も見込めますので、「いいね！」を押してくれた方の友人にも拡散されやすくなる可能性もあります。
OGPは、SNSの拡散の際に設定しておかないと非常に不効率といえるでしょう。
OGPの基本設定
ここからは、OGPをWebサイトやホームページ上で設定する方法をお伝えします。設定したいサイトのheadタグ内にこれからお伝えするコードを埋め込むことで、設定は完了です。
Facebookやツイッター上で反映させたいときの設定方法は、後述します。
OGPの使用を宣言
まずは、OGPの使用を以下のコードで宣言します。こちらをソースに張り付けましょう。<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/websaite#">
「websaite」の部分は、TOPページの場合は上記のままでOKです。TOPページ以外の場合は、「article」にしましょう。
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
画像のURL
表示させたいサムネイル画像は、以下のコードで設定できます。<meta property="og:image" content="サムネイル画像の URL" />
ページタイトル
表示させたいページタイトルは、以下のコードで設定できます。<meta property="og:title" content="ページの タイトル" />
ページURL
ページURLは、以下のコードで設定できます。<meta property="og:url" content="ページの URL" />
このとき、相対パスではなく、絶対パスを設定してください。これができていないとうまくいきませんので注意が必要です。
（※絶対パス……URLでページを明確に指定する）
（※相対パス……今いる場所を起点にして、情報がどこにあるのか示す）
OK：絶対パス
<meta property="og:url" content="https://○○○.com/images/">
NG：相対パス
<meta property="og:url" content="/images/">
ページタイプ
ページタイプは、以下のコードで設定できます。こちらの設定によって、SNS上での表示のされ方が変わります。 http://ogp.me/#typesこちらのサイトは英語ですが、さまざまな種類のページタイプが掲載されています。
よく分からないときは、TOPページの場合は「website」、それ以外は「artcle」にしておくとよいでしょう。
<meta property="og:type" content="ページの種類"/>
ページのディスクリプション
ページのディスクリプションは、以下のコードで設定できます。（※ディスクリプション……ページ内容の説明書き）
<meta property="og:description" content="ページのディスクリプション" />
サイト名
サイト名は、以下のコードで設定できます。<meta property="og:site_name" content="サイト名" />
TwitterでOGPを設定する方法
ツイッターでOGPを設定する場合、上記に加え、ツイッターカード（twitter:card）とツイッターサイトtwitter:siteを設定します。<meta name="twitter:card" content="カードタイプ" />
<meta name="twitter:site" content="@ユーザー名" />
<meta property="og:url" content="記事のURL" />
<meta property="og:title" content="記事のタイトル" />
<meta property="og:description" content="記事の要約（ディスクリプション）" />
<meta property="og:image" content="画像のURL" />
ツイッターの場合は、上記を各記事のheadタグ内に記載すればOKです。
ツイッターカード（twitter:card）とツイッターサイトtwitter:siteについて、以下に説明します。
ツイッターカード（twitter:card）
ツイッターカードを使う場合、表示させるタイプを選ぶことができます。<meta name="twitter:card" content="カードタイプ" />
カードタイプは、以下の４つです。もともとは7種類あったのですが、2019年現在一般的に使えるのは以下の4つのみになりました。
・"summary"……タイトルと、説明文。右に小さく画像が表示されます。あまり大きくは表示されません。
・"summary large image"……"summary"の画像が大きいバージョン。文章の下に大きく画像が表示されます。Facebookの表示に似ています。
・"photo"……画像が最も優先されるタイプです。説明文の表示がなく、画像をクリックして初めてツイートの内容が見られます。
ビジュアル重視で宣伝したい場合に向きます。
・"player"……動画を埋め込めるタイプです。
動画を流したい場合はこちらを使用しましょう。
・"app"……アプリ紹介のときに便利なタイプです。
アプリのアイコンが表示されるだけではなく、アプリ名・紹介文・評価などもまとめて表示されます。
ツイッターサイト（twitter:site）
ユーザー名を記載し、設定を行いましょう。<meta name="twitter:site" content="@ユーザー名" />
こちらで、ツイッターのOGP設定をすることができます。
FacebookでOGPを設定する方法
FacebookでOGPを設定する場合、基本のコードに追加して"fb:app_id"か、"fb:admins"を追加する必要があります。<meta property="fb:app_id" content="App-ID（15文字の半角数字）" />
<meta property="fb:admins" content="adminID（15文字の半角数字）" />
それぞれについてお伝えします。
"fb:admins"
ページの管理者をFacebookのIDで指定する記述です。<meta property="fb:admins" content="adminID（15文字の半角数字）" />
取得方法は、以下の通りです。
（１） Facebookでアカウントページを開く
（２） プロフィール画像をクリック
（３） 拡大画像が表示された画面の、URL末尾をチェック
（４） 「.〇〇〇〇〇〇〇〇〇〇〇〇〇〇＆type=1＆」の、〇部分15桁の数字がadminID
ただ、こちらは個人番号をさらすことになりますので、個人情報が漏れてしまいます。
あまりおすすめできる方法ではありません。おすすめは、次に紹介するappIDを使用する方法です。
"fb:app_id"
appIDを使うと個人情報を使わなくて済むだけでなく、複数名で運営する際にも便利です。<meta property="fb:app_id" content="App-ID（15文字の半角数字）" />
取得方法は、以下の通りです。
（１） Facebookにログインして、facebook for
developers（https://developers.facebook.com/）にアクセス
（２） 右上のマイアプリをクリックし、「新しいアプリを追加する」をクリック
（３） 「表示名」「連絡先メールアドレス」を入力し、「アプリIDを作成してください」をクリック
（４） セキュリティチェックを入力
（５） ダッシュボードを開くとアプリIDが表示される
こちらで取得することができます。
OGPを確認するには？
OGPが正しく設定されたか確認したいですよね。ツイッターとFacebookで確認する方法をそれぞれお伝えします。
ツイッターで確認する方法
ツイッターでOGPが設定できたか確認するには、Card Validator（https://cards-dev.twitter.com/validator）を使います。
記事のURLを入力し、「Preview card」をクリックするだけと簡単です。
プレビュー画面が表示されるので、そこで思うように表示されていればOKです。
Facebookで確認する方法
FacebookでOGPを確認するには、デバッカー（https://developers.facebook.com/tools/debug/)を使います。
こちらも操作は簡単で、確認したい記事のURLを入力し「デバック」をクリックするだけです。画像が表示されればOKです。エラーがある場合は、その旨表示してくれます。
まとめ
Facebookやツイッターで記事を拡散するときに便利なOGPについてご紹介しました。初めは少し面倒に感じるかもしれませんが、一度設定してしまえばあとは簡単です。
せっかく用意したWebサイトですから、多くの方に拡散したいものです。
表示のされ方は拡散を考えると重要ですので、まだ設定していない方はぜひ活用してみてください。