これからのサイトはFacebookやTwitter用にOpen Graph Protocolを設定しよう

雑記

OGPとは

Open Graph Protocolの略でFacebookやTwitterなどのSNSで使用する規定。
HTMLのHEAD部分に記述しておくことで、各SNSのプログラムにそのページがどんなページなのかを明確に伝えることが出来る。
例えば商品を扱うサイトで、各商品ページごとにOPGのimageを指定することでFacebookなどでイイネされた際に、
通常、どのページでイイネしてもサイトTOP画像等が表示されるが、そのページで紹介されている商品の画像をピンポイントで表示させることが出来る。
またOGPのdiscripsionも記述しておけば、そのページの商品の説明も同時に表示することができる。

記述方法

<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#">
  <head>
    <title>ページタイトル</title>
    <meta property="og:title" content="ページタイトル">
    <meta property="og:type" content="shopping">
    <meta property="og:description" content="商品の説明等">
    <meta property="og:url" content="http://www.example.com/category/item_001.html">
    <meta property="og:image" content="http://www.example.com/image/item_001.jpg">
    <meta property="og:site_name" content="http://www.example.com/">
    <meta property="og:email" content="example@gmail.com">
    <meta property="og:phone_number" content="090-1234-5678">
  </head>
  <body>

og:title
このウェブページが記述しているモノの名前（必須）
og:type
このウェブページが何のページであるかを記述（必須）
og:url
このウェブページの正式な URL（必須）
og:description
このウェブページの説明
og:image
このウェブページが記述しているモノの画像（必須）
og:site_name
このウェブページが何かのサイトに所属する場合そのサイト名
og:email
連絡先メールアドレス
og:phone_number
連絡先電話番号

WordPressの場合

既にたくさんのプラグインが存在します
Open Graph Pro
WP-OGP customized