WordPressのFacebook用OGP出力テンプレート
Category
WordPress
WordPressでFacebook用にOGPを出力するには、「WP-OGP」「WP-OGP Customized」「Open Graph Pro」等いろいろ便利なプラグインがありますが、どれも思ったような出力をしてくれなかったり、デバッガーでエラーが出力されることもよくあります。
Facebookの仕様変更も多く、それにプラグインが対応していないことも原因の一つです。
ここ最近の仕様変更でいうと、「og:imageのサイズが200px×200px以上に変更」「og:localeが自動で付加されるようになった」「og:descriptionの指定を推奨」「fb:adminsもしくはfb:app_idの指定を推奨」といったところでしょうか。
私も以前は「WP-OGP」を使用していたのですが、プラグイン自体が更新されていないこともあり、プラグインファイルの改修が必要でした。
Facebookの仕様変更ごとに、プラグインが動かなくなったり、デバッガーでエラーが出力されるのが面倒になってきたので、WordPressでFacebook用にOGPを出力するテンプレートを作ってみました(「プラグインがうまく動かん...」といった方は参考にしてみてください)。
Keyword:Facebook,OGP出力テンプレート
2012.6.2現在でのFacebookの仕様で作成しています。
※新たな仕様変更が発生することもありますので、その点ご了承ください。
以下の手順で説明していきます。
※テキストリンクをクリックすると、その箇所までページがスクロールします。
- FacebookのアプリケーションIDを取得する
- FacebookのユーザーIDを確認する
- OGPを出力するテンプレートファイルを作成する
- OGP用のカスタムサムネイルサイズを作成する
- デバッガーで出力内容をチェックする
FacebookのアプリケーションIDを取得する
以下にアクセスします。
※Facebookへのログインが必要です。
⇒ Facebook -Developers-
1.アプリケーションを作成
App Nameにアプリケーション名を入力し”続行”ボタンをクリックします。
2.セキュリティチェック
表示されたテキストを入力し”送信”ボタンをクリックします。
3.アプリケーションの設定
App IDが表示されますので、控えておきましょう。
必要な項目を入力して”変更を保存”ボタンをクリックします。
“アプリケーションを作成”といっても、今回の場合、実際アプリを作る必要はなく、”設置したいサイトの情報をFacebookに登録する”のみでOKです。
「Display Name」「連絡先メールアドレス」「App Domains(自分のサイトのドメイン)」「Website with Facebook Login(自分のサイトのURL)」くらいでいいと思います。
FacebookのユーザーIDを確認する
FacebookのユーザーIDを確認します。
以下にアクセスします。
⇒ https://graph.facebook.com/ユーザー名
“ユーザー名”の箇所には、自分のFacebookのアカウントを入力します。
Firefox等のブラウザでは、ブラウザ上にFacebookのアカウント情報が表示されます。一番上の”id”の箇所に表示されているのがユーザーIDです。
Internet Explorerの場合は、jsファイルがダウンロードされるので、そちらを確認してください。
OGPを出力するテンプレートファイルを作成する
WordPressでFacebook用にOGPを出力するテンプレートを作成します。
※header.phpの任意の箇所に記述してください。
当テンプレートは以下に対応しています。
- og:type…TOPページとその他のページタイプ
- og:title…全ページのタイトル
- og:image…アイキャッチ画像もしくは指定画像を表示
アイキャッチ画像を設定していない場合は指定の画像を表示。
使用中のサムネイルサイズを変えずにOGP用にカスタムサイズを使用。
※これは、og:imageが200px×200px以上に変更されたことへの対応です。 - og:url…全ページのURL
- og:site_name…サイト名
- og:description…抜粋(文字数指定)もしくはWordPressに設定済みの
- fb:admins…ユーザーID
- fb:app_id…アプリケーションID
[2012.7.1追記]
当テンプレート使用時の注意点
当テンプレートを使用してFacebookの「Like Box」や「Like Button」を設置する際は、Facebook Developersによって提供されているツールからコードを取得し、開始のbodyタグ直下にJavaScript SDKを含めた上で、「Like Box」や「Like Button」を表示させたい箇所にプラグインのコードを配置することで、問題なく「Like Box」や「Like Button」を表示させることができます(※プラグイン等で「Like Box」や「Like Button」を設置している場合、プラグインが出力するJavaScript SDKやプラグインのコードには違いがあるため、「Like BoxやLike Buttonが表示されなくなったぞ?」といった場合は試してみてください)。
▼Facebook Developersツールには以下よりアクセスできます。
⇒Like Box ⇒Like Button
また、TOPページを固定ページに設定している場合、条件分岐を変更するようにしてください(“is_home”の箇所を”is_page(‘ID’)”とし、TOPページとして使用している固定ページのIDを指定する等、方法はいくつかあると思います)。
header.php
<!-- BEGIN:OGP --> <?php if (is_single() || is_page()) { ?> <?php while (have_posts()) : the_post(); ?> <meta property="og:title" content="<?php the_title(); ?>|<?php bloginfo('name'); ?>" /> <meta property="og:type" content="article" /> <meta property="og:image" content="<?php if (has_post_thumbnail()) { $custom_thumbnail = get_post_thumbnail_id($post->ID); $image = wp_get_attachment_image_src($custom_thumbnail, '○○○○○'); echo $image[0]; } else { echo 'http://www.~'; } ?>" /> <meta property="og:url" content="<?php the_permalink(); ?>" /> <meta property="og:description" content="<?php echo mb_substr(get_the_excerpt(), 0, 150); ?>..." /> <?php endwhile; ?> <?php } elseif (is_home()) { ?> <meta property="og:title" content="<?php bloginfo('name'); ?>" /> <meta property="og:type" content="blog" /> <meta property="og:image" content="http://www.~" /> <meta property="og:url" content="<?php bloginfo('url'); ?>" /> <meta property="og:description" content="<?php bloginfo('description'); ?>" /> <?php } else { ?> <meta property="og:title" content="<?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?>" /> <meta property="og:type" content="article" /> <meta property="og:image" content="http://www.~" /> <meta property="og:url" content="<?php echo get_bloginfo('url').$_SERVER['REQUEST_URI']; ?>" /> <meta property="og:description" content="<?php bloginfo('description'); ?>" /> <?php } ?> <meta property="og:site_name" content="<?php bloginfo('name'); ?>" /> <meta property="fb:admins" content="○○○○○○○○○○○○○○○" /> <meta property="fb:app_id" content="○○○○○○○○○○○○○○○" /> <!-- END:OGP --> <!-- 通常サムネイルをOGPに使用 --> <meta property="og:image" content="<?php if (has_post_thumbnail()) { $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID)); echo $thumbnail[0]; } else { echo 'http://www.~'; } ?>" />
補足
2行目の条件分岐で、投稿ページと固定ページにのみ適応します(3~9行目はループ)。
4行目でog:titleを指定します。
※“ページタイトル|サイト名”で表示。
5行目でog:typeを指定します。
※投稿ページと固定ページは”article”を指定。
6行目でog:imageを指定します。
WordPressでアイキャッチ画像を設定している場合はアイキャッチ画像を表示し、アイキャッチ画像を設定していない場合は任意の画像を表示します。
「echo ‘http://www.~’」のURLの箇所には、アイキャッチ画像を設定していない場合に表示する画像のパスを記述してください。
「$custom_thumbnail, ‘○○○○○’」の○の箇所には$handleを記述します。
$handle(ハンドル)とは、サムネイル画像のサイズ名のことです。
次の項目”OGP用のカスタムサムネイルサイズを作成する”で説明しますが、WordPressのサムネイル画像サイズをFacebookのOGP指定サイズである200px×200px以上に設定している方は少ないと思います。サムネイル画像のサイズとしては大き過ぎるからです。この対策として、現在WordPressで設定しているサムネイルサイズは変えずに、OGPにのみカスタムサイズを出力するようにします。
カスタムサムネイルサイズの画像パスを取得する際のポイント
“get_post_thumbnail_id”は、投稿記事に使用されているサムネイル画像のIDを取得します。”wp_get_attachment_image_src”は、画像のURLを取得します。
変数は、カスタムサイズ用の変数にします。
“$thumbnail”ではなく、$custom_thumbnail等を任意に作成します。
また、サムネイルを出力する”$thumbnail[0]; “もこのままでは通常のサムネイルが出力されてしまいますので、”$image[0];”等を任意に作成します(※通常サイズのサムネイルを指定する場合は、反転表示されている28~29行目のように記述します)。
7行目でog:urlを指定します。
8行目でog:descriptionlを指定します。
各記事の抜粋を表示します。
“mb_substr(get_the_excerpt(), 0, 150)”で150文字まで表示されます。
10行目の条件分岐で、TOPページにのみ適応します。
og:titleはサイト名、og:typeは”blog”、og:urlはTOPページ、og:descriptionはWordPressに設定済みのキャッチフレーズ(サイトの説明)を指定しています。
og:imageの「content=”http://www.~”」のURLの箇所には、任意の画像のURLを記述してください。
16行目の条件分岐で、上記以外のページに適応します。
※アーカイブページ等です。
og:titleは”ページタイトル|サイト名”、og:typeは”article”、og:urlは各ページのURL、og:descriptionはWordPressに設定済みのキャッチフレーズ(サイトの説明)を指定しています。 og:imageの「content=”http://www.~”」のURLの箇所には、任意の画像のURLを記述してください。
20行目の”$_SERVER[‘REQUEST_URI’]”という変数は、ドメインを除いた現在表示しているページのURIを返します。”get_bloginfo(‘url’)”と合わせて使用することで、表示しているページのURLを指定できます(※サーバーの環境によって使用できない場合もあります)。
23行目のog:site_nameは、WordPressに設定済みのサイト名を指定しています。
24行目と25行目の”○○○○○○○○○○○○○○○”の箇所には、ユーザーIDとアプリケーションIDを記述してください。
OGP用のカスタムサムネイルサイズを作成する
通常に設定しているサムネイルサイズ以外でOGPにog:imageを出力したい場合は、カスタムサムネイルサイズを使うようにします。Facebookのog:imageの指定サイズは200px×200px以上です。ですが、WordPressで使うサムネイルサイズとしては少々大き過ぎます。このような場合、WordPressでは通常サムネイルサイズを使い、FacebookのOGP用にはカスタムサムネイルサイズを使用します。
functions.phpに以下を追記します。
functions.php
//OGP用にカスタムサムネイルサイズを追加 add_image_size('○○○○○', 200, 200, true);
補足
“○○○○○”の箇所には任意のハンドル(サムネイル画像のサイズ名)を記述します。
“custom_size”等と記述します。
“200, 200″にサムネイル画像の幅と高さを指定します。
“ture”で切り抜きモードを有効にします。
WordPressでアイキャッチ画像を使用するには、サーバーにサムネイル画像がアップロードされている必要があります。今回の場合ですと、OGP用の200px×200pxの画像のことですね。記事の投稿画面で設定可能ですが、全ての記事の画像をいちいち設定してられません…。そこでおすすめなのが、サムネイル再生成プラグインの「Regenerate Thumbnails」です。
以下にアクセスしてダウンロードしてください。
⇒ Regenerate Thumbnailsダウンロード
プラグインを有効化して、Regenerate Thumbnailsの画面を開き、”Regenerate All Thumbnails”ボタンを押すだけです(※サムネイル画像が多い場合はしばらく時間がかかります)。
サーバー上にOGP用のサムネイル画像が生成されているか確認します。
FTP等でアクセスし、wp-content/uploads内にWordPressの管理画面からアップロードされた画像が保存されているか確認します(※今回の場合でいうと、Regenerate Thumbnailsプラグインで再生成した”ファイル名-200×200.jpg”といった画像があるか確認すればOK)。
デバッガーで出力内容をチェックする
Facebookのデバッガーツールにアクセスしてチェックします。
以下にアクセスしてください。
⇒ デバッガー -Facebook-
確認したいページのURLを入力して”デバッグ”ボタンをクリックします。
Facebookサーバー側のキャッシュの問題で、デバッグツールを使ってもキャッシュがクリアされない場合があります。そんな時は数日置いてからデバッガーでチェックしましょう。
▼問題なければこのような画面が表示されます。
※画像をクリックすると拡大表示されます
関連記事(※当記事と関連性が高いと思われる記事)
FacebookのOGP(更新版)
2012/02/28
FacebookのOGPの記事を更新
2012/06/02
Facebookページ
2012/02/23
WordPressのアイキャッチ画像
2012/04/12
Facebookを非同期通信で読み込む
2012/05/28
おすすめ書籍・商品(※当記事と関連性が高いと思われる書籍・商品)