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

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

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

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

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

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

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

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

この先は会員の登録が必要です。有料会員(月額プラン)は初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら