【HTML】SEOにも効果的なセマンティックコーディングとは？

HTMLのタグって色々あるけど、それぞれ意識して使い分けないといけないのかな？例えばdivとsectionってブラウザで表示されてしまったら違いはわからないし。。

HTMLタグの意味を考えずになんとなくで使っていませんか？
もしかするとあなたのコーディングはGoogleの検索ランキングに悪い方向に影響しているかもしれません。
もしかすると同僚にも迷惑をかけているかもしれまん。

この記事ではセマンティックコーディング（またはマークアップ）の重要性について解説します。
セマンティックコーディングを理解することで、コード自体の可読性を上げ、SEOにも効果的なHTMLの記述が可能になります。

SEOにも関わるセマンティックコーディングとは
なんでセマンティックコーディングが必要？
抑えるべきセマンティック要素
まとめ

では解説していきます。

SEOにも関わるセマンティックコーディングとは

HTMLを勉強してきた方は「セマンティックな…」という文章を一度は目にしたことがあるのではないでしょうか？

そもそもセマンティックとは、「意味の」「語義の」「意味論の」などの意味を持つ英単語です。
結論から言っておくと
セマンティックコーディングとは、「機械がコードを理解できるように意味づけをしていくコーディング」です。

つまりどう言うことかというと、
「HTMLの各要素を適切な用途で適切な場所で使用してコーディングをする」と言うことです。

例えば、<section>と<main>を使い分けられているか、<section>を<footer>として使っていないかなどです。

なんでセマンティックコーディングが必要？

大きくはこの３つです。

①ページの検索ランキングが上がる
②コードの可読性が上がる
③ユーザーフレンドリー

参考：MDN Web Docs用語集

では見ていきましょう。

ページの検索ランキングが上がる

いわゆるSEO（Search Engine Optimazation,検索エンジン最適化）による検索ランキング改善です。

そもそも検索エンジンはクロールと言ってページからページへリンクをたどってコンテンツをインデックスに登録します（ページとしてみなす）。
このクロールはクローラというロボットが行っておりクローラはサイトをチェックする際にさまざまなルールに基づいてサイトを回っています。
そのルールに基づいているサイトが検索結果の上位に上がる可能性があると言われています。
「可能性がある」少し濁したのは、Googleなどの大手検索エンジンはページのランキング結果に対してのロジックを公開していません。
したがって公式のガイドラインや経験的知識を組み合わせて「こう言うものだろ」とWeb界隈の中でふわっとした状態になっているからです。

そしてGoogleの公式のガイドラインでもセマンティックコーディングの推奨を発表しています。

参考：Googleウェブマスター向けガイドライン

上記のガイドラインに明確に「Google がページを理解できるよう手助けする」と記載があります。
この「手助け」とはクローラがページの全体構造を理解できるようにページのHTML要素に意味付けを行うと言うことです。

Googleクローラ：「タイトルはこれか！ナビゲーションはここだな！ヘッダーもフッターもそれぞれ適切なタグで明示してくれるからわかりやす👍」

みたいな感じですかね。

もちろんこれだけでランキングが上がるわけではないですが、実装側でもできる立派なSEO対策です。

コードの可読性を上げる

セマンティックコーディングは機械が理解しやすいようになるだけではなく、人間にも理解しやすくなっています。
よくある例ですが次の２つのコードを見比べてください。

❌ダメなコーディング

//ダメなコーディング
<body>
  <div class="header">
    <div class="navigation">
      <div>
        <div><a href="">ナビ１</a></div>
        <div><a href="">ナビ２</a></div>
      </div>
    </div>
  </div>

  <div class="main">
    <div class="fv">
      <div>メインタイトル</div>
      <div>テキスト</div>
    </div>
  </div>

  <div class="footer">
    <div><a href="#">会社概要</a></div>
  </div>
</body>

⭕️セマンティックコーディング

//セマンティックコーディング
<body>
  <header class="header">
    <nav class="navigation">
      <ul>
        <li><a href="">ナビ１</a></li>
        <li><a href="">ナビ２</a></li>
      </ul>
    </nav>
  </header>

  <main class="main">
    <section class="fv">
      <h1>メインタイトル</h1>
      <p>テキスト</p>
    </section>
  </main>

  <footer class="footer">
    <p><a href="#">会社概要</a></p>
  </footer>
</body>

一目瞭然かと思いますが「ダメなコーディング」はほとんど<div>を使用しておりクラス名でしかどのブロックがどの役割かしか判断できません。
一方、「セマンティックコーディング」はそれぞれのタグを使い分けることによって、視覚的に各ブロックの意味を理解することができるようになっています。

開発者同士がセマンティックコーディングを意識することで、コードが読みやすくなり、どこに、どんな要素があるのかが見当をつけやすくなります。
こうすることによってサイトで問題が起きた時に素早く修正対応に入れたり、サイト更新の際もスムーズに対応できるようになります。

ユーザーフレンドリー

目の不自由なユーザーはページのテキストを読み上げる文書を読み上げるツールを使い、ページから情報を取得します。
その際に適切なタグを使用したセマンティックコーディングを行うことで、ツールのページ解析の精度が上がり、よりわかりやすく情報をユーザーに伝えられるようになります。
視覚障がい者のためのHTMLはGoogleのガイドラインでも「訪問者がページを利用しやすいように手助けする」と言う項目に書かれています。

参考：Googleウェブマスター向けガイドライン

つまりセマンティックにコーディングすることは検索エンジン・開発側・ユーザーの全員にとってメリットがあると言うことですね🤲

抑えるべきセマンティック要素

調べてみるとセマンティック要素（ページの中に意味付けをする要素）はおよそ100種類ほどあるのですが、過去の制作経験と現在公開されている他社サイトを調べて、抑えておくべきセマンティック要素をまとめました。

・<header>
・<footer>
・<section>
・<main>
・<nav>
・<article>
・<aside>
・<figure>
・<figcaption>

各要素の詳細説明の記事は下記になります。サンプルコードと図を用いて解説しています。

まとめ

今回はセマンティックコーディングについて解説しました。
HTMLの記述の際に適切なタグを適切な場所に記述する必要性をわかっていただけたかと思います。

少し覚えることもありますが慣れです！
このコーディングができるようになれば、検索エンジン、開発側、ユーザーの全てにとってポジティブな結果をもたらします。

HTML5プロフェッショナル認定試験レベル１

HTML5 プロフェッショナル認定試験レベル１対策テキスト＆問題集Ver2.0対応版 ￥3,498 ★★★★☆（2022年9月13日現在）

Amazonで探す

↑HTMLの全ての要素を細かく解説したテキストもあります（めちゃくちゃ細いことまで書いてます）。
少し値段はしますが、迷った時の逆引き辞書として使えば強力です💪
試験は受ける必要ないです👌

今回は以上です！
ほな！