Brasil SEO - Otimização de Sites (SEO) | Marketing de Busca (SEM)
Buscar no Brasil SEO:
spacer Brasil SEO » Código Fonte e SEO » Estruturando o Código Fonte para SEO – Parte 2 spacer

Estruturando o Código Fonte para SEO – Parte 2

Autor Postado por Renato Lam Yee na categoria Código Fonte e SEO
Comentários [12] Comentarios

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.

Artigos Relacionados

12 Respostas to “Estruturando o Código Fonte para SEO – Parte 2”

  1. Leopoldo Moreira Diz:

    Cara muito bom, vou já ver a primeira parte… parabéns

  2. CSS e SEO: O Segredo para o Sucesso Diz:

    [...] o uso de tabelas, prefira usar tableless por facilitar a formatação e reduzir bastante o código [...]

  3. Usabilidade e SEO: Conheça Seus Pontos em Comum Diz:

    [...] claro, e fácil de se achar pontos relevantes no site. – Siga padrões tanto no design quanto no código do site. Faça um código limpo, com definições claras de classes e id’s, isso é muito [...]

  4. Dicas para Webmasters: Crie um Site Acessível ao Google - Brasil SEO | Brasil SEO Diz:

    [...] site, a dica é voltar atrás e analisar como você esta atingindo o efeito desejado. Por exemplo, o uso de tabelas em seu código HTML, profundamente aninhadas, dificulta a ligação conjunta das partes relacionadas do texto em uma [...]

  5. Dicas de SEO e Acessibilidade - Brasil SEO | Brasil SEO Diz:

    [...] site, a dica é voltar atrás e analisar como você esta atingindo o efeito desejado. Por exemplo, o uso de tabelas em seu código HTML, profundamente aninhadas, dificulta a ligação conjunta das partes relacionadas do texto em uma [...]

  6. Bernardo Torres Diz:

    E como faz pra quando o menu é vertical?
    Por exemplo, no meu site de software sob medida: http://www.torresautomacao.com.br/ eu queria colocar primeiro o conteúdo, depois o menu.

  7. Renato Lam Yee Diz:

    Neste caso não é possível usar essa dica de posicionamento com o menu. O que se pode fazer é otimizar o código para melhor leitura dos buscadores.

  8. Robson Ribeiro Diz:

    Cara, muito bom esse site com dicas que ajudam qualquer pessoa que deseje saber mais sobre programação web, estou fazendo um curso e estava precisando saber uma vantagem em utilizar tabelas, aqui encontrei a resposta!

    Mas ultimamente estou interessado em não utilizar tabelas como recomenda o W3C, tenho certeza que encontrarei ótimas dicas nesse site!

    Só pra informação, moro em Portugal e farei referencia do seu site por aqui! acho que isso ajudará no seu pagerank.

    Abraço e até a próxima!

  9. Design para SEO: CSS ou Tabelas | Brasil SEO Diz:

    [...] bem modular enquanto tabelas meio que tem, sabe, uma conotação web 1.0 ligadas a elas. Mas, se você tem o melhor site, nós [...]

  10. Niury Martins Diz:

    O uso de Tableless realmente é muito interessante e tráz grandes benefícios, conforme citado no artigo acima. Mas ainda existe um problema.

    Quando se fala de CSS, falamos também da incompatibilidade dos browsers com o mesmo.

    Acontece muito de desenvolvermos um estilo que fica legal no FF e no IE não. Isso é somente um exemplo, pois vale lembrar que o FF tem várias versões, assim como o IE, Opera, Safari, etc… . E cada versão trata algo no CSS diferente do outro.

    Dependendo da necessidade, acabamos usando muito tempo com testes para que nosso estilo não seja afetado por essas incompatibilidades.

    Com o passar do tempo a tendência é a de cair em desuso total os browsers que não suportam ou mesmo suportam parcialmente CSS. Soma-se a favor das CSS a normatização que o W3C, mas enquanto isso não acontece, paciência…

  11. King_Unnamed Diz:

    Como já foi dito, existem casos em que se deve usar Tables e outros em que deverá ser usado o tableless…

    O que define isso é em que vc vai aplicar.

    Ao meu ver, com o tableless vc se prende mais a algo “externo” como o CSS e aí entram as incompatibilidade ou melhor, a falta de padronização do tratamento de dados entre browses e HTML.

  12. Cassiano Travareli Diz:

    Olá Kink_Unnamed,

    Isso é uma questão de opção, porem minha opinião é de se utilizar tableless sempre que possível, reduzindo a quantidade de código, o que fará abrir mais rápido nos navegadores, e inclusive o tempo de abertura de uma página tende a ser um fator importante para rankeamento.

    Grande Abraço

Deixe uma Resposta

XHTML: Você pode usar essas tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Seu comentário será avaliado pelo moderador antes de ser aprovado.


Dúvidas de SEO
Siga o Brasil SEO no Twitter!