Tutorial: Configure corretamente o <head> para melhorar o SEO no Blogger

tested cars disse:

Solucionado o problema do código bing

---------- Post adicionado 03-mar-2013 às 22:52 ----------



Com este tutorial já se resolve o problema que resolvem neste outro tutorial???? http://forobeta.com/tutoriales-de-blogger/10105-meta-descripciones-blogger.html

Clique para expandir...

ecoal95 disse:

Sim, desde que você use a opção de descrição aqui: Descrição de pesquisa - Ajuda do Blogger

Sobre o código Bing, caso alguém ainda esteja perguntando, tem mais informações aqui: How to Verify Ownership of Your Site - Bing Webmaster Tools
PS: Sinto pela demora, mas eu não estava acompanhando o tópico, e coincidiu de eu passar por aqui 🙂

Clique para expandir...

ecoal95 disse:

Sim, desde que você use a opção de descrição aqui: Descrição de pesquisa - Ajuda do Blogger

Sobre o código Bing, caso alguém ainda esteja perguntando, tem mais informações aqui: How to Verify Ownership of Your Site - Bing Webmaster Tools
PS: Sinto pela demora, mas eu não estava acompanhando o tópico, e coincidiu de eu passar por aqui 🙂

Clique para expandir...

mateopereira disse:

Como se sabe o SEO é algo muito importante para posicionar seu blog nos buscadores.

E uma das primeiras coisas para poder começar bem desde o início com seu blog é configurar corretamente o <head>.

Aqui deixo passo a passo o que seu blog deve conter:

*Tudo o que estiver entre código HTML é o que deve ser colocado.

HTML:

<head>

Dentro do head adicionaremos o seguinte:

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>

Isso é importante se você ainda não tem um domínio, se já tem não é necessário colocar, pois sua função é evitar o redirecionamento por países (.ar, .co, etc.) deixando-o em .com.

O seguinte são comentários condicionais IE -> Permite usar CSS condicionalmente. A melhor forma de usá-los seria no <html>, mas não é possível sem transformar em 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]-->

Agora vamos fazer com que funcione corretamente em todos os navegadores:

*Importante que você altere onde diz "CÓDIGO" pelo código que o Bing lhe fornecer.

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>

Agora vêm as metas para indexar o conteúdo corretamente no 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>

Agora algumas coisas a mais para indexar todo o conteúdo e adicionar keys, que embora quase não sejam mais utilizadas, podem 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 último, os 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'/>

Já só nos falta colocar o último. A url canônica, favicon, descrição, imagem do post, feed e um script para a compatibilidade com 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>

Isso é tudo...

Atualizo:

Peço desculpas a [MENTION=28190]ecoal95[/MENTION], os créditos são para ele.
Fonte: Substituir o includable all-head-content no blogger | Emilio Cobos-CMC

Clique para expandir...

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

ecoal95 disse:

Sim, desde que você use a opção de descrição aqui: Descrição de pesquisa - Ajuda do Blogger

Sobre o código Bing, caso alguém continue perguntando, tem mais informações aqui: How to Verify Ownership of Your Site - Bing Webmaster Tools
PS: Sinto a demora, mas não estava seguindo o tópico, e coincidiu de eu passar por aqui 🙂

Clique para expandir...

xaiborweb disse:

obrigado por esta contribuição amigo
tenho uma dúvida, é que me pus a olhar por aí o código-fonte de algumas páginas bem posicionadas e descobri que em mais de 20 páginas bem posicionadas feitas com blogger, encontrei que todas tinham este script no <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 pergunto se por acaso você saberia sua utilidade

Clique para expandir...

Pedro Fumero disse:

Eu coloquei em um blog, vamos ver se faz algo :S

Clique para expandir...

xaiborweb disse:

que arriscado você é, eu não coloquei porque não sei para que serve kkkk só sei que quase todos têm, mas por que? não sei

Clique para expandir...

xaiborweb disse:

obrigado por esta contribuição amigo
tenho uma dúvida, é que me pus a olhar por aí o código-fonte de algumas páginas bem posicionadas e descobri que em mais de 20 páginas bem posicionadas feitas com blogger, encontrei que todas tinham este script no <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 pergunto se por acaso você saberia sua utilidade

Clique para expandir...

javier29pe disse:

Obrigado, mas como subimos o Bingsiteauth.xml para o blogger? (que eu saiba não é possível), por favor cite meu nome para que eu receba o aviso.

Clique para expandir...

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

jhons disse:

Já fiz quase todos, só o primeiro e o do código do Bing (que este eu faço mais tarde) não, só me resta um par de dúvidas, o do favicon, como ou onde é (que não entendi) que tem que colocar a URL ou o favicon personalizado?
Nos outros códigos expostos aqui, há campos que a gente mesmo tem que preencher, além do campo das keywords e demais ?

[MENTION=28190]ecoal95[/MENTION] não sei se você poderá me ajudar companheiro!!! :encouragement:

Clique para expandir...

ecoal95 disse:

Sobre o favicon, você não precisa alterá-lo, é o que o Blogger coloca, ou o que você coloca pelo seu painel na aba de Design.

Acho que não restam mais campos para preencher xD Na verdade, as keywords estão lá quase de enfeite, já que agora elas não têm mais valor para os buscadores.

Clique para expandir...