Viajar por Europa

marzo 28, 2011

optimizar etiquetas con H1, H2 en blogger

Como optimizar las etiquetas de blogger con H1 y H2:

 Siguiendo con el plan de optimizar las nuevas plantillas de blogger y adaptarlas a seo vamos a analizar las etiquetas: optimizar H1,H2 en la plantilla SEO ,analizar  su relevancia y darle más poder para SEO y por tanto para posicionar esas nuevas plantillas, que se las conoce como draft blogger o plantillas beta de blogger. Aunque la solución es practicamente igual para ambas, solo cambia el CSS, como explico al final.
Seria bueno que vieras una opción que he encontrado, para optimizar las etiquetas de los titulos de los posts.


Como sabemos las etiquetas H1-H2-H3-H4 sirven para informar al robot que rastrea nuestro blog sobre la importancia, sobre la relevancia de ´los títulos. Con las etiquetas "H" transmitimos al robot la estructura de nuestro blog.

El blog es similar a  un libro, no solo en contenido sino tambien en estructura, tiene el título de la novela, los distintos apartados que pueden comprender varios capítulos,  los capítulos y dentro de los capítulos secciones etc. todo depende de como estructures el libro. Como lector del libro tu mismo observas como el titulo está escrito en una letra grande, los capítulos vienen en negrita y mayúsculas, identificados con números, dentro de cada capítulo los distintos apartados estan titulados en negrita, de forma tal que el lector percibe lo relevante, el esqueleto de la obra literaria o libro de enseñanza de que se trate.
En la plantilla de blogger hay que OPTIMIZAR LOS TITLE CON H1, H2 Y H3, para ayudar a los buscadores dándole información sobre que titulo es mas relevante que otro. El más relevante deberá ir precedido de H1 y el menos relevante de H4. Como se dice en todos los artículos dedicados a éste tema, estas etiquetas no tienen nada que ver con la fuente. Tu puedes escribir un título con un tamaño de la fuente grande pero si tiene una etiqueta H2, el robot lo considera poco relevante.

En las plantillas de blogger solo viene como titulo relevante con H1 el titulo de blog, en cambio los titulos de los posts tienen una relevancia muy baja H3. Te rompes la cabeza buscando un titular para tu artículo que te dé una buena posición, desarrollas el post y sigues rompiendote la cabeza para posiconar las keywords al objeto de que los buscadores te posicionen tu post y ahora resulta que blogger pasa olimpicamente y comunica a los buscadores que el titulo del post no es muy relevante. Tiene gracia, ¿no?. Asi me pasaba con mis blogs, que por mucho que me preocupara en el titulo del post en su contenido, nunca me lo posicionaba en los primeros puestos, siempre en un octavo o quienceavo, cuando lo conseguía. He cambiado la plantilla y he dado la relevancia que se merece el title.post para ver que mis posts han dado un salto hacia arriba en el buscador de google.

Anotaciones importantes en cuanto a las etiquetas H y los títulos:

1º En la plantilla de blogger el único titulo con etiqueta H1 es el título del blog.

2º Los titulos de los post, de las páginas están catalogados con etiquetas H3. Lo vamos a cambiar en la plantilla SEO por H1. Deberia ser un H2, pero creo que tiene su razón de incluirlo como H1. Es muy larga para explicarla aquí, quizás le dedique un post.

3º El titulo de la fecha aparece en plantilla así: <h2 class='date-header'>17/01/11</h2>, muchos analistas de blogger, más entendidos que yo, opinan que deberia ser H3. Creo que se le incluye el H2 porque los blogs para posicionarse deben de ser vivos, lo ideal sería publicar a diario y por tanto la fecha de publicación es algo que los buscadores analizan y valoran.

4º Los titulos de comentarios vienen considerados con relavencia H4. Dependerá del blog, el que lo consideres con H3.

5º Cuida los títulos de los widgets. Cuando incluyes un widget en el lateral del blog (sidebar) ten en cuenta que está catalogado con relevancia importante, con una etiqueta H2. Por tanto debes aprovechar para incluir, si se puede alguna palabra relevante, una keyword que identifique tu blog.

6º Una vez escribes el post, la relevancia y la importancia de los apartados, keywords, secciónes etc, las marca con letras negritas (strong), con comillas, subrayado, mayúsculas etc. Aunque en algún sitio he leido que podrías añadir en alguna frase importante, que te interese destacar alguna etiqueta, supongo que H4 o H3. Lo acabo de probar por vez primera en el primer párrafo de éste post.

Entramos en la explicación de los cambios y modificaciones que hay que hacer a los titulos de los posts.

La modificación clásica de las etiquetas H1....H4 es común para las nuevas plantillas de blogger, como para la plantilla conocida como mínima.

El proceso es como siempre: diseño-->edicion HTML-->expandir artilugios y buscar mediante Ctrl+F cualquiera de las lineas siguientes.

Alternativa I común para ambas plantillas, pantilla mínima y plantilla nueva draft blogger

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


Una vez encontradas en la plantilla, seleccionarlas y machacarlas pegandole las lineas siguientes:


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


Este és el proceso primero, ahora el segundo consiste en adapar el CSS, aqui hay dos variantes las plantillas minimas y las nuevas de draft blogger.

Para las plantillas nuevas ya he hecho lo siguiente. He buscado estas lineas que indico a continuación y les he cambiado h3 por h1


h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color);
}

h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
  text-decoration: none;
}

h3.post-title a:hover {
  color: $(link.hover.color);
  text-decoration: underline;
}


El resultado en plantilla despues de modificar las etiquetas H3 x H1 es, ademas del cuadro anterior  el siguiente:


h1.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color);
}

h1.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
  text-decoration: none;
}

h1.post-title a:hover {
  color: $(link.hover.color);
  text-decoration: underline;
}


En la plantilla mínima  el paso anterior sobre el CSS se aconseja hacer es lo siguiente:

-------->buscar en plantilla
.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}

----------> añadir .post h1 con lo cual quedará así:

.post h3, .post h1 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}

----->el siguiente bloque que aparece en plantilla

.post h3 a, .post h3 a:visited, .post h3 strong {
  display:block;
  text-decoration:none;
  color:$titlecolor;
  font-weight:normal;

---------->no tocar nada, es decir quedará igual:

.post h3 a, .post h3 a:visited, .post h3 strong {
  display:block;
  text-decoration:none;
  color:$titlecolor;
  font-weight:bold;
}

------> el último bloque que aparece en plantilla

.post h3 strong, .post h3 a:hover {
  color:$textcolor;
}

--------> cambiar h3 por h1, el resultado debe ser:

.post h1 strong, .post h1 a:hover {
  color:$textcolor;
}


Un consejo. En estos cambios en CSS ten cuidado con los puntos "." que van antes de los comandos por ejemplo ".post" y con los ";".

Una advertencia: no en todas las plantillas coincide el CSS, así es que lo que aquí se indica es una solución general, ésta es la idea general, la guía.

35 comentarios:

  1. Muchas gracias por esta entrada, que considero extremadamente útil. Hemos abierto hace poco un "blog" en Blogger, y estábamos bastante decepcionados con lo de los títulos de los "posts" en h3, después de emplearnos a fondo para buscar frases adecuadas para éstos.

    ResponderEliminar
  2. Genial, genial muchas gracias, todo perfectamente explicado, llevaba tiempo detrás de las etiquetas h1, h2.. y me has solucionado todos los problemas ;-)

    ResponderEliminar
  3. ¿cómo modifico el CSS?, mejor dicho, ¿dónde lo encuentro?

    ResponderEliminar
  4. @carlos
    Carlos si no puedes modificarlo con este post ni el otr que tengo dedicado a los titulos H1, h2, dime que plantilla es la que usas.
    supongo que es una de las nuevas ¿no?. Dime el nombre.

    ResponderEliminar
  5. estoy empleando una plantilla "sencilla", de las que vienen predefinidas en blogger, simplemente le he ido cambiando algunas cosillas, estoy utilizando este blog como prueba para aplicarlo a otro que usaré profesionalmente (para temas de dirección comercial de empresas).
    la dirección de este blog de prueba es:http://catacervezas.blogspot.com, por si te sirve para ver la plantilla.
    Muchas gracias por todo tu "saber" puesto a disposición de novatos como yo. Un saludo.

    ResponderEliminar
  6. @carlos
    Mira de ponerle esto que te indico a continuación.

    .post h3 a, .post h3 a:visited, .post h3 strong {
    display:block;
    text-decoration:none;
    color:#0000ff;
    font-weight:bold;
    }

    .post h1 a, .post h1 a:visited, .post h1 strong {
    display:block;
    text-decoration:none;
    color:#0000ff;
    font-weight:bold;
    }

    .post h1 strong, .post h1 a:hover {
    color:#0000ff;
    }

    Cambia el color #xxxxxxx por el que quiera. Ve probando.

    ResponderEliminar
  7. @carlos
    Yo tambien soy novato, con muchas horas de estudio. Por ejemplo llevo una semana que casi no publico nada, y es que estoy estudiando blogger.

    ResponderEliminar
  8. @carlos el css del post está en

    /* posts, a partir de aquí. Mira la plantilla y verás los CSS de los posts, de main, etc.

    ya sabes control F y pones /* Posts.

    Te aconsejo: pierde un tiempo en ir revisando la plantilla, simplelente para ver y aprender. Un truco posiciona con clic en cursor en el html de la plantilla, despues vas a la barra del IE "edición-->seleccionar todo-->copiar" abres el note bloc o bloc de notas y pegas la plantilla. te será más comodo revisarla, estudiarla un poco.

    Otro truco: entras en tu blog y das ver--codigo fuente y así observas donde estan tu s <h1 y otras cosas que puedes ir analizando.

    ResponderEliminar
  9. gracias de nuevo, iré viendo todo lo que me dices.

    ResponderEliminar
  10. Muchas gracias, me ha sido de mucha utilidad. Un saludo

    ResponderEliminar
  11. a LA gRAPADORA. Gracias a tí. Ahora tengo un poco parado este blog, llevo dias liado con el 15-M, pero prometo que vuelvo a publicar esta semana proxima.

    ResponderEliminar
  12. Saludos amigo, interesante tu publicación, me gustaría pedirte ayuda con respecto a este tema en mi blog, he seguido los pasos al pie de la letra como indicas y no logro encontrar en la plantilla la parte a cambiar, soy nuevo en cuanto a la personalización y mejoramiento, ojala pueda ayudarme mi blog es http://geologiavenezolana.blogspot.com/ de ante mano gracias.

    ResponderEliminar
  13. Rafael no entiendo cual es tu problema. Debes ser más concreto.
    Saludos.

    ResponderEliminar
  14. Hola, cuando busco en la plantilla de mi blog las lineas que indicas al principio de la entrada que hay que allar para sustituir y optimizar con H1, H2, etc.
    no aparecen, aun con los artilugios expandidos, lo cual no me ha dejado seguir tu consejo, me imagino que es por la plantilla que uso, la misma es Picture Window de Blogger, espero me pueda ayudar, saludos y gracias.

    ResponderEliminar
  15. Rafael dejame un dia para ver tu pregunta. No hay problema ya verás.
    Ahora es la 16.00 h del 16 de julio. Voy a ver tu problema y te contesto seguramente mañana.

    ResponderEliminar
  16. Ya eh implementado este sistema pero desde otro blog, a alguien le a servido? cuanto se demora en ver los resultados? Gracias por las respuestas!

    ResponderEliminar
  17. Hola amigo. Gracias por tus consejos. Quiero saber algo y es lo siguiente: tengo un blog de denuncia pública (que no genera ingresos por publicidad ni por nada porque no es ese mi objetivo) contra dos personas: Eric Collin y Walter Gammarota quienes estafan a las personas por Internet con un software basura llamado Droid4 Pro y que venden en $997. Necesito que mi blog aparezca de primero en Google para las palabras Eric Collin y Eric Collin estafa. Si puedes darme una mano con eso, el mundo entero te lo agradecerá o por lo menos todos los que se libren de ser estafados. Por favor visita mi blog http://www.ericcollinestafador.blogspot.com/

    ResponderEliminar
  18. Muchisimas gracias, super aporte!! llevaba tiempo escribiendo en un blog y para google las palabras claves no tenian nada que ver, eran tipo "compartir" o fechas.

    ResponderEliminar
  19. Todo está muy bien, pero..... Qué pasa cuando estamos en el index (home, pagina de inicio)?. Esta nos ha quedado sin el título principal H1... Hay alguna forma de que cuando esté en el "home", el h1 siga siendo el título?.. Saludos

    ResponderEliminar
  20. Hola, muy buen post, muchas gracias. Pero te quería preguntar, para el seo ¿es necesario mostrar la fecha de publicación? la que aparece en h2. Lo que pasa es que yo siempre la quito y sólo muestro la fecha de publicación en el pie del post, pero en texto normal.

    ResponderEliminar
  21. Por lógica cuando a la fecha de publicación se la ha asignado un
    "h2" es que se le dá importancia. Así es que yo de tí la mantendria entre sus etiquetas.

    Distinto es si publicas todos los días, entonces el robot detecta lo del día a día.

    Es mi opinión, no es ninguna norma ni regla, aplico la lógica.

    Saludos.

    ResponderEliminar
  22. Gracias, tu explicación me ha ayudado a modificar el título de mis posts a H1 y la línea con la fecha a H3.

    Saludos.

    ResponderEliminar
  23. Por favor estoy confundido, a mi me sale en una herramienta que todas mis entradas son H1 NO SE COMO ARREGLAR ESO DIME por favor como modifico el codigo html cada vez que hago una nueva entrada no entiendo si es posible por favor

    ResponderEliminar
  24. German Alvarez ¿Los títulos de las entradas H1? y que de malo tiene eso?

    ResponderEliminar
  25. Hola! Muy interesante el artículo, he hecho todo tal cual pero ahora el título de las entradas sale con un tamaño pequeño y no lo puedo cambiar. ¿Cómo lo puedo volver a poner grande? Ahora en blogger hay la opción de escoger h1, h2 y h3 al redactar las entradas, es aconsejable usarlo? Y también se puede elegir el enlace permanente.

    Gracias y saludos!

    ResponderEliminar
  26. Gracias por leer el blog. En cuanto a los títulos tienes que ir probando en el CSS del blog. (.post h1)

    En cuanto a los h2 de las entradas si que es conveniente aprovecharlos. Yo en algunos de mi blog ya los ponía antes que blogger lo actualizara.

    Igual ocurre con el enlace permanente.
    Vagabundia.blogspot.com y oloblogger.com tambien te pueden ayudar bastante en estos temas.
    Saludos.

    ResponderEliminar
  27. Muchas gracias por responder tan rápido! Pero no puedo resolver el problema... Cuando clicko en la entrada y se abre solo ahi sí que se ve bien el título como antes pero en la principal me sigue saliendo en mayúsculas. No sé cómo definir el estilo de las h2, he probado muchas cosas pero no puedo, te agradecería muchísimo un cable! El código del CSS creo que es este:

    /* Posts
    ----------------------------------------------- */
    h1.post-title {
    margin: 0;
    font: $(post.title.font);
    }

    .comments h4 {
    margin: 1em 0 0;
    font: $(post.title.font);
    }

    .date-header span {
    color: $(date.header.color);
    }

    ¿qué debo hacer?

    ResponderEliminar
  28. PlacerAdulto Dime cual es tu blog y le pego un vistazo.
    Saludos.

    ResponderEliminar
  29. No veo titulos en mayúsculas. Y una página con tantas fotografias,y videos es un lio mirar el código fuente.
    Pero lo dicho yo no veo mayúsculas.
    Saludos.

    ResponderEliminar
  30. Hola muchas gracias pero no encuentro el segundo paso

    h3.post-title, h4 {
    font: $(post.title.font);
    color: $(post.title.text.color);
    }

    Lo que encuentro con ese comienzo es esto

    h3.post-title, .comments h4">


    Gracias

    ResponderEliminar
  31. Jeremie, prueba con ese que has encontrado, a ver que tal te va.

    Es una cuestión de prueba error, hasta que des con el definitivo.

    ResponderEliminar
  32. hola, un gusto, gracias por el post, queria consultarte si analizar tu blog con alguna herramienta, personalmente la analizo con seo-analyzer.org pero veo un puntaje bajo

    ResponderEliminar
  33. Si, no me extraña. Ahora estoy analizando otra forma de incluir las etiquetas H1 en los títulos.
    Sigue de cerca el blog que aparecerá en unos dias.
    Nota.: perdona no haber contestado antes, pero por alguna razón que desconozco tu mensaje se clasificó como spam y no lo ví.
    Saludos.

    ResponderEliminar
  34. Hola en primer lugar gracias por el post, ya tengo el primer paso pero en el segundo no encuentro esas lineas que dices desde

    h3.post-title, h4 {

    Estoy usando la plantilla Mystique.
    Gracias

    ResponderEliminar

Si haces un comentario procura que no sea anónimo y si estás solicitando algo al menos espero que votes en Google Plus. Saludos.