La verdad sobre cómo tener un SEO On Page perfecto con múltiples H1 por página
4.47 (89.47%) 19 votos

Trabajar el SEO on page puede llegar a ser algo mucho más complejo de lo que mucha gente se piensa.

Muchas veces damos por sentado conceptos “on page” de toda la vida y hay ocasiones en que esto puede no ser así. En el post de hoy vas a descubrir el motivo de la mano de este magnífico autor invitado 🙂

Este es un post invitado de Nacho Mascort. Blogger en seohacks.es

Cómo utilizar varios H1 en SEO

Introducción

La verdad es que uno no se plantea tener la posibilidad de escribir en un blog con una audiencia como la de Blogger3cero.

Y cuando te dan la oportunidad es como que te acojonas de aquí a Perú pasando por la casilla de salida sin cobrar.

Para más inri, de todos los temas que le propuse a Dean, va y elige el más polémico. ¡Genial!

Esto puede ser todo un viaje así que pon tu tema favorito a todo trapo, coge palomitas y deja que empiece por el principio.

Soy Nacho Mascort y llevo en esta locura del SEO desde 2014 a nivel profesional. Hace años la presentación habitual habría venido seguida de la cantidad de títulos que hay detrás mío junto a todas las posiciones que he llegado a ocupar.

Pero esto ya no es así. Los únicos indicadores fiables sobre lo que se sabe de una persona son: la pasión y los resultados.

 Pasión  tengo hasta para regalar y sino que se lo digan a mis pobres amigos que me tienen prohibido hablar de SEO de lo pesado que llego a ser.

A  nivel de resultados  te diré que gestiono un total de 7 webs de meganicho, algunas con resultados normalillos, otras con las que logré conseguir mis primeros 400.000 usuarios al mes en unos 6 meses, trabajo en una agencia de marketing online de Barcelona llamada Tesubi, soy profesor del máster de SEO de la UPF y hablo de SEO en SEO Hacks.

Ahora que ya me conoces un poquito, creo que es hora de que te cuente lo que no te acabas de creer al leer el título.

La máxima inquebrantable

“No pondrás más de un h1 por página”
– Moisés

Todos la conocemos.
A todos nos lo han dicho alguna vez.
E incluso la hemos predicado con fervor.
Yo también.

Y déjame decirte que en el fondo no es obligatorio.
No es que vaya a contarte el próximo truco de moda black hat de stuffear h1 a mansalva, para nada.

Lo que te vengo a contar es sobre html5. Sí, simple html.

Porque (alerta de spoiler) html5 permite tener múltiples h1.

Pero Matt Cutts dice…

Lo sé. Yo también he visto los vídeos. Es más, para hacerlo más interesante voy a ponerte uno de ellos aquí.

Te veo en breve.

Sé que ahora mismo estás pensando esto: “Ajá, lo sabía”.

Y es necesario contextualizar, es fundamental.

⅓ de las webs de Internet está formado por WordPress. Lo que significa que ⅔ son webs construidas con otros CMS (unos famosos y otros menos) y webs de programación propia.

Siempre que veas cualquier consejo de Google interprétalo teniendo en cuenta eso ya que es importante.

WordPress solventa la mayoría de problemas SEO que tienen otras webs así que cuando Google hace una llamada se refiere a todas las webs, no solo a WordPress.

Los spammers están a la orden del día, Google toma muchas medidas a la hora de actualizar su algoritmo para limpiar los resultados de búsqueda de este tipo de webs y webmasters.

Esto quiere decir que stuffear tu web con múltiples h1 no te va a funcionar si lo que buscas es alterar los resultados de búsqueda.

En cambio, si tener múltiples h1 tiene sentido para el usuario no hay ningún problema y en algunos casos es mucho mejor para la interpretación de la información.

Si aún sigues escéptico respecto al tema, entonces sigue leyendo que ahora verás un caso en el que es mejor usar múltiples h1, te lo prometo.

Pongámonos un poco técnicos

Tampoco mucho.

Imaginemos que tenemos una web de noticias, o una web de una agencia de marketing online o incluso que somos Dean con blogger3cero.

Sigamos imaginando que tenemos una estructura similar a esta en la home:
SEO On PageSEOSEO On Page

He añadido los tres casos para que veáis que se puede aplicar a diferentes tipos de web.

Las dos primeras son estructuras que nos podemos encontrar en cualquier parte, en el caso de blogger3cero he decidido tomarme alguna licencia de más (en un futuro imagina que tiene la home de esta manera en vez de con los últimos posts.)

Estructura de un solo h1

Si nos pusiéramos a analizar el html de las webs para ver la estructura de headings saldría esto:

Múltiples H1

Las tres estructuras de encabezados están bastante bien organizadas y tienen una jerarquía de la información correcta pero hay un pequeño problema.

 No todo tiene la misma importancia. 

Tal y como está estructurada la información estamos generando el siguiente esquema en los tres casos:

Marca o Nombre genérico
H2 Secciones de cada web
H3 Título de cada elemento de la sección

Pese a ser totalmente correcta hay un serie de problemas.

  • La etiqueta h1 generaliza todo el contenido de la página diluyendo la relevancia.
  • No es posible diferenciar las secciones o los artículos como un elemento independiente.
  • No se puede diferenciar qué sección de la web tiene más importancia ya que todas están unidas por la misma estructura.
  • Cuando hagas clic en un artículo o en una sección y entres en su respectiva página lo más seguro es que pase de ser un h2 – h3 a un h1 de su respectiva página. Esto se aprecia en la mayoría de blogs. En la home, el título está bajo un encabezado de nivel inferior o bajo un div y al entrar en el artículo pasa a ser un h1.
  • Si mi marca saliera en h1 en cada página de mi web estoy condicionado a que el resto de títulos sean encabezados de nivel inferior.

Estructura de múltiples h1 con html 5

Veamos ahora como html5 nos permite arreglar o mejorar todos los problemas que he mencionado anteriormente.

Vamos a ver cómo se vería la estructura de cada uno de los sitios anteriores empleando las etiquetas de html5 que permiten usar múltiples h1 por página.

SEO on page

Puede parecer un poco abrumador así que no te preocupes que iremos por partes.

Aunque veas mucho más código que en el anterior caso, has de ser consciente que solo he introducido estas etiquetas html: ‹header›, ‹section› y ‹article›.

¿Cómo es posible que esas etiquetas permitan usar múltiples h1?
 Porque son etiquetas que permiten contener secciones dentro de sí mismas. 

Estas etiquetas permiten diferenciar que existen distintas secciones de la web en un mismo documento.

Cabeceras

Nuestra web de noticias tiene una sección de política en la que hay tres noticias y esa sección no tiene nada que ver con la de tecnología, ¿verdad?

En la página de Política, ¿verdad que “Política” es la Top Kw empleada como h1? Pues gracias a estas etiquetas podemos trasladar la estructura de la subpágina a una página superior para que se mantengan los mismos encabezados.

Si no empleáramos estas etiquetas “Política” sería un h1 en webdenoticias.com/politica y en la home sería un h2.

En este caso hemos empleado la home pero lo mismo pasaría en las categorías en sí.

H1 en SEO On Page

¿Verdad que el titular está en H1 en el propio artículo? Pues gracias a estas etiquetas en la sección de política también seguirá siéndolo.

De esta manera “trasladamos” la misma estructura de una página a otra ya que diferenciamos que son secciones diferentes unas de otras.

⭐ Etiqueta ‹header›

Uno de los primeros elementos que debes haber observado al ver el ejemplo de los múltiples h1 es que dentro de cada sección había una etiqueta llamada header que contenía el título de esa sección.

La etiqueta ‹header› es la única de las que te voy a presentar hoy que no permite diferenciar secciones diferentes. Es donde se suele encontrar el encabezado principal de esa sección y también sirve para añadir elementos introductorios o incluso la típica tabla de contenidos que también va genial para el SEO.

Aquí tienes la definición del W3C sobre el ‹header›

“The header element represents introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids.”

⭐ Etiqueta ‹section› y ‹article›

El W3C define ‹section› como:

“The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. Each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.”

Lo que viene a decir es que podemos usar ‹section› para diferenciar diferentes secciones genéricas de una misma temática.

Como hemos visto en los casos anteriores, lo que he hecho ha sido seleccionar las principales categorías de cada web y emplear esta etiqueta para diferenciarlas una de otra.

La etiqueta ‹article› es definida como:

“The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g., in syndication.”

Ambas son muy parecidas ya que permiten contener en sí mismas otras secciones.

Y estas dos etiquetas no son las únicas que permiten tener múltiples h1, también podríamos usar ‹aside› y ‹nav›.

En el ejemplo he usado ‹article› para poner los artículos de cada una de las webs. Y eso tiene un cierto motivo que ahora te contaré, no es porque artículo y article se parezcan.

Una de las preguntas que te puedes estar preguntando es cuándo es más correcto usar ‹article› o ‹section› ya que las dos etiquetas hacen prácticamente lo mismo.

Volviendo a citar al W3C:

“A section forms part of something else. An article is its own thing.”

Es decir, ‹section› sirve para diferenciar apartados que forman parte de algo más y ‹article› muere en sí mismo.

Lo entiendo de la siguiente manera:

Una categoría es algo dinámico en el que se van añadiendo contenidos y otros elementos, es el conjunto de un todo. En cambio, un artículo solo es un artículo y ya está, puede ser actualizado pero no tiene otros elementos dinámicos.

De ahí que haya usado ‹section› para las categorías y ‹article› para los posts. Si bien es verdad, en el segundo ejemplo he diferenciado los servicios con ‹article›, y eso es porque no hay una norma estricta sobre el uso de estas etiquetas.

También tengo que decirte que en el fondo depende de ti y de la estructura de la información de tu sitio web.

Aparte de las etiquetas que te he comentado hay muchas otras que permiten mejorar tu SEO On Page, si estás interesado en saber que permiten hacer te dejo aquí las aplicaciones prácticas de cada una.

Veamos un caso práctico que lo haya aplicado

Esta muy bien toda esta teoría pero, ¿de verdad se usa?

La respuesta es: Sí.

Es dificil que lo veas aplicado en un WordPress porque la mayoría de plantillas vienen con la típica estructura de un solo h1.

El ejemplo que te quiero enseñar es la web de uno de los grandes medios de comunicación de España: La Vanguardia.

No era casualidad que el primer ejemplo de web fuera una de noticias.

Quiero que hagamos un simple ejercicio.

Lo que quiero que hagas es que entres en la web, haz clic con el botón derecho del ratón y pulsa en “ver código fuente”.

Una vez veas todo el código quiero que hagas una búsqueda del número de headings 1 que aparecen.

  • Con Windows: Ctrl + F
  • Con Mac: Cmd + F

H1

¿Qué? ¿154?
En realidad 77 porque hay uno de apertura y otro de cierre pero sí, 77 encabezados h1.

Eso es porque La Vanguardia emplea las etiquetas citadas anteriormente. La estructura que emplea la home es muy parecida a la del primer ejemplo. La home contiene las categorías principales en secciones diferentes y estas a su vez contienen artículos.

Entonces, ¿cuál he de usar?

Depende.

Esa es la verdad, depende de varios factores. Factor técnico, recursos, tiempo, interés… Como todo, esto no es la panacea, ni mucho menos.

Cada una de las mejoras que puedas aplicar a nivel on page sumará un pequeño porcentaje en tu Panda score.

Lo que siempre debes recordar es que “El todo es más que la suma de las partes”.

Recursos

Nacho Mascort

Share on FacebookShare on Google+Share on LinkedInTweet about this on Twitter