• HTML5でのアウトラインの書き方について考えてみた。
2015/8/19HTML・CSS

HTML5でのアウトラインの書き方について考えてみた。takahiro

  • このエントリーをはてなブックマークに追加
outline-eye

【セマンティックSEO】という言葉がかなり認知されたのではないでしょうか?

 

サイト上の文章に意味を持たせることで、これまでクローラーがただのテキストとして認識していたものを、より正確に認識しそのコンテンツが何を表しているのかを知れるようになりました。

 

セマンティックWEBとは?

セマンティックWebとは、Webページおよびその中に記述された内容について、それが何を意味するかを表す情報(メタデータ)を一定の規則に従って付加することで、コンピュータが効率よく情報を収集・解釈できるようにする構想。インターネットを単なるデータの集合から知識のデータベースに進化させようという試みがセマンティックWebである。

IT用語辞典

 

セマンティックSEOと聞いて最近よく取り上げられるのが、schema.orgなどの構造化データだと思います。

Search Consoleでも構造化データマークアップが正しく行えているかの確認ツールを提供しており、Googleからもマークアップすること促してるのが分かります。

 

schema.orgって何?って方は「構造化データ(schema.org)はJSON-LDで書こう!」を読んでみてください。

 

今年の6月からjson-ldでもパンくずリストのマークアップができるようになり、実装がより簡単になってきています。

正直コード内にMicrodataでマークアップするのは、コードが読みにくくなるので嫌いでした。

 

確かにschema.orgで構造化データをマークアップすると、「イベント情報」や「記事の著者」、「会社情報」などを正しくクローラーに認識してもらえます。

 

ただ、ホームページ上の意味を伝えられるのは構造化データだけではありません。

HTML5からはsection要素が追加され、ページ内のアウトラインを最適化することが出来ます。

 

つまり「ここにある文章は◯◯だよ!」ってことを伝えられるようになってます。

 

このアウトラインを正しく構成することもセマンティックSEOを考える上で大切なことだと思ってます。

 

1.アウトラインの確認方法

アウトラインを確認するにはいくつかの方法がありますが、簡単に確認する方法を2つ紹介します。

現状でどんなアウトラインになっているか確認してみましょう。

Chrome拡張機能「HTML5 Outliner」

pic03

 HTML5 OutlinerはGoogleChromeの拡張機能です。

確認したいページを開いて、ボタンをクリックするだけでアウトラインを確認することができます。

 

HTML 5 Outliner

outline01

 HTML 5 Outlinerはテキスト、URL、HTMLのいずれかをアップロード/記入することでアウトラインを確認することができます。

 

2.HTML5で定義されたsection要素

そもそも「アウトラインって何?」っていう方は、「アウトラインで迷わない! (ウェブクリ8さん)」を読んでみてください。

ちょっと古い記事にはなりますが、分かりやすく記載されています。

 

セクションの範囲を定義する4つの要素

HTML5からは文章構造を正しく理解するために、構造化の為のセクショニングタグが追加されました。

その中でもセクション(文章構造)を適宜しているものは次の4つです。

 

要素名 概要
section HTMLドキュメント内の一般的なセクションを表す要素
article 独立したコンテンツのセクションを表す要素
aside 主要なセクションと少し関連のあるセクションを表す要素
nav ナビゲーションに特化したセクションを表す要素

 

なお、上記4つのセクショニングタグを使用するにはルールがあります。

 

  1. 1.セクショニングコンテンツには見出し(<hx>)の項目が必要
  2. 2.<nav>と<aside>については内容的に見出しが付けれない場合は付けなくてもよい
  3. 3.スタイリングのためのコンテナ要素として使うものではない(コンテナ要素はdivを使う)

 

 

<section>

章・節などを表す。記事(article)の中に節(section)が入れ子になったすることがある。また、hxタグで暗黙的セクショニングを行った場合はsectionタグが入れられていると考えるのが良い。

 

<article>

それだけで独立した単一の記事を表す。コラム記事のコンテンツやコメントの投稿など、すべての文章がひとつのことを書いてるのではなく、個別で書いてあるものはこれになる。

 

<aside>

本文の流れとは直接関係ないコンテンツを表す。広告などのメインコンテンツとは関係のないコンテンツに使用する。

 

<nav>

メインメニューを表す。グローバルメニューがこれにあたり、1ページに何個もあるのは推奨されない。

 

暗黙的セクションと明示的セクション

HTML5以前のXHTMLなどでは「hxタグ」によって、セクションを定義していました。

しかし、HTML5からはセクショニングタグ(section、article、aside、nav)を使ってセクションを定義します。

 

「hxタグ」でも暗黙的セクションによって定義はされていますが、これまでのように「h1だからページタイトル」「h3だから中見出し」の様に使用することはできなくなっています。

hxタグではそのセクションが前のhxタグより大きいか、小さいかそれとも一緒なのかという3パターンで判別されます。

 

つまり、h1のつぎにh3を使用しても何も問題はないということです。

 

見出しのタグはセクションの階層構造と等しくないので、確認する時は注意が必要です。

先に述べた、アウトラインの確認方法を使えばコードから確認することもないと思いますが…

 

hxタグやセクショニングタグを使用したアウトラインアルゴリズムの書き方は「HTML5 のセクショニングとアウトラインアルゴリズムの再確認」を参考にされると分かりやすいと思います。

 

3.アウトラインはどれが正解なのか?

実際にWordPressなどでコラムを作成するときに、どのようなアウトライン構造が正しいのでしょうか?

セクションの範囲を定義するsection、article、nav、aside以外にも構造化要素はあります。

 

要素名 概要
header セクションのヘッダーを表す要素
footer セクションのフッターを表す要素
hgroup セクションの見出しを表したり、まとめるための要素
figure 図・写真・表・ソースコードなどを示す要素
figcaption 図・写真・表・ソースコードなどのキャプションを示す要素
mark 文書内のテキストをハイライトさせる要素

header、footerあたりはホームページにつきものなので使用することは多いでしょう。

 

でも、4つのセクショニングタグを含めてホームページ上のどこに配置するのが正解か分からない…。

 

いくつかのサイトのアウトラインを見てみる

HTML5でマークアップされているサイトのアウトラインをいくつかピックアップしてみました。

ピックアップしたのは僕がちょくちょく見てる記事コンテンツのページです。

 

WEBクリエイターボックスさん

outline02

すごく綺麗なアウトラインですね!このアウトラインみてなるほど!と思いました。

ソースコードを確認すると、セクショニングタグが適宜に使用されていました。またh1も複数記述されていますね。

 

また階層敵にはざっくり下記のようです。

 

 

LIGさん

outline03

ページの中に関連する記事や広告が多いこともありasideやarticleでマークアップされている部分が多くありました。

やはり、関連記事などはそれ単体で成立しているためarticleを使うのがいいようですね。

 

また、body要素の下に見出しタグ(hxタグ)がないことからトップレベルの見出しが2つ認識されているようです。いや、あるにはあるんですが、navタグによってセクションが発生しているため、このような構成になっている感じですね。

実際このアドリブのコラムページも同じ様になっていてBODY配下に見出しがないです。

 

HTML5のアウトラインはこんな感じかな

他にもいろいろなサイトのアウトラインを見てみました。

HTML5Outlinerだけだと実際にどのタグが使われているかまでは確認できないので、最終的にはコードを読んでみる必要はあります。

 

基本的にはサイドバーだからh3タグ、フッターだからh4タグなどのようにしているサイトはあまりありませんでした。

 

最終的にはこんな感じにすればいいのではないでしょうか?

これに<header>や<footer>などのタグも付け加えて行きます。

 

outline04

 

だいたいこんな感じですね。コンテンツによってarticleやasideなどタグの付けたが変わってくると思います。

 

セクショニングタグはスタイリングの為のコンテナ要素として利用しないというルールがあったので、divでラッピングしてます。

 

4.最後に

今回はセマンティックSEOの概念のなかで、構造化データに比べて日陰の存在になってる気がするアウトラインの内容を考えてみました。

 

個人的な主観での使い方なのでタグの使い方などを間違っているかもしれません。頑張って調べましたが…。

 

もし間違いに気づかれた場合は、ご指摘いただけると嬉しいです。twitterのメッセージなどで!

詳しい方がいらっしゃいましたらいろいろ教えてください><

 

記事のアウトラインの話しをしていてなんですが、結局はコンテンツありきの話しだと思ってます。

エンドユーザーにとってためになる記事を作成するほうが効果は高いです。

 

「いっぱいコンテンツあるけど更に何しよう?」ってときに参考にしていただければ幸いです。

 

セクショニングやschema.orgなどセマンティックSEOはまだまだ始まったばかりですしね!

 

 

 

 

 

WEBクリエイターボックスさんやLIGさんのアウトラインを勝手に書いてしまったので、怒られなければいいけど…。

 

  • このエントリーをはてなブックマークに追加

この記事の著者

takahiro

takahiroWebデザイナー/ディレクター

Skill:HTML,CSS,PHP,WordPress,Photoshop

WEBサイト制作/運用/コンサルティング
たまにカメラとかもやってます。

この著者の最新の記事