サイト運営者必見！FacebookとTwitterのOGPの設定手順と確認ツールまとめ

OGPの基礎知識

OGPとは？

OGPとは、FacebookやTwitter、Google+などのSNSでシェアされたときに、ページ内容をリッチに表示するための仕組みのことです。英語でのOpen Graph Protocolの頭文字を取って、OGPと呼ばれています。

OGPを導入すると、シェアされたときの投稿にタイトルや説明文、アイキャッチ画像などを表示できるようになります。見栄えが格段に良くなりますし、クリック率の向上も見込めます。シェアもされやすくなるでしょう。

OGPの設定方法

それでは早速、OGPの設定方法について見ていきましょう。

OGPを設定する

基本設定

OGPの基本設定です。下記のように、HTMLのheadタグに記載すればOKです。

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

それぞれ、順に見ていきましょう。

ページのタイトル

ページのタイトルを指定します。ホームページの名前ではなく、そのページのタイトルのことです。うっかり間違えやすいので、注意しましょう。

タイプ

ページの種類を指定します。ホームページの場合はwebsiteが、ブログの場合はblogやarticleなどを指定しておけばいいでしょう。他にもproductやvideoなど、さまざまな種類があります。詳細は下記のFacebook公式ページをご覧ください。

Open Graph Reference Documentation - 参考資料 - 開発者向けFacebook

ページのURL

ページのURLを指定します。ブログの場合は、記事のURLを記載してください。

画像のURL

アイキャッチ画像など、OGPで表示したい画像のURLを指定します。全く関係のない画像が表示されてしまうこともあるので、忘れず設定しておくことをオススメします。

その他の設定

上の基本設定に加えて、オプションで指定しておいた方がいい内容です。

ホームページのタイトル

基本設定でページのタイトルを指定しましたが、こちらはホームページのタイトルです。

<meta property="og:site_name" content="ホームページのタイトル" />

ページの説明文

ページの説明文を設定します。metadescriptionと同様の内容でかまいません。

<meta property="og:description" content="ページの説明文" />

Facebook用の設定

Facebook向けのOGP設定です。Facebookの開発者向けページで取得できる、15文字の半角数字のことです。

<meta property="fb:app_id" content="App-ID" />

Twitter（Twitterカード）用の設定

Twitter向けのOGP設定です。Twitterでシェアされたときに、タイトルや画像をカード形式で表示できます。

<meta name="twitter:card" content="Twitter Cardsのタイプ">
<meta name="twitter:site" content="@ユーザーID">

TwitterCardsのタイプを設定します。スタンダードな「summary」や、画像を大きく表示した「summary_large_image」などがあります。詳細は、下記のTwitter公式サイトをご覧ください。

カードタイプ | Twitter Developers

OGPを確認する

OGPを確認する方法についてご紹介します。設定したOGPが正しく反映されているか、ページを追加した時や改修をしたときなどにチェックしておきましょう。

デバッガー（Facebook）

Facebookが公開している、開発者向けのツールです。無料で使えますが、Facebookアカウントでログインしておく必要があります。

デバッガー - 開発者向けFacebook

Card validator（Twitterカード）

こちらはTwitterカード向けの確認ツールです。ページのURLを入れるだけで、簡単にOGPの確認ができます。

Card Validator | Twitter Developers

まとめ

コンテンツマーケティングなどの手法が注目を集めている現在では、OGPの活用は欠かすことができません。サイトを運営するのであれば、ぜひとも正しく設定しておくようにしましょう。

なお、記事の後半でご紹介したツールは、OGPのチェック以外にも使うメリットがあります。それは、Facebookからの再クロールを促せること。OGP情報も更新できるので、OGPの設定を変更したり、記事を編集した時に使っておくとよいでしょう。