Todos conhecem a ferramenta Google Imagens, com a qual se pode fazer pesquisas por imagens. Para esta tarefa, o Google conta com um crawler (robô) exclusivo para rastrear as imagens de cada página publicada na internet, seu nome é Googlebot-Image. É muito importante que seja feito um bom trabalho para otimizar as imagens nas páginas de um site, pois isso pode gerar um bom resultado em termos de tráfego para o site.
O Google não usa resultados de imagens apenas da ferramenta Google Imagens, mas também nas pesquisas feitas pelo site de buscas na web. Assim como na pesquisa na web, o objetivo do Google para a ferramenta de pesquisa de imagens é oferecer a melhor experiência aos seus usuários, oferecendo os melhores e mais relevantes resultados de pesquisa. Com isso em mente é possível conseguir um bom posicionamento nos resultados dessa ferramenta.
Algumas dicas que podem contribuir com o bom posicionamento das imagens de suas páginas nas pesquisas do Google:
Tópicos
1. Nome dos arquivos de imagens influencia em SEO
Os nomes dos arquivos de imagem devem ser detalhados e informativos, de forma que deixe claro para o buscador qual assunto está contido na imagem. Uma boa descrição do nome do arquivo para uma imagem que ficará num site sobre venda de produtos seria nome-do-produto-a-venda.jpg, que é muito mais informativo do que IMG00123.jpg.
2. Uso da Tag Alt é fundamental
Utilize sempre o atributo da tag alt de forma tão descritiva quanto o nome do arquivo. Para o Google, a tag alt é usada para descrever os conteúdos de um arquivo de imagem, fornecendo informações muito importantes sobre o que está contido na imagem.
Veja os exemplos de conteúdo adequado para a tag alt:
- Uso comum: <img src=“gato.jpg” alt=”” />
- Melhor: <img src=”gato.jpg” alt=”gato” />
- Muito melhor:<img src=”filhote-gato.jpg” alt=”Filhote de gato pegando flores” />
3. Teste sua página na versão texto
Não abuse de palavras-chave dentro do atributo, isso pode fazer com que o seu site seja considerado como spam. O Google recomenda que você teste o seu conteúdo usando um navegador somente de texto, como o Lynx.
4. Relacione sua imagem com conteúdo correto
Fornecer um bom contexto para a sua imagem dentro da página na qual esta está inserida possibilita aos buscadores mais informações sobre a imagem. Inclua legendas ou títulos e, sempre que possível, faça com que as imagens estejam próximas ao texto relevante a elas.
Veja a forma indicada pelo Google para texto relevante a imagem inserida na página:
Outro ponto muito importante sobre as imagens é o dimensionamento e tamanho em bytes de uma imagem. Em alguns sites as grandes vilãs da lentidão de uma página são as imagens.
5. Otimizar as imagens reduzindo o seu tamanho
No resultado obtido com a ferramenta Gtmetrix, você terá uma opção de visualizar o tempo de carregamento por arquivo. Essa informação é obtida na aba Timeline do Gtmetrix. Você conseguirá visualizar o tamanho e tempo de carregamento para cada arquivo. E como estamos falando de imagens, é importante utilizar imagens que sejam do tamanho realmente necessário para o bom entendimento de seus clientes, para que o resultado final da página não seja muito pesada e lenta.
Utilizar ferramentas de compressão de imagens como jpegtran, Jpegoptim, Smush.it do Yahoo! e OptiPNG é o caminho certo para se obter uma boa redução do peso das imagens.
O Google Page Speed também dará boas dicas de como otimizar a página em termos de imagens. Uma das dicas é sempre exibir imagens dimensionadas. Isto é, editar as imagens para que elas fiquem no tamanho correto no qual você deseja inserir no site, e não usando os atributos de redimensionamento pelo código. O Google também indica que especificar a dimensões de todas as imagens do site permite uma renderização mais rápida da página.
6. Use CSS Sprites quando possível
Existe também a opção de combinar imagens com CSS Sprites, que também será avaliada pela ferramenta do Google. Aplicar esta técnica é muito aconselhável para websites com muitas imagens em suas páginas.
Utilizar o CSS Sprites é relativamente simples. Para tal, basta unificar todas as imagens da página em uma única nova imagem, como por exemplo, unificar todos os botões de um menu em uma única imagem. Usando o exemplo abaixo fica claro identificar como o CSS Sprites pode ser útil:
Se fôssemos carregar cada imagem desse menu separadamente teríamos seis requisições e 18kb no total. Após a unificação em uma só imagem o tamanho cai para 14kb. Agora imagine isso para mais 10 imagens usadas em uma única página.
O código HTML que vai precisar usar para o exemplo é realmente muito simples, utiliza-se um menu em lista onde será colocada a imagem unificada como background e definir a largura e altura fixa para cada item de menu, com isso aparecerá somente o Sprite correspondente à imagem que será visível:
Criar a propriedade CSS responsável pela mudança dos sprites usando background-position. Com isso será definida em que posição o background será exibido.
#menu li a { background: url(images/sprites.jpg) no-repeat;
display: block; width: 120px; height: 60px; }
/* define para cada item a posição em que o sprite está na imagem /*
#menu li .home { background-position: 0px 0px; }
#menu li .home:hover { background-position: 0px -60px; }
#menu li .textos { background-position: 120px 0px; }
#menu li .textos:hover { background-position: 120px -60px; }
#menu li .contato { background-position: 240px 0px; }
#menu li .contato:hover { background-position: 240px -60px; }
7. Não copie imagens de outros sites
Conforme dito no início deste artigo, o Google dá muita importância para a relevância da imagem para os usuários, então ele não vai aceitar que você utilize imagens de outros sites, dando assim conteúdo duplicado ao seu visitante. Por isso, seja autêntico. Ao invés de copiar a imagens de outro site, apenas se inspire nela e crie a sua própria.
Conclusão
Para ter uma melhor ideia do quanto essas dicas são relevantes, procure em seu Google Analytics as informações de quantos visitantes chegam ao seu site através do Google Images, procure em Fontes de Tráfego. Você pode se surpreender com o número de visitantes que chegam ao seu site dessa forma.
Fonte: iMasters