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


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

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

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

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
という世界で
検索だけに頼りきるのは
ある意味危険でもあったりします。

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

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

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


前の記事:

次の記事:

フリーランスのママWEBデザイナー必見!

月収20万円を安定させるメール講座7ステップ

  • 単価が2倍になった!
  • デザインや知識に自信がついた!
  • 企業所属経験ゼロでもできた!

実践で使えるヒアリングシートプレゼント中!

  • 知らないと怖い!デザインばかり
    勉強しているデザイナーの結末
  • 売れるWEBデザイナーに
    “最も必要なスキル”とは!?
  • 受注できるサイト制作法!
    5割は“コレ”で決まる!
  • WEBデザイナー専用!
    WEBからはじめてのお客様獲得術
  • SEO=集客力!?本当は…
  • 単価UP!
    ママWEBデザイナーの価格設定法
  • 制作した後に○○すると
    リピーター獲得できる!?