OGPとは、Open Graph Protocolの略語です。FacebookやTwitterなどのSNSでWebページの情報を伝える役割があります。OGPを設定することで、SNSでWebページがシェアされた際に、アイキャッチ画像やタイトルなど表示されます。

OGPサンプル
OGPサンプル

Emanon設定のOGPは、<head>にOGPタグを自動で出力する機能です。FacebookとTwitterのOGPタグにも対応しています。

OGP設定

WordPress管理画面にログイン後、メニュー名「Emanon設定」をクリックし、タブ「OGP」をご覧ください。

Emanon設定ーOGP

OGPタグを有効にすると<head>内にOGPタグが出力されます。

<!--ogp--><meta property="og:locale" content="ja_JP" /><meta property="og:type" content="website" /><meta property="og:url" content="ページのURLが表示されます" /><meta property="og:title" content="ページのタイトルが表示されます" /><meta property="og:description" content="ページのmeta descriptionが表示されます" /><meta property="og:image" content="アイキャッチ画像のU R Lが表示されます"><meta property="og:site_name" content="サイト名が表示されます" /><!--/ogp-->

OGP画像[初期値]には、横:1200px 縦:600pxの画像を指定してください。OGP画像[初期値]に指定された画像は、サイトのフロントページやアイキャッチ画像がないページに使用されます。

Facebook OGPとTwitterカードを使用する場合、OPG設定は有効にします。

Facebook OGP

Facebook用OGPタグを有効にすると、< head >にFacebook用OGPタグを出力します。Facebook用OGPタグを有効にする場合、FacebookアプリID必須入力となります。

FacebookアプリIDの取得手順

Facebookにログインした状態で、Facebook for Developersをクリックし、新しいアプリIDを作成します。

新しいアプリIDを作成

画面左端にあるメニュー「設定」>「ベーシック」をクリックし、「プライバシーポリシーのURL」と「連絡先メールアドレス」を入力します。次にプルダウン「カテゴリーを選択」をクリックし、Webサイトの内容にあったカテゴリーを選択します。

アプリIDの取得

プラットフォームの追加をクリックし、[ウエブサイト]を選択後、WebサイトのURLを入力します。最後に、開発中のボタンを有効化します。アプリIDをコピーし、Emanon設定のFacebookアプリIDの項目に反映してください。

ウエブサイトの登録

Twitterカード

Twitterカード用OGPタグを有効にすると、< head >にTwitterカード用OGPタグを出力します。Twitterカードのデザインは2種類から選べます。

Summaryカード

Summaryカード

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

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

Card ValidatorでTwitterカードの表示を検証できます。なお、Twitterカードの反映に時間がかかるケースがございますので、ご注意ください。

Card Validator