Técnica especial para fazer os mecanismos de busca entenderem as imagens de logo e outras imagens importantes
Se você não leu ainda o artigo sobre a visão dos mecanismos de busca, recomendo que leia antes.
Irei mostrar para vocês a técnica que usamos aqui na empresa para aumentar a qualidade da página fazendo com que as imagens fiquem mais acessíveis.
Hoje, provavelmente você deve estar usando em suas imagens a tag <img>.
Como alguns de vocês devem saber, ela possue o atributo ALT, que é a descrição do que a imagem significa.
Exemplo:
1: <img src="../duas-tacas.gif" alt="Duas taças, inclinadas insinuando o movimento de um brinde" />
Mas, e se você quiser ir além? E se você quiser deixar a página realmente acessivel à pessoas com dificuldade de leitura e melhorar a eficiência nos mecanismos de busca?
Veja como fazemos isto aqui na empresa:
Se a imagem é da logo principal, seguimos o seguinte conceito:
A imagem da logo deve conter um link para a página principal sempre, e é um componente importante do site.
Então, ao invés de usar <img> usamos a tag <h1>.
Desta forma ó:
1: <h1 id="logo">
2: <a href="/index.html" title="Seu Site"><span>Seu Site</span></a>
3: </h1>
Ao bater o olho no código, você deve estar se perguntando, mas e a imagem?
Então, o segredo da técnica vem agora, usando CSS, você deve adicionar o seguinte logo depois da tag <head>:
1: <style type="text/css">
2: #logo a {
3: display: block; // Definir como Bloco
4: background: url(imagens/submitay_logo.gif) no-repeat; // Definir aparição 1 vez
5: width:321px; // Largura da Imagem
6: height:72px; // Altura da Imagem
7: margin: 0 0 0 0; // Retirar Margens
8: }
9: </style>
Coloque isso, salve e veja como a página fica no navegador, agora você tem a página com a imagem, sobreposto do título em texto. O que devemos fazer agora, é usar uma tag CSS para esconder este texto nos navegadores modernos, já que neles o usuário terá acesso visual, ou seja, verá as imagens.
Continuando da linha 8 do código acima. Adicione:
1: h1 span, h2 span, h3 span {display: none;}
2: h1,h2,h3,h4,h5 {margin:0px;padding:0px;font-weight:normal}
Salve e veja o resultado. Uia! O texto desapareceu e agora você tem apenas o logo bonitinho. Teste o resultado em nossa ferramenta de visão de mecanismo de busca, você verá como o Logo fica bem representado em modo texto.
Legal né?
Agora vamos aprender como fazer isto para o resto das imagens, como você deve ter entendido, as tags H1-H5 são apenas para tópicos, títulos e sub-titulos.
Para fazer o mesmo com uma imagem qualquer do site, defina uma id para o bloco.
Exemplo:
1: <div id="duastacas"><span>Duas taças inclinadas insinuando um brinde</span></div>
Agora, faça o mesmo que fizemos com a tag H1 para o logo, especificando um background para a ID “duastacas”.
E depois que fizer isto, adicione no CSS:
1: #duastacas span {display:none}
Isto fará com que o navegador esconda o texto que estiver no bloco duastacas, mostrando apenas o fundo que foi definido com a imagem que você quer mostrar.