ソーシャル時代に重要なOGPを設定してくれるWordPressプラグインOpen Graph Proの設定法

Pocket

Share on Tumblr

以前、ソーシャル時代にブログにOGPを正しく設定することの非常に重要な 2つの意味 | INTERNET　HACK（インターネット・ハック）.においてOGPを正しく設定する重要性を記事にしました。

今回はそのOGP(Open Graph Protocol)の設定方法を述べたいと思います。

上記リンクでも述べましたが、ソーシャルメディア全盛の時代において、記事の画像、概要が正しく反映されるのとそうでないのとでは印象が全く違います。

OGPの設定方法には2つの方法があります。

① header.php にOGPの設定を直接記述する方法
② プラグイン「Open Graph Pro」を利用する方法

今回は、プラグイン「Open Graph Pro」を利用する方法を紹介します。

よく使われるプロパティ属性

プロパティ属性	意味
og:title	ページのタイトル
og:site_name	サイト名
og:type	ページの種類
og:image	ページを表す画像
og:url	ページのURL
og:description	ページの説明
og:locale	国と言語を設定
fb:admins	FacebookのユーザーID
fb:app_id	FacebookのアプリID

１．管理画面よりプラグイン「Open Graph Pro」を検索し、インストール後、有効化

２．管理画面メニューで「設定」→「Open Graph Pro」を選択し、「Open Graph Pro Settings」画面を表示

３．「Object Type」の項目でサイト全体の種類を選択

ブログサイト：ブログ

４．image欄にFacebookのニュースフィードに表示される画像を設定

何も指定しない　→　アイキャッチ画像が指定。
アイキャッチ画像がない　→　記事の本文に含まれる画像が指定。
記事本文に画像がない　→　カスタムヘッダーのヘッダー画像かデフォルトの画像として指定した画像が表示。

５．Facebook欄でユーザーID[Admin User(s)],アプリID[Application ID]を設定

５．１FacebookユーザーIDの取得方法

プロフィール・ページの http://www.facebook.com/profile.php? id=ユーザーIDのユーザID部分から。

通常の人はこれで問題はない。

僕のようにユーザーネーム（ユニークURL)をしている場合は下記のURLにアクセスしてユーザーIDを取得

https://graph.facebook.com/ユーザーネーム

５．２　Facebook App ID取得方法

Facebook開発者ページへアクセス
https://developers.facebook.com/

上部の[Apps]をクリック→ページが現れたら「新しいアプリを作成」ボタンをクリック。

アプリ名：サイト名など任意の名前
カテゴリ設定後、「続行」。セキュリティチェック後、基本設定画面が現れる。

「アプリをFacebookに結合する方法を選択」欄の「Facebookでログインが可能なウェブサイト」にサイトのURLを入力し、App Domainsにhttp://を抜いたドメイン名 internet-hack.ki-blog.biz を入力。

変更を保存」。

上部に現れるApp IDを「Open Graph Pro」のセッティング画面の[Application ID]に入力。

６．header.phpにhtmlタグにOGPの属性を追記。

OGPは、HTMLとは異なる規格のため、にxmlns属性を追加し、OGPの使用を明示しておく。

[html]xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">[/html]

まずは、個別記事のソースコードを確認し、上記のxmlns属性が記述されているかどうか確認して下さい。

以上で設定完了。

７．記事の個別ページのソースを確認する

記事の個別ページのソースを確認すると、<head>~</head>内にOGPで記述したメタ情報が出力されているかを確認。

７．デバッガーで設定の確認
デバッガーにアクセス
http://developers.facebook.com/tools/debug

個別記事URLを入力し確認
OGP設定が正しく反映していれば、画像と記事の概要が表示される。

僕の場合、最初、OGPが二重に出るというエラーが出た。
ソースコードを見ると確かにOGPが２つ出力されていた。

WordPressでいつの間にかJetpackがgo:urlを吐き出してたから２重になってデバッガーでエラーになっていた！の解消法 |.
WordPressのOGPのエラーが出る場合の直し方.

を参考に、僕の場合、Jetpackを使用していたので、手直しし、Facebook関係ではその名もFacebookというプラグインが邪魔していたようなので、無効にすると上手く行った。
ちなみに、Jetpackとは、WordPress.comが開発した多機能なプラグインであり、Facebookは、Facebook公式のこれまた便利なプラグインだ。