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. HAl 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.
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 != ""'>
<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;
}
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;
}
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.
<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