※この記事は6年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。
タイトル、いつになく長いな。
完全にタイトル通りSEO狙ってるよね。
さて、今回はちょっと記事自体も長くなります。
特に前置き長いので、御託はいいからさっさと本題を、って方はこちら。
今回はSEOの話。
当サイトでは、一貫してSEOこだわってきました。
（作品集サイトちゃうんかい）
- SEO
- とは"Search Engine Optimization"の略で、
検索エンジン最適化の意。検索結果でWebサイトがより多く露出されるために行う一連の取り組みのことを指す。
詳しくは下記エントリーをご参照されたし。
SEOにおいて重要なのは、一番はコンテンツの充実なのだが、
コンテンツを配信していく上で、大事なのは、サーチエンジンにしっかりと、ページの構造を明示することだ。
とりわけ、そのためには、セマンティクスなコーディングもそうなのだが、
"アウトライン"を考慮したコーディングが必要になってくる。
アウトラインとは、
サーチエンジンがHTMLを解析するにあたっての、
ページの構造を示すものである。
わかりやすく本で例えると、
本には、本自体のタイトルがあり、
章、節、段落、単位が小さくなっていく構造がある。
ウェブページも本のように、
サイトタイトル、ページタイトル、大見出し、中見出し、小見出し、
という構造で書くのが望ましいのだが、その構造のことをアウトライン、と呼ぶのだ。
さてさて、こっからが本記事の内容に入ってくる。
（今回は前置きも重要だった）
HTML5以前では、アウトライン形成は、h1～h6タグのみで行うことができた。
例えば、下記のHTMLの場合、
<html>
<head>
<title>ページタイトル | サイトタイトル</title>
</head>
<body>
<h1>サイトタイトル</h1>
<h2>ページタイトル</h2>
<p>ページ概要だよ</p>
<h3>大見出し01</h3>
<p>大見出し01の内容だよ</p>
<h4>小見出し</h4>
<p>小見出しの内容だよ</p>
<h3>大見出し02</h3>
</body>
</html>
アウトラインは次のようになる。
1.サイトタイトル h1
1.ページタイトル h2
1.大見出し01 h3
1.小見出し h4
2.大見出し02 h3
生成ルールとして、
hの数字を増やすと、アウトラインを一段階下げることができる。
そうやって、ページの構造を作ることができる。
非常にわかりやすい。
だが、後述するが致命的な弱点がある。
HTML5からはsection、asideなどの新要素（セクショニング要素）でも、アウトラインを生成することが可能となった。
<html>
<head>
<title>ページタイトル | サイトタイトル</title>
</head>
<body>
<h1>サイトタイトル</h1>
<section>
<h2>ページタイトル</h2>
<p>ページ概要だよ</p>
<section>
<h3>大見出し01</h3>
<p>大見出し01の内容だよ</p>
<h4>小見出し</h4>
<p>小見出しの内容だよ</p>
</section>
<h3>大見出し02
</section>
</body>
</html>
とマークアップした場合、
1.サイトタイトル h1
1.ページタイトル h2
1.大見出し01 h3
1.小見出し h4
2.大見出し02 h3
のようなアウトラインになる。
（というか上記と同じアウトライン）
ブロック単位で明確にアウトラインを生成できるのだ。
しかし、ここで一つ疑問が浮かぶ。
hタグでアウトラインを作れるなら、わざわざsection使う必要無くね？
だ。
本エントリーの本題はまさにここだ。
（やっぱ前置き長ぇ）
確かに、役割が明確に分かれてる分、
（sectionはアウトラインの生成、articleは独立できる内容、asideはページ内容と直接関係がない内容、とか）
各セクショニング要素は価値的に見える。
そして、視覚的にも検索エンジン的にも、ブロック単位で明確化できる。
だが、ことアウトラインの生成はhタグで元からできたのだ。
アウトライン生成のみのsection要素は、
使う必要あるのか。
sectionはいらない子・・・、
なんてことはない！
section要素は、h要素の弱点を見事に解決してくれる。
h要素の最大の弱点は、
二段飛ばしはできない だ。
例えば
<html>
<head>
<title>ページタイトル | サイトタイトル</title>
</head>
<body>
<h1>サイトタイトル</h1>
<h2>ページタイトル</h2>
<p>ページ概要だよ</p>
<h4>大見出し01</h3>
<p>見出しの内容01だよ</p>
<h6>小見出し</h4>
<p>小見出しの内容だよ</p>
</body>
</html>
のように数字の二段以上飛ばしは推奨されない。
また、
<html>
<head>
<title>ページタイトル | サイトタイトル</title>
</head>
<body>
<h1>サイトタイトル</h1>
<h2>ページタイトル</h2>
<p>ページ概要だよ</p>
<h3>大見出し01</h3>
<p>見出しの内容01だよ</p>
<h4>小見出し</h4>
<p>小見出しの内容だよ</p>
<h5>ミジンコ見出し</h5>
ミジンコ見出しの内容だよ</p>
<h3>大見出し02</h3>
<p>上に二個戻りたい</p>
<h4>小見出し 2-1</h4>
<p>あれれ？</p>
</body>
</html>
と、一度見出しレベルを5まで下げた後に見出しレベルを二つ上げても、アウトラインは下記のようになる。
1.サイトタイトル h1
1.ページタイトル h2
1.大見出し01 h3
1.小見出し h4
1.ミジンコ見出し h5
2.大見出し02 h3
1.小見出し 2-1 h4
つまり、見出しレベルを何段飛ばして上げても、上がるアウトラインは一個だけなのだ。
これは、もう、h6まで下げようものなら、二度とh2の見出しレベルには戻ることはできないだろう。（h5、h4、h3と、一個ずつ戻すのはできる。）
そうなるともう、文章構造の生成が不自由でしかたなくなる。
h5から、またh2に一気に戻したいなんてよくあるしね。
泣き寝入りしてマークアップするしかないか・・・。
いやいやそんなことするこたない、
これを可能にするのが、HTML5のセクショニング要素なのだ！
どういうことかというと、
<html>
<head>
<title>ページタイトル | サイトタイトル</title>
</head>
<body>
<h1>サイトタイトル</h1>
<section>
<h2>ページタイトル</h2>
<p>ページ概要だよ</p>
<h3>大見出し01</h3>
<p>見出しの内容01だよ</p>
<h4>小見出し</h4>
<p>小見出しの内容だよ</p>
<h5>ミジンコ見出し</h5>
<p>ミジンコ見出しの内容だよ</p>
<section>
<h3>大見出し02</h3>
<p>上に二個戻りたい</p>
<h4>小見出し 2-1</h4>
<p>でたーーー！</p>
</section>
</section>
</body>
</html>
このHTMLは
1.サイトタイトル h1
1.ページタイトル h2
1.大見出し01 h3
1.小見出し h4
1.ミジンコ見出し h5
2.大見出し02 h3
1.小見出し 2-1 h4
というアウトラインになる。
つまり、section要素を使うと直近の親section要素までアウトラインを戻すことができる、のだ！
（戻すというか、section要素はsection要素同士の構造でしかアウトラインを生成しない。）
他のセクショニング要素との混合も可能だ。
sectionの中に、articleを入れれば、親sectionの下にarticleのアウトラインができる、
って構造にできる。
こうすれば、こちらが意図した文章構造を検索エンジンに伝えることが容易に可能なのだ。
つまり、sectionの使い道はまさに、ここにあると言っても過言ではない。
文章構造が自由自在なのだ。
今回のことを発見し、理解できたきっかけは、
HTML5.1の勧告だ。
それまでは、HTML5では、
「セクショニング要素が出現するたびに、h1使っていいよ」
って仕様だったのだが、
HTML5.1からは、
「やっぱ、セクショニング要素使っても、文章の見出しレベルに沿ってhタグ使ってね」
って仕様になったのだが（従来のマークアップルールに戻った）
当サイトも含め、僕がやってた仕事では、
全部HTML5方式でコーディングしてたので、まいったな・・・と思いながらも、
HTML5.1に合わせていった。
その中で、そうかこういう使い道があったのか、と気づくにいたったのだ。
その結果、仕事でやっているサイトの検索順位が、大手競合を抜いてしまったのだ。（けっこうビッグキーワードで）
昨今、そこまで重要視されないSEOだが、
自然検索での順位上昇は、お金をかけないで流入する大事な要素だ。
それを上げるのはあくまで、正しい文章構造のマークアップなのではないだろうか？
これからも、地道かもしれないが、正しいコーディングを心がけていきたい。
（今回綺麗にまとめたなー）
コメントする