Une bonne utilisation de <title>, <header>, <h1> et <h2> dans un site Web HTML5?

15

J'étudie ce sujet depuis plusieurs jours et j'ai trouvé de nombreuses suggestions contradictoires en ce qui concerne l'indexation de la recherche. Je travaille sur un projet qui a beaucoup de pages différentes allant de simples descriptions de produits à une documentation utilisateur approfondie.

J'ai divisé cette question en sections car je pense 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 contours de documents tels que les suivants:

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' <nav>élément avec un en-tête approprié. J'aime la simplicité du contour et étant Google, je suis assez certain qu'ils savent ce qu'ils font quand il s'agit de cela.

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

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

Alors que d'autres n'ont pas beaucoup de sens hors contexte ( pratiques obsolètes à éviter ). Par exemple, le plan HTML5 suivant se rapporte-t-il à CSS, HTML5 ou C # ... avec juste le plan du document, 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 passerait-il si le MDN contenait 2 sujets avec le même (ou très similaire) titre "pratiques obsolètes à éviter" où l'un fait partie de leur guide CSS et l'autre fait partie de leur guide HTML ...

À l'autre extrémité du spectre, les sites Web semblent utiliser l'en- <body>tête de niveau principal pour le nom du produit (Foo) ou le conteneur de rubrique (Guide de l'utilisateur pour Foo). Où toutes les pages suivantes sont ensuite utilisées <h2>pour le titre de la page réelle.

La question

Comment les moteurs de recherche infèrent-ils le contexte d'une page Web comme ceux trouvés sur le site Web MDN en utilisant le DOM et le contour HTML5?

Quelle est la bonne façon de baliser la page HTML5 suivante afin que Google puisse indexer la page dans le contexte approprié? Cela inclut l' utilisation des <title>, <header>et des <h1>éléments.

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

La rubrique la plus importante du code HTML qui s'affiche dans un navigateur Web, si elle représente le contexte de l'ensemble du site Web (nom de l'entreprise ou nom du produit), la collection de sujets (Guide de l'utilisateur) ou le sujet réel en cours (Mise en route) ?

Ma meilleure supposition

<!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
seo html google-search html5 semantic-web Lea Hayes
la source
Dois-je bien comprendre que vous recherchez de la documentation si et comment les moteurs de recherche utilisent le plan? (et pas pour des conseils sur le balisage à utiliser, sans rapport avec le référencement)
unor
@unor Je veux savoir pourquoi la technique utilisée dans la documentation MDN / Dart fonctionne et si je manque des connaissances clés. Ils semblent s'appuyer sur <title>pour fournir un contexte. Par exemple, est-ce une mauvaise idée d'inclure la même chose <h1>User Guide for Ubermachine</h1>sur chaque page où le titre du sujet est présenté avec <h2>Getting Started</h2>... ou le plan doit-il commencer <h1>Getting Started</h1>par un accompagnement <title>Getting Started | User Guide for Ubermachine</title>pour fournir un contexte utile aux moteurs de recherche. Il s'agit d'une question de référencement.
Lea Hayes
S'il y avait 2 produits distincts, il est très probable qu'il y aurait 2 guides d'utilisation contenant leur propre rubrique "Mise en route". D'où une partie de ma préoccupation concernant l'approche MDN et pourquoi je veux savoir si elle <title>fournit suffisamment de contexte.
Lea Hayes
2
Je ne m'inquiéterais pas des moteurs de recherche. Si vous pensez à ce niveau, le reste de votre site sera probablement techniquement correct et assez bon pour les moteurs de recherche. Pensez plutôt à vos utilisateurs.
John Mueller
1
Vous n'avez pas mentionné l'URL. C'est également un mécanisme important pour la convivialité humaine et robotique. Par exemple, alors que vos deux exemples MDN <h1> ne sont pas cohérents. contexte, leurs deux URL incluent / web / guide / html / avant le titre de la page.
Martin F

Réponses:

8

Au cours de mes recherches approfondies sur le Web, j'ai trouvé une citation que je trouve utile et soupçonne que les futurs lecteurs de cette question le feront également.

Utiliser <h1>pour un titre de niveau supérieur

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

  • Si le document est essentiellement autonome, par exemple Choses à voir et à faire à Genève, l'en-tête de niveau supérieur est probablement le même que le titre.
  • Si elle fait partie d'une collection, par exemple une section sur les chiens dans une collection de pages sur les animaux de compagnie, alors l'en-tête de niveau supérieur doit supposer une certaine quantité de contexte; il suffit d'écrire <h1>Dogs</h1>alors que le titre devrait fonctionner dans n'importe quel contexte: Chiens - Votre guide pour les animaux de compagnie.

Source d'origine: http://www.w3.org/QA/Tips/Use_h1_for_Title

La citation ci-dessus semble suggérer que l' <h1>élément au niveau du document peut supposer que le contexte de la page actuelle est défini à l'aide de <title>lui - même. Donc, probablement, s'il y avait plusieurs pages avec exactement la même chose, <h1>ce serait 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 : <title>: l'élément le plus important d'une page Web de qualité

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

Lea Hayes
la source
Belles mises à jour des questions et réponse de suivi. Peut-être que d'autres vont sonner, sinon accepter votre réponse si vous pensez que c'est la bonne.
dan
1

Je contesterais l'utilisation d'un 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.
Tant pour l'accessibilité que pour le référencement, un H1 répété sur chaque page serait préjudiciable. Malheureusement, dans ce cas, il n'y a pas de balise HTML sémantique qui signifie «titre du site», donc la seule option est une <div>ou <p>ou peut-être même une <strong>balise 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>
davidelrizzo
la source
0

Il n'y a pas une seule bonne réponse, il existe 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 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 associés éléments pour faire une impression que la personnalité de l'entreprise, c'est pourquoi la section. Encore. ce ne pouvait 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 présente la balise principale pour montrer quelle est la partie pertinente de la page. Cette balise est encore sommaire sur le support et l'avenir, mais donne une indication claire que la navigation n'a rien à voir avec le produit ou la page. La balise de section pourrait être un autre conteneur et le 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 suivant utilise l'article car la plupart des gens sont enclins à utiliser celui-ci.

<!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, car je suis très modulaire et orienté bloc, donc chaque élément serait indépendant du point de vue de la base de données uniquement lié par les clés pertinentes. Bien que je saute très probablement 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.

PatomaS
la source
2
Ils me semblent tous trop compliqués.
Martin F