皆さんはサイトを上位表示させるために一番大切な事はなんだと思いますか？
キーワード設計、被リンク対策、SNS拡散 etc、そのどれも大切な事ですね。

ですが、検索エンジンに「このサイトはこんな構造ですよ」と理解させてあげる事が基本的に大切です。
これをオーガニック検索対策と言います。

こちらの図をご覧ください。（クリックで画像に飛び、さらにクリックで拡大します）

人間の目が、一目でサイトの構造を理解できるuiです。

このAppleというwebページの構成は、Macという章、iPadという章、iPhoneという章があります。

各章にはそれぞれ節があり
「Mac」章の中にある節：「MacBook」「MacBook Air」「MacBook Pro」
「iPad」章の中にある節：「iPad Pro」「iPad Air 2」「iPad mini 4」
「iPhone」章の中にある節：「iPhone 6s」「iPhone 6」
という事が瞬時に理解できると思います。

これら人間のためのuiは全てcssで作っていきます。
では、cssがないと人間はこの文章の構造を一瞬で判別する事ができるでしょうか？

こちらの図をご覧ください。（クリックで画像に飛び、さらにクリックで拡大します）

見出し部分を段落と判別するために、ブラウザがあらかじめ設定したcssが適応されている見出しと段落の判別だけはつきますが、章立て、節立てはまるで判別がつけられず構造がわかりません。

このようにcssは人間がwebページの構造を理解するためになくてはならないものです。

ところがgoogleなど検索エンジンはhtmlを見て、そのサイトをインデックスしていく上でhtmlの文書構造を見ており、cssで作りあげた見た目のuiを見ているわけではないのです。

そこでwebページをコーディングする時は、cssでuiを作る前にしっかりとした構造のhtmlを書いておく必要があります。

正しいhtmlの構造で書かれたhtmlは、w3cのバリデーションチェックを通すと以下の図のようになります。

これをセクショニング構造（ontline）としいますが、正しいセクショニング構造を作るには、
header main article sectionなどのhtmlタグで構成され、文章のまとまりの冒頭には見出しタグが使われている必要があります。

一昔前のhtmlの構造は、h1からh6までの見出しの番号の小さい順から重要と考え、見出しを目印にしてontlineを想像していました。
w3cバリデーションは、ただしいontlineでかかれていないhtmlでもh1が大見出し、セクショニング構造の階層が深いほど見出しの番号が大きくなるように想像して、セクショニングタグがあるとみなしてontlineを階層で表示してくれる機能もあります。

では、ただしいセクショニング構造のhtmlを書き、全部の見出しにh2を使った場合はどうなるでしょうか？
セクショニング構造が正しければ、必ず上記のようなただしいontlineの図になります。
それでは、セクショニング構造を作るタグを全てdivに置き換えてしまうとどうなるでしょうか？
下の図のようなoutlineになり、構造がわからなくなってしまいます。

divにwrapperとか、innar_wrapperなどど、クラス名をつけたところでやはり結果は同じです。
意味をもたせた名前をつけても検索エンジンは理解しません。divはどんな名前であってもただのパーテーションでしかなく、意味のないタグだからです。

興味をもたれた方は、冒頭の図の構造になるように、Appleというお題でhtmlを書いてみてください。

サイト見出しが「Apple」
「Mac」章の中にある節：「MacBook」「MacBook Air」「MacBook Pro」
「iPad」章の中にある節：「iPad Pro」「iPad Air 2」「iPad mini 4」
「iPhone」章の中にある節：「iPhone 6s」「iPhone 6」

これらの見出しを全てh2に統一してコーディングします。
さて、w3cバリデーションでoutlineはどうなったでしょうか？

※outlineのチェックの仕方は簡単です。下記の図のようにoutlineにチェックを入れて、下の図のようにcheckボタンそ再度押すだけです。

いかがですか？ただしいoutlineが表示されたでしょうか？（タイトル上の画像がヒントです）
もし、うまく表示されなかった方は、ぜひAkrosに遊びに来てください！

htmlをチェックいたします。