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.

Si no sabes qué es un H1 en este post de Dinorank lo explican de maravilla

¿Qué es H1 y H2 en SEO y cómo optimizarlos?

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 😉.

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=”masthead” class=”site-header” role=”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.

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 { ?>
” title=”” rel=”home”>
</div> <?php } ?>

Si no tienes conocimientos de html y programación debes ir con mucho cuidado. Recuerda hacer una copia de seguridad antes de tocar nada.

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 categorias

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 bá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 en la que hablo sobre como optimizar los encabezados en tus textos para SEO.

¡Un saludo!