« Entendendo como os mecanismos de busca veem sua página

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.

Gostaram?

É isto ai por enquanto, estudem e deixem suas páginas mais acessíveis.

Tags: acessibilidade para imagens, design com imagens, otimizacao