SEOに有利に働く構造化のコツ

こんばんは！
ママWebデザイナーの起業専門
コンサルタントみなです^^

前回お届けしました
HTML4とHTML5の違いについて
動画でお届けしました^^

前回の記事：
SEO構文化 HTML4とHTML5はココが違う…！

HTML4は暗黙的な構造化…
つまり、作り手次第で変わってしまう
構造になりえるもの

HTML5は明示的な構造化…
つまり、Googleロボットにさえも
明確に伝わる構造になりえるもの

ということで、明確な違いが
あるんですよというお話でした^^

そう。つまりは
よりコンテンツに対して
明確なマークアップをするには
HTML5が必須！
ということなんですね。

今日は、
具体的なマークアップの考え方
について、お届けしたいと思います。

どんなに良質な記事を書いても
それらが正しく見出しであり本文である…
ということを伝えられないと、
SEOの効果を最大限に活かすことは
できません。

簡単な例を言うと、
以下のようなイメージ。

（良い例）
＜本のタイトル＞
第一章 見出しタイトル
　・小見出しタイトル1
　　　　小見出しタイトル1についての
　　　　本文が入ります。
　・小見出しタイトル2
　　　　小見出しタイトル2についての
　　　　本文が入ります。
第二章 見出しタイトル
　・小見出しタイトル3
　　　　小見出しタイトル3についての
　　　　本文が入ります。

これをコーディングすると…

<h1>本のタイトル</h1>
<section>
   <h2>第一章 見出しタイトル</h2>
   <h3>小見出しタイトル1</h3>
   <p>小見出しタイトル1についての本文が入ります。</p>
   <h3>小見出しタイトル2</h3>
   <p>小見出しタイトル2についての本文が入ります。</p>
</section>
<section>
   <h2>第二章 見出しタイトル</h2>
   <h3>小見出しタイトル3</h3>
   <p>小見出しタイトル3についての本文が入ります。</p>
</section>

（悪い例）
＜本のタイトル＞
第一章 見出しタイトル
　・小見出しタイトル1
　・小見出しタイトル2
　　　　小見出しタイトル2についての
　　　　本文が入ります。
第二章 見出しタイトル
　第二章についての本文が入ります。
第三章 見出しタイトル
　・小見出しタイトル3

<h1>本のタイトル</h1>
<h2>第一章 見出しタイトル</h2>
   <h3>小見出しタイトル1</h3>
   <h3>小見出しタイトル2</h3>
   <p>小見出しタイトル2についての本文が入ります。</p>
<h2>第二章 見出しタイトル</h2>
   <p>小見出しタイトル3についての本文が入ります。</p>
<h2>第三章 見出しタイトル</h2>
   <h3>小見出しタイトル3</h3>
</section>

上記のサンプルは
本当に簡単なものなので
本来のマークアップは、上記のように
単純ではありません(>_<)

ただ、この基礎を理解しておかないと
デザインする際に、
各ページ異なる構造になってしまい
HTMLやCSSの関連性が
弱まってしまうことに
繋がってしまいます。

この点について、
DTPからWebへ転向してきた主人は

「DTPの人にとっては
　ここが一番理解しにくく
　やりにくい…
　単純にデザインするだけでは
　ダメだから(>_<)」

と言っていました。
特に、動きをつけたい
デザインには(;´Д｀)ヾ

逆に、ずっとWeb仕事に生きてきた
私にとっては

「このマークアップが
　デザインの幅を狭める…"(-""-)"
　なんだかありきたりなレイアウト…」

と、悩める原因でもありましたｗ

今は、構造について
かなり理解しましたので
悩むことはほぼなくなりましたが、
最初の頃は、とにかく

「これって構造的には
　どうなるんだろう…？？」

と悩むことが多く、その部分を
避けるように、触れないように
画像化することで済ませてしまう
という手法にばかり頼っていた時期も
ありました(笑)

HTMLやCSSについては
様々な講座が、いたるところで
開かれています。

ただ、具体的に
「このデザインはこのように
　マークアップしていきます」
というような講座は
あまり見かけません。

それは、
その時制作するサイトにとって
メインキーワードにしたいものが、
その時々によって異なるから
なんですね。

ですので、一概に
こういうデザインの時は
こういうマークアップの仕方
と言い切れないことが多いので
基礎講座はあっても
オリジナルデザインに対応したような
応用講座はあまり無いんですね。

ここでも、あまり詳しくは
お話できませんが…

それでも、ポイントとなるコツは
あります^^

コツは
Webデザイン（カンプ）を作る際は
ブロックに分けて構成すること
です。

Headerでしたら、そのまま
＜Header＞に入るものを
1ブロックとして考え
その中に入るもの…

　メインイメージ
　　→imgタグ＆alt文が入るので
　　　pタグで括るべきかな
　ナビゲーション
　　→navタグを使うので
　　　項目はulで構成した方が
　　　スマートかな

他にも、見出しはどのレベルまで？
どういうワードを入れておく？
Topページと下層は流用する？
それとも、タグは同じでも、
表示させるデザインを変える？
などなど、Headerの部分のみで
構成し、考えておきます。

それから、
・サイドバーに表示するもの
・メインコンテンツに表示するもの
・フッター情報
それぞれをブロックとして考え
どのような情報を掲載するのか？
ということと、
それぞれ持つタグの意味を
紐づけていきながら構成すると
正しいマークアップ
へ繋がっていくんですね。

今回はここまで！
今日も最後までお読みくださり
ありがとうございました^^