Cómo solucionar el uso múltiple de h1 en WordPress

¡Hola a tod@s! Hoy volvemos con un articulo de ayuda para solucionar un problema común en algunos themes de WordPress: el uso múltiple de h1.

Si utilizas WordPress para tu web o blog y llevas algo de control del SEO, o simplemente eres de los que se fijan en el código fuente de la página (yo me incluyo), es probable que te hayas encontrado con una advertencia sobre el uso múltiple de <h1> en alguna de tus páginas.

Para saber si esto te está sucediendo a ti te recomiendo que pruebes sistrix. Es una potente herramienta SEO que nos permite crear un proyecto con optimizer para descubrir qué mejoras podemos hacer en nuestra web.

Aunque hay opiniones que dicen que en HTML5 no hay problemas por el uso múltiple de la etiqueta de título <h1> yo recomiendo solucionar este problema. El motivo es la posible repercusión sobre el posicionamiento SEO. No tengo constancia de que nadie haya sido penalizado por esto; pero es una tontería arriesgarse cuando la solución es bien fácil.

En este momento agradezco el dinero invertido en estudiar programación en php y lo voy a aprovechar para poneros fácil la solución 😉

advertencia uso múltiple de h1

Primero de todo, hay que detectar esas etiquetas de <h1>. Esto es sencillo y se puede hacer de varias formas. Lo más cómodo es situarse en la página con los <h1> múltiples y hacer clic derecho. Aquí podemos seleccionar “inspeccionar elemento” o”ver código fuente”. La segunda opción es más recomendable si no tienes ni idea de programación o HTML, ya que se muestra todo el contenido de la web en pantalla. Sólo tenemos que localizar esas etiquetas en el código fuente para saber donde nace el problema. Dependiendo de lo limpio que sea nuestro código será más o menos difícil; pero para ponerte las cosas más fáciles te resumo las principales causas.

 

  • Eliminar <h1> de la cabecera de página en WordPress

La primera etiqueta <h1> que seguramente encuentres estará dentro del <header>, al principio de la página.

Este es un ejemplo común de esa etiqueta. <header id=”mastheadclass=”site-headerrole=”banner“>

Este es el problema más común y se debe al título y descripción que escribimos en “Apariencia -> Personalizar”. Aunque desmarquemos la opción de mostrar título, este seguirá en el código fuente. El único cambio es que no será visible; pero estará ahí. Para evitar que esto pase hay dos soluciones. O bien eliminar este título o bien adaptar los demás <h1> para convertirlos en <h2>. Además de ser más rápido, es preferible eliminar este <h1> del header y dejarlo disponible para las páginas, categorías o artículos individuales. Para ello iremos en nuestro dashboard de WordPress a “Apariencia->Editor” y buscamos el archivo de la cabecera header.php

h1 en cabecera WordPress

En este archivo debemos eliminar el siguiente fragmento de código

<hgroup>
 <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
 <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>


Haciendo esto habremos solucionado el principal motivo del uso de <h1> múltiples; pero quizás en tu blog tengas una página principal fija. En ese caso te puede interesar mantener el <h1> en la página de inicio y eliminarlo en el resto de páginas. Para ello lo que hay que hacer es sustituir el fragmento de código anterior por el siguiente

<?php if(is_home() || is_front_page()) {?>
 <hgroup>
 <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
 <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
 </hgroup>
 <?php } else { ?>
 <div>
 <div class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></div>
 <div class="site-description"><?php bloginfo( 'description' ); ?></div>
 </div>
 <?php } ?>

Una vez solucionado el problema con los <h1> del header, debemos corregir las páginas de categoría, que es otro de los motivos de esta advertencia.

  • Eliminar <h1> de articulos en las páginas de categoriaseliminar h1 múltiple

Es común que te encuentres en la página de categorías que se está utilizando el <h1> para definir el título de la categoría; pero que además los artículos que se muestran en esa página también utilizan el <h1>. Esta es la otra razón más común de la repetición de esta etiqueta. Para solucionarlo iremos de nuevo a Apariencia->Editor. Esta vez buscaremos el archivo content.php y en él sustituiremos este fragmento de código.

<?php if ( is_single() ) : ?>
 <h1 class="entry-title"><?php the_title(); ?></h1>
 <?php
 else : ?>
 //modificar aqui <h1> por <h2>
 <h2 class="entry-title">
 <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
 </h2>
 <?php endif; // is_single() ?>

Con esto indicamos que, en el caso de que el artículo se muestre fuera de su propia página de post, el <h1> se sustituya por un <h2>

  • Revisa tus entradas del blog y modifica los elementos marcados como “Título 1”

Lo he dejado para el final por ser lo más obvio; pero en caso de que hayas probado lo anterior y sigas teniendo la advertencia de uso múltiple de <h1> toca revisar las entradas.

Busca aquellos títulos que estén marcados como “Título 1” o “Encabezado 1” y rebájalos un nivel. Por defecto el <h1> del artículo es lo que introduces como título, con lo que no es necesario incluir esta etiqueta más veces.

Pues bien, con esto podrás solucionar el uso múltiple de <h1> en tu blog WordPress. Si tienes alguna duda o puedes hacer una aportación sobre el tema tienes los comentarios aquí abajo, así que ya sabes 😉

Si te ha interesado el artículo creo que te gustará esta entrada sobre como estructurar un blog.

¡Un saludo!

 

9 Comments
  1. […] url en cuestión para la que se ha alcanzado esta primera posición es la de este artículo sobre como solucionar el uso múltiple de h1 en WordPress. La palabra clave para la que se ha alcanzado la primera posición es la misma que el texto del […]

  2. Reply
    eva 30 abril, 2015 at 3:08 pm

    Gracias por el post. No he podido encontrar el content.php porque mi tema no lo debe de soportar.

    Pero mi duda es ¿Y esta solución también arregla lo de la cabecera idéntica?

    Gracias

    Un saludo

    • Reply
      Marcos 30 abril, 2015 at 3:33 pm

      Hola Eva. Gracias a ti por comentar
      Sí tu tema no tiene el archivo content.php tiene que estar con otro nombre dependiendo del tema que utilices.
      Ese archivo es el que se encarga de escribir el html dentro del div principal del contenido. El contenido en todo caso debe ser similar al que indico arriba. Sería cuestión de localizarlo

      Sí realizas los cambios indicados en el archivo header.php eliminando el hgroup harás que desaparezca, por lo tanto no hay posibilidad de que sea idéntica al no existir. No se exactamente si era esa tu duda o si te refieres a otra cosa

      Saludos

  3. Reply
    Lyla 19 junio, 2015 at 5:21 pm

    He probado lo que comentas por aquí pero la solución para que el H1 de la home ya no esté en las demás páginas no ha dado resultado. Debe ser porque el código de la plantilla que uso es diferente. Para empezar no usa la etiqueta

    ¿Alguna solución?

    • Reply
      Marcos 22 junio, 2015 at 10:16 am

      Hola Lyla. Pues lo cierto es que habría que comprobar los archivos de tu plantilla. Puede ser que haya variaciones; pero no debe ser muy distinto a lo que cuento aquí. Podría echarle un vistazo personalmente, porque así sin información no puedo ayudarte mucho…lo siento 🙁

  4. Reply
    roberto 23 julio, 2015 at 7:25 pm

    Holayo si tengo el archivo content.php pero tb el content-single.php y el content-page.php, la dudaque tengo, una vez localizado por que fragmento de codigo he de reemplazarlo? o es añadir a content.php el trozo de codigo que tu pones.

  5. Reply
    roberto 23 julio, 2015 at 7:44 pm

    vale, ya lei bien jejejeje

  6. Reply
    locutor 21 octubre, 2017 at 5:03 am

    hola Genio! te comento de mi web, en la home tengo tres etiquetas “h1”, de los cuales 2 son vacios. Asi lo indica Woorank. Utilizo wordpress, me podes ayudar como eliminar los 2 “h1” que estan vacios?
    slaludos

    • Reply
      admin 3 noviembre, 2017 at 12:04 pm

      Hola! Lo primero que hay que hacer es identificar porqué aparece triplicado el H1.
      Para eso sería necesario inspeccionar el código de la web en busca de pistas, bien haciendo clic derecho con el ratón sobre uno de esos H1 y entrando en “inspeccionar”.
      También habría que revisar los archivos del tema y localizar donde se encuentran esos H1 para borrarlos.
      Si se generan a través de algún módulo, hay que intentar modificar ese módulo.

      Ten en cuenta que estos cambios en archivos de la plantilla es recomendable hacerlos sobre un tema “hijo” ya que se podrían perder las modificaciones que hayamos hecho al actualizar el tema

      Espero que te haya servido de algo la explicación 🙂

      ¡Saludos!

Escribe tu comentario