Emanon設定 OGP | WordPress 有料テーマ Emanon Pro

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

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

<!--OGP-->
<meta property="og:locale" content="ja_JP">
<meta property="og:url" content="ページのURL">
<meta property="og:type" content="website">
<meta property="og:title" content="ページタイトル">
<meta property="og:image" content="OGP画像URL">
<meta property="og:image:alt" content="OGP画像のalt>
<meta property="og:description" content="ページのディスクリプション">
<meta property="og:site_name" content="サイト名">
<!--/OGP-->
<!--Facebook App ID-->
<meta property="fb:app_id" content="Facebook アプリケーション id">
<!--/Facebook App ID-->
<!--Twitter Card-->
<meta name="twitter:card" content="twitterカードのタイプ>
<meta name="twitter:image" content="OGP画像URL">
<meta name="twitter:image:alt" content="OGP画像のalt">
<meta name="twitter:site" content="Twitter ID">
<!--/Twitter Card-->

OGP
1. OGP画像の制御
2. Facebook application id取得方法
Twitterカード
1. Summaryカードの設定

OGP

WordPress管理画面＞ Emanon設定 > OGPをクリックすると下記の画面になります。

「OGPタグ」にチェックを入れ、OGP画像に1200px以上 x 630px以上の画像をアップロードしてください。「OGP画像」は、サイトのトップページやアーカイブページがSNSでシェアされた際に表示する画像です。

OGP画像が正しく反映されない

OGP画像（1200px以上 x 630px以上）のサイズに間違いがないかご確認ください。次に、下記SNSのキャッシュ削除やデバッガーツールに該当ページのURLを入れて、各SNSのキャッシュを削除してください

LINE
Facebook ※Facebookにログインが必要です。

OGP画像の制御

Emanon Proでは、FacebookやTwitterで投稿ページがシェアされた場合、記事のアイキャッチ画像をOGP画像として使用します。もし、記事にアイキャッチ画像がない場合、全般設定 > OGPで登録した「OGP画像」が表示されます。

Facebook application id取得方法

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

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

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

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

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

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

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

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

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

Twitterカード

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

Summaryカードの設定

「Twitterカード用OPG」にチェックを入れ、Summaryカードと大きな画像付きのSummaryカードのどちらかを設定することができます。Twitter IDには、ご自身が運用するTwitter IDを@から入力してください。