脱・div職人！SEOに劇的に効く「セマンティックHTML」の書き方

Webサイトを作っていると、ついつい何でも <div> タグで囲んでしまいたくなりますよね。これをプロの世界では親しみを込めて（？）「div職人」と呼んだりします。

しかし、SEO（検索順位を上げること）を意識するなら、脱・div職人が必須です。今回は、Googleに好かれる「意味のあるHTML」の書き方をマスターしましょう！

1. セマンティックHTMLってなに？

「セマンティック（Semantic）」とは、日本語で**「意味のある」**という意味です。

• 普通のHTML： 「ここに文字を出す」「ここを四角く囲む」といった見た目の指示。
• セマンティックHTML： 「ここはタイトル」「ここはメニュー」といった**意味（役割）**をコンピューターに伝える書き方。

なぜこれがSEOに効くの？

Googleのロボットは、人間のように目で見て「あ、ここがメニューだな」と判断するのが苦手です。その代わりに、タグの名前を見て「あ、<nav> があるからここがメニューなんだな！」と理解します。

正しくタグを使うことで、Googleがサイトの内容を100%理解できるようになり、結果として検索順位が上がりやすくなるのです。

2. 図解でわかる！役割分担

Webサイトを一つの「新聞」や「学校の掲示板」と考えてみましょう。

1. <header>（ヘッダー）
   • 役割： サイトの顔。ロゴや一番上のメニューが入ります。
2. <nav>（ナビ）
   • 役割： 案内板。他のページへのリンク集です。
3. <main>（メイン）
   • 役割： そのページの主役。1ページに1つだけ使います。
4. <article>（記事）
   • 役割： 1つの独立したニュースやブログ記事。
5. <section>（セクション）
   • 役割： 章や節。中には必ず「見出し（h2など）」をセットで入れます。
6. <aside>（アサイド）
   • 役割： 補足情報。サイドバーや、本編とは直接関係ない広告など。
7. <footer>（フッター）
   • 役割： サイトの足跡。コピーライトや連絡先を入れます。

3. 実践！「div職人」を卒業するビフォー・アフター

❌ div職人のコード（Googleが迷う）

HTML

<div class="header">ここはロゴです</div>
<div class="content">
    <div class="title">今日のごはん</div>
    <div class="text">カレーを食べました。</div>
</div>

✅ セマンティックHTML（Googleが喜ぶ）

HTML

<header>ここはロゴです</header>
<main>
    <article>
        <h1>今日のごはん</h1>
        <p>カレーを食べました。</p>
    </article>
</main>

見た目は全く同じですが、下のコードの方がGoogleにとって**「どこがタイトルで、どこが本文か」**が圧倒的にわかりやすくなります。

4. 迷った時の判断基準

「ここは <div>？ それとも <section>？」と迷ったら、こう考えてみてください。

• 「見出し（タイトル）」をつけられる？
  • Yesなら ⇒ <section> や <article>
  • No（ただのデザイン用の箱）なら ⇒ <div>

「意味があるなら専用のタグ、意味がないならdiv」。これだけ覚えておけばOKです！

5. まとめ：Googleに優しいサイトを作ろう

セマンティックHTMLで書くことは、Googleという「目の見えない読者」に、サイトの構造を優しく教えてあげる作業です。

• 適切なタグを使うとSEOに強くなる。
• 後でコードを見返した時に、自分でも読みやすくなる。
• アクセシビリティ（障害がある人への使いやすさ）も向上する。

今日からあなたも「div職人」を卒業して、プロフェッショナルなコーディングを目指しましょう！