Cómo optimizar los encabezados de tu blog para dar la información correcta a Google y mejorar tu SEO.

Blogger por defecto en sus plantillas, no trae optimizadas los headers o encabezados, le da una importancia que no requiere a los títulos de los widgets del la Sidebar, por ejemplo, otorgándoles la etiqueta h2, quedando a la par que los títulos de los post que también llevan asignadas esa etiqueta.

La idea es optimizar los encabezados, para dar la información correcta a Google de cuales son los contenidos más importantes.

El hecho de trabajar concienciadamente los títulos de los post incluyendo las palabras claves, es para algo, con ello pretendemos decir a los buscadores que contenido vamos a tratar en el post de forma que lo posicione dentro de ese tema y a la hora de que un usuario pregunte sobre ello, podamos salir entre los primeros resultados.

Pero si no tenemos el título correctamente optimizado de que nos vale, Google entra y ve que tanto el título del post como el título de un widget, por ejemplo 'Post populares' tienen la misma importancia, por tanto, no le estas dando una información correcta y no sabrá muy bien que posicionar.

Optimiza los headers de tu blog: h1 h2 h3 h4...

Este tutorial lo puedes llevar a cabo tanto si estas comenzando con tu blog, mejor que mejor por que desde los inicios ya marcas la jerarquización del contenido, como si ya lo tienes de hace tiempo...más vale tarde que nunca!!

• Para ello vamos a crear un CSS para los títulos del blog, tanto el principal como los encabezados.

/* Títulos post
---------------------------------------------------- */
h1.post-title a, h1{ /**Título post**/
color: #f0a882; /**Título de un sólo color **/
border-top: 0px solid #838785; /**Línea superior**/
border-bottom: 0px solid #838785; /**Línea inferior**/
text-align: center; /**Título centrado**/
}

.post h3 { /**Sub-encabezado**/
font-family: 'Montserrat', sans-serif; /**tipografía**/
font-weight: bold; /**estilo de la tipografía en este caso negrita**/
font-size: 20px; /**Tamaño de la tipografía**/
color: #f0a882; /**color de la tipografía**/
text-transform: uppercase; /**mayúsculas**/
}

.post h3 { /**Sub-encabezado**/
font-family: 'Montserrat', sans-serif; /**tipografía**/
font-weight: bold; /**estilo de la tipografía en este caso negrita**/
font-size: 20px; /**Tamaño de la tipografía**/
color: #f0a882; /**color de la tipografía**/
text-transform: uppercase; /**mayúsculas**/
}
.post h2{ /**Encabezado**/
font-family: 'Montserrat', sans-serif; /**Familia de la tipografía**/
font-weight: bold;
font-size: 25px;
color: #70a882;
text-transform: uppercase;
border-bottom: 1px solid #838785; /**borde inferior**/
width: 100%; /**para que ocupe todo el ancho del post**/
background: white; /**fondo del título**/
border-top: 0px solid #ffffff; /**borde superior para el encabezado**/
border-left: 0px solid #ffffff; /**Borde izquierdo**/
border-right: 0px solid #ffffff; /**borde derecho**/
}

• Este código lo puedes modificar como desees en función del diseño de tu blog, la tipografía que tengas y la paleta de colores que uses.

• Vamos a añadirlo en la plantilla HTML.

• Busca con Ctrl+F "]]></b:skin>"

• Y pegamos justo encima el código.

• Puedes dejar los títulos como los tenias antes o aprovechar y hacer cambios.

Espero que esta publicación te haya gustado. Si tienes alguna duda, consulta o quieras complementar este post, no dudes en escribir en la zona de comentarios. También puedes visitar Facebook, Twitter, Google +, Linkedin, Instagram, Pinterest y Feedly donde encontrarás información complementaria a este blog. COMPARTE EN!