web-dev-qa-db-ja.com

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>要素 "プログラマーズガイド| Dart：構造化されたWebアプリ"内にあるようです。

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サイトは製品名（Foo）またはトピックコンテナー（Fooのユーザーガイド）のメイン<body>レベルの見出しを使用しているようです。その後のすべてのページでは、実際のページタイトルに<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
seohtmlgoogle-searchhtml5semantic-web
14
Lea Hayes

広範囲にわたるウェブ検索の間に、私はこの質問の将来の読者も役に立つだろうと思う疑いを見つけました。

最上位の見出しには<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ページの最も重要な要素

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

8
Lea Hayes

ヘッダーの「製品名」のH1または見出しレベルの使用に異議を唱えます。
H1は、製品、アプリケーション、またはサイトではなく、ページのタイトルを表します。
アクセシビリティとSEOの両方の目的のために、すべてのページでH1を繰り返すことは有害です。残念ながら、この場合、「サイトタイトル」を意味するセマンティック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
davidelrizzo

正解は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>

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

0
PatomaS