ぱろっと・すたじお

技術メモなどをまったりと / my site : http://parrot-studio.com/

今さらOGPとTwitterCardについて調べてみた

Social ccpts

Facebookのような「THE・リア充空間」に全く縁のない私ですが、
最近になってやっと「Open Graph protocol」（OGP）というものの存在を知りました


The Open Graph protocol

最近はてなにRO（+α）のBlogを移転して気づいたのですが、
URLを貼り付ける際に開く選択で、「埋め込み形式」ってのがあります

例えばこんな感じで(´･ω･)っ


新しいスマフォゲーを試そう・その1 - あるネットゲーマーの日常

当然、この方が見栄えがいいし、
この形式が並んでいる中に非対応のサイトがあると、
浮いて見えたり目立たなかったりするわけです
（ゲームのBlogで画像多めなので余計に）

なので、「埋め込みが可能になる条件」を調べていて、
たどり着いたのがOGPだった・・・というわけです


「ブログカード」をOGPなどに対応しました。さまざまなWebページをコンパクトに整形して掲載できます - はてなブログ開発ブログ

これを見ると、まだ対応して数ヶ月ってレベルだったんですね・・・
Blog移転が10月だったので、いいタイミングでした(｀･ω･´) ｂ

さて、私が最近作っているサイトに、
「チェンクロパーティーシミュレーター」というものがあるのですが、
これもOGPに対応させてみました


Get our light! - チェンクロパーティーシミュレーター

自分のBlogで紹介する際、埋もれてしまうのが気になったので・・・(´-ω-)

とはいえ、対応そのものはタグの追加だけなので楽です

<meta property="og:site_name" content=“サイトの名前" />
<meta property="og:title" content="記事タイトル" />
<meta property="og:type" content="website" />
<meta property="og:image" content="記事画像" />
<meta property="og:url" content=“記事のURL" />
<meta property="og:description" content="記事の概要" />

https://github.com/parrot-studio/cc-pt-viewer/blob/master/app/views/layouts/application.html.erb

今回は1ページしかないので適当に書きましたが、BlogなどのCMSでは、
自動でこのあたりのタグを生成する仕組みにすればいいわけです

・・・と、これだけでも十分だったのですが、
はてなBlogにTweetを貼り付けたところ、このように見えました

post内容の下にBlogの概要が表示されています

おそらくOGPが絡んでいるのだろうと、自分のサイトをpostしてみても、
このようには見えなかったので、調べてみました


Twitterカード | Twitter Developers

このように、タグを追加して「申請」しないとダメだそうで(´-ω-)

とはいえ、OGPに対応しておけば、追加するタグはシンプルです

<meta name="twitter:site" content="@parrot_studio">
<meta name="twitter:card" content="summary">

これだけΣ(ﾟДﾟ)ｶﾞｰﾝ

申請も面倒なのかな・・・と思ったら、わりと簡単でした
（ただし、反映されるまでに少々時間がかかります）


Twitter Cards利用申請 - Qiita

するとこのようになります

これだけで「できるサイト」っぽくなって素敵ですね(`･ω･´)


最近、（いいか悪いかは別として）ニュースをまとめるサイト・アプリが増えていますが、
そこで「埋もれないために」、このような仕組みに対応することも必要かと思います

例えば、私がよく見ているMSNのニュースサイトはこのようなデザインです

http://www.msn.com/ja-jp/news

少なくともOGPに対応していない限り、
「画像付きの見出し」にはならないはずです

これに気づいただけでも、
はてなBlogに移行した価値があったかな・・・と思ってます



むしろ問題は、「この（技術っぽい）Blog」と「RO（＋α）のBlog」、
どっちが「私にとってのメインBlogか？」ってことで・・・Σ(・ω・ノ)ノ