Código válido é benéfico para SEO

Código válido é benéfico para SEO

Depois de um vídeo do Matt Cutts explicando porque a página do Google não possui um código válido, no qual, no final ele diz que ter código válido não gera nenhum bônus para o site no rankeamento, começou um burburinho, dizendo que era uma grande besteira validar código e que isso é desnecessário. Infelizmente, as palavras do Matt Cutts foram interpretadas ao pé da letra e isso causou uma péssima interpretação dos fatos.

Não estou dizendo que ele está mentindo, o que ele falou no vídeo, acredito que seja 100% verdadeiro, mas em momento nenhum ele falou que não há vantagem em ter um código válido. O que ele disse é que não existe nenhuma função no algoritmo parecido com isso:

CODE:
se (pagina_valida()) {
$pagina->boost += 50;
}

Ou seja, não tem nenhuma função que veja se o site tem html válido e se tiver dá algum bônus para a página, fazendo com que ele apareça com uma posição melhor. Porém é fácil demonstrar que um código válido e, principalmente, semântico acabará melhor indexado do que outro documento que tenha um péssimo código e mantenha todas as demais variáveis similares.

Documento com código inválido não semântico

Trechos de código HTML como o abaixo ainda são muito encontrados em páginas, hoje em dia, para quem começou a desenvolver para web agora, isso é um exemplo de como as páginas eram escritas antigamente. Esse código exibe 3 parágrafos e um menu com 5 itens, com a formatação toda misturada aos dados, sem qualquer indicação do que é o que e, com tags fechadas fora de ordem ou nem fechadas:

HTML:
<center>
<table cellspacing="0" cellpadding="0" width="550" border="0">
<tbody>
<tr>
<td valign="top" align="left" width="124"></td>
<td width="10"></td>
<td valign="top" align="left" width="440" rowspan="2">
<p><font size="2" face="Verdana">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</font>
<p>Fusce rhoncus lectus ut neque <b>fermentum id scelerisque velit pellentesque.
<p>Nulla ultrices gravida <i><font color="#eeff00">eleifend<i></font>.
</td>
</tr>
<tr>
<td valign="top" align="left" width="124" bgcolor="#FFFFFF">
<table cellspacing="0" cellpadding="0" width="124" border="1">
<tbody>
<tr>
<td bgcolor="#ffffcc" valign="top">
<center><h3>Menu</h3></center>
<p align="center"><a href="http://www.example.com/">Home</a></p>
<p align="center"><a href="http://www.example.com/">Link 1</a></p>
<p align="center"><a href="http://www.example.com/">Link 2</a></p>
<p align="center"><a href="http://www.example.com/">Link 3</a></p>
<p align="center"><small><i><a href="http://www.example.com/">Link 4</i></small></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>

Documento com código válido e semântico

O mesmo resultado pode ser conseguido com o código abaixo e a adição de um CSS que orientaria a diagramação da respostas. Para os puritanos do HTML válido e semântico, o código está errado, porém, ele atende a todas as necessidades, pois há uma clara indicação do que é o que, o código é mais limpo e segue um padrão correto de abertura e fechamento de tags. O markup extra, que faria os advogados do XHTML strict torcerem o nariz é benéfico.

HTML:
<div id="content">
<p class="primeiro">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Fusce rhoncus lectus ut neque <strong>fermentum id scelerisque velit pellentesque.</strong></p>
<p>Nulla ultrices gravida <em>eleifend</em>.</p>
</div>
<div id="sidebar">
<h3>Menu</h3>
<ul id="menu">
<li><a href="http://www.example.com/">Home</a></li>
<li><a href="http://www.example.com/">Link 1</a></li>
<li><a href="http://www.example.com/">Link 2</a></li>
<li><a href="http://www.example.com/">Link 3</a></li>
<li class="last"><a href="http://www.example.com/">Link 4</a></li>
<li>
</ul>
</div>

Por que, então, é melhor ter a página válida e semântica para SEO?

Quem já trabalhou com programação, principalmente, interpretando textos, nota que é muito mais fácil entender o que cada parte do segundo código quer dizer do que o primeiro e é ai que está a grande vantagem do código válido e semântico. Na hora de interpretar o código para tentar dizer sobre o que é a página, o algoritmo (que nada mais é do que um interpretador de texto, com mais um monte de funções) vai saber, claramente, o que é conteúdo, o que é um parágrafo, o que está destacado e o que é um menu.

Já no primeiro código o algoritmo tem quase que adivinhar o que é cada coisa e se não adivinhar corretamente, algo que poderia ser uma grande vantagem para sua página pode acabar passando como mais um texto qualquer no meio do resto do texto na página.

Com a disputa cada vez mais acirrada pelos primeiros lugares no Google, Yahoo ou Bing, qualquer pequena vantagem pode valer muito a pena. Tirando casos que a mudança implica em mais custos que a melhoria no posicionamento da página traria de retorno, eu diria que essa alteração é fundamental.

Meu código precisa ser 100% válido e semântico

Reposta simples, não. Como viram, no código acima, eu optei por colocar marcação extra para ajudar a definir o que cada parte do código representa, mesmo que desse para ter o mesmo resultado sem essa marcação extra. Além disso, várias coisas que são necessárias para que a página funcione a contento não deixarão que a mesma valide, como javascripts de afiliados e métricas, porém isso não é suficiente para prejudicar o entendimento da página, até porque, na maioria das vezes, esses itens são ignorados pelos mecanismos de busca.

A preocupação maior deve ser com a semântica, principalmente, a indicação do que cada elemento da página é, por exemplo:

  • Títulos devem usar as tags H, de acordo com seu nível.
  • Listas devem usar ul, ol ou dl.
  • Parágrafos devem usar p.
  • O nome das classes e ids devem indicar o que o trecho de código é (ex.: header, sidebar, footer etc...), mesmo que isso seja contra os princípios de semântica.

E a utilização da sintaxe do XHTML, pelo simples fato que é muito mais fácil interpretar um código bem padronizado do que outro que é uma bagunça.

Como vai ficar o código pensando em SEO com o HTML5?

Por mais estranho que possa parecer a mudança do foco para HTML5 ao invés do XHTML, para um programador, que acha o XHTML mais interessante e prático, faz todo sentido a mudança. Porém, ao mesmo tempo que o HTML5 não obriga que escrevamos mais código com uma sintaxe parecida com o XML, ele não proíbe isso, ou seja, para continuar usufruindo dessa facilidade de interpretação que pode gerar uma melhoria na posição das páginas, basta continuar obedecendo os princípios básicos do XML, como:

  • Aninhamento correto de elementos
  • Colocação de parâmetros e valores da forma correta
  • Estruturação dos elementos em nodos
  • Fechamento de todos os elementos abertos

Seguindo a especificação do HTML5, mas mantendo a sintaxe "puxada" para o XML, teremos o melhor dos dois mundos, pois o HTML5 é, naturalmente, mais semântico que o XHTML, além de introduzir elementos que nos permite definir as várias partes do documento de uma forma muito boa.

Compartilhe e Guarde:
  • StumbleUpon
  • Enviar para o Ueba
  • Rec6
  • Enviar para o LinkK
  • Enviar para o DiHitt
  • Enviar para o LinkLoko
  • Enviar para o WebSapiens
  • Enviar para o LinkTo
  • Technorati
  • Enviar para o Imera
  • Faves
  • Google Bookmarks
  • MySpace
  • del.icio.us
  • Facebook
tabs-top

14 Comentários para “Código válido é benéfico para SEO”

  1. [...] This post was mentioned on Twitter by Pinceladas da Web, Neto Basilio and Vitor Ruiz Leonel, Allegro Propaganda. Allegro Propaganda said: Código válido é benéfico para SEO: http://migre.me/9DPR – via @pinceladasdaweb [...]

  2. Twitter Comment


    RT: @pinceladasdaweb: Código válido é benéfico para SEO: [link to post] #seo #html5

    Posted using Chat Catcher

  3. Twitter Comment


    Muito bom essa matéria! Leiam! // RT: @pinceladasdaweb: Código válido é benéfico para SEO: [link to post] #seo #html5

    Posted using Chat Catcher

  4. Twitter Comment


    RT @allegrototal: Código válido é benéfico para SEO: [link to post] – via @pinceladasdaweb

    Posted using Chat Catcher

  5. Twitter Comment


    Código válido é benéfico para SEO: [link to post] – via @pinceladasdaweb

    Posted using Chat Catcher

  6. Twitter Comment


    Código válido é benéfico para SEO: [link to post] #seo #html5

    Posted using Chat Catcher

  7. Twitter Comment


    RT @tweetmeme Código válido é benéfico para SEO | BrPoint [link to post]

    Posted using Chat Catcher

  8. Rodolfo disse:

    Hoje, código válido não interfere nas posições dos resultados dos mecanismos de busca. No futuro, talvez.

  9. Twitter Comment


    RT @brunoalves: RT @tweetmeme Código válido é benéfico para SEO | BrPoint [link to post] – leitura recomendável!

    Posted using Chat Catcher

  10. [...] Bruno Alves do brpoint.net fala sobre como o código válido é benéfico ou não para uma boa optimização para os motores de [...]

  11. Twitter Comment


    mais um artigo “na mosca” do @brunoalves: Código válido é benéfico para SEO [link to post]

    Posted using Chat Catcher

  12. Twitter Comment


    Concordo! E os tabeleiros sempre falando que tanto faz… RT @brunoalves Código válido é benéfico para SEO | BrPoint [link to post]

    Posted using Chat Catcher

  13. Tigre de Fogo disse:

    Um código válido é importante frente a operação de rastreamento dos robôs e agiliza a indexação. Se o Google alterar o algoritmo e incluir a validação do código em seu sistema, haverá uma “dança” daquelas.

Comente

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