OGPというのは、Facebookなどの一部のSNSでシェアやいいねをしたときなどに抽出される、タイトルやサイト説明文、画像などのサイト概略を指定するためのプロトコルです。
とりあえずこんな感じで記述すればいいだろうというレベルですが設置方法をご紹介します。

OGPはFacebook社が規定するもので、世界標準ではないので明日どうなるかわからない仕様です。正しい情報をお求めの場合は以下の公式サイトから最新の仕様をご確認ください。

The Open Graph protocol 公式サイト（英語）
Open Graphリファレンス（英語）

具体例

<head prefix="og: http://ogp.me/ns#">
<meta property="og:title" content="ページタイトル">
<meta property="og:type" content="article">
<meta property="og:site_name" content="サイト名">
<meta property="og:url" content="ページURL（絶対パス）">
<meta property="og:image" content="ページOGP画像パス（絶対パス）">
<meta property="og:description" content="ページ説明文">
</head>

一般的なWEBサイトで、いいね！とシェアの時の見た目だけ変更できればいいやというレベルであればこのような感じになります。一点だけ注意点として、「og:type」に指定するObject Typesを自分のサイトにあわせて変更する必要があります。

Object Types

オブジェクトタイプは、タグを貼るページがどんな分類のページなのか？というのを明示するために設定します。指定できる値は、オブジェクトタイプ一覧（FB公式）にのっています。
色々ありますが、指定したいタイプがないな〜という時は以下のように設定すれば問題ないでしょう。

  • サイトトップページ → website
  • サイトトップ以外のページ → article

※「website」はサイト内で唯一つだけ設定します（例：http://example.com/index.html などのみに設定）

細かいこと

上のコードはhtml用のコードなので、xhtmlの場合は文法が少し違うのでそのまま使えません。

また、headのprefix属性はネームスペースogを利用するのがhead内だけなので、headにつけました。（詳しく勉強したい人はRDFaについて調べてみてください。）というか、実はネームスペースのogはデフォルトで読み込まれるため、指定しなくてもかまいません。