Evitar etiquetas h1 duplicadas en WordPress

Como muchos ya sabréis la etiqueta h1 es una de las más importantes, ya que es la etiqueta que contiene el texto más relevante de la página o entrada. Como ya mencionamos en nuestra guía de SEO on-page (sino la has leído deberías hacerlo), sólo debe haber una etiqueta h1 por cada página o entrada, además de otros factores a tener en cuenta que están explicados en la guía y no me voy a repetir aquí. En este artículo voy a centrarme en como evitar etiquetas h1 duplicadas en WordPress ya que es algo que debemos cuidar en nuestro blog o web.

Este no es un tutorial para los webmasters más nóveles ya que requiere un mínimo de conocimientos de PHP, HTML y CSS pero creo que cualquiera podría conseguirlo con un poco de esfuerzo.

Origen de las etiquetas h1 duplicadas en WordPress

Las etiquetas h1 duplicadas son casi siempre consecuencia de una mal diseño y programación de nuestro tema WordPress.

Por lo general los temas muestran un logo en la cabecera principal, que puede ser en forma de texto o en forma de imagen y suele estar entre etiquetas h1. Además, en las diferentes entradas, el título del artículo o entrada también suele estar entre etiquetas h1 y es aquí donde nos encontramos con el problema de las etiquetas h1 duplicadas.

Para poner solución a este problema hay que entrar a programar el tema WordPress y muchas veces con una simple modificación del archivo header.php solucionamos el problema.

La solución si la cabecera es texto o una imagen se basan en lo mismo, pero en el caso de la imagen además hay que tener en cuenta ciertos aspectos del código CSS por lo que voy a hacer dos apartados, uno para cabecera con texto y otro para cabeceras con una imagen como logo.

Evitar etiquetas h1 duplicadas en temas con cabecera de sólo texto.

Cuando se trata de texto la solución se simplifica bastante, basta con usar un condicional en PHP que muestre o no la cabecera h1 según se muestre la página principal (home) o una entrada.

<?php if ( is_home() ) { ?>
   <h1>Vozidea.com</h1>
<?php } else { ?>
   <h2>Vozidea.com</h2>
<?php } ?>

Con el código anterior si vistamos la página principal de nuestro blog WordPress se mostrará el nombre de nuestro blog entre las etiquetas h1, mientras que si visitamos otra página se mostrará entre las etiquetas h2. Como es obvio se trata de un código de ejemplo básico, que podemos modificar para ajustarlo a nuestras necesidades.

Evitar etiquetas h1 duplicadas en temas con cabecera de imagen como logotipo.

En este caso la solución pasa por emplear un código similar al anterior pero con el marcado HTML para el logotipo, por ejemplo:

<?php if ( is_home() ) { ?>
    <h1 class=”logo”>Vozidea.com</h1>
<?php } else { ?>
    <div class=”logo”>Vozidea.com</div>
<?php } ?>

En este caso habrá que jugar con el código CSS de la clase logo para evitar que se muestre el texto en pantalla. Lo que queremos es ocultar el texto entre las etiquetas h1 para que no tapen nuestro logotipo.

Es en esta parte de evitar que se muestre el texto, es donde hay que recurrir a ciertos trucos CSS, yo no los se todos ni mucho menos, pero mostraré los más conocidos:

• Emplear la propiedad CSS text-indent.
  Con esta propiedad y un valor elevado negativo sacamos de la pantalla el texto. Entonces el texto sigue estando ahí (Google lo detecta y es capaz de encontrarlo) pero los usuarios no lo verán en su pantalla. Es la forma de ocultar el texto entre las etiquetas h1 que veo que se usa con más frecuencia. No es penalizado por Google siempre y cuando no la usemos para ocultar enlaces u otras técnicas BlackHat.

  text-indent: -9000px;

• Emplear la propiedad display.
  Con esta propiedades conseguimos ocultar el texto pero no es la forma más recomendada, ya que a Google no le gusta que ocultemos elementos e incluso si ocultamos enlaces nos puede penalizar. Aun así algunas webs lo usan y quiero pensar que si lo empleamos de forma correcta no hay ningún peligro.

  display: none;

• Sacar el texto de su contenedor con position y ocultarlo ajustando el overflow.
  Esta parece la forma más segura de cara a Google, pero requiere un poco más de trabajo y de conocimientos CSS. Lo que hacemos es sacar el texto de su contenedor con la propiedad position y después lo ocultamos con overflow, un ejemplo de uso sería:

  position: absolute;
  overflow: hidden;

Antes de terminar decir que en Vozidea he optado por una solución mucho más sencilla y es no emplear la etiqueta h1 para el logo (empleo siempre un contenedor div). Decidí hacerlo así porque vi algunas páginas reconocidas, como la de Moz, que lo hacían de esta forma y parece que no da problemas.

Espero que os haya servido de ayuda este artículo y si creéis que lo merece, podéis ayudar a más gente compartiéndolo en las redes sociales.