SEOを考慮したマークアップ注意点

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

今回もマークアップについて お届けしたいと思います。

これまでの記事はこちら↓

• 1. テンプレートVSオリジナルデザイン
• 2. SEO構造化 HTML4とHTML5はココが違う！
• 3. SEOに有利に当たらく構造化のコツ

HTML5でデザインをする時は、
Header
Main
Sidebar
Footer
など、それぞれをブロックとして考え
タグ個々の意味と紐づけていきながら
マークアップをすると
正しいマークアップへ繋がっていく

というお話を、
前回の記事で話しました。

正しいマークアップを行うので
情報の構造化を行うことができ
Googleへ正しい情報が伝わる
ということでしたね！

では、そのブロック化を行う際、
あなたは ＜div＞ を使っていませんか？

実は Div は意味を持たないタグなんです。

意味を持たない…

そう、構造化する際
特に意味を持たない
というタグなんですね！

ということは、多様してしまうと
「意味を持たないブロック」
として情報が伝わることにも
なってしまうのです！

「意味を持たないブロック」
という認識をされることの
何がいけないの？？
と、思われるかもしれません。

Googleへの情報の伝わり方を
例とすると、
以下のようなイメージになります。

（マークアップをしている）

<header>
<h2>△△</h2>
<p>本文です</p>
</header>

　

↓
ここからがヘッダーです。
　見出し△△
　ここから「見出し△△」の本文が
　始まります。
　本文です。
ヘッダーはここまでです。

（Divで括られている）

<div>
　<h2>△△</h2>
　<div>本文です</div>
</div>

　↓
見出し△△
本文です。

いかがですか？
これらの見出しや本文が、
どこの情報の中のものであるのかが
伝わっていないことに
気づかれると思います。

Googleの検索エンジンはロボットです。
人が直接見て、検索結果を
決めているわけではありませんね？

ロボットに伝わりやすい言葉で
情報を伝えてあげる

そうすると、headerやsectionなど
意味のあるタグを優先して
ロボットは解釈していきます。

divという特に意味を持たないタグは
一番最後に「関連性が不明なブロック」
として解釈されてしまうんですね。

では、divタグはどんな時に
使うのでしょう？

divを使用する時は
デザインCSSを入れるだけの
ブロック要素として使う！

背景を装飾する為のボックスが
必要とか、
デザイン的に入れ子にする必要がある
という時など

headerでもsectionでもasideでも
無い時に使用します。

それ以外は、極力使わないようにする！

だから

<div id="#header">
　↓
<header>

<div id="main">
　↓
<main>

へ変わったんですね！

このデザインは、
構文としてどんな意味合いを持つのか？
を常に考えるようにすると
HTML5タグで、何かしら合うものが
存在します。

それらをうまく組み立てて
コーディングを行っていく必要が
あるんですね^^

今日はここまで！
ママWebデザイナーみなでした♪

私の気付きと決意

先日募集させて頂きました
体験コンサルで

来年にはWP制作案件を1本
35万円で受注できるようになります！

と決意された方がいらっしゃいました。

この決意って、凄く大切なんです。

人間はまず、
脳に強い命令を出さないと
それを叶える行動を体に発信しない
と言われているからです。

引き寄せや、情報キャッチ力に
通じるものがありますね^^

その決意を熱く込めたメールを
体験コンサルの翌日に頂いたんですね。

それを読んで、とても嬉しく
改めて、結果に繋がるコンサルを
コンサル生としっかり向き合って
行っていかなくては…！
と感じたのですが、同時に

まだWebデザイナーとして
出し惜しみしていた自分

にも気付いたんです。

実は、私自身が制作者として立ち上げる
HPの構想が色々あったんですが
それらを1年間みっちり学ばれる
受講生さん達に託してみよう！
と思ったんです。

そこで、気づいたんですね(;´Д｀)ヾ

ここまで、SEOに関わるノウハウを
お届けしてきましたが
様々なサービスが溢れるWeb
という世界で
検索だけに頼りきるのは
ある意味危険でもあったりします。

検索に頼りきらずに、どのように集客し
制作単価を上げながら
気持ちの良いクライアントさんと
繋がれるようになるか。

そのノウハウも
受講生さんには細かく伝えていこう！
と、現在、コンサル生限定サイトを
練り直し中ですｗ

制作案件も入りましたし
師走から年始にかけて
また忙しくなりそうです…！(｀・ω・´)