Siempre que se habla de SEO en blogger, se echa un vistazo al <head> de la plantilla.
La intención de esta entrada es hacer una compilación de todo lo que debería llevar la plantilla de tu blog antes de <b:skin>.
Creo que he sido detallado en los comentarios, aunque si no entendéis el motivo de alguna etiqueta, podéis preguntarlo abajo.
Es posible que falten cosas. He intentado ser lo más organizado posible, incluyendo las cosas más importantes, pero si creéis que falta algo, no dudéis en decirlo.
Hay que reemplazar algunos valores:
[CÓDIGO]por el código que obtienes de bing para validar tu web (más info)[DESCRIPCION_GENERAL_DEL_BLOG](autodescriptiva)[palabras, clave, separadas, por, coma](autodescriptiva también)
Sin más dilación, hallá va:
He dejado el includable all-head-content aquí por seguridad, pero si quieres más personalización, podrías sustituirlo por esta versión.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2'
xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'
xmlns:og='http://opengraphprotocol.org/schema/'
expr:dir='data:blog.languageDirection'
lang='es'
class='v2 no-js'>
<head>
<!-- script redirección -->
<script type='text/javascript'>
//<![CDATA[
(function(){
var URL = document.URL,
reg = /\.blogspot\.(com\...|..)\//
if( URL.match( reg ) ){
window.location = URL.replace( reg, ".blogspot.com\/ncr\/" )
}
})()
// Fallback CSS para cuando no hay javascript
document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
//]]>
</script>
<!--
Comentarios condicionales IE -> Permite usar CSS condicionalmente
La mejor forma de usarlos sería en el <html>, pero no se puede sin tranformar en entidades
-->
<!--[if IE 8]>
<script type='text/javascript'>document.documentElement.className += ' ie8 lt-ie9'</script>
<![endif]-->
<!--[if IE 7]>
<script type='text/javascript'>document.documentElement.className += ' ie7 lt-ie8 lt-ie9'</script>
<![endif]-->
<!--[if lt IE 7]>
<script type='text/javascript'>document.documentElement.className += ' ie6 lt-ie7 lt-ie8 lt-ie9'</script>
<![endif]-->
<!--Meta X-UA-Compatible -> Mejor experiencia para IE -->
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'/>
<!-- meta viewport -> dispositivos móviles -->
<meta content='width=device-width,initial-scale=1.0,maximum-scale=1.0' name='viewport'/>
<!-- Para que indexe Bing [código proporcionado por él] -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='[CODIGO]' name='msvalidate.01'/>
</b:if>
<!-- Metas para facebook (name=description la incluye all-head-content) -->
<!-- <meta property='og:title'> la incluimos donde el título, por conveniencia -->
<meta property='og:site_name' expr:content='data:blog.title'/>
<meta property='og:type' content='blog'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
<meta property='og:description' expr:content='data:blog.metaDescription'/>
<b:else />
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- Metas home -->
<meta name='description' property='og:description' content='[DESCRIPCION_GENERAL_DEL_BLOG]'/>
<b:else />
<!--
all-head-content incluye la meta description si existe data:blog.metaDescription
En el home siempre la hay, pero en este caso concreto no
-->
<meta name='description' property='og:description' expr:content='data:blog.pageName + ": " + data:blog.title'/>
</b:if>
</b:if>
<!-- Imagen del post -->
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta property='og:image' expr:content='data:blog.postImageThumbnailUrl' />
</b:if>
<!--
Meta keywords -> no usada actualmente, pero nunca se sabe ;)
-->
<meta name='keywords' content='[palabras, clave, separadas, por, coma]'/>
<!-- Indexación -->
<b:if cond='data:blog.pageType == "archive"'>
<!-- No queremos indexar en los archivos -->
<meta content='noindex,nofollow' name='robots'/>
<b:else />
<b:if cond='data:blog.pageType == "error_page"'>
<!-- Ni en las 404 -->
<meta content='noindex,nofollow' name='robots'/>
<b:else />
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- En el home sí -->
<meta content='index,follow' name='robots'/>
<b:else/>
<!-- Pero en el resto de las index no -->
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:else />
<!-- En el resto (páginas y posts) sí -->
<meta content='index,follow' name='robots'/>
</b:if>
</b:if>
</b:if>
<!-- Links rel=next y rel=prev -> Indexación también -->
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.newerPageUrl'>
<link expr:href='data:blog.newerPageUrl' rel='next'/>
</b:if>
<b:if cond='data:blog.olderPageUrl'>
<link expr:href='data:blog.olderPageUrl' rel='prev'/>
</b:if>
</b:if>
<!-- Contenido -->
<meta content='all' name='audience'/>
<meta content='general' name='rating'/>
<!--
En vez de usar:
<meta name="language" content="es" />
Añade al elemento <html> el atributo lang="es"
-->
<!-- Título -->
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<meta property='og:title' expr:content='data:blog.pageName + ": " + data:blog.title'/>
<title><data:blog.pageName/>: <data:blog.title/></title>
<b:else/>
<meta property='og:title' expr:content='data:blog.pageTitle'/>
<title><data:blog.pageTitle/></title>
</b:if>
<!--
all-head-content. Incluye:
=> link[rel=me]
=> link[rel=publisher]
=> link[rel=canonical]
=> link[rel=image_src] si hay una imagen en la entrada
=> meta[name=description] si existe data:blog.metaDescription
=> meta[http-equiv=content-type]
=> links del feed
=> scripts para compatibilidad con HMTL5
-->
<b:include data='blog' name='all-head-content'/>
<!-- /all-head-content -->
<!--
Aquí iría <b:skin>
-->Si preferís un archivo txt podéis verlo aquí
Emilio, i do it step by step.. but when i put the facebook meta, this is happens:
error XML: The element type "meta" must be terminated by the matching end-tag "</meta>".
help, please?!
Sorry, a typo: Meta tags in HTML5 doesn't need to be closed, but blogger is XML, so it needs. I wrote it manually, so I forgot to close the og:url meta :S Try now
Ah OK.. i will try it soon.. Thanks Bro.
btw, about these lines:
Means we add them all manually before the 'all head contents" closer tag, yes?!
link[rel=me]
=> link[rel=publisher]
=> link[rel=canonical]
=> link[rel=image_src] si hay una imagen en la entrada
=> meta[name=description] si existe data:blog.metaDescription
=> meta[htt-equiv=content-type]
=> links del feed
=> scripts para compatibilidad con HMTL5
No, they are added automatically in the 'all-head-content', so we don't need to put it manually
Antes de digerir este magnifico post, darte las gracias.
Actualizaciones en forma de guía-manual como esta que incluyes, se necesitan.
Por desgracia google va actualizando blogger a pataditas y artículos sobre HTML-blogger van quedando obsoletos, y desperdigados.
Gracias Emilio.
Ahora sí,vpy a estudiar lo que indicas.
En la linea 35 al guardar la plantilla dá error
adminte guardar la plantilla
Me ha borrado parte del comentario. Los signos mayor y menor los cambio por (, )
Como decia la linea 35 solo la admite como comentario es decir, en lugar de
(!–[if IE 7])
hay que poner — cerrandola como comentario (con lo cual anula la linea)
(!–[if IE 7]–)
No lo he entendido: el comentario llega hasta el correspondiente
<[endif]–>
Yo he actualizado mi <head>, y no he tenido problemas…
PD: Para poner < y > en los comentarios, al igual que en una entrada, tienes que usar entidades HTML (< y > respectivamente) ;)
Perdona por inducirte a un error. Como dices que te ha funcionado, he vuelto a repasar toda mis lineas y tenia un error en un <[endif] >
Efectivamente me ha admitido la plantilla.
Gracias.
Muy bueno, hojala esto hubiera estado cuando recien empece…
Como sabes he aplicado este post a mi nuevo blog y acabo de enviar el sitemap a Google (herramientas webmasters).
y me dá 15 advertencias. Aunque eso sí errores: "0"
Google dice:
XML no válido: demasiadas etiquetas
Hay demasiadas etiquetas para describir esta etiqueta. Soluciónelo y vuelva a enviar la información.
¿A qué puede ser debido?
http://agamezcm.blogspot.com
El problema no está en la plantilla, sino en el sitemap en sí. A las etiquetas a las que se refiere son por las que está compuesto el sitemap (más info). No sé porqué sale el error. Lo que sí que sé, y es una posibilidad, es que tu feed redirige a feedburner (donde puede estar el problema). Lee más sobre cómo evitarlo y enviar el sitemap aquí:
http://vagabundia.blogspot.com/2007/12/blogger-sitemaps-mejorados.html
Gracias Emilio.
Efectivamente el sitemap no me dió problemas al evaluarlo y realmente las herramientas no dicen que exista error de sitemap.
Por si a otro lector le ocurre lo mismo, paso a decirte lo que hice para enviar el sitemap:
1º Daba problemas en herramientas webmaster un sitemap de la forma http://nombredelblog.com.es/rss.xml me lo redirigia automaticamente al feed de feedburner.
2º Anulé el sitemap anterior y ahora siguiendo tus recomentaciones he leido a Vagabundia, hice la prueba del sitemap en herramientas google y no de dió ningún prblema así es que envié el siguiente sitemap: http://nombredelblog.blogspot.com.es/atom.xml?redirect=false
3º En la configuración del blog he dejado puesto el feed de feedburner: http://feeds.feedburner.com/ElblogdeAGamez
De todo ésto lo que me parece vergonzoso, desde mi ignorancia, es que han pasado años con problemas en el sitemap (éste y el de los 25 spots máximos que actualiza) y Google ni dá resultado ni se ha preocupado de una guía en condiciones para resolver los problemas de sus blogs. Lo que es peor aún nunca he podido resolver los problemas que se me han ido presentando en ningún foro oficial de Google. Si no fuera por el interés de compartir y aprender de bloggeros como tú, JMur, Oloman, y algún otro que me dejo en el tintero, estariamos en la edad de piedra.
Gracias por todo.
Genial Emilio, mañana lo chequeo, saludos.
Emilio podrías explicar para que sirve el primer javascript? y otra cosa, sabes como extraer texto de una entrada para mostrarlo en la meta description para usarla como descripción? hace como un mes encontré un template en forobeta que traía.
saludos gracias
El primer código Javascript sirve para evitar la redirección automática de blogger, y sólo deberías quitarlo si tienes un dominio personalizado (aunque no es obligatorio hacerlo).
Para leer más puedes visitar esta entrada donde lo publiqué (aunque no tiene mucho más misterio).
ayer me compré el dominio, pero me sale esta leyenda en rojo en Blogger
No podemos resolver http://www.midominio.com. Puede que transcurran hasta 24 horas hasta que los nuevos dominios comiencen a funcionar. Vuelve a intentarlo más tarde.
Lo siento, pero no tengo mucha experiencia con los dominios personalizados en blogger, aunque estoy al tanto de todos los problemas que está habiendo con ello.
Creo que lo mejor que puedo hacer es remitirte a Oloblogger o a Ciudad Blogger. Seguro que la respuesta que te den allí será más acertada que la que te pueda dar yo. ;)
ya está solucionado, gracias
De nada nicorto ;)
Hola!! Me pasa igual. ¿ Como lo has resuelto? Gracias de antemano
Gracias Emilio, muy buen tutorial explicado paso a paso, para nos novatos en blogger como yo esto me viene bien, excelente blog.
Un abrazo.
Hola que tal.
Si se tiene un dominio personalizado, ya no es necesario el script de redirección, es así o me equivoco?
Exacto. Con un dominio personalizado no se ejecutará (por eso decidí ponerlo de todas formas), pero no es necesario.
Hola Emilio, puedo cambiar el
<b:include data='blog' name='all-head-content'/>, por lo que está en el post ‘Reemplazar el includable all-head-content en blogger’?Sí, provee toda la funcionalidad del all-head-content pero quitando lo innecesario ;) No obstante si algún día a blogger le diera por cambiar el contenido de all-head-content para añadir otra cosa, o cambiara el nombre de los includables, podría haber alguna inconsistencia (por eso en este post lo he dejado).
Yo recomendaría cambiarlo y estar atento al blog, ya que en cuanto blogger haga algún cambio del estilo, avisaré y actualizaré el código.
Gracias por la respuesta. :)
hola
tengo un problemita
implemente el codigo en mi blog
y arriba de la foto de la cabecera me aparece un error que dice
“TEMPLATE ERROR: Invalid data reference top.newerPageUrl: No dictionary named: ‘top’ in: ['blog', 'skin', 'view'] TEMPLATE ERROR: Invalid data reference top.olderPageUrl: No dictionary named: ‘top’ in: ['blog', 'skin', 'view'] ”
en la pagina principal no aparece solo en las demas entradas
si me podrian ayudar a solucionar el problema porfavor
Lo siento, me pillaste editando un poquito ;) ya está solucionado.
muchas gracias Emilio
ya esta bien
gracias
Excelente información, yo no podia ingresar el javascript en el blogger hasta que me di cuenta gracias a este post que me hacia falta el codigo de: “<![CDATA["
¡Hola Emilio!
He seguido los pasos que comentas en este post en mi blog (pues creo que tenía algunas metas duplicadas y me daba algún error al publicar en google plus) pero no sé qué ha pasado que me ha bajado el menú que tengo en cabecera y el buscador una línea hacia abajo; en lugar de estar en la parte negra, me los ha puesto sobre fondo blanco y ha bajado todo el resto una línea. ¿me puedes indicar qué cambiar para que vuelva a su lugar? Mi blog es http://www.mimaletayyo.com
Un saludo y gracias
Emilio, parece que ya lo he solucionado… Algo había hecho en el widget de Ultimos comentarios y no sé cómo lo he arreglado. Gracias de todas formas!
Me alegro de que lo hayas solucionado.
Siento no haber contestado antes, pero me pillaste en un día apurado :S Cualquier otro problema me avisas ;)