Search Engine Optimization: Otimizando sites com SEO

Os sites de pesquisas e seus mecanismos de busca vasculham a internet e criam um controle detalhado sobre cada p�gina que encontram, esse processo � chamado de indexaç�o e acontece mesmo que nenhuma pesquisa seja feita. S�o utilizados programas conhecidos como rastreadores, que analisam p�ginas na web e seguem todos os links contidos nestas p�ginas, criando assim uma verdadeira rede, exatamente como voc� faz ao navegar na Internet.

O site de pesquisas mais conhecido e usado da internet � o Google.com, com mais de 80% do mercado de buscas no Brasil. O mecanismo de buscas do Google possui muitos rastreadores, tamb�m conhecidos como rob�s ou crawlers, sendo que o mais conhecido � chamado de Googlebot.

Este rob� segue cada link, de cada p�gina da internet, desde que essa n�o tenha sido bloqueada para acesso dos indexadores, atingindo, assim, a todos os sites publicados na web.

A indexaç�o dos sites

Ap�s visitar uma p�gina na web, o rob� do mecanismo de buscas a envia para uma imensa base de dados, trata-se de uma verdadeira biblioteca p�blica em constante expans�o. Assim como um �ndice de um livro, o mecanismo organiza as p�ginas para que o conte�do seja facilmente encontrado atrav�s das pesquisas, nesse ponto surgem os �algoritmos de buscas�, que procuram os termos da pesquisa feita por um internauta no �ndice e localiza as p�ginas mais adequadas para serem exibidas ao usu�rio em ordem de relev�ncia.

O algoritmo do Google, por exemplo, segmenta as informaç�es obtidas pelo googlebot por uma s�rie de crit�rios, atualmente s�o mais de 200, dentre as quais se destacam: os termos usados nas p�ginas, a atualizaç�o do conte�do, a regi�o do usu�rio e ainda o conhecido Pagerank, um ranking baseado numa f�rmula desenvolvida pelo Google que considera tamb�m uma s�rie de informaç�es sobre o site para classific�-lo com uma pontuaç�o de 0 a 10.

O Google trabalha tamb�m com um poderoso sistema de cache (ver Nota 1) que evita a demora no resultado da pesquisa, pois com esse cache a consulta � base de dados � reduzida tanto quanto poss�vel. O mesmo tamb�m permite que o Google n�o tenha que atualizar as informaç�es dos sites com a mesma frequ�ncia, permitindo que o googlebot aperfeiçoe seu trabalho para analisar sites que tenham mais atualizaç�es e sejam mais relevantes �s pesquisas.

Nota 1: Cache � um mecanismo criado para acessar de forma r�pida determinado dado, sem ter de necessariamente acessar o dispositivo original de armazenamento, ao inv�s disso, dispositivos mais r�pidos s�o usados, servindo como intermediadores de acesso.

O que mudou?

Nos prim�rdios da era da internet, quando as primeiras t�cnicas e regras sobre SEO estavam sendo projetadas e usadas, os motores de busca adoravam as palavras. Por�m, ao longo dos anos o movimento tem sido no sentido dos "conceitos". Ou como o novo mantra diz: "coisas n�o palavras".

Sim, de fato, as palavras na p�gina realmente entram no jogo de SEO, mas o mais importante � identificar os conceitos de uma p�gina ou um site. Isso ajuda a melhorar os resultados desse tipo de estrat�gia em um mundo comumente mais personalizado.

Embora esta abordagem esteja mais relacionada aos elementos de classificaç�o de uma p�gina ou de um site, alguns fatores s�o extremamente relevantes para fazer com que a p�gina seja realmente encontrada. Dois destes elementos s�o �bvios:

Rastreamento (Crawling): A capacidade que o motor de busca tem de obter coisas acerca do site;
Indexaç�o (Indexing): Buscando as p�ginas para o �ndice do motor de busca, de fato.

Atualmente, a maioria destes fatores pode ser tratada por ferramentas automatizadas fornecidas pelos principais motores de busca. Pelo menos para que eles saibam que o seu site existe. O que n�o � t�o evidente s�o o n�vel e a profundidade do rastreamento e indexaç�o dado a um website. Isso muitas vezes pode ser atribu�do a alguns fatores internos e externos ao site.

Entenda os sinais

O primeiro fator a ser compreendido na an�lise dos fatores SEO s�o os sinais. Eles s�o muito frequentemente usados e manipulados pelas t�cnicas e ferramentas SEO, mas muitas vezes incompreendidos. Um motor de busca pode usar sinais para muitas coisas, incluindo a categorizaç�o, geolocalizaç�o, comportamentais, demogr�ficas, e muito mais. N�o apenas para fins de classificaç�o. Alguns podem ser utilizados como sinais de qualidade (conclus�o da tarefa), enquanto outros s�o usados em elementos de exibiç�o nos resultados da pesquisa.

Onde as coisas começam a ficar interessantes s�o os sinais page-level e os sinais site-wide. Como um motor de busca �v� seu site na web. No entendimento estrito de "fatores de ranking", estes podem n�o ser sempre considerados, mas na verdade s�o conceitos importantes.

Para simplificar, vejamos abaixo uma relaç�o de alguns destes fatores:

Sinais Site-level:

Autoridade/Confiança;
Classificaç�es;
Classificaç�o de ligaç�o interna;
Localizaç�o;
Entidades;
Hist�ria do Dom�nio;
Conte�do fino.

Sinais Page-level

Meta dados;
Classificaç�es (e localizaç�o);
Entidades;
Autoridade/Confiança (links externos);
Sinais temporais;
Sinais de Sem�ntica;
Indicadores lingu�sticos (linguagem e nuances);
Fatores de destaque (negrito, it�lico, cabeçalhos, listas, etc).

Sinais Off-site

Sinais link relacionado;
Sinais temporais;
Elementos de confiança (conhecido pela empresa que voc� mantenha);
Entidade/�rg�o; citaç�es, co-citaç�o, etc;
Sinais gr�ficos sociais;
Sinais de spam (que pode incorrer em amortecimento);
Relev�ncia sem�ntica (dos outros sinais).

Tenha sempre em mente que �link relacionado� n�o significa PageRank. Os links podem enviar uma variedade de sinais, diferentemente do PageRank.

Isso � o suficiente para que voc� obtenha a sensaç�o de que h� uma variedade de sinais que um motor de busca pode usar para entender o que um site e/ou uma p�gina da web significa ou quer passar. Al�m, disso tamb�m � claro que tipos de elementos podem ser utilizados nas pontuaç�es dos resultados de busca.

SERPs - Os resultados das pesquisas

O termo SERP, ou Search Engine Results Page (no portugu�s: P�gina de Resultados do Mecanismo de Busca), � usado para designar a p�gina na qual o Google e outros mecanismos de busca exibem os resultados que foram processados em uma fraç�o de segundos, na ordem que seus respectivos algoritmos os classificaram. A Figura 1 exibe a SERP do Google para o termo criaç�o de blog profissional.

Figura 1. SERP do Google

No caso do Google, existem duas �reas que separam os tipos de resultados que podem ser exibidos em uma SERP. Estas �reas s�o diferentes por exibirem an�ncios que s�o classificados de forma distinta. Uma �rea determina os an�ncios que s�o pagos por pessoas ou empresas interessadas em aparecer para os usu�rios do Google, usu�rios estes que pesquisam por um determinado produto. Os resultados destas pesquisas s�o chamados de �links patrocinados�. Na outra �rea s�o exibidos os resultados encontrados atrav�s do algoritmo mencionado anteriormente no artigo, estes resultados s�o de sites que, de acordo com esse algoritmo, s�o relevantes para o usu�rio que realizou a pesquisa e assim s�o conhecidos como �resultados org�nicos�.

A classificaç�o dessas �reas � feita de formas totalmente diferentes e independentes. Nos links patrocinados, s�o exibidos at� dez resultados por p�gina, sendo divididos em no m�ximo tr�s no topo da p�gina e no m�ximo sete na lateral. As primeiras posiç�es s�o leiloadas pelo sistema do Google que cuida do serviço para anunciantes, chamado de �Google Adwords�. � importante esclarecer que a otimizaç�o de sites via SEO pode melhorar o resultado do seu posicionamento inclusive nos an�ncios dos resultados pagos, por�m esse � apenas um dos fatores que o sistema do Google Adwords considera.

J� os resultados org�nicos constituem dez por p�gina, podendo este n�mero ser alterado pelo usu�rio. Por�m a classificaç�o depende do algoritmo, que ser� melhor de acordo com a qualidade do trabalho de SEO realizado no site e em suas p�ginas.

Os mecanismos de Ranking

Para se ter uma ideia melhor de como um motor de busca pode classificar as p�ginas da web nos ambientes atuais da web, alguns conceitos devem ser entendidos:

Pontuaç�o: Os principais motores de busca usam centenas de fatores aninhadas em v�rios algoritmos. Pense nisso como uma cebola e suas camadas. Com demasiada frequ�ncia, as pessoas dizem coisas como �o algoritmo do Google�, quando na verdade, existem diversos deles. A pontuaç�o sobre todos eles comp�e os rankings iniciais.
Impulso: Este � outro elemento ou sinal que possa elevar a posiç�o de uma p�gina nos rankings. Um exemplo � uma declaraç�o de que o Google fez r�pidos sites m�veis dando um impulso nas buscas m�veis. V�rias formas de personalizaç�o tamb�m usam algum elemento para impulsionar os resultados de reclassificaç�o.
Amortecimento: N�o deve ser confundido com penalidades, um fator de amortecimento � um elemento que reduziria os rankings de uma p�gina web, ap�s o processo de pontuaç�o inicial. Um exemplo s�o os agora infames algoritmos do Google Pinguim ou Panda. Embora possa parecer uma penalidade �, de fato, um elemento de amortecimento.

Agora estamos chegando a algum lugar, certo? Consideramos os v�rios sinais em off-site e sinais gr�ficos (links, sociais, de entidades, de conhecimento). Dentro de cada um desses, existem mecanismos de classificaç�o e pontuaç�o em jogo que est�o afetando onde um site aparece nos resultados.

Os fatores SEO que o front-end influencia

� poss�vel dividir a teoria de SEO em duas �reas de atuaç�o distintas, onde os fatores que influenciam nos resultados de classificaç�o dos sites de busca seriam chamados de fatores �On-Page� e fatores �Off-Page�.

Os fatores On-Page caracterizam-se por serem aqueles que alteram aspectos internos das p�ginas. Entre os principais fatores On-Page, listamos:

T�tulos das p�ginas;
Meta tags;
Heading tags;
Atributo alt em imagens;
Dom�nio;
URL do arquivo;
Conte�do.

Os fatores Off-Page s�o aqueles que se caracterizam pelos aspectos externos �s p�ginas, dentre os quais podemos listar:

N�mero de links externos;
Qualidade de links externos;
Texto �ncora dos links externos;
Idade de um dom�nio.

Nestes fatores existem tarefas e conhecimentos diferentes, mas, para um resultado efetivo, a aplicaç�o dessas t�cnicas � obrigatoriamente exigida de forma complementar. Por�m o trabalho do desenvolvedor Front-end fica restrito � atuaç�o nos fatores On-Page, que � considerada por muitos especialistas como a �rea mais importante do SEO.

Termos SEO

Existem termos espec�ficos da �rea de SEO que devem ser entendidos pelos desenvolvedores front-end. Entre eles est�o:

SEM (Search Engine Marketing ou Marketing para Motores de Busca): como o pr�prio nome diz, envolve marketing em serviços e produtos para mecanismos de busca. O SEM � dividido em dois pilares: SEO e PPC. O significado mais adequado para SEO � o de ferramenta de otimizaç�o para mecanismos de busca. O PPC (Pay Per Click, ou Pago Por Clique), que s�o os links patrocinados, � a pr�tica de comprar links dos mecanismos de busca.
Backlink: tamb�m conhecido como link interno ou simplesmente �link�, � uma refer�ncia de outro site apontando para seu site. Backlinks: s�o relevantes para o SEO por afetarem de forma direta o pagerank, influenciando no ranking de buscas. A ideia b�sica por tr�s do algoritmo � que, um link vindo de uma p�gina A para uma p�gina B, pode ser um voto de confiança da p�gina A para a p�gina B. Quanto mais links uma p�gina receber mais ela seria confi�vel.
Linkbait: trata-se de um tipo de conte�do publicado em um site ou blog com o objetivo de atrair muitos backlinks. Pode ser um texto, um v�deo, um infogr�fico, um quiz ou qualquer outra coisa. Podemos citar como exemplo de Linkbait os rankings �Top 10�.
Link Farm: � quando um grupo de sites criam links para um mesmo site, com a ideia de aumentar o pagerank deste site. Essa t�cnica j� funcionou, mas hoje em dia � tratada como spam.
Sandbox: trata-se de um �ndice diferenciado, utilizado para sites novos. Quando um site est� no sandbox ele n�o aparece no resultado normal. Assim que o site for verificado pelo Google ele ser� movido do sandbox para o �ndice principal.
Densidade de palavras-chave: para saber a densidade de uma determinada palavra-chave em uma p�gina, conta-se o n�mero de vezes que a mesma aparece e divide-se pelo n�mero de palavras na p�gina. O SEO considera a densidade de palavra-chave um fator extremamente importante e os algoritmos tendem a enfatiz�-la cada vez mais.
Keyword Stuffing: a partir do momento em que as palavras-chave passaram a ter mais relev�ncia para os mecanismos de busca, os desenvolvedores passaram a manipular a quantidade das mesmas em uma p�gina, fazendo esta ficar com mais palavra-chave que deveria. Isso � chamado de Keyword Stuffing. Essa t�cnica n�o � mais utilizada e quem p�em em pr�tica, pode ser penalizado severamente pelas ferramentas de busca.
Cloaking: consiste em mostrar um conte�do para os mecanismos de busca e outro para o usu�rio. A ideia � manipular para que os mecanismos de busca vejam as palavras-chave e usar o acesso ao site para relacionar produtos e serviços e exibir aos usu�rios. Essa t�cnica � considerada spam e pass�vel de penalizaç�o pela maioria dos mecanismos de busca, lembremos do recente caso da empresa Decolar, que foi punida por usar cloaking em seu site.
Call to Action: significa a �chamada a uma aç�o�. Ou seja, s�o links ou funç�es de uma p�gina que levam os usu�rios a realizar aç�es.
Conte�do Duplicado: trata-se de um bloco de conte�do dentro de um dom�nio relacionado que contenha um conte�do igual ou similar, em alguns casos podendo constituir pl�gio de informaç�o.
URL Can�nica: � quando uma URL de um mesmo conte�do pode ser representada de mais de uma forma. Por exemplo, a vers�o can�nica de www.seusite.com.br pode ser www.seusite.com.
Robots.txt: documento usado pelos mecanismos de busca para estruturar um site, sempre colocado na raiz do dom�nio. Por exemplo, com o Robots.txt, � poss�vel bloquear uma URL para os mecanismos de busca.

A conex�o Spam da Web

Embora n�o se possa, em �ltima an�lise, consider�-lo como um elemento de classificaç�o, os spams da web tamb�m fazem parte do processo SEO e, mais que isso, devem ser considerados no momento da elaboraç�o de uma estrat�gia SEO. Embora possa n�o ser algo que aumente seus rankings, com certeza pode diminuir ou demoli-los. Assim, em uma linguagem mais coloquial, podemos classificar os mesmos como �formas que as ferramentas de busca desclassificam uma p�gina web�.

Web Spam � o termo utilizado para aqueles que procuram manipular os resultados da pesquisa. Tal como acontece com todas as coisas relacionadas � recuperaç�o da informaç�o e SEO, h� uma infinidade de m�todos que eles podem utilizar e pontuaç�es associadas que a grande maioria dos usu�rios web desconhece. O Google disponibiliza um link em uma de suas p�ginas oficiais para lidar com esse tipo de problema (veja na seç�o Links).

Alguns elementos da web spam podem incluir:

Encobrimento e/ou redirecionamentos sorrateiros
Site hackeado
Texto oculto e/ou enchimento de palavras-chave
Dom�nios reservados
Spam Puro
Hosts gratuitos Spammy e provedores de DNS din�mico
Conte�do fino com pouco ou nenhum valor acrescentado
Links n�o naturais de um site
Ligaç�es n�o naturais para um site
Spam gerado pelo usu�rio

O ponto � que devemos considerar sempre o que afeta um ranking de uma p�gina da web a partir de um ponto negativo, bem como de um ponto de vista positivo. � prefer�vel aproveitar os muitos fatores que examinados, mais do que manipul�-los. Se voc� fizer isso, provavelmente nunca vai ter que se preocupar com o problema de spam web.

SEO na pr�tica

Agora que voc� j� possui o conhecimento te�rico sobre o funcionamento dos mecanismos de busca e tamb�m j� foi apresentado � teoria b�sica de SEO, assim como conhece os principais termos tratados na �rea, ent�o est� preparado para ver as boas pr�ticas de SEO on-Page que um desenvolvedor Front-end pode utilizar.

T�tulos das P�ginas (Tag Title)

A tag HTML title � tida como um dos mais importantes atributos de uma p�gina para obter um bom posicionamento de um website nos mecanismos de busca.

Veja na Figura 2 a linha de c�digo HTML referente � tag title e como a mesma � utilizada para os resultados das pesquisas no buscador Google.

Figura 2. T�tulos das P�ginas nos resultados das pesquisas

Existem algumas formas eficientes de criar um bom t�tulo:

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.

Descriç�o das P�ginas (Tag Description)

O atributo de descriç�o das p�ginas (tag description) � 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.

Al�m disso, existem algumas boas pr�ticas de SEO que devem ser levadas em consideraç�o no momento da criaç�o das descriç�es de cada p�gina, dentre elas:

Seja fiel ao conte�do, n�o tente enganar os buscadores, pois isso resultar� em problemas no futuro. Os buscadores avaliar�o 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 elas 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.

Com certeza voc� j� se deparou com essas diferenças em diversas pesquisas no Google. O uso dos Rich Snippets tem crescido muito, trazendo mudanças no comportamento dos usu�rios no que se refere a relaç�o dos mesmos com os resultados das pesquisas.

A Figura 3 exemplifica algumas das possibilidades que esse recurso oferece.

Figura 3. Resultados de pesquisa com Rich Snippets

Veja os tipos de Rich Snippets que o Google oferece suporte atualmente:

Breadcrumbs
Eventos
M�sica
Organizaç�es
Pessoas
Produtos
Receitas
Classificaç�es / Revis�es
Coment�rios
As aplicaç�es de software
V�deos e outros

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 exibida na Listagem 1.


       <div itemprop="breadcrumb">
         <a href="/eletronicos/">Eletr�nicos</a> > 
         <a href ="/eletronicos/tv/">TVs</a> > 
         <a href ="/eletronicos/tv/led">TVs LED</a> 
       </div>

Listagem 1. C�digo 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.

Para desenvolvedores que utilizam CMS (ver Nota 2), como Wordpress e Joomla, a aplicaç�o de Rich Snippets � extremamente simples com o uso de plugins e extens�es utilizadas por plataforma. N�o � foco deste artigo tratar exemplos do tipo, mas o leitor pode pesquisar sobre a infinidade de plugins dispon�veis na internet. O Google estimula o uso desses recursos e um dos 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+ (Figura 2).

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.

Nota 2: 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.

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/Aviation para conte�dos direcionados a informaç�es sobre aviaç�o, que � com certeza muito mais intuitiva e atraente do que http://www.exemplo.com.br/indice.php?id_sezione=360&sid=3a51440.

Para utilizaç�o com mais de uma palavra, sempre separe as mesmas com o uso de hifens - em vez de sublinhados _, como por exemplo: http://www.exemplo.com.br/vestido-verde.html que � mais �til do que http://www.exemplo.com.br/vestidoverde.html

Lembre-se que o Google procura sempre a melhor experi�ncia poss�vel para os usu�rios de seu mecanismo de pesquisa, logo complementando a criaç�o do URL acima, a melhor soluç�o seria http://www.exemplo.com.br/vestido-verde, para consegui esse resultado deve-se usar de um recurso que o servidor web APACHE disponibiliza, o m�dulo mod_rewrite, usando o arquivo .htaccess na pasta raiz do website desenvolvido.

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.

Hoje 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. Vejamos algumas dicas essenciais ao bom posicionamento das imagens de suas p�ginas de pesquisa do Google.

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 venda de um produto seria nomeprodutp-a-venda.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.

N�o exagere no uso de palavras-chave, isso contribuir� para que o seu site seja considerado como spam. O Google indica que seja testado o seu conte�do usando um navegador somente de texto, como o Lynx (ver Nota 3).

Nota: Lynx � o nome de um browser web baseado em texto (text-based), altamente configur�vel para uso em terminais endereç�veis. � tamb�m um dos browsers mais antigos em uso e 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. Observe um exemplo com a Figura 4.

Figura 4. Forma indicada pelo Google para texto relevante a imagem inserida na p�gina

Vale tamb�m 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.

Tempo de Carregamento da P�gina

� muito importante falar deste assunto logo ap�s as dicas sobre o uso de otimizaç�o de imagens. Hoje o Google entende que a velocidade do site � um grande fator na qualidade do mesmo, pois para todos os usu�rios da Internet, sites mais r�pidos possibilitam a leitura de mais conte�do. Pesquisas demonstram que usu�rios em um site que responde lentamente �s solicitaç�es da web, seus visitantes gastam menos tempo dentro destes sites, enquanto em sites mais r�pidos, n�o s� o usu�rio sente mais interesse de continuar a navegaç�o, mas tamb�m reduz os custos operacionais para o dono do site.

Neste DevCast veremos como a equipe de programaç�o da DevMedia utilizou a t�cnica de Lazy Load, com jQuery, para otimizar o tempo de carregamento da p�gina por meio de requisiç�es Ajax.

Para obter melhores rendimentos na velocidade do seu site � muito importante contar com boas ferramentas de mediç�o desses resultados. O pr�prio Google criou uma ferramenta para que os webmasters pudessem avaliar o tempo de carregamento de seus sites, com um resultado detalhado que possibilita a melhoria de cada item, resultando numa melhor experi�ncia de seus usu�rios.

O nome dessa ferramenta � Google Page Speed, e pode ser utilizada at� como uma extens�o do navegador Firefox. Al�m disso, h� outras ferramentas que fazem mediç�es que tamb�m devem ser avaliadas, entre elas, o Yslow, a ferramenta gratuita da Yahoo! (que tamb�m sugere caminhos para melhorar a velocidade do site). Existe uma ferramenta chamada Gtmetrix que unifica essas duas citadas anteriormente e ainda possibilita um acompanhamento semanal, enviado para uma conta de e-mail, permitindo que voc� monitore esse par�metro continuamente.

Para o caso do Google Page Speed, sua p�gina receber� uma avaliaç�o at� 100, indicando a necessidade que voc� ter� para melhorar o tempo de carregamento de seu site. Al�m dessa avaliaç�o, voc� receber� dicas de onde e como proceder para conseguir um tempo suficiente para que seus visitantes n�o desejem abandonar a navegaç�o no seu site.

Vamos falar agora das boas pr�ticas que voc� pode realizar para que seus resultados no Google Page Speed sejam os melhores poss�veis.

Reduzindo o tamanho das Imagens

No resultado obtido com a ferramenta Gtmetrix, voc� ter� uma opç�o de visualizar o tempo de carregamento por arquivo, essa informaç�o � obtida na aba Timeline do Gtmetrix. Ser� poss�vel visualizar o tempo de carregamento para cada arquivo e o tamanho. E como estamos falando de imagens � importante utilizar aquelas que sejam do tamanho realmente necess�rio para o bom entendimento de seus clientes, para que o resultado final da p�gina n�o seja muito pesado e lento.

Utilizar ferramentas de compress�o de imagens como jpegtran, Jpegoptim, Smush.it do Yahoo! e OptiPNG � o caminho certo para se obter uma boa reduç�o do peso das imagens.

O Google Page Speed tamb�m dar� boas dicas de como otimizar a p�gina em termos de imagens. Uma das dicas � sempre exibir imagens dimensionadas, isto �, editar as imagens para que elas fiquem no tamanho correto no qual voc� deseja inserir no site, e n�o usando os atributos de redimensionamento pelo c�digo. O Google tamb�m indica que especificar as dimens�es (altura e largura) das imagens do site, permite um rendimento mais r�pido da p�gina.

Outra opç�o � combinar imagens com CSS Sprites, que tamb�m ser� avaliada pela ferramenta do Google. Utiliz�-lo �, de certa forma, simples, bastando unificar as imagens da p�gina em uma �nica nova imagem. Por exemplo, unificando todos os bot�es de um menu como mostrado na Figura 5.

Figura 5. Bot�es de um menu animado, agora unificados para uso do CSS Sprites

Carregando cada imagem do menu demonstrado separadamente, resultaria em 6 requisiç�es e 18kb no total, ap�s a unificaç�o em uma s� imagem o tamanho cai para 14kb. Agora imagine isso para mais 10 imagens usadas em uma �nica p�gina.

O c�digo HTML necess�rio para o exemplo � realmente muito simples, podemos utilizar um menu em lista, colocando a imagem unificada como background, depois definir largura e altura fixa para cada item do menu. Assim, s� aparecer� o Sprite ligado � imagem que ser� vis�vel (Figura 6).

Figura 6. Bot�es com o Sprite definido

Crie tamb�m as propriedades CSS respons�veis pela mudança dos sprites usando background-position, tal como na Listagem 2. Assim, fica definida a posiç�o em que o background ser� exibido.


    #menu li a { background: url(images/sprites.jpg) no-repeat; display: 
    block; width: 120px; height: 60px; }/* define para cada item a posiç�o em que o 
    sprite est� na imagem /*
    #menu li .home { background-position: 0px 0px; }
    #menu li .home:hover { background-position: 0px -60px; }
    #menu li .textos { background-position: 120px 0px; }
    #menu li .textos:hover { background-position: 120px -60px; }
    #menu li .contato { background-position: 240px 0px; }
    #menu li .contato:hover { background-position: 240px -60px; }

Listagem 2. Propriedades de mudança dos sprites

Arquivos JavaScript e CSS

O n�mero e tamanho de arquivos est�ticos do seu site como os Curso JavaScript e Curso CSS podem aumentar bastante o tempo de carga da sua p�gina, por esse motivo, estes tipos de arquivos devem sempre ser colocados em vers�es reduzidas, n�o contendo coment�rios e espaços.

Parece uma economia sem sentido, reduzir arquivos em bytes de tamanho, mas lembre-se que al�m de ter uma fraç�o de segundo mais r�pida para a navegaç�o do seu usu�rio, a falta dessas pequenas alteraç�es ser�o notadas pelos mecanismos de busca, principalmente pelo Google, que vai ter isso como um crit�rio para o bom posicionamento da sua p�gina para as pesquisas. Basta lembrar que um melhor posicionamento significa mais tr�fego para o site do seu cliente. E um cliente satisfeito pode significar mais clientes e mais serviços.

Para conseguir a otimizaç�o desses arquivos existem �timas ferramentas como Closure Compiler, JSMin, CSSmin, YUI Compressor ou ainda a opç�o dada pela ferramenta do Google Page Speed, basta clicar no nome do arquivo que ele informa que deve ser compactado. Conforme exibido na Figura 7.

Figura 7. Ferramenta do Google Speed Page auxiliando na compactaç�o de arquivos est�ticos

Outra dica importante do Google Page Speed para o tratamento de arquivos Java Scripts � o adiamento da an�lise desses arquivos. O pr�prio Google indica que, uma das formas mais simples para isso, seria apenas colocar as chamadas de todos os arquivos Java Scripts no rodap� do site, permitindo que, dessa forma, estes se tornem os �ltimos arquivos a serem baixados, n�o bloqueando o carregamento da p�gina, como normalmente acontece quando posto no cabeçalho do site.

Mas existe outro m�todo t�o interessante e simples como o anterior, carregando os scripts de forma ass�ncrona, basta inserir dois atributos na tag script, o async e defer, como no c�digo abaixo:

<script async defer src="meu-arquivo.js"></script>

O atributo async informar� ao navegador dos visitantes que o download do meu-arquivo.js deve ser feito de forma ass�ncrona, isto �, durante o processo de renderizaç�o da p�gina, o script ent�o ser� executado somente ap�s o final de seu download.

J� o atributo defer, possui uma funç�o semelhante, por�m o script ser� executado somente depois que o processo de renderizaç�o for conclu�do.

Compress�o com GZip

Outra opç�o interessante, tamb�m indicado pelo Google, � utilizar a compress�o das p�ginas do website com Gzip, possibilitando que as p�ginas sejam transferidas compactadas e depois descomprimidas ao chegar ao navegador do visitante.

Essa opç�o normalmente � feita na configuraç�o do servidor que hospeda os arquivos do website. Faça a solicitaç�o ao seu suporte t�cnico e depois teste para verificar se o Gzip est� realmente ativo, assim como o n�vel de compress�o usado, para tal utiliza-se a ferramenta Gidnetwork.

Aproveitar cache do navegador

Com o uso desse recurso � poss�vel reduzir bastante o tempo de carregamento de p�ginas, armazenando os arquivos est�ticos mais utilizados no navegador dos visitantes. Isso reduz muito o tempo de carregamento de p�gina, principalmente para aqueles visitantes que retornam ao seu website regularmente.

Atenç�o especial para o tempo de expiraç�o dos artigos, pois esse tempo determinar� quando eles ser�o automaticamente removidos do navegador dos seus usu�rios. � recomendado que o tempo seja de, no m�nimo, um m�s. Avalie corretamente a quest�o das alteraç�es que voc� faz no site, pois se por algum motivo voc� altera os arquivos est�ticos do site com frequ�ncia, com esse recurso ativado, alguns dos seus visitantes certamente n�o visualizar�o as alteraç�es feitas na p�gina visitada.

Todo esse controle ser� feito com base nos mecanismos que o pr�prio browser disponibiliza para o desenvolvedor SEO diretamente e para os usu�rios indiretamente. O cache, por ser o mecanismo padr�o de armazenamento tempor�rio do browser, cumpre o papel de avaliador neste cen�rio em espec�fico. Quando se deseja utilizar do cache do navegador, basta que o seu administrador do servidor que hospeda a aplicaç�o edite o arquivo de extens�o �.htaccess�, em servidores Linux, adicionando o c�digo da Listagem 3. Atrav�s dessas configuraç�es o servidor ter� plenos poderes e autorizaç�o para realizar o acesso direto ao cache e prover os mecanismos de salvamento autom�tico dos dados para o SEO.


       ## EXPIRES CACHING ##
       
       ExpiresActive On
       ExpiresByType image/jpg "access plus 1 year"
       ExpiresByType image/jpeg "access plus 1 year"
       ExpiresByType image/gif "access plus 1 year"
       ExpiresByType image/png "access plus 1 year"
       ExpiresByType text/css "access plus 1 month"
       ExpiresByType application/pdf "access plus 1 month"
       ExpiresByType text/x-javascript "access plus 1 month"
       ExpiresByType application/x-shockwave-flash "access plus 1 month"
       ExpiresByType image/x-icon "access plus 1 year"
       ExpiresDefault "access plus 2 days"
       ## EXPIRES CACHING ##

Listagem 3. Propriedades a serem alteradas no arquivo .htaccess

Serviços de Content Delivery Network

Essa � com certeza uma das melhores formas de se reduzir muito o tempo de carregamento de p�ginas. Os serviços de Content Delivery Network, ou rede de distribuiç�o de conte�do (CDN), � basicamente a distribuiç�o dos arquivos est�ticos do seu website em diversos servidores web, disseminados em v�rios locais pelo planeta, afim de satisfazer de forma mais r�pida e eficiente os usu�rios por toda a internet.

Um usu�rio que acesse seu site na �ndia, ter� um servidor selecionado mais pr�ximo dele geograficamente para a entrega do conte�do, fazendo com que suas p�ginas carreguem muito mais r�pidas.

Al�m do fato da proximidade dos servidores e visitantes acelerar muito mais esse download, os servidores j� possuem, em sua maioria, uma estrutura de processamento e mem�ria melhores que os servidores de hospedagem compartilhada, al�m de tamb�m utilizarem recursos como compactaç�o dos arquivos.

Para empresas start-up e sites particulares, o custo de um serviço de CDN pode ser proibitivo no começo, mas com o n�mero de visitas crescendo, o CDN � necess�rio para atingir os tempos de resposta r�pidos, e se o site do seu cliente for planejado para ter acesso global, o uso do CDN ser� mais necess�rio ainda.

Sitemaps

Um arquivo Sitemap de XML, chamado simplesmente de Sitemap, nada mais � do que uma lista das p�ginas do seu website. Os Sitemaps s�o criados para informar aos mecanismos de busca, como o Google, sobre a exist�ncia e conte�do de p�ginas em seu website.

Hoje o Google permite a criaç�o de Sitemaps com intuito de fornecer metadados dos tipos espec�ficos de conte�do de um website, incluindo v�deo, imagem, celular e not�cias. Por exemplo, pode ser criado um Sitemap espec�fico para informar metadados de v�deos, como o tempo de execuç�o e categoria. Ou ainda um Sitemap de imagens contidas no website, que fornecer� as informaç�es sobre o assunto, tipo e licença de cada imagem.

Para a criaç�o de Sitemaps deve-se usar o protocolo padr�o de Sitemaps, pois assim, do mesmo arquivo poder� ser enviado diversos mecanismos de pesquisa, como o Google, Bing e o Yahoo!, que s�o membros do sitemaps.org.

Voc� pode gerar o Sitemap do seu website sem dificuldades com o uso de simples ferramentas, como Google Sitemap Generator ou XML Sitemap Generator.

Ferramentas para Webmasters

Tanto o Google quanto o Bing oferecem ferramentas online que possuem opç�es que auxiliar�o os desenvolvedores Front-end em todos os assuntos abordados acima. No caso do Google, o nome da ferramenta se chamava Webmasters Tools (atualmente se chama Search Console), uma plataforma com recursos b�sicos e avançados que devem ser usados por qualquer desenvolvedor que queira que seu website esteja bem posicionado no maior mecanismo de buscas da internet.

Entre as soluç�es do WMT est�o:

Receber ocasionalmente mensagens que s�o relevantes a seu site, incluindo avisos sobre problemas cr�ticos encontrados pelos rob�s do Google em seu website.
Sitelinks: que s�o links exibidos abaixo de alguns resultados de pesquisas feitas no buscador do Google, no WMT voc� encontra essa opç�o com links do site.
Segmentaç�o Geogr�fica: muito importante, pois n�o � de conhecimento de todos que sites com dom�nios .br j� est�o associados a regi�o geogr�fica do Brasil. Mas sites de dom�nios internacionais .com ou .net por exemplo, poder�o n�o ser associados ao Brasil, dependendo de outros fatores, mas n�o vale a pena correr esse risco.
Atualizaç�o de novo endereço do website: caso voc� tenha mudado para um novo dom�nio, a ferramenta Alteraç�o de endereço vai informar ao Google sobre o novo URL e atualizar o �ndice para refletir seu novo URL corretamente, sem que voc� perca as visitas.
Erros de rastreamento: condiç�o que seu site possa apresentar e assim impossibilitar o acesso do googlebot �s p�ginas do seu website.
URLs bloqueados: permitir� que voc� certifique-se da exist�ncia de conte�do bloqueado ao googlebot pelo arquivo robots.txt. Tamb�m possibilita que voc� mesmo bloqueie qualquer arquivo ou pasta ao Google ou outros mecanismos de pesquisa.
Status do �ndice: fornecer� estat�sticas sobre a indexaç�o de seus URLs pelo Google. Muita atenç�o para quedas inesperadas nos n�meros de p�ginas indexadas, isso pode significar que seu servidor est� fora de operaç�o ou sobrecarregado ou que o Google enfrenta problemas para acessar seu conte�do.
Malware: o WMT avalia se seu website foi infectado por algum v�rus.
Consultas de pesquisa: oferece informaç�es sobre as consultas e cliques realizados no mecanismo de pesquisa do Google que retornaram como resultados as p�ginas do seu website.
Links para seu site: uma lista com os links, descobertos pelo Googlebot, e suas respectivas origens, al�m das p�ginas em seu site com mais links.
Links internos: informar� o n�mero de links que referenciam as p�ginas listadas.
Sitemaps: nesta seç�o voc� dever� inserir os arquivos de Sitemaps que criou, conforme esclarecimentos no t�pico sobre esse recurso.
Melhorias de HTML: O Google informar� possibilidades de melhorias, caso voc� tenha falhado na criaç�o de itens importantes vistos neste artigo, como a criaç�o das tag title e description diferentes para todas as p�ginas, ou ainda problemas com conte�do n�o indexado.

Al�m de todas essas ferramentas o WMT possui outras funç�es que poder�o ajudar no processo de SEO, mas numa fase muito depois do desenvolvimento.

Como vimos, o desenvolvedor Front-end poder� influenciar de forma muito positiva o processo geral de SEO de um website, pois todos os assuntos vistos no artigo s�o referentes � atividade na qual o Front-end est� diretamente associado.

Com a participaç�o do desenvolvedor consciente de que, se as boas pr�ticas vistas aqui forem seguidas no processo de desenvolvimento do site, o cliente final ter� o benef�cio de um site que ser� muito bem posicionado para as pesquisas, cabendo a ele apenas a manutenç�o de um conte�do de qualidade.

Nota:

How Search works - Google