Introdução

Pois bem, a pergunta é como é que CSS pode ajudar-nos na optimização dos nossos sites ?
Existe várias maneiras de CSS ajudar as nossas técnicas de SEO mas neste tutorial vamos usar um dos melhores troques que CSS pode-nos dar usando a propriedade position.
Neste tutorial vamos aprender em como modificar à posição dos elementos da nossa página como à header, navegação e conteúdo.

Factos

É facto que quando as spiders/robots dos search engines estão a indexar as nossas paginas não vêem da mesma maneira que os visitantes dos nossos sites vêem.
Para ter uma ideia de como os search engines vêem os nossos sites, a melhor maneira é usar Lynx um browser que apenas mostra o texto e analisa o código.
É facto que os search engines dão mais importância à todo o conteúdo que aparece primeiro e menos importância ao conteúdo que aparece no fim, mas não da maneira que os visitantes veem o site, mas sim da maneira que o Lynx ve.

O layout

Neste tutorial vamos usar um dos layouts normais que estamos habituados a ver nos websites, como podemos ver temos a nossa header a nossa navegação e por fim o nosso conteúdo.

Normalmente o código normal para um site deste layout aparece por esta ordem, especialmente quando e usado tabelas para criar o layout das nossas paginas.
Os programadores estão habituados a criar o layout com tabelas e para tal não da para por a header ou a navegação no fim do código, ou mesmo quando usam CSS costumam usar a mesma ordem.

Exemplo em código usando divs:

<div id="header">
HEADER<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque blandit ligula convallis tellus posuere dignissim. Donec mattis.
</div>

<div id="navegacao">
CONTEUDO NAVEGACAO<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque blandit ligula convallis tellus posuere dignissim. Donec mattis.
</div>

<div id="conteudo">
CONTEUDO PRINCIPAL<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque blandit ligula convallis tellus posuere dignissim. Donec mattis.
</div>

Exemplo em código usando tabelas pode ser algo deste género:

<table cellpadding="0" cellspacing="0" border="0">
<tr>
	<td>HEADER</td>
</tr>
<tr>
	<td valign="top">
	<table>
		<tr>
			<td>Link 1</td>
		</tr>
		<tr>
			<td>Link 2</td>
		</tr>
		<tr>
			<td>Link 3</td>
		</tr>
	</table>
	</td>
	<td>
		Conteudo
	</td>
</tr>
</table>

Como podemos verificar em ambas as maneiras o mais importante para os search engines o conteúdo e o ultimo a aparecer no nosso código.
Um visitante do nosso site vê da maneira que temos na primeira imagem, mas uma spider/robot de um search engine vê o nosso site como a segunda imagem.
Como e facto que os search engines dão mais valor ao que vem primeiro, neste caso a spider da mais valor ao que temos na header que normalmente não passa de uma imagem e apenas algumas palavras.
De seguida da mais uns valores (mas menos valores que deu a header) a nossa navegação que normalmente não passa apenas dos nossos links para o visitante navegar no nosso site.
E por fim da mais uns valores ao nosso conteúdo (mas ainda menos valores que deu a header e a navegação).
Pois bem assim sendo onde temos as nossas palavras-chaves e o nosso conteúdo principal para os search engines acaba por perder para a nossa header e navegação.