Webページをソーシャルメディアが理解しやすいコンテンツにすることは、Webサイトの管理者にとって大きなメリットがあります。単に多くの人に見てもらうというだけでなく、最も届けたいと思っているユーザー層に的確にコンテンツを届け、そしてコミュニケーションの種として使ってもらうことができます。

 そのためには、この特集でこれまで書いてきたようにWebページをセマンティック化する必要があります。第2回~第4回で、セマンティック化するための標準仕様であるOpen Graph Protocol、HTML5、Schema.orgについて解説してきました。今回は、これらを使って実際にHTML文書をセマンティック化していきましょう。

プロフィールページをサンプルに見てみよう

 セマンティックを記述していくHTML文書のサンプルとして、特集の第1回で使った「ある人物のプロフィールページ」を取り上げます(図1左)。

図1●サンプルとして取り上げるHTMLページ<br>左のWebページにHTMLにセマンティックを追加で記述してもWebブラウザ上の見た目はほとんど変わらない。
図1●サンプルとして取り上げるHTMLページ
左のWebページにHTMLにセマンティックを追加で記述してもWebブラウザ上の見た目はほとんど変わらない。
[画像のクリックで拡大表示]

 デザイン要素がほとんど入っていない非常にシンプルなページです。通常であれば、CSSをフルに使って適切にレイアウトされる内容ですが、ここでは見た目よりも「情報の固まり」という観点で説明を進めていきます。

 前回まで紹介してきた仕様に基づいてセマンティック要素を盛り込んだ結果のWebページは図1右のようになります(該当ページ)。ご覧のように、Webブラウザ上での見た目はほとんど変わりません。

 以下、どのようにセマンティックを記述しているかを順に解説します。実際のHTMLのソースコードを見ながら理解していくとよいでしょう。