HTML「ナビゲーションメニュー（nav）」のSEO最強の使い方｜スマホ用とPC用で複数あってもOK？正しい構造と実務ガイド

navタグとは？

<nav> は 「主要なナビゲーションリンクのまとまり」 を示すセマンティックタグです。

• サイト内を移動するためのリンクがまとまっている領域
• Google やスクリーンリーダーに「ここがナビゲーションですよ」と伝える役割

基本形は次の通りです。

<nav>
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/service/">サービス</a></li>
    <li><a href="/contact/">お問い合わせ</a></li>
  </ul>
</nav>

navタグがSEOに与える影響

検索エンジンにサイト構造を伝える

Googleは nav の内容から、そのサイトの「主要カテゴリー」や「ページ構造」を把握します。
これは サイト全体の評価（構造のわかりやすさ） にプラスです。

nav内部のリンクは「重要リンク」として扱われる

nav に入っているリンクは、重要度が高いと見なされやすく、

• サービスページ
• お問い合わせ
• 実績一覧

など「見てもらいたいページ」に内部評価を送りやすくなります。

アクセシビリティが向上する

スクリーンリーダーが nav を認識しやすくなり、
キーボード操作などでも “移動しやすいサイト” になります。

aria-labelとは？（初心者向け超やさしい解説）

HTMLには “この要素は何のためのものですよ” と機械に伝えるための属性があります。
その1つが aria-label（エリア・ラベル） です。

aria-label は「名前をつけるためのラベル」

例）

<nav aria-label="スマホ用グローバルナビゲーション">

これは、

「この nav はスマホ用のメインメニューです！」

と機械（Google・スクリーンリーダー）に教えるための“名前タグ”。

人間には見えません

画面には表示されない“隠し説明”のようなものです。

どんなときに必要？

• 複数の nav を使っているとき
• パンくずリストにも nav を使うとき
• サイドバーにも nav があるとき

役割が違う nav を 区別して理解させる ためのもの

例）

<nav aria-label="PC用グローバルナビ"> … </nav>
<nav aria-label="スマホ用グローバルナビ"> … </nav>
<nav aria-label="パンくずリスト"> … </nav>

これにより Google は
「よし、これはスマホ用のナビだな」
「これはパンくずだな」
と正しく理解できます。

SEOにもアクセシビリティにも◎の必須知識です。

nav の SEO最強の基本ルール

navには「主要なナビゲーション」だけを入れる

<nav>
  <ul>
    <li><a href="/service/">サービス紹介</a></li>
    <li><a href="/works/">制作実績</a></li>
    <li><a href="/price/">料金プラン</a></li>
    <li><a href="/contact/">お問い合わせ</a></li>
  </ul>
</nav>

「重要ページだけ」を入れたスリムな構造が理想です。

navの中に見出しタグ（h1〜h6）を入れない

見出しは本文の構造を作るためのものなので、
nav の中には配置しません。

nav と header の関係：正しいレイアウト例

<header>
  <nav aria-label="グローバルナビゲーション">
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/service/">サービス紹介</a></li>
      <li><a href="/works/">制作実績</a></li>
      <li><a href="/price/">料金プラン</a></li>
      <li><a href="/contact/">お問い合わせ</a></li>
    </ul>
  </nav>
</header>

SEO面・アクセシビリティ面の両方で非常に良い構造です。

navのリンクテキストでSEOはさらに強くなる

NG例（抽象的）

• サービス
• 詳しく見る
• MORE
• READ MORE

OK例（説明的で明確）

• ホームページ制作
• SEO対策サービス
• Webデザイン制作
• お問い合わせ

リンクテキストは Googleにとって「そのページの看板」 なので超重要です。

navタグは複数あっても大丈夫？

結論：

navは複数置いても問題なし

• グローバルナビ
• フッターナビ
• サイドナビ
• パンくずリスト
• モバイルメニュー

など、用途ごとに nav を複数使うのは HTML5の仕様上OK。

ただし aria-label で役割を明示することが必須。

PC用とスマホ用にnavを分けても安全？

結論：

PC/SP用で別々のnavを置いてもSEO的に問題なし

ほぼすべてのサイトがこの構造を使っています。

注意点①：リンク構造を一致させる

内容が違うと「どれが主要ナビ？」と判断しづらくなる。

注意点②：CSSで表示・非表示を切り替える

HTMLにnavが複数あってもOK。

注意点③：aria-labelで区別する

これが一番大事です。

navを使わないほうがよいケース

• ページ内目次（これはただのジャンプリンク）
• SNSアイコンの集合
• 広告や外部バナー
• CTA（問い合わせボタン）群

これらは nav ではなく div / section が適切です。

パンくずリストにnavを使うときの注意

<nav aria-label="パンくずリスト">
  <ol>
    <li><a href="/">ホーム</a></li>
    <li><a href="/service/">サービス</a></li>
    <li>ホームページ制作</li>
  </ol>
</nav>

グローバルナビとは役割が違うので
必ず aria-label で区別 します。

navのSEO最適コード（PC/SP両対応版）

<header>

  <!-- PC用 -->
  <nav class="pc-nav" aria-label="PC用グローバルナビゲーション">
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/service/">サービス紹介</a></li>
      <li><a href="/works/">制作実績</a></li>
      <li><a href="/price/">料金プラン</a></li>
      <li><a href="/blog/">ブログ</a></li>
      <li><a href="/contact/">お問い合わせ</a></li>
    </ul>
  </nav>

  <!-- スマホ用 -->
  <nav class="sp-nav" aria-label="スマホ用グローバルナビゲーション">
    <button class="nav-toggle" type="button">メニュー</button>
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/service/">サービス紹介</a></li>
      <li><a href="/works/">制作実績</a></li>
      <li><a href="/price/">料金プラン</a></li>
      <li><a href="/blog/">ブログ</a></li>
      <li><a href="/contact/">お問い合わせ</a></li>
    </ul>
  </nav>

</header>

まとめ

• nav＝“主要ナビゲーション” を示すセマンティックタグ
• SEOでもアクセシビリティでも非常に重要
• navは複数使ってもOK（PC/SP・パンくず・サイドナビなど）
• 役割が違うnavには必ず aria-label を付ける
• navには「重要ページだけ」を入れる
• 見出しタグはnav内に入れない

特に aria-label は初心者が見落としがちな必須知識 なので、
複数の nav を使うサイトでは積極的に設定するのがベストです。