2011/2/11

kosukekato.comをOGP(Open Graph Protocol)に対応させる

ちょっと面白い記事を見つけたので試してみました。

フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記

「いいね!」とかされる時のサイトの引用情報をブログのページ側で教えてあげれるよってことですね。上のキャプチャのようにタイトルと画像と概要がきちんと一致していると気持ちがいいですね。kosukekato.comではこんなコードで実現しました。

<meta property="og:title" content=" the_title(); ">
 if(is_single) { $excerpt = strip_tags(get_the_excerpt()); if (!empty($excerpt)) { echo '<meta property="og:description" content="'.$excerpt.'">'; }}
 if(is_single) { $image= get_post_meta($post->ID,'Flickr',TRUE); if (!empty($image)) { echo '<meta property="og:image" content="'.$image.'.jpg">'; }} 

うちは1枚目の画像の表示にカスタムフィールドでFlickrのURL指定しているので、ちょっと例外的ではありますが、逆にそうなっていたから指定がラクチンということもあり。

良かったらご自分のサイトでも試してみてください!

加藤 康祐 / 企画・設計

プランナー、デザイナー。加藤康祐企画設計代表。Webデザインを入り口に、2005年よりフリーランスとしてのキャリアスタート。主な仕事としてベンチャー企業でのサービスのUXデザイン、独法との防災メディアの運営、社会的養護の子どもたちの自立を支援するNPOのサポート。ラグビーと料理、最近イラスト。

加藤康祐企画設計

是非、フォローしてください!
Twitter / Instagram

(2012-10-5)
売り上げランキング: 14,705
100円