日本語 English(Home)

グローバルナビゲーションとは:役割・項目の決め方と、スマホでの作り方

グローバルナビゲーションには何を載せ、どう作ればよいのか。項目の選び方の判断表、パンくずリスト・フッターとの役割分担、Googleがたどれるリンクの書き方、スマホのメニューを誰でも開閉できるようにするaria属性とキーボード操作、当サイトのメニューの作りを例に説明します。

グローバルナビゲーションとは:役割・項目の決め方と、スマホでの作り方

この記事の要点:

  • グローバルナビゲーション(グロナビ)とは、サイトのすべてのページの上部などに共通して表示される、主なページへのメニューのことです。読者が今どこにいて、どこへ行けるかを示します。
  • 検索エンジンにとっては、主なページへのリンクの入口です。Google がリンクとしてたどれるのは、基本的に href 属性を持つ a 要素なので、メニューのリンクもこの形で書きます。
  • 項目の数に公式の正解はありません。読者がよく探すページと、事業として案内したいページから選び、細かいページはパンくずリスト・本文・フッターに役割を分けます。
  • スマホでメニューを開閉する場合は、開閉のボタンに aria-expanded を付け、キーボードでも開け閉めできるようにします。当サイトのメニューの作りを例に説明します。

グローバルナビゲーションとは:全ページ共通の主なメニュー

グローバルナビゲーションとは、サイトのどのページにも同じ位置・同じ内容で表示される、主なページへのメニューのことです。多くのサイトではヘッダー(ページ上部)に横並びで置かれ、スマホでは三本線のボタン(ハンバーガーメニュー)で開閉する形がよく使われます。略して「グロナビ」とも呼ばれます。

ヘッダーとの違いは、ヘッダーがページ上部の領域全体(ロゴ・メニュー・ボタンなど)を指すのに対し、グローバルナビゲーションはその中のメニューの部分を指す点です。ナビゲーションの種類には、グローバルナビゲーションのほかに、今いる位置を示すパンくずリスト、ある分類の中だけで使うローカルナビゲーション、ページ下部のフッターのリンクなどがあります。

HTML では、主なナビゲーションのリンクのまとまりを nav 要素で囲みます。MDN は nav 要素を「現在の文書内の他の部分や他の文書へのナビゲーションリンクを提供するためのセクション」とし、一般的な例としてメニュー・目次・索引を挙げています(MDN「<nav>: ナビゲーションセクション要素」、2026年10月13日確認)。サイト全体の導線の考え方は「導線とは」で説明しています。

グローバルナビゲーションの役割:読者と検索エンジンにとって

グローバルナビゲーションの役割は、読者には「サイトに何があり、どこへ行けるか」を示すこと、検索エンジンには「サイトの主なページへのリンク」を示すことです。

読者にとっての役割は次の3つです。

  • サイトの全体像を示す:記事や検索結果から途中のページに来た人にも、サイトの主な内容が分かります。
  • 次の行動へ案内する:料金・事例・問い合わせなど、検討に必要なページへ1回で移れます。
  • 今いる場所を示す:表示中のページが属する項目を強調すると、サイトの中での位置が分かります。

検索エンジンにとっては、全ページから同じページへリンクが張られるため、メニューにあるページはクロールで見つけやすくなります。Google は、リンクをページの関連性の判断と、クロールする新しいページの発見に使うと説明しています(Google 検索セントラル「Google の SEO リンクに関するベスト プラクティス」、最終更新日 2025-12-31、2026年10月13日確認)。

ただし、メニューに入れたページの順位が上がると Google が説明しているわけではありません。メニューは主なページへの入口で、個々の記事どうしのつながりは本文の内部リンクで作ります。本文の内部リンクの考え方は「内部リンクとは」にまとめています。

グローバルナビゲーションの項目の決め方:数と順番

グローバルナビゲーションの項目は、「読者がよく探すページ」と「事業として案内したいページ」の重なりから選びます。項目の数について、Google や W3C などの公式の資料に決まった数はありません。項目が多すぎると探しにくくなるため、上位の分類だけを置き、細かいページは開閉するメニューやほかのナビゲーションに任せます。

候補のページ確かめるデータどうする理由
多くの人が訪れ、サイト内で移動するときによく使われるページGA4 のページとスクリーン、経路データ探索グローバルナビゲーションに置く探す人が多いページを1回で開けるようにする
検討に欠かせないページ(料金・機能・事例・問い合わせ)キーイベントの直前に見られているページ置く。問い合わせは目立つボタンにする事業の成果につながる移動を短くする
記事・ニュースなどの一覧自然検索からの入口の多さ(ランディング ページ)一覧の入口だけを置く個々の記事はパンくずリストと本文のリンクで受ける
会社情報・採用・規約訪問の少なさ、検討との関係フッターに置く必要な人は探しに行くため、上部の項目を増やさない
同じ分類の細かいページが多い分類ごとのページ数分類名だけを置き、開閉するメニューやローカルナビゲーションで出す上部の項目数を抑えつつ、たどれる道を残す

順番は、左(スマホでは上)から、読者が最初に知りたいこと→比べること→行動すること、の流れに沿わせると、検討の順に読めます。項目名は社内の呼び方ではなく、読者が使う言葉にします。GA4 の経路の見方は「GA4の探索レポート」で説明しています。

ほかのナビゲーションとの役割分担

グローバルナビゲーションだけで、すべてのページへの道を作る必要はありません。パンくずリスト・ローカルナビゲーション・本文のリンク・フッターと役割を分けると、メニューを短く保てます。

種類置く場所役割載せるもの
グローバルナビゲーション全ページの上部サイトの主な分類と行動への入口機能・料金・一覧・問い合わせなど上位の項目
パンくずリスト本文の上今いる位置と、上の階層への戻り道トップ → 分類 → 現在のページ
ローカルナビゲーション分類の中のページ同じ分類のページどうしの移動同じ分類の下位のページ
本文の内部リンク段落の中次に知りたいことへの案内関連する記事・詳しい説明
フッター全ページの下部網羅的な一覧と、必要な人だけが探すページ会社情報・規約・サイトマップなど

MDN は「すべてのリンクを <nav> 要素に入れる必要はありません」とし、nav 要素はナビゲーションリンクの主要なブロックだけに使うよう書いています。また nav 要素は1つの文書に複数置けるため、その場合は aria-labelledby などで区別できるとしています。

作り方:HTMLとクロールされるリンク

グローバルナビゲーションのリンクは、href 属性を持つ a 要素で書きます。Google は「通常、リンクが href 属性を持つ <a> HTML 要素(アンカー要素とも呼ばれます)である場合のみ、Google はリンクをクロールできます」と説明し、href の無い a 要素や、スクリプトのイベントでリンクとして動かす要素からは URL を確実に取り出せないとしています(Google 検索セントラル「Google の SEO リンクに関するベスト プラクティス」)。

<nav aria-label="Global">
  <ul>
    <li><a href="/service/">サービス</a></li>
    <li><a href="/pricing/" aria-current="page">料金</a></li>
    <li><a href="/column/">コラム</a></li>
  </ul>
</nav>

作るときに確かめることは次のとおりです。

  1. リンクは a 要素の href に、実際に開ける URL を書く(onclick だけで移動させない)。Google は、JavaScript でリンクを後から差し込む場合でも、この形のマークアップならクロールできるとしています。
  2. 項目のまとまりは nav 要素と ul・li で書き、nav には aria-label などで名前を付ける。
  3. 表示中のページの項目には aria-current=”page” を付け、見た目でも強調する。
  4. メニューの文字を画像にしない。画像を使う場合は代替テキストを付ける。
  5. 公開後に Search Console の URL 検査ツールで、Google が読み取った HTML にメニューのリンクが含まれているかを確かめる。

JavaScript でメニューを描く場合の確かめ方はJavaScript SEOとはで、a 要素の書き方は「aタグとは」で説明しています。

スマホでの作り方と、誰でも使える開閉の操作

スマホのグローバルナビゲーションは、画面の幅が狭いため、ボタンでメニューを開閉する形が多く使われます。開閉する作りにするときは、見た目だけでなく、画面読み上げソフトやキーボードでも開け閉めできるようにします。

MDN は、ウィジェットを切り替えるボタンについて「切り替えられるウィジェットの id が aria-controls に設定され、aria-expanded がウィジェットの現在の状態に設定されている必要があります」と書いています(MDN「aria-expanded」、2026年10月13日確認)。

W3C の ARIA Authoring Practices Guide(APG)は、サイトのナビゲーションの例として、ボタンで下位のリンクの一覧を開閉する「Disclosure Navigation Menu」を示しています。この例は、ARIA の menu の役割(role=”menu”)を使っていません。一般的なサイトのナビゲーションには、menu の役割が想定する複雑なキーボード操作がすべては必要ないためと説明しています。また、開いた一覧は Esc キーで閉じ、フォーカスを開閉のボタンに戻すとしています(W3C「Example Disclosure Navigation Menu」、2026年10月13日確認)。

確かめること作り方
開閉のボタンが何を開くか伝わるbutton 要素に aria-controls(開く要素の id)と aria-expanded(true/false)を付ける
ボタンに名前がある三本線のアイコンだけでなく、「メニュー」などの文字を画面読み上げ用に入れる
キーボードで操作できるTab で移動し、Enter・Space で開閉、Esc で閉じてボタンへ戻す
タップしやすいボタンの大きさを十分にとり、項目どうしの間隔をあける

ハンバーガーメニューが SEO に不利かどうかについて、Google の公式の資料で開閉そのものの扱いを説明した記載は確認できませんでした。確かめられるのは、閉じた状態でもメニューのリンクが HTML の a 要素として書かれているかどうかです。スマホでの表示全般は「レスポンシブデザインとは」で説明しています。

当サイトのメニュー設計の例

当サイト(seoagent.jp)のグローバルナビゲーションは、独自の WordPress テーマで作っています。次の内容は、リポジトリにあるテーマのコード(2026年10月13日時点)から確かめたものです。

決めたこと当サイトの作り
上部の項目「機能・使い方」「料金」「AIO・LLMOガイド」「AIニュース」の4つと、「ログイン」、資料請求のボタン
細かいページの扱い「機能・使い方」はボタンで開く一覧にし、機能のページを「何を書くかを決めたい」「記事を作り、公開したい」「今あるサイトを育てたい」「もう一段、詳しく調べたい」の4つの目的に分けて並べる
リンクの書き方すべて a 要素の href。開く一覧は閉じた状態でも HTML の中にリンクが書かれている
今いる場所表示中のページの項目に aria-current=”page”。記事のページでは、その記事が属する一覧(ガイド・ニュース)を現在地にする
開閉の操作開閉のボタンに aria-expanded と aria-controls。Esc キーで閉じてボタンへフォーカスを戻し、一覧の外をクリックすると閉じる
スマホ画面の幅が1240px以下で、三本線のボタン(読み上げ用の名前は「メニュー」)で全体を開閉する
ほかのナビゲーションフッターは別の nav 要素(aria-label=”Site”)で、「製品・機能」「業界別・導入事例」「学ぶ・情報を得る」「サポート・運営」の4分類に分ける。記事はパンくずリストとトピックページから分類へ戻れる

機能のページを製品の機能名ではなく「読者が何をしたいか」で分けたのは、項目名を読者の言葉にするためです。また、記事を分類ごとの解説文付きのトピックページにまとめ、パンくずリストと記事の下からトピックページを経由させる構成にしています。この構成の効果(順位や流入の変化)は、まだ測定前です。

AI検索とグローバルナビゲーション

AIによる概要や AI モードでも、サイトの中でページが見つけやすいことは基本として重要です。Google は、AI 機能のための特別な最適化は不要としたうえで、引き続き重要な基本として「コンテンツがウェブサイトの内部リンクから簡単に見つけられるようにします」を挙げています(Google 検索セントラル「AI 機能とウェブサイト」、最終更新日 2025-12-31、2026年10月13日確認)。

グローバルナビゲーションは、その入口の1つです。主な分類の一覧ページをメニューに置き、一覧から個々の記事へ、記事どうしは本文のリンクでつなぐと、メニューに載らないページにもたどり着ける道ができます。どの記事にもリンクされていないページを残さないことが、通常の検索でも AI 検索でも共通の確認点です。

よくある質問

グローバルナビの項目はいくつが適切ですか?

公式の資料に決まった数はありません。読者がよく探すページと事業として案内したいページを優先し、細かいページは開閉する一覧・パンくずリスト・フッターに任せます。項目を足すときは、GA4 でそのページが探されているかを確かめます。

ハンバーガーメニューはSEOに不利ですか?

開閉の形そのものの扱いを説明した Google の公式の記載は確認できませんでした。確かめるべきなのは、閉じた状態でもメニューのリンクが href 付きの a 要素として HTML に書かれているかと、URL 検査ツールで Google が読み取った HTML にリンクが含まれているかです。

グローバルナビとローカルナビの違いは何ですか?

グローバルナビゲーションはサイトのすべてのページで共通の主なメニューで、ローカルナビゲーションはある分類の中のページだけで使う、同じ分類のページどうしを移動するためのメニューです。

グローバルナビとヘッダーの違いは何ですか?

ヘッダーはページ上部の領域全体で、ロゴや問い合わせのボタンなども含みます。グローバルナビゲーションは、その中にある主なページへのメニューの部分を指します。

SEOAGENTでできること

SEOAGENT の内部リンクの機能では、記事ごとに入ってくるリンクと出ていくリンクを表で確認でき、「被リンク0だけ」で絞り込むと、どの記事からもリンクされていない記事を見つけられます。リンクの提案では、リンクを入れる段落・語・行き先・理由を確認して原稿に入れられます。

できないこと:数えるのは本文中のリンクで、メニュー・サイドバー・フッターのリンクは含みません。グローバルナビゲーションのデザインやテーマのコードを作る機能ではありません。サイトの作りに関するほかの記事は「記事・サイト改善の記事一覧」にまとめています。

参考情報

関連する記事

「記事・サイト改善」の記事をすべて見る →

執筆レギュレーションの作り方:表記ルール・文体・出典の決まりを社内で統一する
記事・サイト改善

執筆レギュレーションの作り方:表記ルール・文体・出典の決まりを社内で統一する

書き手が増えると、表記や文体、出典の示し方が記事ごとにばらつきます。執筆レギュレーションに入れる項目のひな形、公的な表記の基準の使い方、出典と法令に関わる表現の決まり、当サイト(seoagent.jp)の書き方の決まりと確かめ方を説明します。

コンテンツ監査(記事の棚卸し)のやり方:一覧の作り方と、残す・直す・統合・削除の判定
記事・サイト改善

コンテンツ監査(記事の棚卸し)のやり方:一覧の作り方と、残す・直す・統合・削除の判定

記事が増えると、古くなった記事や同じ問いに答える記事が生まれます。公開済みの記事を一覧にし、記事ごとに残す・直す・統合する・noindex にする・削除するを決める手順を、Google の説明と当サイト(seoagent.jp)の棚卸しの記録をもとに説明します。

採用サイトのSEO:求人ページの作り方と、求人情報の構造化データ
記事・サイト改善

採用サイトのSEO:求人ページの作り方と、求人情報の構造化データ

自社の採用サイトの求人ページを、仕事を探す人に検索で見つけてもらうための方法をまとめました。求職者が使う職種名の調べ方、1 求人 1 ページの作り方、Google の求人情報の構造化データ、募集が終わった求人の扱い、求人票で守る法律の決まり、応募の計測を説明します。

AIでSEO対策を、もっと続けやすく。

機能と使い方、料金・契約条件は、サービス資料でご案内します。