OGPの設定をしました(metaタグのみで簡単導入)

2013/03/16

FacebookなどでWebページがシェアされた場合に表示される情報をきちんと設定しておくためのOGP(Open Graph Protocol)ですが、今まで完全に忘れていたので当サイトにも導入しました。

導入していない場合と比べ、表示される内容をしっかり制御できるのと、何よりシェアされた情報がその人とフレンドリンクしている人のウォールにも表示されるので拡散効果が大きいですね。

導入前

導入後

OGPの導入方法についてはOpen Graph protocol - fb.developers'+などの他、多くのサイトやブログ等で紹介されているので割愛しますが、いくつかポイントを書いておきます。

og:typeの"website"や"blog"はサイト全体を表すのでトップページでのみ指定すべき

それ以外のページは"article"にしましょう。

指定する画像がない場合はサイトロゴを指定する。小さな画像は指定不能

画像があるとそれだけで目を引きます。また画像は最低でも200 x 200px必要です(Facebookの場合)。

OGPを設定したらデバッガツールで確認

Facebookがデバッガツールを提供してくれています。OGPが適切に設定されていない場合、どこをどのようにすべきか教えてくれます。

ちなみに当サイトのトップページのOGPは以下のとおりです。

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

<head>
:
  <meta property="og:title" content="Life with IT" />
  <meta property="og:description" content="プログラマ + インフラエンジニアによる技術情報発信や日々雑感など" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="http://l-w-i.net/" />
  <meta property="og:image" content="http://l-w-i.net/img/logo_256.png" />
  <meta property="og:site_name" content="Life with IT" />
  <meta property="fb:admins" content="kogurek1" />
: