Pocket
LINEで送る



以前、ソーシャル時代にブログに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

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

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

Open_Graph_Pro_Settings_設定画面

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

ブログサイト:ブログ

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

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

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

5.1FacebookユーザーIDの取得方法

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

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

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

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

FacebookのユーザーID 編集後

5.2 Facebook App ID取得方法

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

Home_-_Facebook開発者

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

Facebook_Developers

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

基本設定-_Facebook_Developers

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

基本設定- Facebook Developers (1)
変更を保存」。

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

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

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

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

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

以上で設定完了。

7.記事の個別ページのソースを確認する

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

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

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

デバッガー成功画面

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

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

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

8.記事欄にある「いいね!」ボタンを実際にクリックしてみて、Facebook上の表示を確認してみる。

僕の場合、チェックしてみても上手く行きませんでした。
色々調べましたが、デバッガーで成功しているのに、Facebookニュースフィードに流れないという例は見当たらず、残念ながら解決できずでした。

(参照)

WordPressデザインブック3.x対応
WordPress 3.x 現場のワークフローで覚えるビジネスサイト制作

Pocket
LINEで送る