Hoje, na Poli, meu amigo sabichão Roberto Sonnino estava dando dicas de CSS que é algo que eu conheço e uso com pouco domínio. Entre elas, estava o exemplo de como utilizar links em imagens sem perder seus conteúdos (textos).
É importante que ao colocar link em uma imagem você especifique em texto o que este link representa. É através dele que Sistemas de Busca como Google, Yahoo, LiveSearch entre outros vão avaliar a relevância da sua página e decidir se devem mostrá-la com maior prioridade em determinadas buscas.
Para exemplificar a técnica, imagine que você tenha um logo em seu site que possua link. O modo mais comum de se encontrar logos linkados na internet é com o seguinte código no html:
<a href=”http:www.enderecodestino.com”>
<img src=”http://www.enderecodologo.x.y/logo.gif”>
</a>
Para aplicarmos a técnica neste logo, devemos primeiro criar um header que definirá o que a imagem representa (ao invés do header, poderia também ter um div ou alguma tag específica). No HTML fazemos apenas algo como:
<a href=”http:www.enderecodestino.com”>
<h1>Conteúdo da Imagem</h1>
</a>
Agora no arquivo .css que define a estrutura da página, colocamos um código parecido com o seguinte:
h1 {
background: url(http://www.enderecodologo.x.y/logo.png);
text-indent: -10000px;
}
Para visualizar um exemplo de uso desta técnica, entre no link: Exemplo de Imagem com Link
Se você utiliza o firefox, você pode clicar em Exibir, Estilos da Página, Sem Estilos. Assim você poderá visualizar o que é visto por um sistema de busca padrão: apenas texto.
Assine o Feed