Pero, tan solo será el primer paso de muchos. Un artículo de mucha calidad, si no está bien estructurado, puede pasar desapercibido para los buscadores.
El contenido es el rey en esto del SEO, por ello debemos mimarlo. Hay muchos plugins de Wordpress dedicados exclusivamente a optimizar la estructura del contenido, pero ¿existe algún plugin SEO o algo parecido en Blogger?
No será tan directo como un plugin, pero si que será igual de efectivo, incluso mucho más, ya que lo harás tu mismo una sola vez y lo tendrás funcionando para siempre. Si aplicas lo que veremos en este artículo, tendrás una plantilla de Blogger con los encabezados optimizados para SEO.
La importancia de los encabezados para el posicionamiento (SEO on-page)
Justo por encima de este párrafo tenemos un encabezado, al usar una tipografía de letra mayor habrá llamado tu atención, mucho más que las líneas que estás leyendo ahora. Piensa que un buscador, cuando rastree nuestro blog, tendrá un comportamiento similar al tuyo.El orden y utilización de los encabezados no sólo sirve para organizar y estructurar nuestras entradas, sino que además ayuda a los buscadores a identificar los elementos importantes de nuestro contenido. Cuando los motores de búsqueda acceden a nuestra entrada, entienden que las palabras que están dentro de un encabezado tienen mucha más importancia que el resto, le dará más peso a los encabezados de primer nivel (H1), luego a los de segundo (H2) y así sucesivamente.
Figura 1: Selección del tipo de encabezado, desde la edición de una entrada en Blogger |
Cuando utilizamos la herramienta de edición de entradas de Blogger y seleccionamos "Encabezado", por ejemplo, en función de la plantilla que estemos usando se generará una etiqueta HTML de encabezado H2, H3, H4, etc. La mayoría de plantillas no están optimizadas para SEO en Blogger, sin embargo, comprobarás que hacer los cambios oportunos para que sea óptimo para los buscadores es muy sencillo.
Además de los encabezados del contenido de nuestras entradas, el resto de nuestro blog (cabecera, barra lateral, pie de página), también utiliza etiquetas de encabezado HTML definidas en la plantilla.
Lo que vamos a hacer a continuación, es optimizar todas las secciones de nuestra plantilla Blogger donde aparecen las etiquetas de encabezado: H1, H2, H3, etc. Arremángate, pues vamos a toquetear un poco la plantilla. Antes, para abrir boca, fíjate en nuestro objetivo, una plantilla blogger con los encabezados optimizados para SEO:
Figura 2: Plantilla con encabezados optimizados para SEO |
Ésta es la estructura que tendría una plantilla de dos columnas optimizada para SEO. Entre paréntesis se especifica el nivel de etiqueta de encabezado HTML que se utiliza para cada bloque. Con esta estructura se realza el titular de la entrada (H1) y los subtitulares del contenido (H2 hasta H4). Se le quita relevancia a los encabezados de los gadgets (h4).
Cómo optimizar los encabezados de las entradas para SEO
Figura 3: Optimizar encabezados de entradas |
El título de la entrada es, sin lugar a dudas, el más importante, la estrella. Así que le reservamos la etiqueta de mayor peso: H1. La mala noticia es que la gran mayoría de plantillas utilizan H3, incluso las de por defecto de Blogger; la buena noticia es que es muy fácil cambiar nuestra plantilla para que use H1.
Tal y como se ve en la figura 1, desde el editor de entradas podemos seleccionar: "Encabezado", "Subencabezado" y "Encabezado secundario". Haremos corresponder estos encabezados con las etiquetas H2, H3 Y H4, respectivamente.
A Google le va a encantar éstos cambios, eso sí, cuando redactes una entrada debes ser ordenado y estructurar el contenido utilizando los niveles de encabezado que hemos definido. No es necesario utilizar todos los niveles, pero sí que es una buena costumbre utilizar dos como mínimo.
Estos son los pasos a realizar, para optimizar los encabezados de las entradas:
Recuerda, antes de hacer cualquier modificación, es recomendable realizar una copia de seguridad de tu plantilla. En Blogger > Plantilla > "Crear/Restablecer copia de seguridad".
- Nos vamos a la edición del código HTML de la plantilla
Plantilla > Editar HTML - Buscamos "post-title entry-title" (CTRL+F, "post-title entry-title") y encontraremos algo como ésto:
<h3 class='post-title entry-title' itemprop='name'> <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>
- Sustituimos el código anterior por este otro, para darle mayor relevancia a los titulares de las entradas
<b:if cond='data:blog.pageType == "index"'> <h2 class='post-title entry-title' itemprop='name'> <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> </h2> <b:else/> <h1 class='post-title entry-title' itemprop='name'><data:post.title/></h1> </b:if>
- Vuelve al paso 2 hasta que no encuentres más secciones "post-title entry-title"
Normalmente las autores de plantillas utilizan la clase CSS "entry-title", que es la reservada precisamente para el titular de la entrada. Otro tipo de "autores" no utilizan el estándar, por lo que tras aplicar los cambios anteriores podrías ver un poco raro el titular de la entrada (si usas la plantilla simple de Blogger, estarás en este caso).
Si tras los cambios no ves el título de la entrada correctamente, sigue estos pasos:
- Busca
h3.post-title, .comments h4 {
y sustutúyelo porh1.post-title, h2.post-title, .comments h4 {
- Busca
.mobile h3.post-title {
y sustitúyelo por.mobile h3.post-title, .mobile h2.post-title {
Optimizar los encabezados de la barra lateral (sidebar) y pié de página (footer)
Figura 4: Optimizar encabezados de sidebar y footer |
Puesto que estos titulares no suelen ser importantes para el posicionamiento de las entradas, los sustituiremos por la etiqueta H4, esto hará ganar mucho más peso a los encabezados del contenido, por lo que nuestras entradas estarán mejor optimizadas para el SEO.
Figura 5: Ejemplo de encabezados en un sidebar |
- Nos vamos a la edición del código HTML de la plantilla
Plantilla > Editar HTML - Busca todas las apariciones de:
<h2><data:title/></h2>
y sustitúyelo por:<h4><data:title/></h4>
- Busca todas las apariciones de (puede que tu plantilla no tenga apariciones de este código, es normal):
<h2 class='title'><data:title/></h2>
y sustitúyelo por:
<h4 class='title'><data:title/></h4>
Si tras el cambio anterior, no se visualiza correctamente los estilos, busca en el código "h2 {" y sustitúyelo por "h4 {", ahora se te verá como antes.
Cada vez que crees un nuevo gadget, desde el modo diseño de Blogger, se añadirá por defecto una etiqueta <h2>, por lo que recuerda volver a hacer este proceso si quieres mantenerlo optimizarlo.
Optimizar los encabezados de la cabecera (header)
Figura 6: Optimizar encabezados del header |
Este paso es opcional, puesto que hay plantillas que no muestran el título y descripción del blog en la cabecera. Si accedes a "Blogger > Diseño" y editas el gadget de la cabecera, te aparecerá algo como ésto:
Figura 7: Configurar cabecera desde el modo diseño de Blogger |
Tienes marcado "En lugar del título y la descripción"
Si tienes seleccionada la opción "En lugar del título y la descripción" (como aparece en la imagen) o "Colocar la descripción después de la imagen", sigue estos pasos:- Edita la plantilla en modo HTML
Plantilla > Editar HTML - Busca este fragmento en el código (puedes buscar la primera línea "<!--Show the image only-->"
<!--Show the image only--> <div id='header-inner'> <a expr:href='data:blog.homepageUrl' style='display: block'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> </a> <!--Show the description--> <b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'> <b:include name='description'/> </b:if> </div>
y sustitúye solo lo que está resaltado por esto otro:<b:if cond='data:blog.pageType == "index"'><h1></b:if> <a expr:href='data:blog.homepageUrl' style='display: block'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> </a> <b:if cond='data:blog.pageType == "index"'></h1></b:if>
De esta forma si se está en la página principal, por ejemplo, el logotipo tiene H1 y el título de las entradas H2. Cuando estemos en una entrada, el logotipo no tendrá ningún tipo de encabezado y el título de la entrada H1. Justo lo que buscábamos.
No tienes imagen de cabecera
Si no tienes imagen de cabecera sigue estos pasos:- Edita la plantilla en modo HTML
Plantilla > Editar HTML - Busca este fragmento en el código (puedes buscar la primera línea "<!--No header image -->"
<!--No header image --> <div id='header-inner'> <div class='titlewrapper'> <h1 class='title'> <b:include name='title'/> </h1> </div> <b:include name='description'/> </div>
y sustitúyelo por este otro<!--No header image --> <div id='header-inner'> <div class='titlewrapper'> <b:if cond='data:blog.pageType == "index"'> <h1 class='title'><b:include name='title'/></h1> <b:else/> <h2 class='title'><b:include name='title'/></h2> </b:if> </div> <b:include name='description'/> </div>
Tienes seleccionada la opción "Detrás del título y descripción"
Si tienes seleccionada la opción "Detrás del título y la descripción" sigue estos pasos:- Edita la plantilla en modo HTML
Plantilla > Editar HTML - Busca este fragmento en el código (puedes buscar la primera línea "div class='titlewrapper'"
<div class='titlewrapper' style='background: transparent'> <h1 class='title' style='background: transparent; border-width: 0px'> <b:include name='title'/> </h1> </div>
y sustituye el código resaltado por este otro<b:if cond='data:blog.pageType == "index"'> <h1 class='title' style='background: transparent; border-width: 0px'><b:include name='title'/></h1> <b:else/> <h2 class='title' style='background: transparent; border-width: 0px'><b:include name='title'/></h2> </b:if>
Si observas que los estilos no se visualizan como antes, deberás modificar también los estilos CSS para que se muestre correctamente la etiqueta H2 en la cabecera .
- Localiza la línea ".Header h1 {" en el código y la sustituyes por ".Header h1, .Header h2 {"
- Localiza la línea ".Header h1 a {" en el código CSS y sustitúyela por ".Header h1 a, .Header h2 a {"
- Ahora deberías visualizar el título del blog correctamente
Eliminar encabezados de las fechas en Blogger
La mayoría de las plantillas de Blogger tienen la costumbre de utilizar la etiqueta de nivel H2 para mostrar las fechas, desde un punto de vista del posicionamiento y SEO ésto no es muy bueno, ya que estaremos dando el mismo peso a la fecha de una entrada que a un subtitular, por ejemplo.Pensaba crear una entrada específica para resolver este problema que me han comentado muchos, pero creo que es mucho más práctico y claro incluirlo en este artículo, donde está todo lo que tenemos que hacer en blogger para optimizar los encabezados o etiquetas H1, H2, H3 ,H4.
Bueno... ¿manos a la obra?
Localiza en tu plantilla TODAS las apariciones de:
<b:if cond='data:post.dateHeader'> <h2 class='date-header'><span><data:post.dateHeader/></span></h2> </b:if>y sustitúyelo por esto otro:
<b:if cond='data:post.dateHeader'> <h4 class='date-header'><span><data:post.dateHeader/></span></h4> </b:if>¡Listo! Hemos bajado el nivel de los encabezados de las fechas a H4, el mismo que tienen los encabezados de lo gadgets. Es, sin duda, la mejor opción para optimizar el posicionamiento de nuestras entradas. ¿Sabes lo mejor?... a partir de ahora no tendrás que hacer nada más, hasta que vuelvas a cambiar de plantilla.
Conclusiones
Hemos aprendido a optimizar los encabezados en Blogger para SEO, haciendo pequeñas modificaciones en la plantilla.
Lo bueno de todo esto, es que una vez hechos los cambios, sólo tendremos que preocuparnos por añadir contenido de calidad. Nuestra plantilla hará el resto, puesto que los encabezados los tenemos optimizados para el posicionamiento en buscadores.
En el próximo artículo, te mostraré todas las posibilidades de optimización del título del blog (title). Daremos otro paso más para tener una plantilla perfectamente optimizada para SEO en Blogger.
Desde aquí te invito a comentar cualquier cosa que ves, ya que son los comentarios los que han hecho que esta entrada se vaya actualizando y ayudando a otros que se vean con los mismos problemas... es que tengo los mejores lectores :-P.
Algunos de los blogs que han aplicado la optimización
- Dr Lopez Heras 2.0 - David López Heras
- Caminar en la Sierra de Francia - Alfred Ledingue
- Viajar con Grace - Gracia Rodríguez
- Caprichos de madera - Juan Millas
- ViaexProsa - Eduardo Ramón
No dejes de intentar aplicar la optimización que te propongo, aunque no tengas muchos conocimientos. Es normal que cambien los estilos del blog tras los cambios, sobre todo si usas una plantilla personalizada. Aunque en el artículo explico como solucionar los problemas de estilos de la mayoría de plantillas, no se cubren todas, ya que hay muchas combinaciones. Si te ves con algún problema no dudes en comentar y lo solucionaremos.