Uma pergunta de Funkman de um local reservado. “Muitos espaços” no código fonte HTML é ruim?. Fato, mito, ou entre os dois em algum lugar?

Nós realmente não ligamos. Nós somos bons sabe, toda vez que vemos espaços, separamos as coisas…

Nós podemos ignorar espaços, então isso não nos causa nenhum dano. A única coisa que se deve realmente prestar atenção é… eu vi algumas pessoas sorrateiras que tentaram fazer textos escondidos ou qualquer coisa do tipo e começar o html com 60 linhas em branco, certo.

Então quando você ver o código, você fica assim: “Cara, está vazio, não tem código fonte!”, “Ow, cara, você arrebentou a minha mente!”

E qualquer pessoa esperta vai pensar: “Ou eu posso usar a barra de rolagem, e ver o que está aqui em baixo”. Então, sabe, eu usaria os espaços que sejam razoáveis para você. Eu penso: html limpo e boa identação, e sabe. Todas essas coisas ficam boas. E fazem seu site fácil de dar manutenção e atualização e ver o que está acontecendo com seu código fonte.

E o Google é muito bom em achar separadores e quebrá-los. Então, não faça uma palavra para cada 200 linhas em branco, caso contrário, você sabe…

Enquanto você fizer coisas razoáveis eu não me preocuparia muito com isso. Eu faria o que é melhor pra você manter seu site.

• localizar novas páginas na web através de links ou sitemaps;
• identificar o conteúdo de sites;
• detectar conteúdo duplicado na internet;
• dar relevância a uma página ou marcá-la como “spam“;
• entre outros.

As máquinas de busca possuem diversos tipos de spiders que têm funções e tempos de atuação diferentes. O Google, por exemplo, possui dois tipos de spiders baseados em tempo:

• um que roda diariamente em busca de conteúdo recente;
• e outro que roda mensalmente visando grandes alterações em sua indexação e novos cálculos de Pagerank.

Por isso devemos aprender a trabalhar com estes spiders para que se possa ter um melhor resultado nas máquinas de busca. Abaixo seguem algumas dicas de como deixar um site mais amigável para eles:

1. Menus com barra de rolagem e Formulários
   Spiders não seguem estes tipos de link. Portanto sempre tenha em mente a colocação destes links em outro local de sua página, caso você queira que eles sejam encontrados pelas máquinas de busca.
2. Frames, Flash e AJAX
   Muito cuidado ao usar este tipo de recurso em seu site. Os spider não conseguem ler seu conteúdo, logo não conseguirão identificar sobre o que sua página se trata. Spiders capturam texto, por isso, caso você realmente queira usar estes recursos em sua página e ao mesmo tempo deseja ter uma boa colocação nas máquinas de busca, não esqueça de um bom conteúdo em texto.
3. Imagens
   Spiders também não conseguem identificar o conteúdo de imagens. Se as imagens de seu site são muito importantes para seu conteúdo, não se esqueça de colocar uma boa descrição no campo “alt” das mesmas.
4. Conteúdo Atualizado
   Se o seu site não muda muito, comece a rever os seus conceitos. Spiders adoram sites com novos conteúdos. Atualize seu site ao menos 3 vezes por semana.
5. Navegação versus Sitemap
   Não dependa de seu sitemap para que os spiders capturem todas as páginas de seu site. Faça uma boa linkagem que favoreça uma boa navegação, pois os spiders preferem capturar páginas através de uma navegação natural.
6. Vídeos
   Para que seus vídeos tenham uma chance maior de serem encontrados, crie um sitemap de vídeos e liste o mesmo na central de webmasters das máquinas de busca. Sem se esquecer de relacionar o texto da página ao vídeo desejado.

1. Existe mais do que um navegador.

Como todos sabemos, o internet explorer é o navegador mais usado atualmente, porém existem muitos outros, e cada navegador renderiza a página de uma maneira diferente, portanto ao se fazer uma página é essencial se preocupar com as diferentes configurações da máquina do usuário, como navegador (e sua versão) e resolução de tela. Sempre teste a nova página em diferentes configurações, recomendo sempre testar em pelo menos nos 3 mais usados atualmente: iexplorer 7, Firefox e iexplorer 6, e ao menos nas configurações de tela 1024×768, 1280×1024 e 800×600.

2. CSS é essencial.

Como já foi discutido em CSS e SEO: O Segredo para o Sucesso, o uso de CSS é essencial para SEO, mas além disso, o uso do CSS é essencial para o usuário também, pois com o CSS é possível fazer a página ser acessível nos diversos navegadores usados hoje em dia, além é claro de facilitar a manutenção.

3. Escreva o código-fonte

Não use programas WYSIWYG, como o Dreamweaver ou Frontpage, pois o código-fonte gerado por eles fica cheio de tags, estilos e estilos inline, deixando o seu código-fonte não muito limpo dificultando a manutenção do mesmo.

4. Use o Firefox para “debugar” JavaScript

O Console de erros de Javascript do Firefox é de longe o melhor para desenvolvedores web, gera relatório de erros detalhados, facilitando a compreensão do mesmo.

5. Use as toolbars para Desenvolvedor Web.

Existem toolbars que facilitam, e muito, a vida dos desenvolvedores Web, com elas encontrar erros na página fica muito mais fácil, seguem os links para download:

• Firefox: https://addons.mozilla.org/pt-BR/firefox/addon/60
• iexplorer: http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038

As funções e como usá-las fica para um próximo artigo…

Espero que essas dicas ajudem a criação e desenvolvimento de suas páginas. Qualquer dúvida comentem.

Abraços

O que é CSS?

Cascading Style Sheet ou Folha de Estilos é uma tecnologia que permite a criação de sites separando-se seu conteúdo de sua formatação no mesmo ou em arquivos separados. O CSS é recomendado pela W3C, que gerencia as normas para a Internet, a fim de melhorar o desempenho de websites.

Vantagens em se usar CSS para SEO

Folhas de estilo podem ser inseridas diretamente no código HTML de cada página ou também ser escritos em um arquivo externo.

A melhor solução é a segunda principalmente porque ele possui inegáveis vantagens, tais como:

• A estruturação do código HTML torna-se mais limpo;
• O arquivo CSS é carregado e mantido no cache desde o início, e isso diminui o tempo de carregamento das outras páginas;
• A manutenção ou alteração pode ser feita muito mais rápida: basta modificar um único arquivo para mudar o site inteiro, não importa o número de suas páginas;
• Aumento da compatibilidade do navegador;

Dicas para utilização de CSS

• Evite colocar formatação in-line nas tags, prefira colocar tudo em arquivo .css separado;
• Substitua o uso de JavaScript rollovers e mouseovers quando possível por CSS;
• As imagens podem ser definidas como backgrounds. Elas vão carregar mais rápido do que imagens colocadas entre tags HTML.
• Prefira usar menus construídos com CSS. Se você acha que não é possível fazer um menu complexo usando somente CSS, então veja Um exemplo de menu feito totalmente em CSS no site http://www.seomarketingworld.com. Você vai se surpreender com o que se pode fazer com folha de estilos.
• Evite o uso de tabelas, prefira usar tableless por facilitar a formatação e reduzir bastante o código fonte.

A ressalva de CSS

É inegável que CSS e SEO fazem um bom par quando se trata de desempenho, com código limpo e site bem construído. Isso melhora bastante o Marketing para Sites de Busca. No entanto, há uma questão muito importante que você deve considerar quando se usa CSS, a fim de otimizar o seu site: nunca use CSS, a fim de ocultar o texto de suas páginas. As ferramentas de buscas como o Google e o Yahoo conseguem detectar esse tipo de artifício considerado como Black Hat SEO.

É isso ai leitores do BrasilSEO.com.br. Comentem o post se tiverem dúvidas, sugestões ou críticas.

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.

Como todo mundo sabe o código fonte é a estrutura que forma seu site e através dele que os buscadores analisam o conteúdo do seu site. Mas qual a finalidade disso tudo?! Muito simples, quanto mais cedo as ferramentas de busca lêem as palavras chave de seu texto mais relevância o seu texto terá nas buscas e conseqüentemente uma melhor posição será atribuída ao seu site. Isso é simples de se explicar.

Os crawlers das ferramentas de busca dão maior relevância ao conteúdo que vem no início da página, uma vez que o usuário sempre lerá a página de cima para baixo, logo o conteúdo no início da página é bastante significativo a colocação de seu site numa boa posição.

Verificando e estruturando seu site

Uma forma correta para a leitura do código seria: primeiro o cabeçalho depois o conteúdo e logo após as outras coisas como navegação e rodapé da página.

Para verificar de maneira simples se a estrutura de seu site segue esse padrão de leitura basta clicar em exibir código fonte em seu navegador. Será aberta outra janela com todo seu código fonte e a seqüência que esse código é lido pelo navegador.

Existem duas formas de se trabalhar com a estrutura das páginas: usando tabelas (<table>,</table>,<td>,</td>,<tr>,</tr>) ou usando tableless (<div>, </div>). É importante dizer que o uso de tabelas não é muito recomendável, pois a apresentação de seu conteúdo no navegador é feito somente após o carregamento de toda sua tabela, enquanto com o uso de tableless a apresentação do conteúdo é feito a medida que a página vai sendo carregada. Outra desvantagem no uso de tabelas é na hora da manutenção onde você fica um pouco restrito em fazer alterações no design do site, enquanto com o uso de tableless você consegue ter liberdade e facilidade de alterações em seu site. Portanto, a melhor forma de estruturar seu website é através de tableless usando CSS (Cascading Style Sheets) para manipular o posicionamento do conteúdo do site, mas o uso de tabelas não é proibido desde que seja trabalhado de forma correta.

É isso ai galera do Brasil SEO, fico por aqui, mas se gostarem do post comentem, enviem dúvidas, críticas ou sugestões. Ficarei feliz em trazer mais dicas interessantes para vocês.