Haciendo SEO con las etiquetas de encabezado en HTML (h1, h2, h3 …)

Saludos a los lectores del Portal GUTL. Aunque aún distantes del planeta tierra, ya muchos cubanos se van acercando al siglo XXI y a las disímiles posibilidades de la Red de Redes. Muchos cubanos han visto en los últimos tiempos la posibilidad de acceder a las Redes Sociales (a un precio excesivo/abusivo, pero es lo que hay) y no pocos ya tienen sus propios espacios Web, bitácoras desde donde escribir para ser leidos en cualquier parte del mundo, utilizando por cierto, y muchas veces sin saberlo, Tecnologías Libres.

usando-encabezadosPero, ¿Estamos dejando correctamente los cubanos nuestras huellas en la Red? ¿Llegamos todo lo lejos que pudiéramos? ¿Empleamos todas las potencialidades de uno de los lenguajes universales que nos permite llegar lejos en la Web? Y al hablar de lenguaje me refiero específicamente al HTML que ya desanda hace buen tiempo por su versión HTML5. No vamos a abarcar en este post todo sobre el html, sino más bien nos centraremos en los encabezados y su importancia en el posicionamiento en la Web (SEO).

Para muchos cubanos hoy día, el hecho de conocer en profundidad la importancia del buen uso de los encabezados en los artículos que escribimos es algo que suele pasarse por alto. Muchas veces confiamos, en el caso de los blogueros que usan WordPress o algún otro CMS, en las potencialidades del sistema de administración de contenidos, y especialmente en el estructurado de su plantilla que garantiza el aspecto final de nuestro Blog o sitio Web en general. Pero, aunque la mayoría de las plantillas respetan el correcto uso de las etiquetas de encabezado (y me refiero a las etiquetas h1, h2, h3 ….., hn), son los propios redactores quienes muchas veces, por engalanar el artículo o querer resaltar mucho el contenido, echan a perder el trabajo (acá mismo en GUTL he tenido que corregir más de un post con un empleo incorrecto de la etiqueta h1).

También ocurre que muchas veces, en el caso específico de WordPress u otro sistema de administración de contenidos, son precisamente las plantillas mal elaboradas las que lanzan al /dev/null cualquier esfuerzo nuestro por hacer un correcto uso del SEO y posicionarnos bien en los buscadores de Internet.

Imagino que la casi totalidad de los que se toman el trabajo de publicar en Internet les gusta al menos ser leídos por la mayor cantidad de personas, no se, digo yo. Pues existen muchas cosas que nos afectan en el posicionamiento, y una de ellas es el mal empleo de las etiquetas de encabezado, sea por parte del redactor o por mal diseño de nuestra plantilla. Veamos algunas cosas a considerar al respecto.

Cómo utilizar correctamente las etiquetas de encabezado de HTML

Nótese como el encabezado anterior lo marcamos usando h2 y dejamos h1 exclusivamente para el título de la entrada, hablemos de esto y de algunas cosas más…

La etiqueta de encabezado H1 y sus respectivas hermanas conforman una de las herramientas más potentes con las que contamos a nivel de SEO para darle a los buscadores una idea de la jerarquía en el contenido de nuestro sitio web y principalmente del contenido en cada página independiente.

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 de maquetación del diseño web hasta la creación de contenidos para un portal en funcionamiento. Estas nociones básicas deben tomarse en cuenta por diseñadores, programadores y personas encargadas de la redacción de texto para cualquier sitio en la Red de Redes.

Qué es la etiqueta H1 (y qué no es)

Nótese como ahora, a partir de este acápite, uso h3 en el encabezado…

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.

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 que veremos más tarde), y al acceder al post completo entonces sí se muestre el título como un H1. Para ilustrar lo que intento explicar, verifica por ti mismo con el inspector Web de tu navegador como se estructura la página principal de nuestro Portal a diferencia de cada página o artículo independiente. Si creas tu plantilla respetando estos criterios, estás optimizando el SEO, al menos en lo que a encabezados respecta y te ahorras trabajo futuro.

Por otro lado, un caso especial es si resumes todo el contenido de tu Web en una única página. En este caso tu sitio web completo deberá tener un H1 para cada uno de los documentos o artículos que quieras ofrecer (ya aclaramos que todo estaría en una sola página), 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 (de acá se deduce la importancia de lo leído en párrafos anteriores de no usar H1 en los resúmenes de post de la página principal de los Blogs). 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. Por ejemplo, en GUTL, en la página principal los títulos de los post aparecen en H2 y enlazan al contenido completo, dicho contenido completo si se encabeza con H1 y coincide en cuanto al texto con el H2 de donde proviene, un poco enredado pero espero se entienda.

Muy importante, 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 de la página, y que no necesite de información adicional. 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, pero sin exagerar, una palabra clave repetida muchas veces en una página hace dudar a Google termina penalizándote, recuerda: naturalidad ante todo.

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 cuando lea los resultados de búsqueda, 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 indica tí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”, ”¿Quienes Somos?”, “Páginas amigas”, “Bienvenido a mi web” … esos son títulos genéricos para bloques de una web, pero que nada tienen que aportar al contenido de cada página o post independiente. 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, de cara al SEO,  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.

Demasiado largo el post, pero espero estos sencillos y útiles consejos les sirvan a más de uno.

¿Te resultó interesante? Compártelo ...



Maikel Llamaret Heredia

Publicado por Maikel Llamaret Heredia

https://swlx.info » Facebook » Twitter » Google+ » Linkedin » Forma parte de GUTL desde el 6 diciembre, 2011. Parte de la familia GUTL. Usuario de Tecnologías Libres desde hace varios años. Fiel a GNU/Linux y las filosofías del Software Libre y el Código Abierto. Linux User # 587451. Creador y actual mantenedor del Proyecto SWL-X. Freelancer dedicado al Desarrollo / Diseño Web y Marketing Online. Creador de Web & Media Integrated Solutions

Este artículo tiene 2 comentarios

  1. Creo que en Cuba es la primara vez que escucho a alguien hablando de SEO, me he visto involucrado en ese mundo, sobre todo SEM. Pero como bien dices, en Cuba mucha gente publica por publicar, he visto artículos en sitios importantes que no cumplen con los estandares, es decir, cabeceras sin sentidos, poca densidad o alta de las palabras claves, y esto es solo por citar el SEO OnPage, porque a esto tambien hay que tener en cuenta el codigo de maquetación que tambien influye. en fin, creo que este es un tema que se debería tomar en serio en nuestro país. Llevo varios años trabajando para la compañía Vhector Graphics LLC y esto del SEO es un tema que llevamos muy de la mano por la importancia que tiene. Tengo mucha documentación y un poco de experiancia en el tema, no solo SEO sino tambien con respecto al tema del PPC por si alguien le interesa, y quiere contactarme.

    • Colega, este artículo tiene más de dos años. Particularmente yo mío he hablado de SEO en GUTL en innumerables ocasiones. Forma parte de mi pancito de cada día

Los comentarios están cerrados.