Como tudo mais nessa fina arte, há algumas receitas para atrair mais pessoas também na forma como se escreve o texto. E, como tudo nessa vida, deve ser usada com parcimônia – não vá fazer um texto muito quadrado, voltado somente para o buscador. Lembre-se: você tem que ser achado, mas um texto de qualidade é o que fará a pessoa voltar ao seu site (senão eu aplicava 100% das regras a seguir nos meus próprios posts e fazia este blog viver de buscadores), ter milhares de acessos do buscador é só um número inflado de leitores que não trarão nenhum benefício para seu produto.

Descubra os termos mais relevantes

O primeiro ponto para se escrever um texto com um bom SEO é, depois de escolhido um assunto, fazer um exercício e pensar: “se EU estivesse procurando por isso no todo poderoso buscador, o que eu digitaria?”.

A minha sugestão é sempre pensar em por volta de 5 a 8 termos associados a isto e tentar utiliza-lo no texto. Não precisa ser exatamente 5 a 8, um pouco mais ou menos não vai matar ninguém – mas quanto mais você conseguir sintetizar a informação melhor.

E já que eu estou falando de uma receita de SEO para turbinar o seu texto, que melhor outro exemplo eu poderia usar do que uma receita culinária? Vamos então falar de um assunto mais polêmico que mamilos: vamos falar de PURÊ DE MAÇÃ.

Primeiro ponto: o que eu, D. Vespa, sei sobre purê de maçã?

Bom, eu sei que é um prato típico holandês e alemão também. Sei que é bom para acompanhar carne suína e aves e, em geral, é servido junto com purê de batata para dar um contraponto salgado para o adocicado da maça.

Partindo do parágrafo acima, já temos alguns bons termos para começar:

• • Carne de aves
• • Carne Suína
• • Acompanhamento
• • Culinária Holandesa
• • Cozinha Alemã

Já temos uns termos interessantes baseado no que EU sei a respeito do assunto. Mas… Será que meu conhecimento é o mesmo do público que quero atingir? Como faço pra saber se, de repente, se as palavras que eu buscaria também fazem sentido pras outras pessoas?

Termos relacionados do Google e Yahoo

Há um cantinho na página de resposta do Google que volta uma pesquisa de termos relacionados aos termos que você procurou. Não são sempre lá muito precisos – mas você pode encontrar algumas boas sugestões no qual pode não ter pensado:

No Yahoo estes resultados relacionados podem ser vistos aqui:

Detalhe importante: ELES NÃO APARECEM SEMPRE, só quando usamos um termo mais popular. Então, se não encontra-los de vez em quando, não se desespere.

Olhando a imagem acima, percebo que o purê de batata também é um termo que merece destaque – então vamos acrescenta-lo a lista e lembrar de dar algum destaque a ele. Culinária também é um termo bom, deve ser frisado pelo menos uma vez no texto.

Mas… Peraí, peraí… Bateu uma dúvida agora: “culinária” e “cozinha” são, neste contexto, sinônimos. Qual destes termos é mais procurado pelas pessoas? E os termos “carne de porco” e “carne suína”, qual deles é mais apropriado?

Para isso podemos usar o… (tchanaaaan!)

Google Trends, o juíz

Muito simples, pequeno gafanhoto, o nosso amigo Google tem uma ferramenta bem bacana chamada Google Trends que compara os termos para você e mostra qual deles teve mais procura nos últimos meses/anos.

E, segundo esta estatística é melhor dar preferência para “cozinha” ao invés de “culinária” e para “carne de porco” ao invés de “carne suína”. Legal, não? Tem algumas funçõezinhas mais específicas como filtro de país, uma indicação se houve algum evento que potencializou a busca por determinado termo em alguma época específica, etc… Mas isso é bem fácil de descobrir fuçando lá.

E que tal umas imagens também, aproveitando a mão na massa?

Mas usar imagens melhora o SEO?

Lembrando que existe busca de imagens, então sim, ajuda muito. Pare pra pensar que, além de mais dois elementos reforçando palavras chave no seu texto, os buscadores de imagens usam as palavras próximas a elas para classificar sua posição na página de resposta – então sim, você vai ganhar alguns acessos por conta disto também.

Detalhes: bold e links, as cerejas do bolo

… embora no purê de maçã não vá cereja.

Ao escrever o seu texto, sempre que um termo surgir pela primeira vez marque-o em negrito. Se você estiver escrevendo o código de formatação na unha, certifique-se que o seu negrito é uma tag STRONG e não um simples B – a prioridade do STRONG, dentro da escala de importância de cada tag HTML, é superior ao B – e acredito que essa classificação estenda-se aos buscadores também. (Se você não entendeu muito bem este parágrafo, não se preocupe, apenas marque o negrito que tiver no seu editor de texto e tudo ficará bem, não há consequências graves. ).

E quanto aos links, é a mesma lógica que já abordei em outro post: quanto mais links externos e internos você tiver falando a respeito daquele assunto (cozinha alemã/holandesa, receitas de maça, acompanhamentos, etc) mais bem visto será seu texto por um buscador.

O resultado de tudo que escrevi acima esta aqui, na receita de purê de maçã para microondas.

Estou curioso para ver como os buscadores irão reagir em relação a este texto pois, embora totalmente estruturado para ter uma classificação relevante no resultado de busca, o fato de estar publicado em um blog de tecnologia pode influenciar na hora de criar esta classificação. De qualquer forma, acompanharei quantos resultados voltarão a partir deste texto “bastardo” para o nosso blog e, se for interessante, quem sabe não rende um novo post?

Caso voce tenha curiosidade e queira ir mais a fundo na fina arte do SEO, abaixo há mais alguns artigos que escrevi a respeito:

• SEO sem crise – Uma visão simples e rápida
• SEO sem crise parte 2 – Meta tags: Keywords
• SEO sem crise – Parte 3 – Meta Description
• SEO sem crise – Parte 4 – Relevância por links

Purê de maça é um acompanhamento típico da cozinha holandesa e da alemã. É uma excelente opção para servir com carne de porco (como pernil e salsichas) ou aves. Recomenda-se servir o purê de maça e à carne junto a purê de batatas, que fará contraponto ao doce da maçã e dá um sabor especial a todo o conjunto.

Para esta saborosa receita você vai precisar de:

• • 3 maçãs inteiras
• • Canela em pó
• • Meia colher de gengibre em conserva
• • Meio copo de água

Descasque as maçãs e use um ralador para transforma-la numa pasta. Coloque numa forma refratária e acrescente o gengibre, água e canela a gosto. Coloque por cinco minutos no microondas em potência média. Espere esfriar por alguns minutos e sirva enquanto estiver morno.

Serve duas pessoas.

Mais receitas de Purê de maçã:

• Purê de maçã no Cybercook
• Purê de maçã com limão no receitas e menus
• Receita de tender com purê de maçã no tudo gostoso

Se você não é desenvolvedor deve se perguntar nesse momento:

“- Eu não sou desenvolvedor, devo me perguntar nesse momento se preciso mesmo saber sobre meta tags?”

Bom, sim e não.  Você não precisa necessariamente saber onde aplica-las no código, mas tem que saber como funcionam e para que servem pois pode existir um campo específico para isso no seu publicador.

Existem algumas dúzias de meta tags que se pode usar no código mas, uma vez que a proposta é não sair do básico do SEO, vamos falar somente das mais importantes nessa série de textos. Aliás, vamos falar uma coisa que pouca gente aborda em textos sobre SEO: em geral as pessoas dão enfase à aplicação, enquanto aqui pretendo falar o real porquê  de usa-las de forma x ou y.

Palavras Chave – Keyword

As keywords são declaradas no topo das páginas e servem basicamente para enfatizar para nossos amigos buscadores sobre o que estamos falando no nosso texto. Há muitos e muitos anos, quando as estrelas eram jovens e Yahoo e Cadê já eram antigos, elas foram o principal campo de consulta dos robots de pesquisa. No código aparecem similar a isto aqui, dentro das tag de head:

<meta name="keywords" content="festa,sandices,quadrinhos" />

A relevância das palavras chave não é mais tão importante quanto já foi por causa dos espertinhos da Web: o camarada ia lá nas keywords dele e lançava “Sabrina Sato pelada, putaria, bunda”.  Daí o buscador ia lá todo feliz fazer a classificação e entregava o resultado pro usuário e, este último, frustrado, descobria que o texto era sobre coleções de selos do século 20 ao invés da referida moça desnuda.  Quem perdia credibilidade nessa história? O buscador, é claro.

Mas aí? Vale a pena usar?

Mas mesmo com essa falta de crédito, o uso bem feito de keywords pode ajudar um pouco na relevância da sua página. Tenha em mente que as palavras usadas nas keywords devem estar contidas no texto, se possível mais de uma vez ou, se não for o caso, ser um sinônimo ou estar estritamente correlacionada ao assunto em questão. Mesmo que você monte um set de palavras que pareçam favorecer o texto, tenha em mente que a má escolha delas pode detonar o seu posicionamento no buscador – logo, se não tiver certeza que aquelas são as melhores escolhas, PREFIRA NÃO USAR NENHUMA KEYWORD. Keywords que não tenham nenhuma ou que tenham pouca conexão com o texto prejudicam ao invés de ajudar.

Exemplo: você escreveu um texto sobre sorvete de jaca e em algum momento disse “seria legal que a Kibon lançasse o sorvete de jaca”.  “Sorvete” e “jaca” seriam palavras importantes como keyword, já Kibon, sendo citado uma única vez no texto e sem nenhuma informação relevante além da menção,  se usada como palavra chave seria a âncora que afundaria tua página por posições e mais posições – afinal, você disse pro buscador que seu texto era relevante sobre isso, ele acreditou, e te classificou na seção “textos relevantes da kibon” e não no “textos relevantes sobre sorvete de jaca”, que era seu assunto principal.

Reciclagem de keywords pode?

“-Entendi, tio Vespa. Posso então escolher as mesmas 5 keywords fodonas e pô-las em todo meu sáite?”

NÃO! Keywords repetidas em várias páginas é como dizer que todo seu site é uma imensa redundância, mesmo que isso não seja verdade. Se o site não tem uma forma rápida de “taguear” todas as páginas, use a regra do não usar nada ou aplique palavras chave apenas no que for conteúdo novo. Você pode usar a mesma palavra várias vezes, mas nunca no mesmo conjunto. Se numa pagina você usou “água, fogo, terra” na próxima poderia usar “água, fogo, ar” que não teria problema – mas nunca “água, fogo, terra” pra duas ou mais.

Outro ponto importante é a quantidade de keywords usadas, evite usar mais do que 5. Muitas keywords poluem o código e caem na regra que citei no texto anterior, “se todo mundo é especial então ninguém é especial”, mandando a relevância pro brejo.

Alguns sistemas, em especial blogs, tem aproveitado a capacidade de gerar tags dos publicadores para reaproveitar o tagueamento nas Keywords. Já vi gente que defende que essa reciclagem não é boa – buscadores são entidades ariscas e não gostam de redundância, ainda mais se for na mesma página. Eu discordo disso por um fato muito simples: keywords são palavras texto, simples, separados por vírgula, enquanto as tags são as mesmas palavras mas com um fatorzinho diferente: elas estão linkadas, logo não estão totalmente redundantes, estão complementando informação já citada – então acredito que não seja algo realmente prejudicial, embora acredite que seja melhor variar um pouco a informação de uma e de outra por questão de aumentar abrangência.

Bom, creio que a respeito de Keywords é o que há de principal a se falar. No próximo episódio falaremos a respeito de meta description. Até!

O caso é que tudo que escrevi no texto, embora de forma escrachada, realmente é funcional na hora de montar um texto relevante para os nossos amigos buscadores (em especial Google, Yahoo e Bing, que são nosso atuais ditadores de tendências na produção de textos web).

Enfim, o meu foco naquele texto em específico era realmente a produção do conteúdo e sobre como a forma de escrevê-lo influencia para chamar a atenção dos buscadores. Mas de que adianta isso sem uma formatação decente?

Meu objetivo nas próximas linhas é tentar explicar, da forma mais simples possível, técnicas básicas de SEO, de forma que sirva tanto de orientação rápida para desenvolvedores quanto para pessoas de foco editorial ou marketing. A priori, ater-me-ei apenas à formatação de texto, ignorando tags, meta-tags, url amigável e keywords (volto no assunto num próximo post).

O Código HTML

O HTML, como já mencionado em artigos anteriores, deve ser sempre, SEMPRE o mais simples e corretamente estruturado possível. O fato do texto não ter um bilhão de “style=…”, tags bizarras e código sujo já é um grande avanço na “achabilidade” da sua página. Grandes poluidores de código são os editores visuais, como FrontPage, Dreamweaver (embora este, se usado corretamente, é uma ferramenta excelente para se trabalhar), goLive e até os Microsoft Words da vida.  Dê preferência aos editores de texto aos visuais.

Essa regra não vale obviamente para os modernos publicadores, como o próprio WordPress, por exemplo, que sozinho já gera um código limpo e relativamente organizado, mais comuns na vida de quem tem foco maior na parte editorial da brincadeira.

Títulos, subtítilos, tópicos (H1, H2, H3)

Tá, já sabemos que devemos fazer o código limpo… Mas como criar a hierarquia de títulos dentro dele? Sim, essa hierarquia influência nossos amigos buscadores. Usando de bom senso, identifique na sua página o que é mais importante e priorize – mas lembre-se, muitas vezes isso não tem absolutamente nada a ver com peso visual ou mesmo com a estrutura “lógica” do texto. Isso significa que, em muitos casos, um H1 deve ser atribuído à um subtítulo ao invés de ir para o título propriamente dito, como seria de se supor.

-”Mas tio Vespa, como posso saber quando fazer esta inversão?”

Muito simples: Quem concentra o maior número de palavras chaves (a.k.a. “buscáveis”) ? O título ou o subtítulo?

Quem tiver mais força merecerá a honra de ser o portador do H1. Para definir isso, questione-se sobre quais palavras digitaria para procurar sobre aquele assunto – as mais óbvias decidem a pendenga.

Um exemplo simples: Imagine que você está convertendo uma matéria de revista para texto html. A matéria chama-se “Friozinho bom” e fala sobre pousadas em Campos do Jordão. Quando você quer procurar sobre pousadas em Campos do Jordão, você procura por “friozinho” no Google? É lógico que não, você vai digitar “Campos do Jordão Pousadas” – logo, o que você faz? Joga isso como subtítulo ou “chápeu” (aquele textinho menor que vai em cima do título em vários sites) e dá o H1 de presente para este texto, mesmo que o tal do “Friozinho bom” venha em fonte 55px e o “Pousadas em Campos do Jordão” em 11px.

Mas então por que não jogar o H1 no corpo do texto todo? Ou no textinho descritivo, o tal do olho da matéria? Ou ainda, por que não fazer 20 títulos de tópicos com H1 numa mesma página? Bom, a resposta é bem simples: Citando Os Incríveis, “se todo mundo é especial, então ninguém é especial”.

Basicamente é assim: cada divisão da sua página é setorizada e priorizada de forma diferente quando o buscador a lê, e cada um desses ele expecta que terá uma determinada formatação. Então se você classifica algo com um título H1 ele realmente espera um texto que tenha o tamanho condizente com o número de palavras que um título conteria – caso contrário ele solta um “ahá! Alguém tomou um Malandrops e tentou me passar a perna” e a posição da tua página vai pro espaço. Reserve H1 e H2 para as chamadas realmente importantes na página (lembrando que H1 é que nem mãe: só tem um por página).

O H2 pode também deve ser usado com parcimônia, mas pode repetir-se várias vezes pela página. H3 em diante, ao que me consta, tem peso relativamente indifirentes.

Mas e o resto do texto?

Bom, o resto do texto pode ser mantido nas boas e velhas DIVs ou Ps, seguindo orientações de semântica para elementos de bloco de texto.  Neste ponto, a grande estrela é a habilidade daquele que escreve o texto, ele é quem fará toda a diferença.

Mas claro, se você for o Dev ou tiver um por perto que saiba um pouquinho de Microformatos, esse é mais um pontinho a se ganhar com nossos amigos buscadores. :p

A técnica da lista

Uma idéia boa pra começar um texto “SEOzado” é, antes de escreve-lo, listar 10 palavras que você considera pontos centrais dentro do assunto à tratar e utiliza-las. Lembre-se, em geral serão as que você usaria se fosse procurar textos sobre o assunto no buscador. Se por acaso você esbarrar em caso de sinônimos e não sabe qual teria mais força, o Google Trends é um ótimo índice para tirar a dúvida do que as pessoas estão procurando mais. Mas lembre-se: cuidado para não exagerar nessa prática e criar um texto ótimo para se buscar mas uma joça para ser lido.

Links pra-que-te-quero

Sabe os termos que você usou para a lista anterior? Muitos deles são muito importantes e vale a pena dar links para eles. Se não tiver nada muito relevante em seu próprio site, não tenha medo de dar links para sites externos. “Qualquer site externo, tio Vespa?” Não, panguá, só os que sejam realmente relevantes. Use os que vierem melhor posicionados no google sobre o assunto, e  prefira artigos às notícias – notícias tem uma “relevância explosão”, são muito relevantes por curtos periodos, afinal, assuntos tendem a esfriar. Já artigos, por serem “base de conhecimento”, costumam manter-se importantes para os buscadores, em especial por conta do número de links que são apontados pra eles (coisa que vou destrinchar com mais calma mais pra diante). Na dúvida, linque para a o termo na Wikipédia que em 99% é uma ótima escolha.

No próximo episódio…

No próximo texto sobre SEO eu falarei sobre os meta-dados, como eles podem ajudar na sua relevância, e como usar de  sabedoria ao empregá-los sem dar tiros no próprio pé.  Até!

CSS Sprites consiste em unirmos imagens em apenas um arquivo, utilizando CSS para posicioná-las e mostrá-las em seu HTML.

O principal objetivo da utilização desta técnica é a economia de requisições HTTP, fazendo com que seu site ganhe performance e economize banda.

Imagem

Para começar, unimos todas as imagens utilizadas em apenas uma:

HTML

Montamos uma lista inserindo uma classe para cada “a”, desta forma conseguiremos manipular cada imagem separadamente:

<ul>
<li><a href="#" title="Aspira Soldier" class="aspira_soldier">Aspira Soldier</a></li>
<li><a href="#" title="Elite Soldier" class="elite_soldier">Elite Soldier</a></li>
<li><a href="#" title="Sniper Soldier" class="sniper_soldier">Sniper Soldier</a></li>
<li><a href="#" title="Gas Soldier" class="gas_soldier">Gas Soldier</a></li>
</ul>

CSS

Definimos no “a” o background com a imagem e nas classes criadas manipulamos onde serão buscados os trechos desejados da imagem através da propriedade “background-position”.

Seguindo esta mesma linha, definimos o “a:hover” de cada classe:

/* CSS Reset */
*{margin:0;padding:0;border:0;outline:0;list-style:none;text-decoration:none}

/* Soldiers */
ul li{float:left}
ul li a{float:left;display:inline;margin-right:5px;border:1px solid #eee;width:100px;height:100px;text-indent:-15000px;background-image:url(soldiers.gif)}
ul li a:hover{border-color:#999}

/* Aspira Soldier */
ul li a.aspira_soldier{background-position:0 0}
ul li a.aspira_soldier:hover{background-position:0 -100px}

/* Elite Soldier */
ul li a.elite_soldier{background-position:-100px 0}
ul li a.elite_soldier:hover{background-position:-100px -100px}

/* Sniper Soldier */
ul li a.sniper_soldier{background-position:-200px 0}
ul li a.sniper_soldier:hover{background-position:-200px -100px}

/* Gas Soldier */
ul li a.gas_soldier{background-position:-300px 0}
ul li a.gas_soldier:hover{background-position:-300px -100px}

Resultado

Neste caso temos o efeito rollover, onde passando o mouse sobre cada imagem ela é trocada por outra:

Declaração única

A declaração única consiste em compactar diversas propriedades com a mesma finalidade em apenas uma.

Aqui veremos quais são essas propriedades e como utilizar a declaração única corretamente.

Margin e padding

Se todos os valores forem iguais:

/* Declaração normal */
seletor {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}

/* Declaração única */
seletor{margin:10px}

Se os valores top/bottom e right/left forem iguais:

/* Declaração normal */
seletor {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
}

/* Declaração única */
seletor{margin:10px 20px}

Se os valores right/left forem iguais:

/* Declaração normal */
seletor {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 20px;
}

/* Declaração única */
seletor{padding:10px 20px 30px}

Se nenhum valor for igual:

/* Declaração normal */
seletor {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}

/* Declaração única */
seletor{padding:10px 20px 30px 40px}

Border

/* Declaração normal */
seletor {
border-width: 1px;
border-style: solid;
border-color: #666666;
}

/* Declaração única */
seletor{border:1px solid #666}

Font

/* Declaração normal */
seletor {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 12px;
line-height: 18px;
font-family: arial;
}

/* Declaração única */
seletor{font:italic small-caps bold 12px/18px arial}

Background

/* Declaração normal */
seletor {
background-color: #666666;
background-image: url(imagem.gif);
background-repeat: repeat-x;
background-position: top;
}

/* Declaração única */
seletor{background:#666 url(imagem.gif) repeat-x top}

List-style

/* Declaração normal */
seletor {
list-style-type: disc;
list-style-position: inside;
list-style-image: url(imagem.gif);
}

/* Declaração única */
seletor{list-style:disc inside url(imagem.gif)}

Color

Se todos os hexadecimais forem iguais:

/* Declaração normal */
seletor {
color: #666666;
}

/* Declaração única */
seletor{color:#666}

Se todos os pares de hexadecimais forem iguais:

/* Declaração normal */
seletor {
color: #6699cc;
}

/* Declaração única */
seletor{color:#69c}

Importante

Na declaração única os valores sempre devem seguir o sentido horário (top/right/bottom/left) e a compactação dos hexadecimais pode ser aplicada em qualquer propriedade que contenha cor (border-color, background-color, etc).

Método otimizado

Diferente da identação convencional utilizada no HTML (com TAB’s) o CSS pode utilizar um método otimizado.

Exemplo utilizando a identação convencional (355 bytes):

/* CSS Reset */

* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
list-style: none;
text-decoration: none;
}

/* Menu */

ul li {
float: left;
}

ul li a {
float: left;
display: inline;
margin-right: 5px;
padding: 10px;
border: 1px solid #eee;
font: bold 12px arial;
color: #666;
background: #fff;
}

ul li a:hover {
border-color: #999;
}

Exemplo utilizando o método otimizado (291 bytes):

/* CSS Reset */
*{margin:0;padding:0;border:0;outline:0;list-style:none;text-decoration:none}

/* Menu */
ul li{float:left}
ul li a{float:left;display:inline;margin-right:5px;padding:10px;border:1px solid #eee;font:bold 12px arial;color:#666;background:#fff}
ul li a:hover{border-color:#999}

Lembrando que cada TAB, quebra de linha ou espaço consumirá 1 byte, devemos eliminá-los mesclando todos os seletores, propriedades e valores, removendo sempre o último “;” (ponto e vírgula) antes do fechamento da “}” (chave).

A idéia é termos um documento leve afim de economizar R$ por conta da diminuição do consumo de banda, porém a organização é essencial para justificar a ausência da identação, para isso, procure adotar um padrão na ordem das propriedades e identifique cada bloco utilizando comentários.

Parece pouco?

Vamos supor que um grande portal tenha em média 1 milhão de acessos por dia:

355 bytes * 1.000.000 = 355.000.000 bytes (identação convencional)
291 bytes * 1.000.000 = 291.000.000 bytes (método otimizado)
355.000.000 bytes – 291.000.000 bytes = 64.000.000 bytes (economia)
64.000.000 bytes = 62.500 megabytes = 61 gigabytes

Economia de 61 gigabytes por dia para um trechinho de CSS! Ainda parece pouco?