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

  • Autor Autor mateopereira
  • Fecha de inicio Fecha de inicio
M

mateopereira

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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'>
		//<![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>
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
 
Última edición:
Aprobado y agregado al listado de tutoriales.
 
Disculpa una pregunta, todo esto lo reemplazamos por el head que hay en nuestra plantilla?
 
Buen aporte, gracias! :encouragement:
 
Señor tutorial, gracias por compartirlo.
 
Buen aporte haber si lo aplico en uno de los blogspot de mi hermana 🙂
Gracias por el aporte!
 
Muy interesante, aun tengo algunos proyectos en Blogger en los que me ayudará mucho :encouragement:
 
Muchas gracias por el tutorial, lo aplicaré a uno de mis blogs en blogger.
 
Gracias por el tutorial, habrá que utilizarlo. :encouragement:
 
Como se sabe el SEO es algo muy importante para posicionar tu blog en buscadores ...

Como bien ha dicho [MENTION=23219]Camilo Garcia[/MENTION] vendría bien que dejaras al menos un link al artículo original. A mi no me molesta que se compartan los tutoriales que publico (cuanto a más personas llegue, mejor), pero el reconocimiento es obligatorio, aunque sólo sea mediante un link al artículo original.
 
Como bien ha dicho [MENTION=23219]Camilo Garcia[/MENTION] vendría bien que dejaras al menos un link al artículo original. A mi no me molesta que se compartan los tutoriales que publico (cuanto a más personas llegue, mejor), pero el reconocimiento es obligatorio, aunque sólo sea mediante un link al artículo original.

No dije en ninguna parte que el tuto fuera de mi autoria. Disculpa encerio. Mi error fue ese, no poner la fuente.

Cuando este en la PC edito. De nuevo pido una disculpa.
 
Gracias por el tutorial 🙂
 
Segui tus pasos amigo, espero que me sirva de ayuda gracias por tu post
 
Donde consigo mi codigo Bing? :fatigue:
 
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

Donde puedo obtener el codigo bing?
 
Hay que remplazarlo por algo o se incluye a mayores??
 
Solucionado lo del codigo bing

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

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

¿¿¿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
 
Me da flojera hacerlo. :topsy_turvy: Pero me pondre en campaña para ver si logro algunos resultados positivos, gracias y salu2
:encouragement::encouragement:
 
Atrás
Arriba