A percepção visual exerce uma forte influência no universo digital. As imagens, por exemplo, são fundamentais no processo de tomada de decisão do consumidor e são utilizadas como ponto de atração e até mesmo como respiro entre um parágrafo de conteúdo e outro.
Se você tem um blog e/ou e-commerce é muito provável que você já entenda a importância das imagens para o seu site. E, diante de tanta importância, hoje vamos aprender juntos como fazer SEO para imagens ou como otimizar imagens para os motores de busca.
Quando comecei a trabalhar com SEO, ouvi bastante a expressão “os robôs dos motores de busca não conseguem ler imagens”. Até certo ponto essa expressão é sim válida. Mas, estudando um pouco sobre a classificação de imagens, descobri que empresas de pesquisa estão desenvolvendo algoritmos que são capazes de rotular e descrever uma imagem por meio da identificação de características padrão, como cores, texturas, formas e outras características que ajudam a descrever uma imagem.
Então sim, de certa forma os algoritmos já são capazes de entender e descrever uma imagem, mas isso não anula a importância da otimização de imagens e você vai entender o porque disso logo abaixo!
Existem três elementos essenciais para a otimização de imagens. O primeiro é a compactação, o segundo é o título e o terceiro é o alt text (texto descritivo) da imagem. Para você não ficar perdido vou ensinar passo a passo de como usar cada elemento para otimizar sua imagem.
Antes de inciar o passo a passo, quero te dar uma dica que é fundamental para manter suas url’s otimizadas e que claro, também contribui para a otimização das imagens: alterar o nome da imagem.
O nome da imagem corresponde ao nome que você dá a ela quando ela está no seu computador.
Imagine que você tirou uma foto daquele hambúrguer delicioso que você experimentou no último final de semana. Você já escreveu o post sobre a hamburgueria e agora só falta subir a imagem do hambúrguer para o conteúdo. Porém, quando transferimos uma imagem do celular para o computador, normalmente ela está nomeada da seguinte forma “DSC17032017”. Mas, esse nome não diz nada aos motores de busca. O que você deve fazer é renomear suas imagens sempre antes de subir para o seu site.
No caso do exemplo acima, um bom nome para imagem seria “hamburguer-cheddar-duplo”. Os hífens (-) são utilizados para representar ao Googlebot o espaço entre uma palavra e outra.
Renomear uma imagem é bem simples:
Pronto. O nome da sua imagem já está otimizado. Vamos ao próximo passo.
O Google utiliza dois elementos do HTML para identificar uma imagem, são eles: título da imagem e seu alt text.
O título da imagem tem como função fornecer mais informações sobre aquela imagem. O título é essencial para que os motores de busca consigam compreender e extrair mais informações da imagem. Lembrando que o título deve ser relevante e deve estar contextualizado com o conteúdo, beleza? Ah! Evite de repetir o mesmo nome na tag alt e no title da imagem.
No meu próximo artigo a ser publicado falarei um pouco sobre algumas ferramentas para tornar o seu trabalho de SEO mais ágil. No post eu vou mostrar passo a passo de como compactar uma imagem utilizando o Kraken e para não ter que repetir tudo aqui, vou ensinar como compactar suas imagens utilizando uma ferramenta diferente, o TinyPNG.
E pronto! Agora suas imagens já estão renomeadas e compactadas.
Extra: O TinyPNG possui um plugin para wordpress. O plugin permite que você compacte todas as imagens que já estão no seu site. A ferramenta ainda compacta automaticamente as novas imagens que você subir.
O alt text é uma descrição alternativa e mais detalhada da imagem. O Google lê essa tag para compreender do que se trata a imagem. Outra função do alt text é que ele é utilizado por programas de acessibilidade que leem conteúdos para pessoas com deficiência visual.
Lembra do exemplo que citei acima? Dissemos que um bom nome para imagem seria “hamburguer-cheddar-duplo”. E um bom alt nesse caso seria “Hambúrguer cheddar duplo Pub Fiction”. Na tag alt eu acrescentei o hambúrguer e o nome da hamburgueria.
Como deve ficar o código da imagem:
<img src=“url da imagem” title=“Nome da imagem” alt=“Descrição da imagem”>
Extra: Observe que no exemplo acima está declarada a altura (height) e a largura (width) da imagem. Isso porque de acordo com o Google especificar as dimensões da imagem no código, permite a renderização mais rápida da página o que, em resumo, melhora o tempo de carregamento da página.
Para inserir a tag alt text nas imagens, peça o desenvolvedor do site para inserir a tag alt após o título da imagem. Para sites em wordpress a tag é inserida automaticamente, basta preencher os campos: título e texto alternativo.
As imagens são elementos que podem contribuir para o rankeamento do seu site. Isso porque quando otimizadas, elas diminuem o tempo de carregamento do site e, como já sabemos desde 2010, o Google revelou que o tempo de carregamento é considerado um fator de ranqueamento. Outro fator positivo é que quando as imagens estão otimizadas o googlebot conseguem identificar e exibir as imagens no Google Imagens.
Quer saber mais sobre otimização de imagens? Acesse o guia de otimização de imagens do Google!
Bom, por hoje só! Espero que você tenha gostado. Se você tem alguma sugestão ou dúvida fique à vontade para comentar.
