Olá pessoal.
Hoje irei falar sobre um assunto que muito já tem ouvido falar e tentar associar ao nosso escopo:Tableless e SEO.
Antes de mais nada, Tableless não é tecnologia nova nem linguagem de programação. É um modo de desenvolver a sua página, de forma a usar as tags de acordo com a finalidade de cada uma. Por exemplo: muitos desenvolvedores usam a tag <table> para montar o “esqueleto” da página. Na verdade, essa tag deve ser usada somente quando for listar uma tabela (daí o nome tableless). Exemplo:
<table>
<tr><td>Cabeçalho</td><tr>
<tr><td>Menu</td><tr>
<tr>
<td>Conteúdo</td>
<tr>
<tr><td>Rodapé</td><tr>
</table>
Quem nunca começou fazendo site assim que atire o seu mouse no chão. Sim, já fomos pecadores um dia. :p. Mas por que isto é errado? Simples: a estrutura do seu site não é uma tabela com uma lista de itens. Logo, o tableless é um passo à frente na questão de desenvolvimento web.
Técnica de SEO: Os crawlers dao importância à web semântica da sua página. Isso quer dizer que é melhor para o crawler ver uma tag e no seu interior, um conteúdo associado à tag. Exemplos:
Suponha que voce quer listar alguns produtos:
<h2>Marcas de guitarra disponíveis</h2>
<ul>
<li>Fender</li>
<li>Gibson</li>
<li>Ibanez</li>
</ul>
contém muito mais relevância semântica do que
<b>Marcas de guitarra disponíveis</b><br />
Fender<br />
Gibson<br />
Ibanez<br />
Outro exemplo, sobre envio de forms:
<form>
blablabla
<input type=”submit” />
</form>
é melhor do que
<form>
blablabla
<img onclick=”enviar_formulario();” />
</form>
Você deve estar pensando: “Mas que frescura! Por que tudo isso?”. Imagine que você está colocando dados numa carta para entrega e coloca assim:
Heron Inouye R.fim do mundo, 001 judas perdeu as botas
São Paulo SP 03131-031
O nosso amigo carteiro vai conseguir entender, mas você estará dificultando o trabalho dele, pois você pos dados em lugares que não deveriam ser postos. Além disso, pode haver problemas de ambiguidade. Se você fizer assim fica melhor:
Heron Inouye
R.fim do mundo, 001
Judas perdeu as botas
São Paulo SP
03131-031
Então, faça um documento certo, com tags certas, e quando ficar feio, use sabiamente o CSS.
Abração pra quem fica!!
Divulgue este artigo!
Heron Inouye
25 de setembro de 2007 às 8:37 am
Bom post. Uma outra dica é que formularios com onclick são ruins pra acessibilidade
O tema “semântica” é de fato um dos mais produtivos pra web. Uma página semântica otimiza nas buscas, é boa pra acessibilidade, é mais leve, necessita de menos tempo de produção/reconstrução
enfim, uma das melhores coisas que podemos pensar na hora de produzir é nisso
[Responder]
25 de setembro de 2007 às 10:34 am
Valew Rochester.
Acho que isso ajuda principalmente o programador.
Honestamente, me da agonia ver aquelas 9348098534 tags table tr td e vc nao tem ideia direito da estrutura.
[Responder]
01 de outubro de 2007 às 3:36 pm
realmente, sem um papel na mão é impossivel saber onde começa e onde termina as coisas em um site desses… só o tempo que se perde entendendo ele..
fora quando há alguma tag sem fechar.. o rolo que dá.. compensa muito mais estudar u pouco e fazer algo mais “limpo”
[Responder]
01 de outubro de 2007 às 11:04 pm
esta e uma ds melhores materias de seo deste site.
[Responder]
25 de fevereiro de 2008 às 3:57 pm
Seus comentários não têm nada de semânticos.
Cada um deles tem 4 DIVs e 2 SPANs aninhados. O correto seria você usar listas.
Quando você deixa de usar tabelas e passa a usar DIVs no local, várias delas, milhares, seu tabless não serviu de nada.
Seu botão de envio do formulário também não está nada semântico. Tudo bem que é um input type=”image”, mas o correto seria usar um input type=”submit” e fazer como você disse: “usar sabiamente o CSS”
Concorda?
[Responder]
18 de março de 2008 às 12:29 pm
Ola Cláudio.
Concordo com a sua primeira e ultima opiniões. Mas com relação à isso, são coisas do wordpress. Não disponho de tempo sequer pra postar e responder aqui direito, imagina de ficar fuçando o código daqui.
Quanto ao esquema de tags divs e tables, se você identar o código, vai notar que o número de tags é menor para as divs, além do que diminui a legibilidade e escalabilidade do código.
abraços
[Responder]
03 de agosto de 2008 às 12:31 pm
[...] Tableless, Web Semântica e SEO: Uso Correto das tags HTML | Mestre SEO (tags: tableless acessibilidade) [...]
08 de setembro de 2008 às 4:51 pm
Olá, amigo !! tenho uma duvida bem simples ! se caso eu precise por uma quebra de linha na formatação de um texto !! deixa uma frase em 2 linhas é correto eu usar um para resolver o meu problema ou devo de fato fazer isso com uma formatação de class ?? colocando um blok ou um padding ?
[Responder]
05 de abril de 2009 às 2:39 pm
Não gosto de usar o termo tableless. O melhor é usar Web Standards!
[Responder]
13 de maio de 2009 às 9:37 pm
O uso correto das tags html causa uma grande diferença nos resultados de pesquisa.
[Responder]
26 de maio de 2009 às 3:41 pm
é uma pena q ainda exista amadores que usem tabelas para layoutar, e pior q isso é usarem ASP com DB ACCESS p/ web … isso sim é groçeiro
[Responder]
07 de agosto de 2009 às 9:56 am
Concordo que fazer um site sem tabela é muito melhor, mas limpo e etc… Mas na pratica se o site for bem feito em tabela ele em muitas vezes é mais bem posicionado do que alguns sites em tableless.
Pesquise no google por “criação de sites” o primeiro da lista é um site todo em tabela. abaixo dele existem outros que são feitos em tableless com validação w3c… masd quem está ali em 1º ? o site de tabela…
O que vc tem a dizer sobre o que Matt Cutts disse neste video?
http://www.brasilseo.com.br/videos/matt-cutts/design-para-seo-css-ou-tabelas
[Responder]
29 de maio de 2010 às 8:30 pm
acho que isso é importantissimo.. tive um exemplo classico de um site meu que era todo em tabela alem de dificil manutenção nao indexava bem.. então resolvi fazer o site com tablesless.. em uma sema tive um otimo resultado… então isso é importantissimo pq vc facilita a vida dos robores …
[Responder]