Estruturando o Código Fonte para SEO – Parte 2

Olá galera do BrasilSEO.com.br. Voltando a falar do meu último post “Estruturando Código Fonte para SEO” irei dar dicas e truques de como estruturar seu site.

Vamos aprender a usar Tabelas e Tableless voltado para SEO. A seguir dois exemplos de como usar essas tais estruturas:
Tabela:

<table>
<tr>
<td colspan=”2″>Cabeçalho</td>
</tr>
<tr>
<td>Menu</td>
<td>Conteúdo</td>
</tr>
<tr>
<td colspan=”2″>Rodapé</td>
</tr>
</table>

Tableless e CSS:
<div class=”cabecalho”>Cabeçalho</div>
<div class=”menu”>Menu</div>
<div class=”conteudo”>Conteúdo</div>
<div class=”rodape”>Rodapé</div>

<style>
.cabecalho { width:760px; height:100px; background-color:#003399;}
.menu { width:200px; height:300px; background-color:#00FF00; float:left;}
.conteudo { width:560px; height:300px; background-color:#FF0033; float:left;}
.rodape { clear:both; width:760px; height:30px; background-color:#660066;}
</style>

Truques para se trabalhar com SEO

Veja as figuras abaixo:

Observa-se que o site da esquerda está divido em uma tabela com 3 partes. Da maneira como está estruturado, a coluna de navegação da esquerda aparece no código antes do conteúdo principal da página. Isto faz com que o crawler possa dar uma relevância inadequada para as partes do website. Já que o conteúdo relevante está no centro, deve-se criar uma maneira para que o crawler leia o conteúdo do website antes do menu de navegação.

O site da direita apresenta uma forma mais adequada de se estruturar um website. Essa estrutura consiste em criar um novo caminho para o crawler, que o levará a realizar a leitura do conteúdo antes de ler o menu de navegação do website. Para isso, deve-se criar uma coluna “falsa” dentro de uma tabela, essa coluna deve ser utilizada apenas para que na coluna logo a direita seja lida em seguida a esta, assim o crawler lê primeiramente o cabeçalho nº1, depois lê a coluna falsa nº2, vai para o conteúdo nº 3, e só depois ele parte para a leitura do nº4, que seria o menu de navegação. Existem varias estratégias para se obter esse resultado, tudo depende da maneira como o código do website está estruturado. Uma ótima forma é utilizar CSS (Cascading Style Sheets) na estrutura do site.

Agora com o uso de Tableless é facil fazer essa manipulação. Vamos usar o exemplo do começo do post com uma pequena modificação:

<div class=”page”>

<div class=”cabecalho”>Cabeçalho</div>
<div class=”menu”>Menu</div>
<div class=”conteudo”>Conteúdo</div>
<div class=”rodape”>Rodapé</div>
</div>

<style>
.page { width:760px;}
.cabecalho { width:760px; height:100px; background-color:#003399;}
.menu { width:200px; height:300px; background-color:#00FF00; float:left;}
.conteudo { width:560px; height:300px; background-color:#FF0033; float:left;}
.rodape { clear:both; width:760px; height:30px; background-color:#660066;}
</style>

Para alterar a posição de leitura do menu e do conteúdo basta mudar o CSS e a posição de uma <div>:

<div class=”page”>

<div class=”cabecalho”>Cabeçalho</div>
<div class=”conteudo”>Conteúdo</div>
<div class=”menu”>Menu</div>
<div class=”rodape”>Rodapé</div>
</div>

<style>
.page { width:760px;}
.cabecalho { width:760px; height:100px; background-color:#003399;}
.menu { width:200px; height:300px; background-color:#00FF00; float:left;}
.conteudo { width:560px; height:300px; background-color:#FF0033; float:right;}
.rodape { clear:both; width:760px; height:30px; background-color:#660066;}
</style>

Isso é muito mais fácil de se fazer do que com tabela.

Vantagens e Devantagens de Tabelas e Tableless

Tabela:

• É recomendado quando se usa para fazer formulário, pois facilita no alinhamento de seu objetos. Mas nada impede o uso de Tableless para esse fim.
• O número linhas de código se torna grande quando a página é grande
• Se o usuário não tiver experiência em HTML, o código se torna bagunçado e difícil de se entender
• A manutenção ou mudança de layout se torna é difícil ou, às vezes, impossível de se fazer.

Tableless:

• Facilidade de se trabalhar com o layout da página
• Redução do número de linhas de código em relação ao uso de tabela
• Facilidade na formatação de suas tags
• Facilidade na hora de dar manutenção e alterar o layout da página
• A única desvantagens que vejo em usar Tableless é que o usuário deve saber pelo menos um básico de CSS (Cascading Style Sheets), mas para quem trabalha ou gostaria de trabalhar com websites esse conhecimento em CSS é fundamental

É isso galera do BrasilSEO.com.br! Comentem, mandem dúvidas ou critiquem se quiserem. Até a próxima com mais informações.