<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>：ページ固有のコンテンツのみに見出しを使用します。

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

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

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

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

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

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

アプローチ2：

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

これは、サイト全体の要素<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>非コンテンツ指向の要素に対してS」。

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

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

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

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

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

以上のことを踏まえて、これらすべてをどのように理解できますか？1つのアプローチが他よりも意味論的価値を持っていますか？SEOに関してもっと意味がありますか？達成できる幸せなバランスはありますか？

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

• https://youtu.be/GIn5qJKU8VM
• http://accessiblehtmlheadings.com/
• http://html5doctor.com/outlines/
• http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824

最初に、どの例もセマンティクスとは関係ありません。あなたの質問は、完全に従来の方法でページが上から下に読み取られるパーサーモデルに基づいています。

このため、最初の例は正しいです。次の例では、予測可能な結果が得られず、深刻な胸焼けを引き起こす可能性があります。

Webページは概念的にいくつかの方法で見られることを理解してください。1つは、HTMLなどがユーザーの観点から評価される従来のDOMモデルに従います。2つ目は、タイトル、サブタイトル、コンテンツなどを示す単純なマークアップのみのテキストです。3つ目は、h1〜6階層の場所に基づいて、インデックスのヘッダータグにほんのわずかな重みが適用されるセマンティックビューを使用することです。DOMモデルからは、タイトルタグ、説明メタタグなど、他の2つのビューにはないものを取得します。ただし、DOMビューはコンテンツの重み付けにはほとんど役立ちません。主な機能は、ページ、ナビゲーションの場所、ヘッダーとフッターの場所、コンテンツの開始と終了などを理解することです。

あなたが本当に注意しなければならないのは、テキストのみと意味論的見解です。セマンティックビューは、ほとんどがテキストのみのビューから派生しますが、さまざまな言語学、心理意味論、セマンティクス、およびコンテンツの他の分析を伴います。

セマンティクスについて再度説明することはしませんが、先ほど書いた、このテーマに関するミニチュートリアルである回答を紹介します。なぜ、Googleの検索結果がない場合に、キーワードスタッフィングのあるWebサイトのランクが1よりも高くなるのでしょうか。

Webは印刷されたページに基づいており、初期のパーサーはこれらの伝統に従っており、ほとんど変更されていないため、それらを回避することは不可能です。パーサーモデルに基づく最良の戦略である見出しの読み取り順序を説明する答えは次のとおりです。一般的なキーワードと特定のキーワードのGoogleランキングを改善する

ヘッダータグを移動することで多少の影響が生じる可能性があることは認めますが、こうするのは賢明なことですか？地獄！今日の重み付け方法は、明日の重み付け方法とは異なる場合があります。従来の形式に従うと、予測可能な結果が保証され、重み付けを変更するだけでサイトがテールスピンに陥る可能性があります。

これがどのように機能するかについての視点は次のとおりです。SEOにおけるドメイン名の利点タイトルを無視し、回答の一番上をスキップして、プログラマの視点に行きます。

これらの3つの答えを読むと、ヘッダータグの効果を簡単に理解できます。これらをどのように配置するかによって、ページ/サイトのパフォーマンスがかわいくなってしまう可能性があります。伝統に従っても、いくつかの下部ヘッダータグを最適化しすぎることで、titleタグとh1タグを非常にすばやく元に戻すことができます。慎重なバランスが鍵です。

最後に、エンジニアではない人々からのこのオンラインSEOアドバイスすべてについて警告します。それはお金を稼ぎ、あなたの注意を争うラケットです。検索エンジンのしくみは秘密ではありません。どこを見ればいいのかわかります。ほとんどすべてのSEOの専門家は、検索技術がどのように組み合わされているかについての内部を伝えることができないという点で、まったく専門家ではありません。GoogleやBingのエンジニアになるまでは、これらの検索エンジンがどのように機能するかを正確に知ることはできません。幸いなことに、Googleは十分な情報を提供してくれました（実際、Mattという名前の人からではなく、知っておく必要のあるほとんどすべての情報を提供してくれました）。科学と技術を知っていれば、かなり合理的な仮定で作られる。私の見解では、ほとんどのSEOは正しいというよりは間違っていますが、いくつかは平均よりはるかに高いヒット率を持っています。

以下は、消費者（検索エンジンなど）がHTML標準で指定されているものを期待して使用することを想定した、HTML5仕様の観点からの抜粋です。現在のところ、このようなマークアップの詳細はSEOにとってはあまり重要ではありませんが、他のコンシューマーやアクセシビリティにとっては重要な場合があります。

これはHTML5が推奨する適切なランクの見出しを使用しますが、あらゆる場所で使用することh1もできます（適切な場所で常にセクションコンテンツ要素を使用している場合）。

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

各切片コンテンツ要素（section、article、nav、aside）及び各切片ルート要素（body、blockquoteなど）の見出しを適用することができます。

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

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

アプローチ1では、bodyこれは無題のセクションです（ただし、最初の見出し要素の前にnav表示されるため、これは唯一のケースです。それ以外の場合h1は、ドキュメント全体の見出しになります）。
無題のbodyセクションがあるのは良い選択だとは思いません。これはアウトラインの最初のエントリであり、理想的には（必須ではありませんが）以降のすべてがこのエントリのスコープ内にあります。

グローバルナビゲーションを備えた一般的なWebサイトの場合、グローバルナビゲーションは現在のドキュメントだけでなく、サイト全体に属しているため、セクションの見出しにサイト名を使用することは理にかなっています（長い説明）。body

<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なく、これらすべてを含むを使用するのが理にかなっています。articlebody

<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サイト名のが他のセクション/見出しの前に来ることだけを確認してください。）