web-dev-qa-db-ja.com

<h1>-セマンティックインパクトとSEOインパクト

Html5の見出し構造のアーキテクチャについては多くの議論があります。さまざまな記事を読んだ後、論理的に理にかなっている3つの可能なアーキテクチャに到達しましたが、実際の適切なアプローチ方法はわかりません。以下にコード例を記載します。誰かが適切なバランスに光を当てることができれば幸いです。さらに悪いことに、「あなたは間違っている」と言って手を貸すことができます。

アプローチ1：バージョンA

単一<h1>：ページ固有のコンテンツのみに見出しを使用します。

これにより、コンテンツ領域内で必要に応じて<h1>を流しながら、<h2-6>をページ固有の見出しのトップレベルナビゲーションとして残します。 <header>、<nav>、および<footer>を「無題」要素のままにします。

<header>
  <nav>
    <!-- no headings -->

<div role="main">
  <h1>
  <section>
    <h2>
      <section>
        <h3>

<footer>
  <!-- no headings -->

アプローチ1：バージョン2

複数の<h1> 's：ページ固有のコンテンツのみに見出しを使用します。

1Aと同じですが、複数の等しく重要なページコンテンツトピックが追加されています。 （例：ブログや分割トピックページで可能）

<header>
  <nav>
    <!-- no headings -->

<div role="main">
  <h1>
  <article>
    <h2>
  <article>
    <h1>

<footer>
  <!-- no headings -->

アプローチ1の概要：SEOに最も論理的（私の研究からの私の意見）

  • 無題のボディ
    • 無題のNAV
  • 主見出し
    • セクション見出し
      • サブセクションの見出し
    • 無題のセクション

アプローチ2：

複数の<h1> 's：アウトライン構造とコンテンツ階層を強調します

これにより、サイト全体の要素<header>、<nav>、および<footer>に見出しが適用され、コンテンツ指向ではない要素に対して複数の<h1>が使用されます。

<header>
  <h1>
  <nav>
    <h2>

<div role="main">
  <h1>
  <section>
    <h2>
    <section>
      <h3>

<footer>
  <h1>
  <section>
    <h2>

アプローチ2のアウトライン：セマンティックアウトラインに最も論理的（もう一度、私の意見）

  • ヘッダーの見出し
    • ナビゲーションの見出し
  • 主見出し
    • セクション見出し
      • サブセクションの見出し
  • フッターの見出し
    • セクション見出し

アプローチ3

単一<h1>：コンテンツ階層フォーカス。サイト全体の要素の下位レベル<h1-6>

これは、サイト全体の要素<header>、<nav>、および<footer>に見出しを適用し、コンテンツ指向ではない要素に対して複数の<h1>を使用します。

<header>
  <h2>
  <nav>
    <h3>

<div role="main">
  <h1>
  <section>
    <h2>
    <section>
      <h3>

<footer>
  <h2>
  <section>
    <h3>

アプローチ3の概要：両方のアプローチのハイブリッド

  • ヘッダーの見出し
    • ナビゲーションの見出し
  • 主見出し
    • セクション見出し
      • サブセクションの見出し
    • フッターの見出し
    • セクション見出し

ということで、これをどうやって理解するのでしょうか？あるアプローチは、他のアプローチよりもセマンティックな価値をもたらしますか？ SEOの観点からより理にかなっていますか？達成できる幸せなバランスはありますか？

出典：もっとたくさんありましたが、これらは現時点で覚えているものです

seohtml5headingh1
10
darcher

以下は、消費者（検索エンジンなど）がHTML標準で指定されているものを期待して動作するという前提に基づいた、HTML5仕様の観点からのものです。現在の慣例では、このようなマークアップの詳細はおそらくSEOにとっては重要ではありませんが、他の消費者やアクセシビリティにとっては重要になる可能性があります。

これは HTML5が推奨するもの であるため、適切なランクの見出しを使用しますが、 h1 everywhereを使用することも可能 （常にセクションを使用している場合必要に応じてコンテンツ要素）。

見出しをheaderまたはfooter要素に「適用」することはできません。これらはセクションコンテンツではないためです（見出しのみを含むことができますが、この見出しはheader/footerの範囲に制限されません）。

各セクショニングコンテンツ要素（section、article、nav、aside）および各セクショニングルート要素（body、blockquoteなど）に見出しを適用できます。

これらのセクションコンテンツ/ルート要素と見出し要素h1-h6は、 ドキュメントアウトライン に関係する唯一の要素です。

すべてのセクションは見出しに対して「長く」なりますが、 必須ではない を指定すると（そのような場合、「暗黙の」無題の見出しになります）。提供することはしばしば有用ですが、実際には必要ない場合があります。たとえば、ナビゲーションが1つしかない場合、見出しのないnavで十分です。ただし、サイトに複数のナビゲーションがある場合は、さまざまな目的を説明する見出しを使用するのが理にかなっています。

アプローチ1では、bodyは無題のセクションです（ただし、これは、navが表示されるためですbefore最初の見出し要素。それ以外の場合、このh1は全体の見出しになります資料）。
無題のbodyセクションを持つことは良い選択とは思いません。アウトラインの最初のエントリであり、理想的には（必ずしもそうではありませんが）後続のすべてがこのエントリの範囲内にあります。

グローバルナビゲーションを備えた一般的なWebサイトの場合、グローバルナビゲーションは全体に属するため、_ 意味がある （ 長い説明 ）bodyセクションの見出しにサイト名を使用するsite、現在のドキュメントだけではありません：

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
-->

サイトはこのドキュメントのメインコンテンツのコンテキストであるため、つまりサイトの一部であるため、このドキュメントのメインコンテンツもサイト見出しの範囲内にある必要があります。

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <article> <!-- document content -->
    <h2>My blog post</h2>
  </article>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "My blog post"
-->

ブログ投稿のリストなど、メインコンテンツのセクションが複数ある場合は、sectionをarticleの直接の子として持つ代わりに、これらのarticleをすべて含むbodyを使用することが理にかなっています。

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <section> <!-- document content -->
    <h2>Recent blog posts</h2>

    <article>
      <h3>My blog post</h3>
    </article>

    <article>
      <h3>Another blog post</h3>
    </article>

  </section>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "Recent blog posts"
      1.2.1 "My blog post"
      1.2.2 "Another blog post"
-->

セクション全体の要素を必要とするほど複雑なサイト全体のフッターがある場合は、navやメインコンテンツ（メインコンテンツではなくサイトに属しているため）と同じレベルにある必要があります。

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <section> <!-- main content -->
    <h2>Recent blog posts</h2>

    <article>
      <h3>My blog post</h3>
    </article>

    <article>
      <h3>Another blog post</h3>
    </article>

  </section>

  <section> <!-- site footer -->
    <!-- this section should be the child of a 'footer' element -->
  </section>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "Recent blog posts"
      1.2.1 "My blog post"
      1.2.2 "Another blog post"
    1.3. Untitled section
-->

（これらのすべての例では、ナビゲーションはメインコンテンツの前にありますが、メインコンテンツを最初に持っていることは理にかなっています。これらを入れ替えることは可能です。サイト名を持つh1が他のセクション/見出し。）

2
unor