estructura - semantic html5 2018

html5: títulos en elementos de sección: resumen del documento e implicaciones de SEO

Question

La especificación html5 says que:

El esquema para un elemento de contenido de sección o un elemento de raíz de sección consiste en una lista de una o más secciones potencialmente anidadas. Una sección es un contenedor que corresponde a algunos nodos en el árbol DOM original. Cada sección puede tener un encabezado asociado y puede contener cualquier número de secciones anidadas adicionales. El algoritmo para el esquema también asocia cada nodo en el árbol DOM con una sección particular y potencialmente un encabezado.

y el mismo razonamiento parece aplicado al says .

He estado revisando el esquema de mi sitio usando la herramienta HTML5 [h5o) [ link ] pero tengo dificultades para lograr un esquema claro que no esté sobrecargado con títulos inútiles, debido al hecho de que elementos como <nav> o <footer> aparecerá en su esquema pero lo hará como ''sin título'' a menos que les dé un encabezado h1-h6 explícito.

Esto parece francamente excesivo para cosas como la navegación o los pies de página.

Una solución es reemplazar estos elementos con divs, pero eso parece anular todo el propósito de usar html5.

Otro, que probé tentativamente en mi sitio [ link ], es establecer encabezados para todos los elementos de sección y luego usar CSS para ocultar los encabezados de algunos de ellos (nuevamente, básicamente <nav> y <footer> , así como algunos elementos <section> . Aquí hay un ejemplo:

<nav id="content-nav">
    <h2 class="hidden">Post navigation</h2>
    <ul>
        <li class="alignleft"><?php next_post_link(''&#8592; <strong>Next Post</strong><br />%link'') ?></li>
        <li class="alignright"><?php previous_post_link(''<strong>Previous Post</strong> &#8594;<br />%link'') ?></li>
    </ul>
</nav>

Esto da como resultado un sitio muy bien presentado, pero el problema que veo con él es el ranking de Google. En el ítem de ayuda de la Herramienta Webmasters [ link ] sobre ''texto y enlaces ocultos'', Google establece claramente que:

Ocultar texto o enlaces en su contenido puede hacer que su sitio sea percibido como poco confiable, ya que presenta información para los motores de búsqueda de manera diferente a los visitantes. El texto (como palabras clave excesivas) se puede ocultar de varias maneras, incluyendo: [...] Usar CSS para ocultar texto ...

Algunas personas pueden sentir que si a Google le gusta el hecho de que usen texto oculto o no, es irrelevante, pero la mayoría de mis visitantes provienen de las búsquedas de Google y prefiero que no me penalicen como resultado de elegir ir con esta configuración.

¿Alguien puede dar consejos sobre el tema?

Answer 1

Otro, que probé tentativamente en mi sitio, es establecer encabezados para todos los elementos de sección y luego usar CSS para ocultar los encabezados de algunos temas (de nuevo, básicamente <nav> y <footer> , así como algunos <section> elementos.

Esa es exactamente la forma en que lo haría, no he tenido que construir un sitio HTML5 todavía, pero curiosamente lo miré hace un tiempo .

Los "encabezados" o títulos de sección , son excelentes para crear la estructura o el contorno del documento (como se muestra en el esquema). También son muy útiles para los usuarios de tecnología asistida, que básicamente pueden encontrar su camino en un sitio al "tabular" a través de los encabezados sin tener que "escuchar" todo e intentar averiguar dónde podría haber colocado, por ejemplo, su cuadro de búsqueda.

Esa es la razón por la que veo que los encabezados / títulos deberían estar allí, aunque estén ocultos para la vista de los usuarios visuales (y cosas del SE))

No todos los métodos de ocultación de CSS son iguales

De acuerdo, sé que no podemos descartar los SE, por lo que la forma en que elija ocultar los encabezados es importante, ya que desea que estén disponibles para los usuarios de AT (tecnología asistida). display: none; no es confiable (algunos lectores de pantalla no los leen) y tampoco puede "tabular" encontrarlos - visibility: hidden; no quita el espacio y todavía no puedes "tab" encontrar

Entonces, ¿qué método de ocultación?

.. sucede que hay uno realmente genial, descubierto por miembros de la comunidad Drupal ... usando el clip: rect(); propiedad que mantiene a todos felices

.my-hidden-element {
  position: absolute;
  clip: rect(1px 1px 1px 1px); /* IE6 & 7 */
  clip: rect(1px, 1px, 1px, 1px);
}

En cuanto a Google, no solo sería difícil para ellos "prohibir / penalizar de forma generalizada" en función de la propiedad del clip , incluso si comienzan a señalar banderas, creo que es como todo lo demás si puede demostrar un uso legítimo para ocultar un elemento. - no debería haber ningún problema ... y de hecho, en este caso, los encabezados adicionales deberían, en teoría, ayudarles a "encontrar la estructura" también, así que realmente siento que esta no es la mayor preocupación.

Mis pensamientos

Absolutamente creo que deberíamos titular las secciones según las recomendaciones de HTML5, es más semántico que cualquier elemento de código o nombre de clase, pero también creo al 100% que deberíamos poder esconderlas de los espectadores visuales ya que no tiene sentido mostrar el título "Busque en este sitio" si sus usuarios visuales pueden ver que hay un cuadro de búsqueda allí;), ese título solo es útil para los usuarios no visuales y los SE para ayudarlos a localizar áreas del documento. En teoría, esto debería ayudar a los SE / Google a descartar. esa área, por ejemplo, no deberían necesitar indexar un cuadro de búsqueda ... para que tengan que trabajar en su IA, ¿no crees?

Mi opinión sería seguir con esto y tener claro por qué lo está haciendo, entonces, si su sitio está marcado por casualidad (lo cual creo que sería altamente improbable y sería una revisión manual de todos modos) puede explicarlo con bastante claridad. por qué lo estás haciendo ... Mientras esos títulos ocultos no sean "spam", entonces creo que caerá en la misma categoría que "reemplazo de imagen"

+1 Gran pregunta!

Answer 2

Mi forma preferida de lidiar con eso. Con los estilos desactivados, ves el encabezado, pero es un encabezado pequeño, no un h1.

<nav>
<h6 class="hidden">Navigation</h6>
<ul>
<li><a href="www.ronpaul.com">Ron Paul 2012</a></li>

.hidden{
   position:absolute;
   left:-9999px;
}

O

.hidden{
   text-indent:-9999px;
}