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. Por isso é muito importante que seja feito um bom
trabalho de otimização das imagens nas páginas de um site, pois esse trabalho
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 (imagem
abaixo). 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.
Vamos ver algumas dicas que podem contribuir com o bom posicionamento
das imagens de suas páginas nas pesquisas do Google:
1. Nome dos arquivos de imagens
influencia muito em SEO
Os nomes dos arquivos de imagem devem sempre ser detalhados e
informativos, de forma que deixe claro para o buscador sobre qual assunto está
contido na imagem. Uma boa descrição do nome do arquivo para uma imagem que
ficará numa página sobre venda de um produto 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 quando 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 de uma imagem
indicado pelo Google:
§ Uso comum: 
§ Melhor: 
§ Muito
melhor:
E a Tag “title”?
Fazem confusão com o uso da tag Title,. Hoje o Google não gera
relevância para essa tag, mas ela tem uma papel fundamental no que se refere a
usabilidade do seu site. Por esse motivo você deve dar tanto valor a esta tag
quanto a tag alt.
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
Fornece 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 relevantes a elas.
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. Esse assunto será abordado já no próximo tópico
sobre o tempo de carregamento das páginas e dentro dele será dada a devida
atenção à importância das imagens.
5. Reduzindo o tamanho de imagens
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 (largura e altura) 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.
|
1
2
3
4
5
6
7
8
9
|
#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. Seja autêntico – não copie imagens
de outros sites
Como eu disse lá no começo, o Google dá muito importância para a
relevância da imagem para os usuários, então ele não vai aceitar que você
utilize-se de 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 são os visitantes que 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.
No Portal Seu Negócio na Internet
você vai encontrar dicas bônus para otimização de
imagens, como uma dica para criar relatórios personalizados do
Google Analytics para acompanhar o tráfego que as imagens geram para suas
páginas, além de dicas para quem administra sites WordPress e quer usar plugins
para essa tarefa.
Espero que gostem e aproveitem as dicas. Deixem suas dúvidas e
comentários.
Nenhum comentário:
Postar um comentário