ソーシャルメディアにWebサイトが対応するためには、共有ボタンを配置するだけでなく、そのWebページに何が書かれているかを適切にソーシャルメディアに理解させる必要があります。そこには、見た目を重視していた従来のHTML記述とは別のテクニックが存在します。

セマンティックを記述する4つの仕様

 前回の記事で、Webサイトがソーシャルメディアに対応するためには、ユーザーに共有してもらうためのボタンを配置することに加えて、Webページをセマンティック化する必要がある、と解説しました。

 セマンティック化とは、Webページを「人間が見てわかるもの」だけでなく「ソーシャルメディアから見てもわかるもの」にすることを指しています。具体的には、ユーザーが共有ボタンを押して、ソーシャルメディア側のサーバーがそのWebページをクロールした際に、「何が書かれているか」をソーシャルメディア側のサーバーが理解可能な形で記述しておくことを意味します。

 セマンティックを記述するための仕様としては、現在は以下の4つが主流となっています。

  • Open Graph Protocol
  • HTML Flow elements
  • HTML Microdata
  • Schema.org

 これら4つの仕様について、今回から順に解説していきます。

 Webサイトの管理者は、これらの仕様を理解し、Webページに組み込むことで、ソーシャルメディアにおいて大きな効果を得ることが可能なコンテンツを生み出すことができます。トラフィックの増加はもちろん、そのWebページについてのソーシャルメディア上での議論も活発になり、さらなる価値を生み出すことが可能になります。

実質的な標準となっている「Open Graph Protocol」

図1●Open Graph ProtocolのWebページ(<a href="http://ogp.me/" target="_blank">http://ogp.me/</a>)
図1●Open Graph ProtocolのWebページ(http://ogp.me/
[画像のクリックで拡大表示]

 最初に取り上げるのはFacebookが策定した「Open Graph Protocol」です。

 Open Graph Protocol(OGP)は、現在ソーシャルメディアの世界を牽引しているFacebookによって策定された、セマンティックを記述するための仕様です。最初はFacebookのShareボタンで使われていましたが、今ではGoogleの+1ボタンやmixiチェックボタンを含め主要なソーシャルメディアのほとんどでサポートされている仕様となりました。

 Open Graph ProtocolのWebページ図1)では、この仕様を次のように説明しています

「The Open Graph Protocol enables any web page to become a rich object in a social graph.」(Open Graph Protocolにより、いかなるWebページもソーシャルグラフにおいてリッチなオブジェクトになり得ます)

 つまり、従来からあるセマンティックWeb向けの仕様と違い、Open Graph Protocolは初めからWebページの情報をソーシャルメディアで共有することをターゲットにした仕様なのです。