La etiqueta de encabezado H1 y sus hermanas pequeñas son una de las herramientas más potentes con las que contamos a nivel de SEO para decirle a los buscadores de qué va el contenido de nuestra página web. Sin embargo, y aunque su concepto es en origen sencillo, darles un uso adecuado no es algo conocido por todos. Este post está dedicado a analizar alguno de las falsas creencias acerca de estas etiquetas de titulares, y a dar consejos certeros para aprovechar realmente su potencial.
Las etiquetas de encabezados han tenido una importancia vital en el posicionamiento en buscadores desde sus orígenes, y con pequeñas variaciones en el peso de su influencia se han ido manteniendo en el tiempo como algo que definitivamente hay que cuidar, desde la fase demaquetación del diseño web hasta la creación de contenidos para un portal en funcionamiento. Estas nociones básicas deben ser pues conocidas por diseñadores, programadores y personas encargadas de la redacción de texto para web.
Qué es la etiqueta H1 (y qué no es)
H1 es una etiqueta que sirve para colocar la frase que indica el título del contenido de una página web. Importante en este punto delimitar de forma clara la diferencia entre sitio web y página web: un título H1 debe hacer referencia a una página de tu sitio web, y no al sitio web en general.
De este párrafo, se extraen varias conclusiones. La primera de ellas, es que si el titular H1 resume en una frase el contenido de la página actual, no tiene sentido que en un mismo documento web tengamos varios H1, pues el resumen de tu sitio debe ser uno. Un caso de mal uso relacionado con este hecho son los blogs donde en el listado de los últimos posts cada uno de ellos lleva un titular H1: esto no es correcto, y lo adecuado sería que en el listado los títulos fueran H2 (etiqueta de título de menor importancia de la que hablaré más tarde), y al acceder al post completo ya sí se nos mostrara el título como un H1.
La segunda de las conclusiones es que si resume el contenido de una única página, tu sitio web completo deberá tener un H1 para cada uno de los documentos, que resuma el contenido de la misma de la forma más específica posible. Un caso de mal uso para esta norma son aquellos sitios web donde el H1 está dedicado en todas las páginas al nombre de la compañía.
Como título que es, y estando el SEO orientado en el fondo al usuario, lo lógico es que tu titular H1 aparezca cuanto más arriba de la página mejor, tal cual lo haría el título de una noticia en una web. Google confiere mayor importancia al contenido situado en el primer tramo de un documento web, y también para el usuario es lógico encontrar el H1 en esa posición.
Un H1 no debería en principio ir enlazado a otros documentos, pues su contenido debería ser importante únicamente para el documento que estamos viendo. Si colocamos un enlace en ese H1, vamos a indicar inconscientemente que la página importante para ese título es a la que enlazamos, y no la página actual. Desde otros documentos, esta página debería estar enlazada con el mismo texto del H1 para reforzar la importancia de su titular, o variaciones de sus palabras clave para tratar de posicionar en varios términos relacionados.
El H1 debe mantenerse corto, pues la importancia de las palabras clave que contiene el titular irá perdiendo fuerza cuanto más largo sea. Tanto en esta etiqueta como en otras (por ejemplo, la metaetiqueta title), Google confiere una mayor importancia a las primeras palabras de la frase que a las últimas: asegúrate de que tu H1 empieza siempre que sea posible por la palabra o palabras claves principales para ese documento. Puede que esto vaya en contra de un titular de un estilo más periodístico, pero es lo ideal para posicionar el documento. Piensa en el contenido de la etiqueta como una frase que contenga información completa por sí misma para definir el contenido del sitio, y que no necesite de información adicional.
Además, de nada servirá el titular H1 si su título no hace realmente referencia al contenido de esa página. Las palabras clave del titular deben aparecer en varias ocasiones a lo largo del texto de contenido de la página.
El titular H1 puede o no coincidir con la metaetiqueta title del documento HTML. La metaetiqueta Title tiene una importancia menor que el H1, y se muestra en los resultados de búsqueda, por lo que podemos optimizar más para SEO el H1, y redactar la metaetiqueta title de tal forma que esté más destinada a captar la atención de un humano en los SERP, variando la redacción sobre las mismas palabras clave. Como curiosidad, en caso de que no dispongas de metaetiqueta title en tu web o de que contenga algún error de sintaxis HTML, es posible que el H1 acabe mostrándose como el título de la página en los resultados de búsqueda de Google.
Qué es la etiqueta H2 (y qué no es)
La etiqueta H2 es un elemento similar al H1, que indicatítulos de importancia para subsecciones del documento web actual. Por su naturaleza, puede haber varios H2 en un sitio, que indiquen los diferentes títulos de importancia de la página en la que nos encontramos.
No debemos confundir los H2 con herramientas para colocar títulos en las zonas de nuestra página: “Últimas noticias”, “Contáctame”, ”Zona de usuario”, “Páginas amigas”, “Bienvenido a mi web”… son títulos genéricos para bloques de una web, pero que nada tienen que aportar al contenido. Este tipo de títulos deberían ser etiquetas estándar de HTML con el estilo CSS deseado, pero no deben ser titulares H2, pues las etiquetas de encabezado no son una herramienta de estilo pese a que frecuentemente se les haya relegado a este uso. Además, de utilizar así los titulares H2 es muy probable que fueran los mismos de una página a otra del sitio, y al igual que ocurría con los H1 es vital que sean diferentes, adaptados al contenido de cada documento.
Los titulares H2 marcan las diferentes secciones de un texto, los títulos de los nodos accesibles desde un listado de elementos, etcétera. Su texto debe cumplir las mismas directrices que las dadas para el H1, pero sus palabras clave deben hacer referencia al texto que encontramos justo a continuación, o en la página a la que enlazan. No existe un número determinado de elementos H2 que pueden colocarse en una página, pero el contenido debe ser el que marque este requerimiento. Entre 2 y 8 titulares H2 son lo más adecuado, aunque pueden no aparecer o presentarse en un número mayor si la longitud del texto lo requiere.
Qué son las etiquetas H3, H4…
Las etiquetas H3 en adelante nos permiten definir títulos de subapartados de un bloque encabezado con un H2. Su incidencia en SEO es más limitada, y por ello no es habitual ni recomendable el trabajar los titulares a partir de H4.
El orden lógico de los titulares debería ser el que apareciera en primer lugar el titular H1, después todos los H2 y después todos los H3. También es habitual el trabajar con H1, H2 y H3 como títulos de capítulo, apartados y epígrafes, de forma que aparezca primero el titular H1, después un H2 con sus subapartados marcados con H3, después otro H2 y sus subapartados, y así sucesivamente.
Quitar todos los elementos restantes de tu sitio web y dejar sólo los titulares deberían en la mayoría de los casos dar una idea del contenido de tu página, tal cual lo hace un índice en un libro: las etiquetas de encabezado deben describir la estructura del artículo.
La relación entre titulares y texto debe tener una proporción razonable: intentar utilizar más encabezados de la cuenta no es una ventaja, sino un error que hará que la importancia que tratamos de dar a nuestras palabras clave acabe completamente ignorada.
Dando estilo a los titulares
Puedes utilizar CSS para definir los tamaños y estilo de los textos. De todos modos, piensa que el SEO es al fin y al cabo tratar de mejorar nuestros resultados en los buscadores, y éstos quieren ofrecer la mejor experiencia al usuario y contenidos de calidad. Es decir, puedes modificar las propiedades CSS de una forma lógica, pero no deberías hacer por ejemplo un H1 excesivamente pequeño respecto al texto de contenido, o los buscadores percibirán que algo raro tratas de hacer. Del mismo modo, la jerarquía de tamaños entre H1, H2 y el resto de titulares debería seguir una cierta lógica.
Dentro de los titulares es técnicamente posible incluir otros elementos de estilo, como spans y otras etiquetas que nos permitan modificar cómo se ve finalmente el contenido de otra etiqueta. Sin embargo, como regla general, si podemos mantener el contenido de la etiqueta H únicamente como un texto sin aditivos, será más eficaz. Sí es posible aplicar sin problemas estilos, y preferentemente clases, a la etiqueta del titular.
Google no reconoce por el momento textos en imágenes, por lo que hacer que tu H1 sea una imagen no es en absoluto una buena idea. Si no queda otro remedio que utilizar imágenes, vuelve a pensar si realmente no puedes hacerlo en texto. Si pese a todo decides utilizar imágenes para un titular, asegúrate de que esta imagen tenga un texto alternativo. Si ese titular está enlazado, deberías añadir también el atributo Title a la etiqueta A para indicar el contenido de la misma.
Otra opción para incorporar una imagen a un titular es colocar la imagen de fondo del H1, e incorporar un padding a esta etiqueta que haga que el texto quede fuera de la zona de visión. Es algo que funciona visualmente, pero de nuevo insisto en que no es en absoluto aconsejable el jugársela con estas tácticas en el elemento más importante de nuestro documento.