¿Uso correcto de <title>, <header>, <h1> y <h2> en un sitio web HTML5?

15

He estado estudiando este tema durante varios días y he encontrado muchas sugerencias contradictorias con respecto a la indexación de búsqueda. Estoy trabajando en un proyecto que tiene muchas páginas diferentes que van desde simples descripciones de productos hasta documentación detallada para el usuario.

He dividido esta pregunta en secciones ya que creo que esto la hará más útil para futuros lectores de esta pregunta.

Algunos de mis hallazgos

Varios sitios web parecen haber asumido esquemas de documentos como los siguientes:

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

Me parece interesante que el ejemplo anterior no utiliza el <nav>elemento con un encabezado adecuado. Me gusta la simplicidad del esquema y al ser Google, estoy bastante seguro de que saben lo que están haciendo cuando se trata de esto.

Pero estoy confundido ya que el esquema anterior no menciona "Dart". La única mención de "Dart" en el sentido semántico parece estar dentro del <title>elemento principal del documento "Guía del programador | Dart: Aplicaciones web estructuradas".

El MDN (Mozilla Developer Network) es otro brillante ejemplo de un sitio web que sigue este principio. Muchos de los <h1>títulos proporcionan un contexto completo ( Secciones y esquemas de un documento 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

Mientras que otros no tienen mucho sentido fuera de contexto ( prácticas obsoletas para evitar ). Por ejemplo, el siguiente esquema HTML5 se relaciona con CSS, HTML5 o C # ... con solo el esquema del documento, ¡quién sabe!

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

Para empeorar las cosas, ¿qué pasaría si el MDN contuviera 2 temas con el mismo título (o muy similar) "Prácticas obsoletas para evitar", donde uno es parte de su guía CSS y el otro es parte de su guía HTML ...

En el otro extremo del espectro, los sitios web parecen usar el <body>encabezado de nivel principal para el nombre del producto (Foo) o el contenedor del tema (Guía del usuario para Foo). Donde todas las páginas posteriores se usan <h2>para el título de la página real.

La pregunta

¿Cómo infieren los motores de búsqueda el contexto de una página web como las que se encuentran en el sitio web de MDN utilizando el DOM y el esquema HTML5?

¿Cuál es la forma correcta de marcar la siguiente página HTML5 para que Google pueda indexar la página en el contexto adecuado? Esto incluye el uso de <title>, <header>y <h1>elementos.

  • nombre de empresa
  • nombre del producto
  • Guía del usuario
  • Empezando

El encabezado más significativo en el HTML que se visualiza en un navegador web, si representa el contexto de todo el sitio web (Nombre de la empresa o Nombre del producto), la colección de temas (Guía del usuario) o el tema real en cuestión (Primeros pasos) ?

Mi mejor conjetura

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

Conduciendo al bosquejo:

1. Getting Started
seo html google-search html5 semantic-web Lea Hayes
fuente
¿Le entiendo correctamente que está buscando documentación si y cómo los motores de búsqueda usan el esquema? (y no para consejos sobre qué marcado usar, no relacionado con SEO)
hasta
@unor Quiero saber por qué funciona la técnica utilizada en la documentación de MDN / Dart y si me falta algún conocimiento clave. Parecen confiar en <title>proporcionar contexto. Por ejemplo, es una mala idea incluir lo mismo <h1>User Guide for Ubermachine</h1>en cada página donde se presenta el encabezado del tema <h2>Getting Started</h2>... o si el esquema comienza <h1>Getting Started</h1>con un acompañamiento <title>Getting Started | User Guide for Ubermachine</title>para proporcionar un contexto útil para los motores de búsqueda. Esta es una pregunta de SEO.
Lea Hayes
Si hubiera 2 productos separados, es muy probable que haya 2 guías de usuario que contengan su propio tema "Introducción". De ahí parte de mi preocupación con el enfoque MDN y por qué quiero saber si <title>proporciona suficiente contexto.
Lea Hayes
2
No me preocuparía por los motores de búsqueda. Si está pensando en este nivel, el resto de su sitio probablemente estará técnicamente bien y será lo suficientemente bueno para los motores de búsqueda. Piensa en tus usuarios en su lugar.
John Mueller
1
No mencionaste la URL. Ese es también un mecanismo importante para la amistad humana y robótica. Por ejemplo, mientras que sus dos ejemplos de MDN <h1> s son inconsistentes re. contexto, sus dos URL incluyen / web / guide / html / antes del título de la página.
Martin F

Respuestas:

8

Durante mis extensas búsquedas en la web, encontré una cita que encuentro útil y sospecho que los futuros lectores de esta pregunta también lo harán.

Usar <h1>para encabezado de nivel superior

<h1> es el elemento HTML para el encabezado de primer nivel de un documento:

  • Si el documento es básicamente independiente, por ejemplo, Cosas para ver y hacer en Ginebra, el título de nivel superior es probablemente el mismo que el título.
  • Si es parte de una colección, por ejemplo, una sección sobre Perros en una colección de páginas sobre mascotas, entonces el encabezado de nivel superior debe asumir una cierta cantidad de contexto; solo escriba <h1>Dogs</h1>mientras el título debería funcionar en cualquier contexto: Perros: su guía para mascotas.

Fuente original: http://www.w3.org/QA/Tips/Use_h1_for_Title

La cita anterior parece sugerir que el <h1>elemento a nivel de documento puede suponer que el contexto de la página actual que se define utilizando el <title>propio. Entonces, presumiblemente, si hubiera varias páginas con exactamente lo mismo, <h1>entonces estaría 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>

Ver también : <título>: el elemento más importante de una página web de calidad

Antes de aceptar una respuesta, me gustaría esperar y ver qué piensan los demás.

Lea Hayes
fuente
Buenas actualizaciones de preguntas y respuestas de seguimiento. Quizás otros intervengan, si no acepta su respuesta si cree que es la correcta.
dan
1

Discutiría el uso de un H1 o cualquier nivel de encabezado para el 'Nombre del producto' en el encabezado.
El H1 representa el título de la página, no el producto, la aplicación o el sitio.
Tanto para fines de accesibilidad como de SEO, un H1 repetido en cada página sería perjudicial. Unfortunetaly en este caso no hay ninguna etiqueta HTML semántico que significa 'título del sitio' lo que la única opción es un <div>o <p>o tal vez incluso una <strong>etiqueta para darle un poco de énfasis semántico.

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

No hay una respuesta correcta, hay diferentes opciones.

A continuación hay algunas opciones, pero todas tienen ventajas y desventajas:

Esta opción es más o menos la que presentó, pero muestra un poco más de encabezados y hacia dónde iría el contenido, además de la idea de que el logotipo sería un elemento más complejo que solo la imagen / texto, tendría todo lo relacionado elementos para impresionar como la personalidad de la empresa, por eso la sección. De nuevo. no podría ser una sección, sino solo un 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>

El siguiente presenta la etiqueta principal para mostrar cuál es la parte relevante de la página. Esta etiqueta todavía es incompleta en soporte y futuro, pero da una indicación clara de que la navegación no tiene nada que ver con el producto o la página. La etiqueta de sección podría ser otro contenedor y main podría ser un artículo para algunas personas.

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

El siguiente usa un artículo ya que la mayoría de las personas están inclinadas a usar ese.

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

Usaría algo como el siguiente, ya que soy muy modular y orientado a bloques, por lo que cada elemento sería independiente de una perspectiva de base de datos solo relacionada por teclas relevantes. Aunque lo más probable es que omita las etiquetas de sección.

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

y aun así, hay más opciones.

Patomas
fuente
2
Todos me parecen demasiado complicados.
Martin F