<h1> - Impacto semántico versus impacto SEO

Hay mucho debate sobre la arquitectura de la estructura de encabezado en html5. Después de leer varios artículos, he llegado a tres arquitecturas posibles que tienen sentido lógico para mí, pero no estoy seguro de cuál es el método de enfoque adecuado. Los enumeraré a continuación con ejemplos de código y espero que alguien pueda arrojar algo de luz sobre el equilibrio adecuado, o peor / mejor aún, diga el temido "Lo estás haciendo mal" y echa una mano.

Enfoque 1: Versión A

Individual <h1>: uso de encabezados solo para contenido específico de la página.

Esto deja la <h1>navegación de nivel superior para el encabezado específico de la página mientras fluye <h2-6>según sea necesario dentro del área de contenido. Al dejar los elementos <header>, <nav>y <footer>como "sin título".

<header>
  <nav>
    <!-- no headings -->

<div role="main">
  <h1>
  <section>
    <h2>
      <section>
        <h3>

<footer>
  <!-- no headings -->

Enfoque 1: Versión 2

Múltiples <h1>: solo se utilizan encabezados para contenido específico de la página únicamente.

Igual que 1A con la adición de múltiples temas de contenido de página igualmente importantes. (por ejemplo, posible para blogs o páginas de temas divididos)

<header>
  <nav>
    <!-- no headings -->

<div role="main">
  <h1>
  <article>
    <h2>
  <article>
    <h1>

<footer>
  <!-- no headings -->

Enfoque 1 Esquema: más lógico para SEO (mi opinión de mi investigación)

• CUERPO sin título
  • NAV sin título
• título principal
  • Encabezado de la sección
    • Subsection Heading
  • SECCIÓN sin título

Enfoque 2:

Múltiples <h1>: enfatizar la estructura del esquema y la jerarquía de contenido

Esto se aplica partidas a los elementos de todo el sitio <header>, <nav>y <footer>el uso de múltiples <h1>'s para los elementos no orientados de contenido.

<header>
  <h1>
  <nav>
    <h2>

<div role="main">
  <h1>
  <section>
    <h2>
    <section>
      <h3>

<footer>
  <h1>
  <section>
    <h2>

Enfoque 2 Esquema: más lógico para el esquema semántico (de nuevo, mi opinión)

• Encabezado de encabezado
  • Rumbo de navegación
• título principal
  • Encabezado de la sección
    • Subsection Heading
• Encabezado de pie de página
  • Encabezado de la sección

Enfoque 3

Individual <h1>: enfoque de jerarquía de contenido; nivel inferior <h1-6>para elementos de todo el sitio

Esto se aplica partidas a los elementos de todo el sitio <header>, <nav>y <footer>sin necesidad de utilizar múltiples <h1>'s para los elementos no orientados de contenido.

<header>
  <h2>
  <nav>
    <h3>

<div role="main">
  <h1>
  <section>
    <h2>
    <section>
      <h3>

<footer>
  <h2>
  <section>
    <h3>

Esquema del enfoque 3: un poco un híbrido de ambos enfoques

• Encabezado de encabezado
  • Rumbo de navegación
• título principal
  • Encabezado de la sección
    • Subsection Heading
  • Encabezado de pie de página
  • Encabezado de la sección

Entonces, con todo lo dicho, ¿cómo le doy sentido a todo esto? ¿Algún enfoque tiene más valor semántico que el otro? ¿Tiene más sentido en términos de SEO? ¿Hay un equilibrio feliz que se puede lograr?

Fuentes: hubo muchas más, estas son las que puedo recordar en este momento

• https://youtu.be/GIn5qJKU8VM
• http://accessiblehtmlheadings.com/
• http://html5doctor.com/outlines/
• http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824

Para comenzar, ninguno de sus ejemplos tiene nada que ver con la semántica. Su pregunta se basa completamente en el modelo de analizador donde la página se lee de arriba a abajo de la manera tradicional.

Por esta razón, su primer ejemplo es correcto. Los siguientes ejemplos no le darán resultados predecibles y pueden causarle ardor de estómago grave.

Por favor, comprenda que su página web se verá conceptualmente de varias maneras: una, siguiendo el modelo DOM tradicional donde se evalúa HTML y tal desde la perspectiva del usuario; dos, texto solo con marcado simple para indicar títulos, subtítulos, contenido, etc. y tres, usando una vista semántica donde realmente solo se aplica un ligero peso a las etiquetas de encabezado en el índice en función de su lugar en la jerarquía h1-6. Desde el modelo DOM, obtendrá cosas como la etiqueta del título, la metaetiqueta de descripción, etc., que faltaría en las otras dos vistas. Sin embargo, la vista DOM hace poco para ponderar su contenido. Su función principal es comprender su página, dónde está su navegación, dónde están su encabezado y pie de página, dónde comienza y termina su contenido, etc.

Lo que realmente debe prestar atención es solo el texto y las vistas semánticas. La vista semántica se deriva principalmente de la vista de solo texto, sin embargo, lleva consigo varios análisis lingüísticos, psicosemánticos, semanales y otros análisis de su contenido.

No volveré a describir la semántica, pero te señalaré una respuesta que escribí hace un tiempo que es un mini tutorial sobre el tema: ¿Por qué un sitio web con relleno de palabras clave ocuparía un lugar más alto que uno sin resultados de búsqueda de Google?

Debido a que la web se basa en la página impresa y los analizadores de los primeros días siguieron estas tradiciones y en gran medida no han cambiado, es imposible escapar de ellas. Aquí hay una respuesta que explica el orden de lectura de titulares, que sigue siendo la mejor estrategia basada en el modelo de analizador sintáctico: mejorar la clasificación de Google para palabras clave generales frente a palabras clave

Si bien admitiré que podría haber algún efecto al mover las etiquetas de encabezado, pregunto: ¿Es algo inteligente? Infierno no! Cómo se ponderan las cosas hoy puede no ser cómo se ponderan mañana. Seguir un formato tradicional asegura resultados predecibles donde un simple cambio en la ponderación puede hacer que su sitio gire a la cola.

Aquí hay una perspectiva sobre cómo funciona esto: beneficio de nombre de dominio en SEO. Ignore el título y omita la parte superior de la respuesta y llegue a la perspectiva de los programadores.

Si lee estas tres respuestas, puede comprender fácilmente los efectos de la etiqueta del encabezado. Es muy posible arruinar el rendimiento de su página / sitio al ponerse lindo con la forma en que los organiza. Incluso siguiendo la tradición, puede deshacer su etiqueta de título y etiqueta h1 extremadamente rápido al optimizar algunas etiquetas de encabezado inferiores. El equilibrio cuidadoso es la clave.

Por último, te advertiré sobre todos estos consejos de SEO en línea de personas que no son ingenieros. Es una raqueta ganar dinero y competir por su atención. Cómo funcionan los motores de búsqueda no es un secreto. Está ahí afuera si sabes dónde mirar. La mayoría de los expertos en SEO no son expertos en absoluto, ya que no pueden decirle lo interno de cómo se combina la tecnología de búsqueda. Además de ser un ingeniero para Google o Bing, nunca podemos saber exactamente cómo funcionan estos motores de búsqueda. Afortunadamente, Google nos ha dicho lo suficiente (y realmente nos han contado casi todo lo que necesitamos saber, y no, no vino de un tipo llamado Matt) que si conoces la ciencia y las tecnologías, un conjunto bastante razonable de suposiciones puede hacerse. Desde mi punto de vista, la mayoría de los SEO son más incorrectos que correctos, mientras que algunos tienen una tasa de éxito mucho mayor que el promedio.

Lo siguiente es desde la perspectiva de la especificación HTML5, basada en el supuesto de que los consumidores (como los motores de búsqueda) esperarán y trabajarán con lo que se especifica en los estándares HTML. En la práctica actual, estos detalles de marcado probablemente no importen mucho para el SEO, pero pueden ser importantes para otros consumidores y la accesibilidad.

Usaré encabezados del rango apropiado, ya que esto es lo que fomenta HTML5 , pero también es posible usarlo en h1todas partes (si siempre usa elementos de contenido de sección cuando sea apropiado).

No puede "aplicar" encabezados headero footerelementos, porque no seccionan contenido (solo pueden contener encabezados, pero este encabezado no estaría restringido al alcance de header/ footer).

Cada elemento de contenido de seccionamiento ( section, article, nav, aside) y cada elemento raíz de seccionamiento ( body, blockquote, etc.) pueden tener un título aplicado.

Estos elementos de contenido / raíz de seccionamiento y los elementos de encabezado h1- h6son los únicos elementos que importa para el esquema del documento .

Si bien cada sección "anhela" un encabezado, no se requiere que proporcione uno (en tal caso, obtiene un encabezado "implícito", sin título). Si bien a menudo es útil proporcionar uno, hay casos en los que no es realmente necesario. Por ejemplo, si solo tiene una navegación, navsería suficiente tener un sin encabezado. Pero si su sitio tuviera múltiples navegaciones, podría tener sentido usar encabezados que expliquen los diferentes propósitos.

En su enfoque 1, esta bodyes una sección sin título (pero este es solo el caso porque navaparece antes del primer elemento de título; de lo contrario, este h1sería el título de todo el documento).
No creo que tener una bodysección sin título sea ​​una buena opción. Es la primera entrada en el esquema e, idealmente (pero no necesariamente), todo lo que sigue está dentro del alcance de esta entrada.

Para un sitio web típico que tiene una navegación global, tiene sentido ( explicación más larga ) usar el nombre del sitio para el bodyencabezado de la sección, porque la navegación global pertenece a todo el sitio , no solo al documento actual:

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
-->

El contenido principal de este documento también debe estar dentro del alcance del encabezado del sitio, ya que el sitio es el contexto del contenido principal de este documento, es decir, es parte de su sitio:

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <article> <!-- document content -->
    <h2>My blog post</h2>
  </article>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "My blog post"
-->

Si tiene varias secciones de contenido principal, por ejemplo, una lista de publicaciones de blog, a menudo tiene sentido utilizar un sectionarchivo que contenga todo esto article, en lugar de tener los elementos articlesecundarios directos de body:

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <section> <!-- document content -->
    <h2>Recent blog posts</h2>

    <article>
      <h3>My blog post</h3>
    </article>

    <article>
      <h3>Another blog post</h3>
    </article>

  </section>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "Recent blog posts"
      1.2.1 "My blog post"
      1.2.2 "Another blog post"
-->

Si tiene un pie de página en todo el sitio que es tan complejo que necesita elementos de sección, debe estar nuevamente en el mismo nivel que el navcontenido principal (ya que pertenece al sitio, no al contenido principal):

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <section> <!-- main content -->
    <h2>Recent blog posts</h2>

    <article>
      <h3>My blog post</h3>
    </article>

    <article>
      <h3>Another blog post</h3>
    </article>

  </section>

  <section> <!-- site footer -->
    <!-- this section should be the child of a 'footer' element -->
  </section>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "Recent blog posts"
      1.2.1 "My blog post"
      1.2.2 "Another blog post"
    1.3. Untitled section
-->

(En todos estos ejemplos, la navegación viene antes que el contenido principal, pero a menudo tiene sentido tener el contenido principal primero. Cambiar esto es posible. Solo debe asegurarse de que el h1nombre del sitio aparezca antes que cualquier otra sección / encabezado).