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
Acompanhe via feeds.
Participe comentando, ou acompanhando via trackbacks no seu site.
8 Respostas to “Técnica especial para fazer os mecanismos de busca entenderem as imagens de logo e outras imagens importantes”
Deixe seu comentário
Setembro 19th, 2010 às 21:02
Realmente Profissional !
Fevereiro 14th, 2011 às 8:49
Boas dicas.
Fevereiro 14th, 2011 às 8:49
Muito boa a materia.
Março 14th, 2011 às 12:15
Micro empresario marco 13h11 otimo produto
Junho 13th, 2011 às 7:00
Olá amigo este modo de ocultar o texto do h1 não causa punição do google? Ele aceita?
Eu fiz e deu certo, mas ainda tenho esta duvida. Fico no aguardo.
Junho 17th, 2011 às 19:44
Estas imagens ajudam muito na divulgação.
Agosto 13th, 2011 às 21:04
No IE9 não deu não !
Agosto 16th, 2011 às 14:12
Obrigado pelas dicas.