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.

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.

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.

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.

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>

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.

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).

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.

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.

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).

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; }

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.

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 ##

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.