Tutorial: Configura correctamente el <head> para mejorar el SEO en Blogger

JuanDRomero · 3 Mar 2013

Recomendado este tutorial de [MENTION=28190]ecoal95[/MENTION]

ecoal95 · 4 Mar 2013

tested cars dijo:
Solucionado lo del codigo bing

---------- Post added 03-mar-2013 at 22:52 ----------

¿¿¿Con este tutorial ya se soluciona el problema que solucionan en este otro tutorial???? http://forobeta.com/tutoriales-de-blogger/10105-meta-descripciones-blogger.html

Sí, siempre que uses la opción de descripción aquí: Descripción de búsqueda - Ayuda de Blogger

Sobre el código Bing, por si a alguien se le sigue preguntando, hay más info aquí: http://www.bing.com/webmaster/help/how-to-verify-ownership-of-your-site-afcfefc6
PD: Siento la tardanza, pero no seguía el hilo, y ha coincidido que me pasaba por aquí

tested cars · 4 Mar 2013

ecoal95 dijo:
Sí, siempre que uses la opción de descripción aquí: Descripción de búsqueda - Ayuda de Blogger

Sobre el código Bing, por si a alguien se le sigue preguntando, hay más info aquí: How to Verify Ownership of Your Site - Bing Webmaster Tools
PD: Siento la tardanza, pero no seguía el hilo, y ha coincidido que me pasaba por aquí

Gracias!!!!!! Saludos!

---------- Post added 05-mar-2013 at 09:05 ----------

ecoal95 dijo:
Sí, siempre que uses la opción de descripción aquí: Descripción de búsqueda - Ayuda de Blogger

Sobre el código Bing, por si a alguien se le sigue preguntando, hay más info aquí: How to Verify Ownership of Your Site - Bing Webmaster Tools
PD: Siento la tardanza, pero no seguía el hilo, y ha coincidido que me pasaba por aquí

Es normal que después de hacer esta modificación en blogger, casi todo el trafico de entrada sea directo???

GatoRyuzaki · 25 Mar 2013

Muy buen aporte :encouragement: usare las metas de FB para mi web se agradece el tiempo en crear el thread :encouragement:

pakohead · 19 Abr 2013

Ok, acabo de implementar el código, veamos que tal funciona, muchas gracias por aporte de mucha ayuda

tonydalys · 19 Abr 2013

buen aporte nunca habia visto algo asi...

xaiborweb · 6 May 2013

mateopereira dijo:

Como se sabe el SEO es algo muy importante para posicionar tu blog en buscadores.

Y una de las primeras cosas para poder partir bien desde el inicio con tu blog es configurar correctamente el <head>.

Aquí te dejo paso a paso lo que debe contener tu blog:

*Todo lo que este entre codigo HTML es lo que se debe colocar.

HTML:

<head>

Dentro del head agregaremos lo siguiente:

HTML:

<!-- script redirección -->
	<script type='text/javascript'>
		//<=!=[=C=D=A=T=A=[
		(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>

Esto es importante si no tienes un dominio aún, si ya lo tienes no hace falta colocarlo pues su función es evitar la re-dirección por países (.ar, .co, etc.) dejandola en .com.

Lo siguiente son 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

HTML:

<!--[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]-->

Ahora vamos a hacer que funcione correctamente en todos los navegadores:

*Importante que cambies donde dice "CODIGO" por el código que bing te otorgue.

HTML:

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

Ahora vienen las metas para indexar el contenido correctamente en Facebook:

HTML:

<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 property='og:description' content='[AQUÍ COLOCA LA DESCRIPCIÓN DE TU BLOG]'/>
		<b:else />
			
			<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>

Ahora unas cosas mas para indexar todo el contenido y agregar keys, que aunque ya casi no se utilizan pueden servir:

HTML:

<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'/>

Por ultimo, los títulos:

HTML:

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

		<b:include data='blog' name='all-head-content'/>

Ya solo nos falta colocar lo último. La url canonica, favicon, descripción, imagen del post, feed y un script para la compatibilidad con HTML5:

HTML:

<!-- Meta content-type está obsoleta, usaremos charset -->
	<meta charset='utf-8' />
	<meta name='generator' content='blogger' />

	<!-- Link al favicon (es el personalizado) -->
	<b:if cond='data:blog.blogspotFaviconUrl'>
		<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
	</b:if>

	<!-- Link rel=canonical -->
	<link rel='canonical' expr:href='data:blog.canonicalUrl' />

	<!-- La descripción -->
	<b:if cond='data:blog.metaDescription'>
		<meta expr:content='data:blog.metaDescription' name='description' />
	</b:if>

	<!-- La imagen del post -->
	<b:if cond='data:blog.postImageThumbnailUrl'>
		<link rel='image_src' expr:href='data:blog.postImageThumbnailUrl' />
	</b:if>


	<!-- Link rel=me si existe -->
	<b:if cond='data:blog.meTag'>
		<data:blog.meTag />
	</b:if>

	<!-- Links del feed -->
	<b:if cond='data:blog.feedLinks'>
		<data:blog.feedLinks />
	</b:if>

	<!-- Compatibilidad con HTML5 sí, pero no para IE9, que es un buen navegador -->
	<!--[if lt IE 9]>
		<script src='http://html5shiv.googlecode.com/svn/trunk/html5.js'></script>
	<![endif]-->

HTML:

</head>

Eso es todo...

Actualizo:

Pido una disculpa a [MENTION=28190]ecoal95[/MENTION], los créditos son para el.
Fuente: Reemplazar el includable all-head-content en blogger | Emilio Cobos-CMC

gracias por este aporte amigo
tengo una duda es que me puse a mirar por hay el código fuente de algunas paginas bien posicionadas y descubrí que en mas de 20 paginas bien posicionadas echas con blogger, encontré que todas tenían este script en el <head>

HTML:

<script type="text/javascript">(function() { var b=window,e="jstiming",g="tick";(function(){function d(a){this.t={};this.tick=function(a,d,c){c=void 0!=c?c:(new Date).getTime();this.t[a]=[c,d]};this[g]("start",null,a)}var a=new d;b.jstiming={Timer:d,load:a};if(b.performance&&b.performance.timing){var a=b.performance.timing,c=b[e].load,f=a.navigationStart,a=a.responseStart;0<f&&a>=f&&(c[g]("_wtsrt",void 0,f),c[g]("wtsrt_","_wtsrt",a),c[g]("tbsd_","wtsrt_"))}try{a=null,b.chrome&&b.chrome.csi&&(a=Math.floor(b.chrome.csi().pageT),c&&0<f&&(c[g]("_tbnd",void 0,b.chrome.csi().startE),
c[g]("tbnd_","_tbnd",f))),null==a&&b.gtbExternal&&(a=b.gtbExternal.pageT()),null==a&&b.external&&(a=b.external.pageT,c&&0<f&&(c[g]("_tbnd",void 0,b.external.startE),c[g]("tbnd_","_tbnd",f))),a&&(b[e].pt=a)}catch(l){}})();b.tickAboveFold=function(d){var a=0;if(d.offsetParent){do a+=d.offsetTop;while(d=d.offsetParent)}d=a;750>=d&&b[e].load[g]("aft")};var h=!1;function k(){h||(h=!0,b[e].load[g]("firstScrollTime"))}b.addEventListener?b.addEventListener("scroll",k,!1):b.attachEvent("onscroll",k);
 })();</script>

me pregunta si de casualidad tu sabrás su utilidad

nanita1980 · 7 May 2013

Muy bueno gracias, lo aplicaré

javier29pe · 9 May 2013

Gracias, pero como subimos el Bingsiteauth.xml a blogger ? (que yo sepa no se puede), por favor cita mi nombre para que me salte el aviso.

ecoal95 dijo:
Sí, siempre que uses la opción de descripción aquí: Descripción de búsqueda - Ayuda de Blogger

Sobre el código Bing, por si a alguien se le sigue preguntando, hay más info aquí: How to Verify Ownership of Your Site - Bing Webmaster Tools
PD: Siento la tardanza, pero no seguía el hilo, y ha coincidido que me pasaba por aquí

Wizard · 9 May 2013

xaiborweb dijo:

gracias por este aporte amigo
tengo una duda es que me puse a mirar por hay el código fuente de algunas paginas bien posicionadas y descubrí que en mas de 20 paginas bien posicionadas echas con blogger, encontré que todas tenían este script en el <head>

HTML:

<script type="text/javascript">(function() { var b=window,e="jstiming",g="tick";(function(){function d(a){this.t={};this.tick=function(a,d,c){c=void 0!=c?c:(new Date).getTime();this.t[a]=[c,d]};this[g]("start",null,a)}var a=new d;b.jstiming={Timer:d,load:a};if(b.performance&&b.performance.timing){var a=b.performance.timing,c=b[e].load,f=a.navigationStart,a=a.responseStart;0<f&&a>=f&&(c[g]("_wtsrt",void 0,f),c[g]("wtsrt_","_wtsrt",a),c[g]("tbsd_","wtsrt_"))}try{a=null,b.chrome&&b.chrome.csi&&(a=Math.floor(b.chrome.csi().pageT),c&&0<f&&(c[g]("_tbnd",void 0,b.chrome.csi().startE),
c[g]("tbnd_","_tbnd",f))),null==a&&b.gtbExternal&&(a=b.gtbExternal.pageT()),null==a&&b.external&&(a=b.external.pageT,c&&0<f&&(c[g]("_tbnd",void 0,b.external.startE),c[g]("tbnd_","_tbnd",f))),a&&(b[e].pt=a)}catch(l){}})();b.tickAboveFold=function(d){var a=0;if(d.offsetParent){do a+=d.offsetTop;while(d=d.offsetParent)}d=a;750>=d&&b[e].load[g]("aft")};var h=!1;function k(){h||(h=!0,b[e].load[g]("firstScrollTime"))}b.addEventListener?b.addEventListener("scroll",k,!1):b.attachEvent("onscroll",k);
 })();</script>

me pregunta si de casualidad tu sabrás su utilidad

Yo lo coloque en un blog, veamos si hace algo :S

xaiborweb · 9 May 2013

Pedro Fumero dijo:
Yo lo coloque en un blog, veamos si hace algo :S

que arriesgado eres yo no lo puse por que no se para que sirve jajaja solo se que casi todos lo tienen pero por que ? no lo se

Wizard · 9 May 2013

xaiborweb dijo:
que arriesgado eres yo no lo puse por que no se para que sirve jajaja solo se que casi todos lo tienen pero por que ? no lo se

Puede que [MENTION=28190]ecoal95[/MENTION] sepa para que es el ese código

ecoal95 · 9 May 2013

xaiborweb dijo:

gracias por este aporte amigo
tengo una duda es que me puse a mirar por hay el código fuente de algunas paginas bien posicionadas y descubrí que en mas de 20 paginas bien posicionadas echas con blogger, encontré que todas tenían este script en el <head>

HTML:

<script type="text/javascript">(function() { var b=window,e="jstiming",g="tick";(function(){function d(a){this.t={};this.tick=function(a,d,c){c=void 0!=c?c:(new Date).getTime();this.t[a]=[c,d]};this[g]("start",null,a)}var a=new d;b.jstiming={Timer:d,load:a};if(b.performance&&b.performance.timing){var a=b.performance.timing,c=b[e].load,f=a.navigationStart,a=a.responseStart;0<f&&a>=f&&(c[g]("_wtsrt",void 0,f),c[g]("wtsrt_","_wtsrt",a),c[g]("tbsd_","wtsrt_"))}try{a=null,b.chrome&&b.chrome.csi&&(a=Math.floor(b.chrome.csi().pageT),c&&0<f&&(c[g]("_tbnd",void 0,b.chrome.csi().startE),
c[g]("tbnd_","_tbnd",f))),null==a&&b.gtbExternal&&(a=b.gtbExternal.pageT()),null==a&&b.external&&(a=b.external.pageT,c&&0<f&&(c[g]("_tbnd",void 0,b.external.startE),c[g]("tbnd_","_tbnd",f))),a&&(b[e].pt=a)}catch(l){}})();b.tickAboveFold=function(d){var a=0;if(d.offsetParent){do a+=d.offsetTop;while(d=d.offsetParent)}d=a;750>=d&&b[e].load[g]("aft")};var h=!1;function k(){h||(h=!0,b[e].load[g]("firstScrollTime"))}b.addEventListener?b.addEventListener("scroll",k,!1):b.attachEvent("onscroll",k);
 })();</script>

me pregunta si de casualidad tu sabrás su utilidad

Sí lo sé, y no tiene nada que ver

Ese código es sólo un temporizador que usa blogger sobre los tiempos de carga y los scrolls del usuario.

Viene incluído por defecto (creo recordar que en all-head-content). No molesta, pero si quieres sobreoptimizar la página puedes reemplazar ese includable (siento la autopubli, pero creo que es de ayuda xD).

---------- Post agregado el 09-may-2013 hora: 22:24 ----------

javier29pe dijo:
Gracias, pero como subimos el Bingsiteauth.xml a blogger ? (que yo sepa no se puede), por favor cita mi nombre para que me salte el aviso.

No se puede: tienes que usar la segunda opción (la etiqueta meta). Ellos te dan un código tal que así:

HTML:

<meta name="msvalidate.0.1" content="CÓDIGO"/>

ese CÓDIGO es el que tienes que reemplazar por el [CODIGO] de la entrada

mamu · 15 May 2013

Si copias de una plantilla, como es mi caso, hace falta hacer todo este tutorial?

Till · 3 Jun 2013

No sabia que se podia hacer eso en blogger, me servira de mucho, Gracias:ghost:

Ani2Mayo · 7 Jun 2013

Tomo nota

jhons · 9 Jun 2013

Ya hice casi todos, solo el primero y el del código de Bing (que este lo hago más tarde) no, solo me queda un par de dudas, lo del favicon, como o donde es (que no le pillo) que hay que poner la URL o el favicon personalizado?
En los demás códigos expuestos aquí, ay campos que uno mismo tiene que llenar, aparte del campo de las keywords y demás ¿?

[MENTION=28190]ecoal95[/MENTION] no se si podrás ayudarme compañero!!! :encouragement:

ecoal95 · 9 Jun 2013

jhons dijo:
Ya hice casi todos, solo el primero y el del código de Bing (que este lo hago más tarde) no, solo me queda un par de dudas, lo del favicon, como o donde es (que no le pillo) que hay que poner la URL o el favicon personalizado?
En los demás códigos expuestos aquí, ay campos que uno mismo tiene que llenar, aparte del campo de las keywords y demás ¿?

[MENTION=28190]ecoal95[/MENTION] no se si podrás ayudarme compañero!!! :encouragement:

Lo del favicon no tienes que cambiarlo, es el que pone blogger, o el que pongas tú desde tu escritorio en la pestaña de Diseño.

Creo que no que dan más campos por rellenar xD De hecho las keywords están ahí casi de adorno, ya que ahora ya no tienen valor para los buscadores.

jhons · 10 Jun 2013

ecoal95 dijo:
Lo del favicon no tienes que cambiarlo, es el que pone blogger, o el que pongas tú desde tu escritorio en la pestaña de Diseño.

Creo que no que dan más campos por rellenar xD De hecho las keywords están ahí casi de adorno, ya que ahora ya no tienen valor para los buscadores.

Gracias por tu resp colega! Y con lo de las Kws, pues si, ya eso casi no tiene peso, pero igual las pongo, aunque sea que tengan beneficios del 0.00001 punto al seo xD :encouragement:

alejorubio07 · 2013-08-11T14:34:13-0500

buen tutorial amigo