web-dev-qa-db-fra.com

Utilisation appropriée de <titre>, <en-tête>, <h1> et <h2> dans un site Web HTML5?

J'étudie ce sujet depuis plusieurs jours et j'ai trouvé de nombreuses suggestions contradictoires concernant l'indexation de la recherche. Je travaille sur un projet comportant de nombreuses pages différentes, allant de simples descriptions de produits à une documentation utilisateur détaillée.

J'ai divisé cette question en sections, car j'estime que cela la rendra plus utile pour les futurs lecteurs de cette question.

Certaines de mes découvertes

Plusieurs sites Web semblent avoir adopté des lignes de document telles que:

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

Je trouve intéressant que l'exemple ci-dessus n'utilise pas l'élément <nav> avec un en-tête approprié. J'aime la simplicité des grandes lignes et le fait d'être Google, je suis à peu près certain qu'ils savent ce qu'ils font à ce sujet.

Mais je suis confus car le contour ci-dessus ne mentionne pas "Dart". La seule mention de "Dart" au sens sémantique semble se trouver dans le document principal <title>, élément "Guide du programmeur | Dart: applications Web structurées".

Le MDN (Mozilla Developer Network) est un autre exemple brillant de site Web qui suit ce principe. De nombreux titres <h1> fournissent un contexte complet ( sections et contours d'un document 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

Tandis que d'autres n'ont pas beaucoup de sens hors contexte ( pratiques obsolètes à éviter ). Par exemple, le contour HTML5 suivant concerne-t-il CSS, HTML5 ou C # ... avec juste le contour du document à parcourir, qui sait!

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

Pour aggraver les choses, que se passe-t-il si le MDN contient 2 sujets portant le même titre (ou très similaire) "Pratiques obsolètes à éviter", l'un faisant partie de leur guide CSS et l'autre de leur guide HTML ...

À l’autre bout du spectre, les sites Web semblent utiliser l’en-tête principal de niveau <body>- pour le nom du produit (Foo) ou le conteneur de sujets (Guide de l’utilisateur pour Foo). Où toutes les pages suivantes utilisent ensuite <h2> pour le titre de la page.

La question

Comment les moteurs de recherche déduisent-ils le contexte d'une page Web similaire à celle trouvée sur le site Web MDN à l'aide du DOM et du contour HTML5?

Quel est le bon moyen de baliser la page HTML5 suivante afin que Google puisse indexer la page dans le contexte approprié? Ceci inclut l'utilisation des éléments <title>, <header> et <h1>.

  • Nom de la compagnie
  • Nom du produit
  • Mode d'emploi
  • Commencer

Le titre le plus significatif du code HTML visualisé dans un navigateur Web, si celui-ci représente le contexte de l'ensemble du site Web (nom de l'entreprise ou nom du produit), l'ensemble des rubriques (Guide de l'utilisateur) ou le sujet à traiter (Mise en route) ?

Mon meilleur devin

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

Menant au contour:

1. Getting Started
seohtmlgoogle-searchhtml5semantic-web
14
Lea Hayes

Au cours de mes recherches approfondies sur le Web, j'ai trouvé une citation que je trouve utile et qui pourrait également intéresser les futurs lecteurs de cette question.

Utilisez <h1> pour l'en-tête de niveau supérieur

<h1> est l'élément HTML de l'en-tête de premier niveau d'un document:

  • Si le document est fondamentalement autonome, par exemple Choses à voir et à faire à Genève, l'en-tête de niveau supérieur est probablement identique au titre.
  • S'il fait partie d'une collection, par exemple une section sur les chiens dans une collection de pages sur les animaux de compagnie, l'en-tête de niveau supérieur doit assumer une certaine quantité de contexte; écrivez simplement <h1>Dogs</h1> alors que le titre devrait fonctionner dans n'importe quel contexte: Chiens - Votre guide des animaux domestiques.

Source originale: http://www.w3.org/QA/Tips/Use_h1_for_Title

La citation ci-dessus semble suggérer que l'élément <h1> au niveau du document peut supposer que le contexte de la page en cours est défini à l'aide du <title> lui-même. Donc, vraisemblablement, s'il y avait plusieurs pages avec exactement le même <h1> alors tout irait bien ...

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

Voir aussi : <titre>: l'élément le plus important d'une page Web de qualité

Avant d’accepter une réponse, je voudrais attendre de voir ce que les autres pensent.

8
Lea Hayes

Je contesterais l'utilisation d'un niveau H1 ou de tout niveau de titre pour le "Nom du produit" dans l'en-tête.
Le H1 représente le titre de la page et non le produit, l'application ou le site.
Pour des raisons d'accessibilité et de référencement, un H1 répété sur chaque page serait préjudiciable. Malheureusement, dans ce cas, il n’existe pas de balise HTML sémantique qui signifie "titre du site". La seule option est donc une balise <div> ou <p> ou même peut-être même une balise <strong> pour lui donner un accent sémantique.

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

Il n'y a pas une seule bonne réponse, il y a différentes options.

Voici quelques options, mais elles ont toutes des avantages et des inconvénients:

Cette option est plus ou moins celle que vous avez présentée, mais montre un peu plus de titres et indique où le contenu irait, plus l'idée que le logo serait un élément plus complexe que seulement l'image/texte, il aurait tous les éléments pour faire une impression en tant que personnalité de l'entreprise, que pourquoi la section. Encore. ce ne pourrait pas être une section, mais juste une 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>

Cette prochaine introduit la balise principale pour montrer quelle est la partie pertinente de la page. Cette balise est toujours floue sur le support et à venir, mais indique clairement que la navigation n’a rien à voir avec le produit ou la page. L'étiquette de section pourrait être un autre conteneur et l'élément principal pourrait être un article pour certaines personnes.

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

Le prochain utilise l'article puisque la plupart des gens sont enclins à l'utiliser.

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

J'utiliserais quelque chose comme le suivant, étant donné que je suis très modulaire et orienté bloc, chaque élément serait indépendant du point de vue de la base de données uniquement lié à des clés pertinentes. Bien que je vais très probablement sauter les balises de 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>

et encore, il y a plus d'options.

0
PatomaS