web-dev-qa-db-ja.com

コンテンツをセクション化しているため、グローバルナビゲーションに<nav>を使用する必要がありますか？

バックグラウンド

SEOに関しては、 <h1>はページ固有のコンテンツとしてのみ使用する必要があります です。サイトのロゴタイプには使用しないでください。したがって、現在のホームページ構造は次のようになります。

<body>
<header>
  <p><img id="logo">
  <nav>
    <ul></ul>
  </nav>
</header>
<main>
  <h1>Homepage</h1>
  <!-- Content -->
</main>
<footer>
  <nav>
    <ul></ul>
  </nav>
  <p>Copyright
</footer>

しかし、上記のコードは HTML5アウトライナー でこのアウトラインを与えました：

  1. ホームページ
    1. 無題セクション（nav）
    2. 無題セクション（nav）

問題

<nav>はセクションコンテンツであるため、論理的にはページ内ナビゲーションではないため、グローバルナビゲーションに使用することを避ける必要がありますか？

seohtml5headingh1
3
Fong-Wan Chau

html5では、 nav 要素を使用して、リンクするページのセクションを表す必要があります

  • 他のページまたは
  • ページ内のパーツへ

したがって、フッターセクションで指定するリンクの種類によっては、nav要素内にリンクを挿入しないようにすることができます。

ページ上のすべてのリンクグループがnav要素にある必要はありません—要素は主に、主要なナビゲーションブロックで構成されるセクションを対象としています。特に、フッターには、利用規約、ホームページ、著作権ページなど、サイトのさまざまなページへのリンクの短いリストがあることが一般的です。そのような場合には、フッター要素だけで十分です。そのような場合はnav要素を使用できますが、通常は不要です

3
marcanuy

例の概要

https://gsnedders.html5.org/outliner/ が生成したアウトラインは正しくありません。

サンプルマークアップの正しいアウトラインは次のとおりです。

1. Document (<body> without heading)
  1.1. Navigation (<nav> without heading)
2. "Homepage" (implicit section opened by <h1>)
  2.1. Navigation (<nav> without heading)

「HTML5アウトライナー」を推奨します アウトラインをチェックするか、または W3Cバリデーター （「アウトライン」をチェックします）。

（引用したアウトラインが正しくない理由の詳細については、 https://github.com/hoyois/html5outliner/issues/7 を参照してください。）

サイト関連のコンテンツとページ関連のコンテンツ

観察は正しいです。ページ関連のセクションとサイト関連のセクションを混在させると問題が生じる可能性があります。しかし、まさにこれが理由で、メインコンテンツがh1を取得する必要があるというアドバイスは、アウトラインに関心がある場合には良いアドバイスではありません。

一般的なWebサイトのページには、ヘッダー、ナビゲーション、フッターなどのサイト全体の部分があります。それらを見出しの範囲に入れるには、bodyセクション化ルートの見出しを使用して、サイトを表します。

<body>
  <header>
    <h1>Example Site</h1> <!-- could be your logo’s 'alt' -->
  </header>

  <main>
  </main>

  <footer>
  </footer>
</body>

Documentには見出し（「サンプルサイト」）があり、別のh1をbodyセクショニングルートに追加しない限り、これはアウトラインの唯一の最上位エントリになります。他のすべてはそのスコープ内にあります。

これでnavを追加できます（サイト全体のナビゲーション用）：

  <header>
    <h1>Example Site</h1> <!-- could be your logo’s 'alt' -->
    <nav></nav>
  </header>

（navまたはその他のセクションは、body- headingの後に来ることが重要です。）

article（そのページのメインコンテンツがブログ投稿の場合）：

  <main>
    <article></article>
  </main>

記事の見出しはh1でもかまいませんが、 HTML5では対応するランクの見出し要素を使用することをお勧めします （セクション要素の使用に応じて）、つまり、この場合はh2 。

  <main>
    <article>
      <h2>Example Article</h2>
    </article>
  </main>

結果

これは与える：

<body>
  <header>
    <h1>Example Site</h1> <!-- could be your logo’s 'alt' -->
    <nav></nav>
  </header>

  <main>
    <article>
      <h2>Example Article</h2>
    </article>
  </main>

  <footer>
  </footer>
</body>

そしてアウトラインは

1. "Example Site"
  1.1. Navigation (<nav> without heading)
  2.2. "Example Article"

代替手段は何でしょうか？

サイト名をドキュメントの見出し（つまり、bodyのh1）にする必要があると確信していない場合は、 HTML5では作成者がセクションコンテンツ要素（article、aside、nav、section）明示的に 。

ブログ投稿にarticleを（たとえば）bodyの子として使用する場合、定義により第2レベルのアウトラインエントリがあります。推奨事項に従わない場合（つまり、articleを使用しない場合）にのみ、トップレベルのエントリを取得できます。

navにサイト全体のナビゲーションがある場合、これはこのトップレベルエントリの範囲（ブログ投稿の後に来る場合）、または無題のドキュメント見出しの範囲（その前に来る場合）ブログ投稿）。最初のバリアントは間違っています（サイト全体のナビゲーションはブログの投稿とは関係ありません）。2番目のバリアントは、複数のトップレベルエントリがあり、最初のエントリにはラベルがないため、理想的ではありません。

navの使用を停止する場合、ナビゲーションはまだ見出しの範囲内にあります。ラベルのないドキュメントエントリの一部か、メインコンテンツの一部になります。もちろん、両方とも理想的ではありません。

したがって、HTML5 W3C勧告に基づく私のアドバイス：

  • サイト名/ロゴでh1（bodyセクショニングルート用）を使用します。
  • ナビゲーション（サイト全体およびページ全体）にはnavを使用し、コンテンツにはarticle/sectionを使用します。
  • 各article/sectionone見出し要素（h2で始まる）を指定します。
2
unor

構築するWebサイトがSPAであるか、完全にサーバー側であるかによって異なります。メイン/サブセクションにアクセスするときにリロードする必要がないため、SPAに使用できます。 Googleのウェブクローラーは、コンテンツのみを優先するように構築されていると思います。 http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824 を参照してください

1
bydeinon

ホームページで<h1>を使用した理由は何ですか？ヘッダータグは、ページ内の重要なテキストの見出しに使用する必要があります。

フッターの場合、Facebookページ、YouTubeチャンネル、視聴者が便利だと思う他のページなど、他のページへのリンクなど、異なるナビゲーションを使用できます。

ヘッダーに同じナビゲーションを配置しないでください。サイト全体のリンクを介して文字通りナビゲーションを害する可能性があるためです。

0
Tony Logarta