• RSS

[WP]「Open Graph Pro」プラグインによるWordPress のOGP 設定方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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」プラグインによるWordPress のOGP 設定方法

認証を済ませれば必要な情報を入力した上でアプリを完成させます。
「Open Graph Pro」プラグインによるWordPress のOGP 設定方法

Open Graph Pro を設定する上で必要になる アプリID / APIキー を覚えておきます。
「Open Graph Pro」プラグインによるWordPress のOGP 設定方法

Facebook ユーザーID の確認

続いて所有するFacbeook ページ名を、以下のように末尾に付けて
http://graph.facebook.com/Facbeookページ名
にアクセスし、ページ内で表示されるid の文字列を覚えておきます。

「Open Graph Pro」プラグインによるWordPress のOGP 設定方法

Open Graph Pro の設定

ここでWordPress 管理画面の Open Graph Pro ページに戻り、各プロパティの設定を行っていきます。

Object Type

og:type の設定です。セレクタの中から適切なタイプを選びます。
「Open Graph Pro」プラグインによるWordPress のOGP 設定方法

Image

og:image の設定です。「Replace Header Image with」には、記事に画像がない場合などの代替イメージURL を設定します。
「Open Graph Pro」プラグインによるWordPress のOGP 設定方法

この優先順位ですが、
(1)アイキャッチがあれば「アイキャッチ」
(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 として使うことができます。
「Open Graph Pro」プラグインによるWordPress のOGP 設定方法

Facebook

上記「Facebook 側の下準備」で作成したアプリの「Admin User(s)」と「Application ID」をそれぞれ入力します。
「Open Graph Pro」プラグインによるWordPress のOGP 設定方法

Admin User(s) :
名称がややこしいですが、
http://graph.facebook.com/Facbeookページ名
を打ち込んで表示された「id(ユーザーID)」の数字を入力します。
※本当は必要ですが、スキップしてもプラグインの設定自体は完了します。


Application ID :
こちらは Facbeook アプリの「アプリID / APIキー」の数字です。


これで Open Graph Pro の設定は終了です。


Facebookデバッガー でOGP設定を確認しよう

正常にOGP 設定が反映されているかどうかは、Facebookデバッガー を使うと便利です。
「Open Graph Pro」プラグインによるWordPress のOGP 設定方法


URLを打ち込んで「デバッグ」ボタンをクリックすると結果を返してくれます。
「Open Graph Pro」プラグインによるWordPress のOGP 設定方法

「修正する必要があるエラー」のように表示されたらエラーの内容に従って修正を行い、再チェックしましょう。



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください