WPlogs

WordPressを中心にWeb関連の情報発信。PHP、CakePHP、HTML5、SEOなど。 ※旧名称「SEO人」、旧URL「http://seo.net-luck.com/」

*

WordPressプラグイン「Open Graph Pro」でOGP対応

      2016/02/20

WordPressプラグイン

出典:http://www.flickr.com/photos/smemon/4850586965/

FacebookなどのSNSで「いいね!」された際などに、タイムラインに投稿される形式の共通仕様を「OGP(Open Graph Protocol)」という。

「OGP(Open Graph Protocol)」は、htmlタグ、headタグ、metaタグで以下のように設定を行う。

この仕様を理解し、正しく設定しておくことで、FacebookなどのSNSできれいに整形された内容でタイムラインへ投稿されることはもちろん、更なる拡散へ繋がります。

ちなみに、当ブログ「SEO人」のURLをFacebookのタイムライン投稿した場合の見栄えはこちら。

Open Graph Pro

アイキャッチ画像や、説明文が正しく表示されていますね。

今回はその「OGP(Open Graph Protocol)」を簡単に設定できるプラグイン「Open Graph Pro」の設定方法。

なお、今回のバージョンは以下です。

  • WordPress 3.8.1
  • Open Graph Pro 1.0

スポンサード リンク

プラグイン「Open Graph Pro」のインストール

まずは、「Open Graph Pro」をインストールする。

「プラグイン」⇒「新規追加」を開き、「Open Graph Pro」を入力し、「プラグインの検索」をクリックし、検索する。

Open Graph Pro

検索結果の「いますぐインストール」をクリックし、インストールする。

Open Graph Pro

インストールしたら、「プラグインを有効化」をクリックし、プラグインを有効化する。

Open Graph Pro

プラグイン「Open Graph Pro」の設定方法

プラグインを有効化したら、「設定」⇒「Open Graph Pro」を開き、設定画面へ。

こちらで全ての設定を行うことができる。

Open Graph Pro

設定項目と設定値はこちら。

  • Set Object Type to(タイプを選択)…「Blog」(og:type)
  • Replace Header Image with(画像をURLで指定)…画像URL(og:image)
  • Use Header Image only(指定した画像のみ使用)…チェックオン
  • Admin User(s)(FacebookユーザーID)…FacebookのユーザーID
  • Application ID(FacebookアプリケーションID)…FacebookのアプリケーションID
  • Turn Open Graph on(OGP対象を指定)…チェックオン

FacebookのユーザーIDと、アプリケーションIDが必要なので、Facebook開発者サイトで開発者登録し、ページ用のアプリケーションを作成しよう。

また、自分のFacebookのユーザーIDは、Graph APIエクスプローラで確認できる。

各項目の設定後は、デバッガーで自分のURLを入力し、正しく反映されるか確認しよう。

以上です。

参考サイト

Open Graph Pro – OGPに対応したメタタグを出力するWordPressプラグイン | ネタワン
WordPressサイトのFacebookのOGP設定 – Open Graph Proの使い方 | WP SEOブログ

 - WordPressプラグイン