Webサイトの管理者は、Webページをソーシャルメディアに対応するため、見た目だけではなくセマンティックの記述を重視することが求められています。ソーシャルメディアで理解されてユーザーに消費されるコンテンツを提供するために、セマンティック化を進めなければなりません。ただし、それは既存のHTMLに対してセマンティックの記述が混在することになるため、その記述作業はときとして非常に複雑になってしまいます。

 今回は、この特集で紹介したHTML5やOpen Graph Protocolによるセマンティックの記述をする上で役に立つ便利なツールをいくつか紹介します。

記述が正しいかを確認するツールを使おう

 正しくセマンティックが記述され、ソーシャルメディアに理解可能となっているかどうか、それを迅速に確認できることが重要です。Webページを正しくセマンティック化できたかは、次のいずれかの方法で確認します。

  • ソーシャル共有ボタンを押し、実際に投稿されたフィードの内容を確認する。
  • セマンティックの記述を扱うツールを利用して記述内容を確認する。

 フィードを実際に投稿することが最も確実ですが、いったん投稿したフィードをいちいち削除するのは面倒ですし、そもそもソーシャルグラフ上ではそのフィードは他のユーザーに閲覧されることになります。そのため、この作業を頻繁に実行することは避けるべきでしょう。便利なツールを使いながら、手元で手軽に記載内容を確認できるに超したことはありません。

Googleの「Rich Snippets Testing Tool」を使う

図1●Googleの「Rich Snippets Testing Tool」
図1●Googleの「Rich Snippets Testing Tool」
[画像のクリックで拡大表示]

 日々世界中のWebページをクロールしインデックスを作成している検索エンジンとしてはGoogleが最も有名です。そのGoogleから提供されているツール「Rich Snippets Testing Tool」は、Googleの検索エンジンがページ内の構造化された情報をどのようにパースし、そしてどのように検索結果に表示されるかを確認できる、とても便利なツールです(図1)。

 例えば[Test your website]というURL入力欄に、今回取り上げたサンプルページのURL「http://www.eisbahn.jp/test/semantic.html」を入力してみてください。[Extracted rich snippet data from the page]という欄に、Open Graph ProtocolおよびHTML Microdataにて記述された内容がしっかりとパースされて解釈されていることを確認できると思います。ここでWarningなどが表示されてしまうと、それは検索エンジンが正しく意味を理解できなかったことになるので、このツールにてチェックをしながらページの記述を進めていくとよいでしょう。