.

27 de septiembre de 2013

Etiquetas H2 y H3 en Blogger: cambios y personalización

Escrito por
Hace poco explicamos el uso y la optimización de la etiqueta H1 en Blogger y hoy vamos a seguir con H2 y H3, otra etiqueta de titulares que tiene su importancia en el posicionamiento de nuestro blog en los buscadores. ¿Dónde aplica Blogger las etiquetas H2 y H3 de forma general?  ¿Cómo podemos modificar su aspecto? ¿Cual es su importancia en SEO? ¿Cómo se puede añadir una etiqueta H2 y H3 dentro de un artículo del blog? ¿Se puede diferenciar entre las H2 de dentro de un artículo y las de la barra lateral? Vamos a tratar todos estos temas empezando por la base, pero para que todos los principiantes podáis entender a la perfección el tema de las etiquetas, echad un vistazo primero al artículo anterior sobre las H1.

Etiqueta H2 en HTML

Las etiquetas H2 se emplea en las páginas Webs para marcar el texto de un titular y a diferencia de H1 se puede repetir varias veces dentro de una misma página Web o de un artículo del blog. A nivel de SEO (optimización del posicionamiento Web) H2 no tiene tanto impacto, pero al poder usarla más veces puedes ser útil si nuestra estrategia es de tipo "long tail". Si comparamos nuestro blog con un periodico H1 sería el título del periódico, mientras que H2 serán los titulares de las noticias, secciones del periódico... quizás todas ellas, o quizás sólo aquellas a las que queremos dar relevancia. H

Al igual que H1 y las otras etiquetas para titulares hace años esta etiqueta llevaba consigo algunas propiedades como por ejemplo el color o la alineación del texto, pero en HTML5 todas estas propiedades se asignan desde la hoja de estilos CSS3. Y como la etiqueta H2 puede estar en diferentes partes del blog se emplean distintos selectores. En otras palabras, la etiqueta H2 es la forma de decirle al buscador de Google que una frase o unas palabra es muy importante (que queremos que cuente más para el posicionamiento), pero el texto lo podemos mostrar con diferentes aspectos: letras mas o menos grandes, diferentes fuentes, colores, cursiva, subrayado...

Etiquetas H2 y H3 en Blogger.

Estas etiquetas pueden estar en Blogger en diferentes sitios, pero coincide que en las plantillas básicas que puedes escoger dentro del editor (clásica, picture window, etéreo, filigrana, fantastic SA, viajes, etc... ) siguen la misma estructura.
  • H2 es la etiqueta de los títulos de los gadgets, tanto los que coloques en la barra lateral, como en la parte superior o en el pie de página. 
  • H3 es la etiqueta de los títulos de los artículos.
  • H2 y H3 son etiquetas que se pueden añadir dentro de los textos. Para profundizar un poco más en este tema, te recomiendo el siguiente artículo de Karla sobre el uso de los encabezados en Blogger.
    • H2 es el tipo de letra llamado "encabezado".
    • H3 es el tipo de letra llamado "subencabezado".
Como veremos más adelante esto se puede cambiar para que sea al reves, para que todos los titulos sean H2, todos H3 o añadir estas etiquetas en otras partes del blog.

H2 y H3 en SEO

Un uso inteligente de las etiquetas de titulares puede ayudar bastante a conseguir nuestros objetivos de posicionamiento, pero para ello debes tener en cuenta lo siguiente.
  • H2 es bastante relevante en SEO, mientras que H3 tiene una influencia muy débil, por lo que no se le suele prestar atención. 
  • H2 y H3 las podemos usar varias veces, pero no conseguiremos mejor posicionamiento de la página por añadirlas muchas veces.
  • H2 y H3 te pueden ayudar a posicionar mejor para algunas búsquedas. No sirve para todas las búsquedas, ya que sólo mejoran el posicionamiento para las palabras que tu estás marcando y otras palabras pueden bajar su posicionamiento.
A partir de estos principios para mejorar el SEO debemos pensar que palabras son las que queremos resaltar, cómo queremos que nos encuentre la gente. Revisamos los títulos de los gadgets y revisamos los títulos de los artículos. ¿Qué palabras te interesa resaltar más? Imagina que es un blog sobre noticias deportivas de Galicia, si en la barra lateral tienes algunos apartados con títulos de diferentes poblaciones y deportes, mientras que los titulares de los artículos son más expresivos: "gana 2-0 A Coruña", "una gran victoria de Pontevedra en vela".... En este caso es interesante dejar H2 en los títulares de la barra lateral para  posicionar el blog por "noticias deportivas de Vigo", "noticias fútbol Ferrol", "noticias baloncesto Santiago de Compostela". Por mi parte dejaría los títulos de los artículos con H3, es decir no tocaría nada de la plantilla porque ya está optimizada.

Cambio de etiquetas H2 y H3 en Blogger

Pero otras veces será al revés, los gadgets no tienen importancia y nos interesa destacar las palabras que escribimos en los títulos de los posts. Lo que sigue es un guía para poner H3 en los títulos de los gadgets y H2 en los títulos de los artículos.

1. Entra en la plantilla a través del editor de HTML.
2. Busca las etiquetas H2 de los títulos, que serán algo así. Substituye H2 por H3, y lo demás lo dejas igual.

 <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>

3. Busca las etiquetas H3 de los posts, que está más abajo y serán algo así. Cambias H3 por H2.

<h3 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'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>

4. Si tienes activada la plantilla para blogs tienes que repetir lo mismo otra vez buscando un código similar a este. Y cambias H3 por H2.

<h3 class='mobile-index-title entry-title' itemprop='name'>
          <data:post.title/>
        </h3>

Con esto ya tienes los cambios realizados de las etiquetas, el problema es que ahora los títulos de los posts tendrán el estilo (CSS) que antes tenías en las barras laterales, mientras que en las barras laterales tendrás el estilo de los títulos de los artículos. Para que quede todo como antes, hay que modificar los estilos del código CSS de la plantilla (entre skin y /skin)

6. El código CSS para H2 está en Headings. Cambias H2 por H3.

/* Headings
----------------------------------------------- */
h3 {
  margin: 0 0 1em 0;
  font: 14px, bold, times new roman;
  color: blue;
}

7. El código CSS para H3 está en el apartado Posts, y será algo así. Si cambiamos H3 por H2, el cambio sólo afectar a los H2 de los títulos de los artículos.

h3.post-title, .comments h4 {
  font: 0;
  margin: .75em 0 0;
}


Personalizando H2 y H3 con CSS

Ya hemos visto dónde aplica Blogger las etiquetas H2 y H3, la importancia que tienen en SEO y como podemos intercambiar ambos términos. Otras veces lo que querrás es cambiar el aspecto de los títulos de los posts o de los gadgets. Esto se hace siempre desde el CSS. La única excepción es si la plantilla de Blogger tiene insertada alguna "Variable definition" para este valor, aunque no conozco ninguna que lo tenga.
Si por ejemplo queremos cambiar el H3 del título de los artículos, pero dejar el H4 de los comentarios tendríamos que separarlo y añadir las características que nos interesen. 

h3.post-title, .comments h4 {
  font: 0;
  margin: .75em 0 0;
}

En este ejemplo cambiamos el texto de arriba al que tenemos bajo este párrafo. Lo que hacemos es que los títulos H3 para el titular del artículo vayan en tamaño de 25 píxeles, color azul y que estén centrados, pero se pueden personalizar de otras muchas formas usando el código CSS3, incluyendo otros estilos y sombras para las letras. Como puedes ver la parte de comentarios la dejamos igual.

h3.post-title {
  font-size: 25px;
font-color: blue;
text-align: center;
margin: auto;
}

.comments h4 {
  font: 0;
  margin: .75em 0 0;
}

Si queremos personalizar los H2 o H3 de otras partes del texto la clave está en usar los selectores adecuados. Si usamos H2 o H3 en el CSS las instrucciones que les demos serán para todas las etiquetas, pero si usamos selectores más específicos, sólo afectarán a las etiquetas que están dentro de una sección. Algunos ejemplos de este tipo de selectores son H3.post-title  y H2.post . Otra posibilidad es usar selectores de clases o identidades, entonces los selectores serán .clase o #identidad.

Un ejemplo. Queremos crear subtítulos dentro de los artículos que sean de un color y tamaño diferente al de los H2 normales, pero sólo a veces, no siempre. Para ello añadimos el siguiente código CSS en la plantilla. 

.titular {
font-size: 200%;
font-color: #454500; }

Con esto no verás ningún cambio ya que tienes que añadir la clase en el códig HTML de cada artículo. Escribimos un nuevo artículo en la pestaña "Redactar", añades un titular dentro del artículo. Bien, sin salir del editor del artículo pasa a la opción "HTML" y verás que en el código del titular hay algo así.

<h2>Texto del titular</h2>

Al añadir la clase quedará así.
<h2 class="titular"> Texto del titular </h2>.

En el momento que grabes se aplicará al CSS a este titular y cambiará su aspecto. A aquellos que no se les marque con las clase tendrán el mismo aspecto que los otros H2 de nuestro blog. De esta forma puedes cambiar aquellos titulares que te interese, la mala noticia es que este nivel de personalización requiere hacer el cambio a mano. Espero que con esto se suficiente para hacerse una idea de como cambiar, optimizar y personalizar las etiquetas H2 y H3 en Blogger.

0 comentarios:

Publicar un comentario en la entrada

Bienvenido, en este blog encontrarás información para crear y personalizar tu blog de Blogger o Wordpress, además de artículos sobre Internet, las nuevas tecnologías, programación con HTML y CSS, educación y otros temas. Espero que los tutoriales, artículos y recursos del blog te resulten útiles. Si quieres mantener el contacto puedes hacerlo a través de mis cuentas de Twitter o Google Plus.