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>

	<!--
		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í

43 pensamientos en “Lo que debería llevar el head en blogger

  1. Imagen de MUXLIMO el dijo:

    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?!

  2. Imagen de AGamez el dijo:

    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.

  3. Imagen de AGamez el dijo:

    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]–)

    • Imagen de Emilio Cobos Álvarez el dijo:

      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 (&lt; y &gt; respectivamente) ;)

  4. Imagen de AGamez el dijo:

    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.

  5. Imagen de AGamez el dijo:

    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

    • Imagen de Emilio Cobos Álvarez el dijo:

      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

    • Imagen de AGamez el dijo:

      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.

  6. Imagen de nicortonicorto el dijo:

    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

  7. Reemplazar el includable all-head-content en blogger | Emilio Cobos-CMC
  8. Imagen de Jodiel FabricioJodiel Fabricio el dijo:

    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’?

    • Imagen de Emilio Cobos Álvarez el dijo:

      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.

  9. Imagen de neyling el dijo:

    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

  10. AYUDA Metadescripcion duplicada
  11. Imagen de asys el dijo:

    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["

  12. Imagen de Helena el dijo:

    ¡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

  13. Imagen de Jorge MgJorge Mg el dijo:

    Hola Emilio, primeramente, enhorabuena por el artículo y por el blog, es muy completo y claro y me ha sido de gran utilidad en varios casos.
    Sobre este artículo, tengo una duda: ¿para qué sirven estas dos etiquetas META?

    <meta content='all' name='audience'/>
    <meta content='general' name='rating'/>
    

    Por cierto, el validador de la W3C da un error con las metas X-UA-Compatible y la audience:

    Bad value X-UA-Compatible for attribute http-equiv on element meta.

    Bad value audience for attribute name on element meta: Keyword audience is not registered.

    ¿Dejo los errores o borro las metas?
    Saludos.

    • Imagen de Emilio Cobos Álvarez el dijo:

      Las metas audience y rating no son necesarias, eran usadas por algunos motores de búsqueda pero ahora puedes prescindir de ellas.

      La meta X-UA-Compatible es necesaria para que ie se comporte en modo estándares y no como IE7/8, siempre que el blog se aloje en .blogspot.com, ya que blogspot.com está en la “lista negra” de microsoft.

  14. Imagen de Ruth Rojas el dijo:

    Gracias por compartir este post.
    Tengo problemas con Facebook, al compartir la direccion que aparece es blogspot.se y yo vivo en Oman, no se que pasa, he tratado de corregirlo pero nada parece funcional.

    Gracias de antemano

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.