Código blogger para título (h1, h2, h3, etc.)

Las etiquetas h1 a h6 expresan la jerarquía de los encabezados de una página. No son simplemente seis tamaños de letra: el tamaño visual se controla con CSS. Esta guía publicada en 2019 explica una modificación de plantillas clásicas de Blogger; antes de aplicarla, hay que revisar la estructura del tema que realmente usa tu blog.

Cómo organizar los títulos

El encabezado principal identifica el contenido de la página. Las secciones usan el siguiente nivel y sus subsecciones, el siguiente. Por ejemplo, un artículo puede tener su título principal en h1, sus apartados en h2 y los subapartados en h3. La estructura también incluye la cabecera y las zonas fijas de la plantilla.

No todas las plantillas de Blogger usan las mismas etiquetas. Encontrar dos h1 no demuestra por sí solo una penalización SEO ni obliga a pasar todos los títulos a h2. El objetivo es que los encabezados describan el contenido y mantengan una jerarquía comprensible, también para quienes navegan con tecnologías de asistencia.

Ejemplo para una plantilla clásica

Si tu tema clásico tiene el título de cada entrada en h3 y, tras revisar el conjunto de la página, decidís que corresponde un h2, este es el bloque de ejemplo con la apertura y el cierre ajustados al mismo nivel. No lo pegues si tu plantilla no utiliza esta estructura.


<b:if cond='data:post.title'>

      <h2 class='post-title entry-title'>

     <b:if cond='data:post.link'>

       <a expr:href='data:post.link'><data:post.title/></a>

     <b:else/>

        <b:if cond='data:post.url'>

          <a expr:href='data:post.url'><data:post.title/></a>

        <b:else/>

          <data:post.title/>

        </b:if>

     </b:if>

      </h2>

    </b:if> 

Aplicar el cambio y comprobar el CSS

1. Guardá una copia del tema antes de editarlo. En Blogger, buscá el editor HTML dentro de Tema; la ubicación y los controles pueden variar respecto de las plantillas antiguas.
2. Localizá el bloque que genera el título de la entrada. Comprobá las versiones de entrada, listado y móvil antes de sustituir etiquetas.
3. Si cambiás h3 por h2, modificá tanto la etiqueta de apertura como la de cierre. No cambies todas las coincidencias del archivo sin revisar su función.
4. Ajustá únicamente los selectores de CSS que correspondan al encabezado modificado. Un selector de h1 no aplica a un título que acabás de convertir en h2.
5. Usá la vista previa y verificá una entrada y una página de listado. Guardá solo si el contenido, los enlaces y el diseño siguen funcionando; la copia anterior permite revertir.

Por ejemplo, para ajustar el tamaño de ese título concreto se puede usar un selector como este, adaptando los valores al tema:

h2.post-title.entry-title {
  font-size: 150%;
  line-height: 1.4;
}

El ejemplo solo ilustra la relación entre la etiqueta elegida y su selector. No garantiza mejores posiciones por cambiar el nivel de un encabezado.