[WP]「Open Graph Pro」プラグインによるWordPress のOGP 設定方法
スポンサード
アプリ名を入れて、
認証を済ませれば必要な情報を入力した上でアプリを完成させます。
Open Graph Pro を設定する上で必要になる アプリID / APIキー を覚えておきます。
この優先順位ですが、
Facebook
上記「Facebook 側の下準備」で作成したアプリの「Admin User(s)」と「Application ID」をそれぞれ入力します。
Admin User(s) :
名称がややこしいですが、
※本当は必要ですが、スキップしてもプラグインの設定自体は完了します。
Application ID :
こちらは Facbeook アプリの「アプリID / APIキー」の数字です。
これで Open Graph Pro の設定は終了です。
URLを打ち込んで「デバッグ」ボタンをクリックすると結果を返してくれます。
「修正する必要があるエラー」のように表示されたらエラーの内容に従って修正を行い、再チェックしましょう。
スポンサード
WordPressの管理画面内でOGP 設定を一元管理したい場合に便利なプラグイン Open Graph Pro のご紹介です。
Facebook との連携部分が少々ややこしいため、本ブログ記事の序盤をFacebook の設定、後半を Open Graph Pro という具合に順を追って設定方法を紹介致します。
目次
Open Graph Pro のインストール
管理画面のプラグイン新規追加より Open Graph Pro を検索するか、以下のページよりプラグインファイルをダウンロードします。Facebook 側の下準備
Open Graph Pro を設定する上で、Facebook 関連のIDが2 ケ必要になってきますので、先にFacebook アプリと Fcebook ページで下準備しておきます。Facebook アプリID / APIキーの確認
まず最初に https://developers.facebook.com/ より、Facebook アプリを作っておきます。アプリ名を入れて、
認証を済ませれば必要な情報を入力した上でアプリを完成させます。
Open Graph Pro を設定する上で必要になる アプリID / APIキー を覚えておきます。
Facebook ユーザーID の確認
続いて所有するFacbeook ページ名を、以下のように末尾に付けてhttp://graph.facebook.com/Facbeookページ名
にアクセスし、ページ内で表示されるid の文字列を覚えておきます。Open Graph Pro の設定
ここでWordPress 管理画面の Open Graph Pro ページに戻り、各プロパティの設定を行っていきます。Object Type
og:type
の設定です。セレクタの中から適切なタイプを選びます。Image
og:image
の設定です。「Replace Header Image with」には、記事に画像がない場合などの代替イメージURL を設定します。この優先順位ですが、
(1)アイキャッチがあれば「アイキャッチ」
(2)アイキャッチがなくて、投稿記事に画像があれば「投稿画像の1枚目」
(3)アイキャッチも投稿画像もなければ、「Replace Header Image with」で設定した画像
の順に適用されるようです。(2)アイキャッチがなくて、投稿記事に画像があれば「投稿画像の1枚目」
(3)アイキャッチも投稿画像もなければ、「Replace Header Image with」で設定した画像
Header Image
「Use header image only, i.e. do not look for images in posts or pages」にチェックを入れると、「Replace Header Image with」で設定した画像を常にog:image
として使うことができます。Admin User(s) :
名称がややこしいですが、
http://graph.facebook.com/Facbeookページ名
を打ち込んで表示された「id(ユーザーID)」の数字を入力します。※本当は必要ですが、スキップしてもプラグインの設定自体は完了します。
Application ID :
こちらは Facbeook アプリの「アプリID / APIキー」の数字です。
これで Open Graph Pro の設定は終了です。
Facebookデバッガー でOGP設定を確認しよう
正常にOGP 設定が反映されているかどうかは、Facebookデバッガー を使うと便利です。URLを打ち込んで「デバッグ」ボタンをクリックすると結果を返してくれます。
「修正する必要があるエラー」のように表示されたらエラーの内容に従って修正を行い、再チェックしましょう。
スポンサード
コメント