OGPとは「Open Graph protocol (オープン・グラフ・プロトコル)」の略称です。FacebookやTwitterなどのSNSで記事をシェアした際にアイキャッチ画像や記事のタイトルなどの情報を表示する仕組みです。

htmlのheadタグ内にOGPを設置することで、ページの情報をSNS側に正しく伝えます。

Emanon Proでは、OGPを出力する機能があらかじめ用意されており、プラグインなしでHTMLのhead内に以下のOGPを出力制御することができます。

<meta property="og:title" content="ページタイトル"><meta property="og:type" content="ページのタイプ"><meta property="og:url" content="ページのURL" ><meta property="og:image" content="アイキャッチ画像のURL"><meta property="og:description" content="ページのディスクリプション"><meta property="og:locale" content="ja_JP"><meta property="og:site_name" content="サイト名"><meta property="fb:app_id" content="Facebook アプリケーション id" >

今ご覧になっているページをFacebookに投稿(またはシェア)した場合、OGP設定により下記画像のように表示されます。

fb opg設定

WordPressのプラグイン「All in One SEO」などを使用するとOPGをheadタグ内に出力できます。もし、既にこれらのプラグインを使用されている場合、Emanon ProのOPG出力と重複しますので、OPG出力系プラグインはご利用を停止することをおすすめします。

Facebook OGP

WordPress管理画面 > 外観 > カスタマイズ > 全般設定 > Facebook OGPをクリックします。

次に「Facebook OGPタグの表示」にチェックを入れます。次に「Facebook application id」を入力します。

「Facebook OGP画像」には、サイトのトップページやアーカイブページがシェアされた際に表示させたいアイキャッチ画像をアップロードします。

facebook for developersによると、OGP画像サイズは、1200px x 630px以上を推奨しています。

高解像度デバイス上で最適に表示されるよう、1200 x 630ピクセル以上の画像を使用します。リンクページ投稿で大きい画像を表示するには、少なくとも600 x 315ピクセルの画像を使用してください。

引用元: ウェブサイトおよびモバイルアプリのシェアのベストプラクティス

OGP画像の制御

Emanon Proでは、FacebookやTwitterで記事をシェアされた場合、記事のアイキャッチ画像をOGP画像として使用します。

もし、記事にアイキャッチ画像がない場合、全般設定 > Facebook OGPで登録した「Facebook OGP画像」が表示されます。

サイトのトップページやカテゴリーページなどがSNSでシェアされた場合も、Facebook OPGで登録した「Facebook OGP画像」が表示されます。

Facebook application id取得方法

Facebook application idは、OGP設定に必須のアプリIDです。Facebookにログインした状態でFacebook Developerページを開いてください。

developers.facebook

Facebook Developerページの右上に表示されている「マイアプリ(My Apps)」にマウスオーバーし、「新しいアプリを追加(Add a New App)」をクリックします。

ウエブサイト

次に「ウエブサイト」をクリックします。

Skip and Create App ID

右上のSkip and Create App IDをクリックします。(過去にFacebook application idを作成している場合、Quick Start for Websiteに取得済みのアプリIDが一覧表示されます。)

新しいアプリIDを作成

新しいアプリIDを作成します。下記項目を入力してください。

  • 表示名:サイト名を入力してください
  • 連絡先メールアドレス:普段利用しているメールアドレスを入力してください
  • カテゴリー:サイトのテーマに近いカテゴリーを選択してください

入力終了後、「アプリIDを作成」をクリックします。

アプリレビュー

アプリレビューをクリックし、アプリを「公開状態」にします。

アプリIDをコピー

ダッシュボードをクリックし、アプリIDをコピーします。コピーしたアプリIDは、WordPress管理画面 > 外観 > カスタマイズ > 全般設定 > Facebook OPGのFacebook application idに反映させます。これでFacebook OGPの設定は完了です。

FacebookのOGPキャッシュクリア

Facebookで記事をシェアする際、OGP設定が完了しているにもかかわらず、アイキャッチ画像が表示されないケースがあります。この場合、Facebookが記事情報をキャッシュ(一時的に保管)していることが影響していると考えられます。

OGPのキャッシュは、Facebookデバッガーを使用しクリアします。該当記事のURLを入力しデバックをボタンを押してクリアしてください。

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

Twitterカード

Twitterカードとは、ツイートにURLが含まれている場合、記事のアイキャッチ画像やタイトル、meta descriptionをツイート上に表示するOGPです。

Summaryカードの設定

WordPress管理画面 > 外観 > カスタマイズ > 全般設定 > Twitterカードをクリックすると、下記画面が表示されます。

Twitterカード

「Twitterカードの表示」にチェックを入れ、Summaryカードと大きな画像付きのSummaryカードのどちらかを設定することができます。

Summaryカード
Summaryカード

デフォルトのTwitterカードで、タイトル、説明、サムネイル、Twitterアカウントの属性が含まれています。

大きな画像付きのSummaryカード
大きな画像付きのSummaryカード

Summaryカードに似ていますが、画像が目立つように表示されます。

Twitter ID

Twitter IDには、ご自身が運用するTwitter IDを@から入力してください。

Twitter OGP画像

Twitter OGP画像は、サイトのトップページやカテゴリーページなど特定のアイキャッチがないページがツイートされた場合に表示するOPG画像です。

OGP画像は、幅280px以上、高さ150px以上の大きさで、データサイズは1MB未満にしてください。

検証ツールでURLを確認

Twitter OGPの設定後、任意の記事URLを検証ツールでチェックします。Card URLに任意の記事URLを入力し、Preview Cardボタンをクリックしてください。

ツイッターカードの検証ツール