HTML5 Webサイトで<title>、<header>、<h1>、および<h2>を適切に使用していますか？

私は数日間このテーマを研究してきましたが、検索インデックス作成に関して多くの矛盾する提案を見つけました。私は、単純な製品の説明から詳細なユーザードキュメントまで、さまざまなページを含むプロジェクトに取り組んでいます。

この質問を今後の読者にとってより役立つと思うので、この質問をいくつかのセクションに分けました。

私の発見のいくつか

いくつかのWebサイトでは、次のようなドキュメントの概要を想定しているようです。

1. Programmer's Guide  (https://www.dartlang.org/docs/)
    1. Getting Started
    2. Concepts
        1. Libraries
        2. Fundamental classes
        etc.

上記の例が<nav>適切な見出しの要素を利用していないことは興味深いと思います。私はアウトラインのシンプルさとGoogleであることが好きで、これに関しては彼らが何をしているのか知っていると確信しています。

しかし、上記の概要では「ダーツ」について言及していないため、私は混乱しています。セマンティックな意味での「Dart」の唯一の言及は、「<title>Programmer's Guide | Dart：Structured web apps」という主要なドキュメント要素内にあるようです。

MDN（Mozilla Developer Network）は、この原則に従うWebサイトのもう1つの素晴らしい例です。<h1>タイトルの多くは完全なコンテキストを提供します（HTML5ドキュメントのセクションとアウトライン）：

1. Sections and Outlines of an HTML5 Document
    1. Untitled Section (nav)
    2. Untitled Section (nav)
    3. Structure of a Document in HTML 4
    4. Problems Solved by HTML5

他の人は文脈からあまり意味をなさないが（避けるべき時代遅れの慣行）。たとえば、次のHTML5アウトラインはCSS、HTML5、またはC＃に関連していますか？

1. Obsolete practices to avoid
    1. Untitled Section (nav)
    2. Untitled Section (nav)
    3. Doctype
    4. <meta> element and charset attribute

さらに悪いことに、MDNに同じ（または非常によく似た）タイトル「回避すべき慣習」が2つあり、一方がCSSガイドの一部で、もう一方がHTMLガイドの一部である場合はどうなるでしょうか。

スペクトルの反対側では、Webサイトは<body>製品名（Foo）またはトピックコンテナー（Fooのユーザーガイド）にメインレベルの見出しを使用しているようです。その後のすべてのページは<h2>、実際のページタイトルに使用されます。

質問

検索エンジンは、DOMとHTML5アウトラインを使用して、MDN Webサイトで見られるようなWebページのコンテキストをどのように推測しますか？

Googleが適切なコンテキストでページのインデックスを作成できるように、次のHTML5ページをマークアップする正しい方法は何ですか？これは、の使用が含ま<title>、<header>および<h1>要素を。

会社名
商品名
ユーザーガイド
入門

Webブラウザーで表示されるHTMLの最も重要な見出し。これは、Webサイト全体のコンテキスト（会社名または製品名）、トピックのコレクション（ユーザーガイド）、または実際のトピック（はじめに）を表す必要があります。？

私の最高の推測

<!DOCTYPE html>
<html>
<head>
    <title>Getting Started | User Guide | Product Name - Company Name</title>
</head>
<body>
    <header role="banner"> <!-- Note: Lack of <h1> in here -->
        <a id="logo" href="http://example.com">Company Name</a>
        <nav>
            <h1>Site Navigation</h1>
            <ul> ... </ul>
        </nav>
    </header>
    <main role="main">
        <div class="product-name">Product Name</div>
        <div class="document">User Guide</div>

        <h1>Getting Started</h1>

        <p>blah</p>
    </main>
</body>
</html>

概要につながる：

1. Getting Started

— リー・ヘイズ
ソース

検索エンジンがアウトラインを使用する場合、ドキュメントを探していることを正しく理解していますか？（とは関係のないSEOに使用するマークアップアドバイス、用）

— unor

@unor MDN / Dartのドキュメントで使用されているテクニックが機能する理由と、重要な知識が不足している場合を学びたいです。<title>コンテキストを提供するために依存しているようです。たとえば<h1>User Guide for Ubermachine</h1>、トピックの見出しが表示されるすべてのページに同じものを含めることは悪い考え<h2>Getting Started</h2>ですか？または、アウトラインが検索エンジンに役立つコンテキストを提供するために<h1>Getting Started</h1>付随<title>Getting Started | User Guide for Ubermachine</title>するもので始まる必要があります。これはSEOの質問です。

— リーヘイズ14

2つの個別の製品がある場合、独自の「はじめに」トピックを含む2つのユーザーガイドが存在する可能性が非常に高くなります。したがって、MDNアプローチに対する懸念の一部であり、<title>十分なコンテキストを提供するかどうかを知りたい理由です。

— リーヘイズ14

検索エンジンについては心配しません。このレベルで考えている場合、サイトの残りの部分はおそらく技術的には問題なく、検索エンジンに十分でしょう。代わりにユーザーについて考えてください。

— ジョンミューラー14年

URLについて言及していません。これは、人間とロボットの使いやすさにとって重要なメカニズムでもあります。たとえば、2つのMDNの例<h1>は一貫性がありません。コンテキスト、両方のURLには、ページタイトルの前に/ web / guide / html /が含まれます。

— マーティンF 14年

回答:

広範囲にわたるウェブ検索中に引用文を見つけましたが、この引用文は、この質問の今後の読者にも役立つと思われます。

<h1>トップレベルの見出しに使用

<h1> 文書の第1レベルの見出しのHTML要素です。

文書が基本的にスタンドアロンである場合（たとえば、ジュネーブの「見ることとすること」）、最上位の見出しはおそらくタイトルと同じです。

それがコレクションの一部である場合、たとえば、ペットに関するページのコレクション内の犬に関するセクションの場合、トップレベルの見出しは、ある程度のコンテキストを想定する必要があります。<h1>Dogs</h1>タイトルがどのようなコンテキストでも機能するように書いてください：Dogs-Your Guide to Pets。

元のソース：http : //www.w3.org/QA/Tips/Use_h1_for_Title

上記の引用は、ドキュメントレベルの<h1>要素が、<title>それ自体を使用して定義されている現在のページのコンテキストを想定できることを示唆しているようです。おそらく、まったく同じページが複数ある場合<h1>、これは大丈夫でしょう...

<title>Getting Started | Guide | Uber Product - Company Name</title>
<h1>Getting Started</h1>

<title>Getting Started | Guide | Other Uber Product - Company Name</title>
<h1>Getting Started</h1>

関連項目：<title>：品質Webページの最も重要な要素

回答を受け入れる前に、他の人の考えを待ちたいと思います。

— リー・ヘイズ
ソース

素敵な質問の更新とフォローアップの回答。あなたが正しい答えだと思うなら、あなたの答えを受け入れないなら、他の人はチャイムインするでしょう。

— ダン

ヘッダーの「製品名」のH1または見出しレベルの使用に異議を唱えます。
H1は、製品、アプリケーション、またはサイトではなく、ページのタイトルを表します。
アクセシビリティとSEOの両方の目的のために、すべてのページでH1を繰り返すことは有害です。Unfortunetalyこの場合には手段「サイトのタイトルは」これだけ選択肢があることを意味的なHTMLタグが存在しない<div>か、<p>またはおそらく<strong>それにいくつかの意味的な重点を与えるためにタグが。

<main>
  <header>
    <div>Logo</div>
    <div>Product name</div>
    <nav>
      <ul> ... </ul>
    </nav>
  </header>
  <section>
    <h1>Getting started</h1>
    ...content
  </section>
</main>

— ダビデルリッゾ
ソース

正解は1つではなく、さまざまなオプションがあります。

以下にいくつかのオプションを示しますが、すべてに長所と短所があります。

このオプションは多かれ少なかれあなたが提示したものですが、もう少し見出しとコンテンツの行き先が表示され、さらにロゴは画像/テキストよりも複雑な要素であり、関連するすべてのものがあるという考えがあります会社の個性として印象を与える要素、それがなぜセクションなのか。再び。セクションではなく、単なるdivになります。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Getting Started | User Guide | Product Name - Company Name</title>
    </head>
    <body>
        <section>
            <a id="logo" href="http://example.com">Company Name</a>
        </section>
        <nav>
            <ul> ... </ul>
        </nav>
        <main>
            <header>
                <h1>Product Name</h1>
            </header>
            <p>...</p>
            <header>
                <h1>User Guide</h1>
                <p>...</p>
            </header>
            <p>...</p>
        </main>
    </body>
</html>

次のページでは、ページの関連部分を示すメインタグを紹介します。このタグはまだサポートと将来については大雑把ですが、ナビゲーションが製品またはページとは無関係であることを明確に示しています。セクションタグは他のコンテナであり、メインは一部の人向けの記事です。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Getting Started | User Guide | Product Name - Company Name</title>
    </head>
    <body>
        <section>
            <a id="logo" href="http://example.com">Company Name</a>
        </section>
        <nav>
            <ul> ... </ul>
        </nav>
        <main>
            <header>
                <h1>Product Name</h1>
            </header>
            <section>
                <header>
                    <h1>User Guide</h1>
                    <p>...</p>
                </header>
                <p>...</p>
            </section>
        </main>
    </body>
</html>

ほとんどの人はその記事を使用する傾向があるため、次の記事では記事を使用します。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Getting Started | User Guide | Product Name - Company Name</title>
    </head>
    <body>
        <article>
            <a id="logo" href="http://example.com">Company Name</a>
            <nav>
                <ul> ... </ul>
            </nav>
            <main>
                <header>
                    <h1>Product Name</h1>
                </header>
                <section>
                    <header>
                        <h1>User Guide</h1>
                        <p>...</p>
                    </header>
                    <p>...</p>
                </section>
            </main>
        </article>
    </body>
</html>

私は非常にモジュール式でブロック指向であるため、次のようなものを使用します。したがって、各要素は、関連するキーによってのみ関連付けられたデータベースの観点から独立しています。ほとんどの場合、セクションタグはスキップします。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Getting Started | User Guide | Product Name - Company Name</title>
    </head>
    <body>
        <nav>
            <ul> ... </ul>
        </nav>
        <main>
            <header>
                <h1>Product name</h1>
            </header>
            <section>
                <header>
                    <h1>description of product</h1>
                </header>
                <p>...</p>
            </section>
            <section>
                <header>
                    <h1>user guide</h1>
                </header>
                <p>...</p>
            </section>
            <section>
                <header>
                    <h1>Getting started</h1>
                </header>
                <p>...</p>
            </section>
        </main>

    </body>
</html>

それでも、さらにオプションがあります。

— パトマ
ソース

それらはすべて私には過度に複雑に見えます。

— マーティンF 14年

HTML5 Webサイトで<title>、<header>、<h1>、および<h2>を適切に使用していますか？

私の発見のいくつか

質問

私の最高の推測

<h1>トップレベルの見出しに使用

`<h1>`トップレベルの見出しに使用