OGPの事例について〜coobooの場合〜 - VTuberになったプログラマーの魂の残滓

こんにちは！こんにちは！
さて、ものすごいブクマ数を稼いでいるid:amachangのこの記事ですが、非常に分かりやすいですね。

せっかくなのでcoobooにおけるOGPの事例というのを簡単に紹介してみたいと思います。

作品詳細ページにOGPと「いいね！」ボタンを設置

例として下記のページを見てみましょう

サイトウサンTシャツ（積分）　女性Mサイズ | 洋服（洋装） | かえる

このページのソースコードを見ると下記のようになっています

<meta property="og:site_name" content="cooboo [こーぼー] :: 手作りの作品を披露する・売る・買う ハンドメイドコミュニティ" /> 
<meta property="og:title" content="サイトウサンTシャツ（積分）　女性Mサイズ | ファッション・アクセサリー &gt; 洋服（洋装） :: cooboo [こーぼー]" /> 
<meta property="og:type" content="article" /> 
<meta property="og:url" content="http://cooboo.jp/items/detail/11848" /> 
<meta property="og:image" content="http://cooboo.jp/img/item/10582/11848/L/b687b3079f8da85.jpg" /> 
<meta property="og:description" content="サイトウサンTシャツ（積分）　黒　XS（女性Mサイズ相当）

2008年度製作のTシャツです。
表ではサイトウサンが積分式（無限に増えるという意味の式です）、裏にはちょうちょとたわむれるサイトウサンが印刷されています。
インク色はすべて白です。
表記はXSとなっておりますが、男性基準でのXSで、女性だとぴったりめのMサイズ（またはゆったりめのSサイズ）Tシャツに相当します。
TシャツはUnitedAthleのものを使用しており、えりが伸びにくく、長持ちします。
" />

そしてページの下部には「いいね！」ボタンや「mixiチェック」なんかを設置しています。
それでは試しに「いいね！」してみましょう。

いいね！ボタンを押すとFacebookのニュースフィード上には次のように表示されます。

◯◯さんが「og:site_name」の「og:title」について「いいね！」と言っています

と表示されるようになります。
さらにこのページをFacebookで紹介してみましょう！

このようにOGPの内容をもとにリンクの中身を自動で補完してくれます
（OGPに対応していなくてもHTMLから適当な感じで補完はしてくれますが）

OGP対応しましょう！

OGPに対応することで何が嬉しいかと言うと「いいね！」された情報などをFacebookのインサイト情報で見ることが出来ます。

OGP対応とインサイトは厳密には直接の関係はないんですが、より情報を最適な形でシェアできるので対応しておいて損はないでしょう！
このスクリーンショットはインサイトで見られる情報の一部ですがインサイトでは他にも反応してくれた人の国名や使用言語などの統計情報も参照することができます。