Nesse artigo, apresentaremos boas práticas de SEO on-Page que um desenvolvedor front-end pode usar para melhorar o posicionamento de suas criações nos mecanismos de busca. Para esse artigo é interessante que o leitor tenha aproveitado o conteúdo de outros artigos que publiquei sobre SEO, pois falam de mecanismos de busca e iniciam o conteúdo de SEO.

Se você quer saber mais sobre O QUE É SEO, clique aqui. Agora, se você não leu os artigos sobre SEO - na teoria, não deixe de ler a parte 1, parte 2.

Iniciaremos com os detalhes que se deve ter atenção para que um site seja notado pelos buscadores.

Tag Title - Títulos das Páginas

A tag HTML title é um dos mais importantes atributos de uma página para obter um bom posicionamento de um site nos buscadores. Na figura a seguir, a linha de código HTML referente à tag title é utilizada para os resultados das pesquisas no buscador Google.


Títulos das Páginas nos resultados das pesquisas

Para definir um título é interessante ressaltar alguns detalhes de boas práticas de SEO. O título de uma página deve ser criado de acordo com o conteúdo da mesma; não repita os títulos em páginas diferentes, cada página deve ter seu título único; utilize uma mensagem descritiva e concisa; nunca utilize títulos vagos como Início ou Home para sua página inicial; não ultrapassar de 60 a 70 caracteres; use palavras-chave no título, mas sempre dentro de um contexto. Evite os excessos, pois pode fazer com que seus resultados pareçam spam para o Google; seja relevante e evite títulos muito curtos ou clichês; escolha um título que possa colocá-lo no conteúdo de sua página e repita-o no máximo de heading tags, assim tanto os usuários quanto os buscadores terão certeza que seu site oferece o que foi procurado na pesquisa.

Tag Description - Descrição das Páginas

A tag description - descrição das páginas  é um atributo bem visto pelos mecanismos de buscas, como o Google. Trata-se de uma excelente forma de fornecer um resumo conciso e legível do conteúdo de cada página para os usuários das pesquisas. Considere também esse recurso como uma ferramenta de marketing que pode aumentar seu tráfego orgânico. Na figura a seguir, a linha de código HTML referente à tag description é utilizada para os resultados das pesquisas no buscador Google. No código deixei apenas um texto de exemplo para a imagem ficar padronizada.


Descrições das Páginas nos resultados das pesquisas

Para criar as descrições de cada página é interessante ressaltar alguns detalhes de boas práticas de SEO. Seja fiel ao conteúdo, não tente enganar os buscadores, pois isso resultará em problemas no futuro. Os buscadores irão avaliar que, se a descrição de uma página é fraca, é por que o conteúdo desta página é possivelmente fraco para o termo procurado; é o ideal, mas não é extremamente necessário, usar sempre meta tag description. O Google, por exemplo, pode indicar para o usuário da pesquisa uma descrição mais relevante ao termo utilizado, mas essa prática vai depender da qualidade do conteúdo da página; a descrição deverá respeitar o limite de 160 caracteres, pois não será exibido mais que isso nos resultados das pesquisas; seja apelativo, procure chamar a atenção do usuário. Utilize-se de Calls To Action; use sempre palavras-chave na meta description, mas lembre-se que devem aparecer naturalmente dentro do contexto da descrição, sem exageros.

Rich Snippets

Os Rich Snippets são pequenas informações extras que o robô do Google identifica no código fonte de uma página e que aparecem em resultados de pesquisa na SERP, destacando os resultados que apresentam essas informações dos demais. Essas informações podem conter diferenças em diversas pesquisas no Google. O uso dos Rich Snippets tem crescido, trazendo mudanças no comportamento dos usuários no que se refere a relação dos mesmo com os resultados das pesquisas.

Os Rich Snippets que o Google oferece suporte podem ser: Breadcrumbs; Eventos; Música; Organizações; Pessoas; Produtos; Receitas; Classificações / Revisões; Comentários; As aplicações de software; Vídeos.

O potencial de aplicação desse recurso é enorme, assim como a facilidade de sua implementação. Veja como a aplicação do Snippet Breadcrumbs é simples e rápida, basta organizar o código da página para a seguinte estrutura.


Código Rich Snippets - Snippet Breadcrumbs

Com a grande diversidade de Rich Snippets disponíveis, o desenvolvedor deve avaliar qual será mais vantajoso para que a página do site que está sendo desenvolvida tenha um bom posicionamento no futuro. No caso de um site institucional simples, por exemplo, o uso do breadcrumbs pode ser interessante, mas os demais recursos dificilmente seriam aplicáveis. Entretanto, para um site que tenha em sua estrutura um blog ou ainda uma loja virtual o uso conjunto de alguns desses recursos pode ser extremamente proveitoso.

O Google estimula o uso desses recursos e um dos plugins mais utilizados é aquele no qual a imagem do autor da página fica à esquerda do resultado. Essa foto é obtida através do perfil do autor da página na rede social do Google, o Google+. Segue um exemplo da aplicação para a busca "Angry Bird", onde o primeiro resultado não se aplica e o segundo sim.


Resultados da pesquisa "Angry Birds" com um plugin Rich Snippets.

Para desenvolvedores que utilizam CMS, como Wordpress e Joomla, a aplicação de Rich Snippets é extremamente simples com o uso de plugins e extensões utilizadas por cada plataforma. Não é foco deste artigo tratar exemplos do tipo, mas o leitor pode pesquisar sobre a infinidade de plugins disponíveis na internet. CMS's são aplicações criadas com a finalidade de publicar e manipular conteúdo, provendo ao usuário a possibilidade de implementar funcionalidades para aplicações web de forma fácil, rápida e flexível.

Estudos indicam que ter a foto ao lado do resultado da página das pesquisas rende 30% mais visitas do que os resultados sem foto, hoje você pode ter a certeza desse diferencial verificando que cada vez mais resultados aparecem com fotos ou outros Rich Snippets. Para ter esse recurso é preciso que o autor tenha uma conta no Google+, e vincule seu perfil na rede social com o site que você deseja. É muito importante mencionar que o Google beneficia a interação da página com as redes sociais como um dos critérios de posicionamento.

URLs Amigáveis

Os buscadores entendem que uma boa estrutura de URLs deve ser a mais simples possível. A utilização de longos códigos de identificação deve dar lugar a palavras legíveis e relevantes ao conteúdo contido na página. Um exemplo dado pelo Google é criar uma URL como http://en.wikipedia.org/wiki/Search_engine_optimization. Mas ainda sim, o ideal para temas com mais de uma palavra é utilizar hífens ao invés de sublinhados, como por exemplo https://www.oficinadanet.com.br/post/13131-o-que-e-seo. A melhor solução é possível ao usar um recurso que o servidor web "Apache" disponibiliza, o módulo mod_rewrite, usando o arquivo .htaccess na pasta raiz do website desenvolvido. Vale a pena se aprofundar no assunto.

Otimização de Imagens

Mesmo não sendo a escolha das imagens uma atribuição do desenvolvedor Front-end, estas serão colocadas no conteúdo das páginas e interpretadas pelos buscadores de acordo com o que constar no código fonte da página. O Google possui a ferramenta Google Imagens, na qual pode-se fazer pesquisas onde os resultados serão apenas imagens. Para isso, o Google conta com um crawler (robô) exclusivo que rastreia as imagens das páginas publicadas, seu nome é Googlebot-Image.

O Google não dá resultados apenas da ferramenta Google Imagens, mas também nas pesquisas feitas pelo site de buscas na web. Por isso é muito importante que seja feito um trabalho eficiente de otimização de imagens, podendo futuramente gerar um bom tráfego. Da mesma forma que a pesquisa tradicional, o Google também concentra seus esforços em oferecer a melhor experiência a usuários em imagem.

Segue alguns detalhes para um bom posicionamento das imagens de suas páginas nas pesquisa do Google.


Google Imagens para a busca "Oficina da Net".

Detalhar e informar os nomes dos arquivos de imagem, esclarecendo ao buscador sobre qual assunto está contido na imagem, é um bom começo. Nesse caso, uma descrição ideal de nome de arquivo para uma imagem sobre técnicas de SEO seria seo-googleimagens.jpg, que é muito mais informativo do que IMG00123.jpg. Utilize sempre o atributo alt de forma tão descritiva quando o nome do arquivo. Para o Google, o atributo alt é usado com o intuito de apontar o conteúdo de um arquivo de imagem.

Alguns exemplos de conteúdo para o atributo alt são indicados pelo Google, como uso comum; melhor; muito melhor. Mas não exagere no uso de palavras-chave, pois pode levar o site a ser considerado um spam, e então ser excluído pelo Google, que também, indica que seja testado o seu conteúdo usando um navegador somente de texto, como o Lynx. E Lynx é o nome de um browser web baseado em texto - text-based - altamente configurável para uso em terminais endereçáveis e é também um dos mais antigos browsers em uso e em desenvolvimento.

Indicar um contexto para a sua imagem dentro da página onde ela está colocada, permite que os buscadores obtenham mais informações sobre ela, aproximando ao texto relevante a mesma. Segue uma ilustração.


Forma indicada pelo Google para texto relevante a imagem inserida na página.

Vale comentar sobre o dimensionamento e tamanho em bytes de uma imagem. Alguns sites se tornam lentos justamente por causa do carregamento de imagens. Trataremos desse ponto logo a seguir.

Estamos com o artigo meio extenso quando comparado com outros meus, por isso, encerramos por aqui. Continuaremos com esse assunto em um próximo artigo. Espero que tenha gostado. Curta e Compartilhe! Deixe seu comentário. Até o próximo artigo.

Fonte: Fighting Spam - Google, DEVMEDIA: Bruno Rodrigo Da Silva Souza.