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?