在HTML5网站中正确使用<title>，<header>，<h1>和<h2>？

我已经研究了该主题几天，并发现了许多有关搜索索引的建议。我正在从事一个项目，该项目有许多不同的页面，从简单的产品描述到深入的用户文档。

我将这个问题分为几部分，因为我认为这将使该问题对以后的读者更加有用。

我的一些发现

几个网站似乎采用了如下的文档大纲：

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

我发现有趣的是，上面的示例未使用<nav>具有适当标题的元素。我喜欢大纲的简洁性，并且喜欢成为Google，我可以确定他们知道自己在做什么。

但是我很困惑，因为上面的概述没有提到“ Dart”。从语义上仅提及“ Dart”似乎是在主要文档<title>元素“程序员指南| Dart：结构化Web应用程序”之内。

MDN（Mozilla开发人员网络）是遵循该原则的另一个出色的网站示例。许多<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指南的一部分，该怎么办...

在频谱的另一端，网站似乎使用<body>产品名称（Foo）或主题容器（Foo用户指南）的主标题。然后所有后续页面都<h2>用作实际页面标题。

问题

搜索引擎如何使用DOM和HTML5轮廓推断类似于MDN网站上的网页上下文？

标记以下HTML5页面的正确方法是什么，以便Google可以在适当的上下文中为该页面编制索引？这包括的使用<title>，<header>和<h1>元件。

公司名
产品名称
用户指南
入门

在Web浏览器中查看的HTML中最重要的标题应该代表整个网站的上下文（公司名称或产品名称），主题集合（用户指南）还是实际的实际主题（入门）？

我最好的猜测

<!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

— 莉亚·海斯（Lea Hayes）
source

我是否正确理解您是否在寻找文档，以及搜索引擎如何使用该大纲？（并且不提供与SEO无关的建议使用标记）

— 2014年

@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问题。

— Lea Hayes

如果有2个单独的产品，则很可能会有2个用户指南包含其自己的“入门”主题。因此，我对MDN方法的部分关注以及为什么我想知道是否<title>提供足够的上下文。

— Lea Hayes

我不会担心搜索引擎。如果您在这个级别上考虑，那么您网站的其余部分在技术上可能会很好，并且对于搜索引擎来说足够好。想想您的用户。

— John Mueller

您没有提及网址。这也是人类和机器人友好的重要机制。例如，当您的两个MDN示例<h1>不一致时。上下文中，它们的两个URL都在页面标题之前包含/ web / guide / html /。

— Martin F

Answers:

在广泛的网络搜索中，我发现了一个引文，它对我很有用，并怀疑将来对此问题的读者也会如此。

采用<h1>了顶级标题

<h1> 是文档第一级标题的HTML元素：

如果该文档基本上是独立的，例如在日内瓦的“必看景点”，那么顶级标题可能与标题相同。

如果它是集合的一部分，例如关于宠物的页面集合中有关狗的部分，则顶级标题应具有一定的上下文；只要<h1>Dogs</h1>在标题在任何情况下都可以使用时写一下：狗-宠物指南。

原始来源：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>：高质量网页的最重要元素

在接受答案之前，我想等一下别人的想法。

— 莉亚·海斯（Lea Hayes）
source

好的问题更新和后续答案。如果您认为这是正确的答案，也许其他人会听到，如果不接受您的答案。

— dan

对于标题中的“产品名称”使用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>

— 大卫德里佐
source

没有一个正确的答案，有不同的选择。

以下是一些选项，但它们各有利弊：

此选项或多或少是您所介绍的选项，但显示的标题更多，内容会去往何处，再加上徽标的含义，它将是比图像/文字更复杂的元素，它将具有所有相关内容元素给人的印象是公司的个性，即为何如此。再次。它不能是一个部分，而只能是一个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>

下一个介绍主要标签，以显示页面的相关部分。该标签在支持和将来方面仍是粗略的，但是它清楚地表明导航与产品或页面无关。section标签可以是其他容器，而main可以是某些人的商品。

<!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>

我将使用类似下一个的东西，因为我非常模块化并且面向块，所以每个元素从数据库角度都是独立的，仅与相关的键相关。虽然我很可能会跳过section标签。

<!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>

而且，还有更多选择。

— 癌
source

它们对我来说看起来都过于复杂。

— Martin F

在HTML5网站中正确使用<title>，<header>，<h1>和<h2>？

我的一些发现

问题

我最好的猜测

采用<h1>了顶级标题

采用`<h1>`了顶级标题