WordPressのブログをOGPに対応させる方法

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

もう少しプログラムで処理するなどの細かい微調整はやっていきたいのですが、当ブログでもOGP 対応のために最低限の整備を施しました。

「OGPって何?」「OGP対応と言っても何をすれば良いの??」については http://d.hatena.ne.jp/amachang/20110117/1295233078 などのサイトで詳しく説明されていますので、こちらも参考の上、対応を進めていかれることをオススメします。

WordPress でのOGP対応

WordPressを利用したサイトの場合ですが、
WordPressのプラグインを使用する」か「自らソースを書く
の2 パターンになるかと思いますので、今回はそれぞれの方法について順を追って説明させていただきます。


(1)プラグインを利用する

まずはプラグインを利用する方法ですが、WP-OGP プラグインを導入すれば簡単にOGP 対応を行うことができます。

WP-OGP のインストール

WordPress管理画面のプラグイン検索で「WP-OGP」で検索すればヒットしますので、そのままインストールしてプラグインを有効化します。

WP-OGP プラグインを有効化してしまえば、ソースの <head> 内に自動的に以下(2)で紹介するような <meta property=””> の記述が追加されます。

WP-OGP の設定

プラグインの設定方法ですが、
fb:appid:
fb:admins:
の2 点を設定するだけで、そのままブログ(サイト)のOGP 対応が出来てしまいます。
WordPressのブログをOGPに対応させる方法

このプラグインが便利な点が、例えばブログの場合、トップページだけでなく各エントリーのページなど ページに応じた<meta>情報が出力されることと、管理画面での設定が凄く簡単なので、WordPress ブログを運用する上ではWP-OGP を使うことでOGP 対応は問題ないかと思います。


(2)手動でOGP 対応する

次に手動で設定する場合ですが、
wp-contents/themes/テーマ名/head.php
<head> 内に、以下のような記述を行います。
<meta property="fb:admins" content="" />
<meta property="fb:app_id" content="" />
<meta property="og:title" content="IMAGINATION DESIGN BLOG" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://www.imaginationdesign.jp/_common/img/common/OGP.png" />
<meta property="og:url" content="https://www.imaginationdesign.jp/blog/" />
<meta property="og:site_name" content="IMAGINATION DESIGN BLOG" />
<meta property="og:description" content="WordPress、Mac.の情報を中心に紹介します。Wordpressのプラグインの紹介、Twitter Facebookなどのソーシャルメディアとの連携…(以下省略)" />
それぞれ「content=””」内を、ブログやサイトの中身に合わせて記述していくのですが、
http://developers.facebook.com/docs/opengraph/
http://d.hatena.ne.jp/amachang/20110117/1295233078
などのサイトを参考に、必要な情報を穴埋めしてくと良いと思います。

fb:admins

Facebookページアプリのユーザー名

fb:app_id

FacebookページアプリのID

og:title

「サイトのページタイトル」です。ブログなどの場合は、各エントリーに合わせたタイトルの振分処理をしてあげるとより効果的です。

og:type

「サイトの種類」です。ブログであればblog、ホームページであればwebsiteなどを記述します。

但しこのtype に関してはある程度決まったパターンがありますので、http://developers.facebook.com/docs/opengraph/#types より適切なtype を選択して記述します。

og:image

「サイトの(サムネイル)画像」です。Facebook であればウォールにプロフィール画像(アバター)が並ぶと思いますが、このサイトが一目見て何のサイトなのか?が分かるような画像を設定しておくのが良いです。

画像はサイト内の任意の場所に置いて、その画像の設置場所であるURLを記述してあげます。

og:url

「サイトのURL」

og:site_name

「サイトの名称」

og:description

「サイトの紹介文」


(3)OG P設定が正常に行われたかどうかを確認する

設定は終えたものの、WEB上で正常に反映されているのか?を確認する術としては、例えばFacebook よりウォールの投稿で「リンク」を貼ってチェックしてみる、という地道な作業があります…。

ただこの方法だと、正常に反映されていない場合の原因を突き止めることができないので Facebook のURLリンターを利用することをオススメします。

Facebook のURLリンター

より、自分のブログ(サイト)のURLを入力して「Lint」ボタンをクリックします。
WordPressのブログをOGPに対応させる方法

エラーが出れば、どの記述が間違っているか?を丁寧に返してくれますし、設定内容に問題なければ、以下のように正常に結果を返してくれます。
WordPressのブログをOGPに対応させる方法

Facebook の影響もあり、企業ホームページを含めた各種WEBサイトで、確実にOGP 対応が進んでいますね。

WordPress を利用したブログ、サイト制作においても、当然「待ったなし」の状況だと言えると思います。

Faceboo kに関しては、仕様変更に応じて今後はどうなるか?にも注視していかなければならないので、当ブログでも継続してOGP 対応に取り組んでいこうと思います。

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

この投稿と関連する記事一覧

この記事に関するコメント

コメントを残す

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