Fazer SEO de imagem é um trabalho um pouco chato, mas muito importante. As imagens podem ser aliadas ou inimigas do SEO do nosso site. Se não forem tratadas da forma correta desde o início, podem ser muito prejudiciais para experiência do usuário, que é o critério fundamental do Google ao fazer o ranqueamento de imagens.
Oi, galera! Gui da 7mídias trazendo mais um conteúdo muito útil pra vocês!
Nesse artigo vou mostrar boas práticas para lidar com a imagem desde o “salvar como” até o upload para o site.
1. Escolha do formato do arquivo
O formato de arquivo é o primeiro ponto de atenção aqui. Se a imagem que você quer usar não precisa de transparência, opte sempre pelo formato .jpg. Fotos jpg são mais fáceis de compactar sem perda de qualidade.
Agora se a transparência for necessária (para um logo, por exemplo) é melhor o formato .png.
2. Tratamento de imagem
Usando o Photoshop
Ao preparar uma imagem para ser colocada em um site, os softwares de tratamento de imagem geralmente têm uma função “Salvar para web”.
No Photoshop, o caminho é Arquivo > Exportar > Salvar para web
Isso abrirá a janela de configurações de salvamento.
A imagem abaixo destaca as partes mais importantes dessa janela quando setamos a imagem para ser salva em jpg, ordenando os passos em números.
Explicando melhor:
- Como nesse caso queremos uma imagem com fundo colorido, setamos o tipo de arquivo pra JPEG.
- O tamanho da imagem tem que ser proporcional ao espaço que ela ocupará na tela. Se a imagem for enorme, mas só será usada num espaço pequeno da tela, é importante deixá-la o menor possível, desde que satisfaça o espaço que ela vai ocupar no site. Outro fator importante é a proporção da imagem: o Google prioriza imagens 4:3 e 16:9, já que são as dimensões mais comuns para monitores e funcionam bem para celulares também.
- A qualidade pra imagens da web não precisa ser extrema. Escolha a qualidade que não deixe a imagem péssima e nem muito grande em tamanho de arquivo.
- Essa parte da tela mostra qual será o tamanho final do arquivo. Depois de redimensionar a imagem e mudar a qualidade, fique de olho nesse visor. Para ser didático, imagens largas (como banners) devem ter um tamanho menor que 300 kb. Imagens médias devem ser menores que 150 kb e imagens pequenas menores que 100 kb. Diminua a qualidade ou o tamanho da imagem até atingir esses resultados.
- Metadados são algumas informações de uma imagem captadas por uma câmera (como flash, foco etc), entre outras informações. Elas pesam a imagem e não são necessárias para web, então deixe a opção marcada como “nenhum”.
Sem Photoshop
Uma alternativa para tratar as imagens sem Photoshop é usando o site Optimizilla. Ele permite compactar fotos de 20 em 20 imagens por vez.
Mas ele não redimensiona as imagens, então é importante que as imagens já estejam no tamanho correto.
Depois de subi-las, é só escolher a qualidade para que o tamanho do arquivo fique cada vez menor e depois baixar.
OBS: Para imagens PNG, diminuir a qualidade pode deixá-las pontilhadas. Então, se uma imagem não tem transparência, converta ela pra JPG usando o site convert.io e depois pode compactar.
3. Nomeando arquivo
Essa parte aqui é extremamente importante pro SEO da imagem! Temos três detalhes da imagem a que o Google dá importância, que são:
- Nome do arquivo
- Texto Alt
- Legenda (indiretamente)
Vamos explicar cada um deles abaixo
Nome do arquivo
Antes mesmo de subir a imagem pro site, precisamos nomeá-la. A ideia aqui é fazer o robozinho do Google entender o conteúdo da imagem.
Imagina esse robô se deparando com um arquivo chamado “WhatsApp Image 2020-04-15 at 18.38.11.jpg” ou “IMG-2342.jpg”. Ele não vai entender nada!
Agora se o nome for “cadeira-de-escritório-preta-com-rodinhas.jpg” vai ficar beeem mais fácil de entender o que tem na imagem.
Texto alt
As imagens da internet carregam um atributo chamado “alt”. Podemos preencher esse atributo com uma descrição da imagem e dizer pra quê ela serve.
Mas atenção! Muita gente acha que devemos encher o texto alt com palavras-chave e afins. Mas o algoritmo do Google já é bem espertinho pra identificar esse tipo de ação e pode marcar a imagem como spam, prejudicando muito seu ranqueamento.
Até porque ele não serve só pra descrever a imagem pro Google, mas pra acessibilidade também. Nesse atributo precisamos pensar como um deficiente visual vai entender a utilidade daquela imagem que está passando na tela.
O texto alt deve ser preenchido com uma breve descrição da imagem. E deve ser direcionada pra humanos, não pra robôs. Por exemplo “cadeira de escritório preta com rodinhas num fundo branco”.
Mas onde que eu coloco esse tal de texto alt?! Se você tiver fazendo um site em WordPress, ele já te dá essa opção nas configurações da imagem. Se estiver editando diretamente num código HTML, é só acrescentar um atributo alt dentro da imagem, tipo assim:
<img src=”cadeira-de-escritório-preta-com-rodinhas.jpg” alt=”cadeira de escritório preta com rodinhas num fundo branco”>
Legenda
As legendas não são extremamente necessárias, mas elas ajudam muito o SEO de forma indireta. Já foi comprovado que elas prendem o usuário por muito mais tempo na página, e isso é muito positivo pro algoritmo.
No WordPress dá pra adicionar uma legenda também nas configurações da imagem.
4. Teste de velocidade no GTmetrics
Depois de subir a imagem no site, teste se ela está otimizada na ferramenta especializada GTMetrics.
Acesse GTmetrix.com, coloque o URL de onde estão as imagens que você subiu e clique em “Test your site”.
Depois de um tempo aparecerão as recomendações para otimização de velocidade
Três delas são relacionadas à imagens: “Optimize images”, “Specify image dimensions” e “Serve scaled images”.
Talvez elas apareçam pra você se as imagens ainda puderem ser melhoradas.
O primeiro diz que as imagens podem ser otimizadas. Ele ainda gera uma URL com a imagem já otimizada, aí é só baixar e substituir. Mas basicamente o que ele faz é tirar algumas informações ocultas na imagem, como aqueles metadados que falei lá em cima.
O segundo diz que algumas imagens não têm suas dimensões (width – largura, height – altura) não foram especificadas. Não é um problema tão sério, já que as imagens não precisam ter as dimensões especificadas para aparecer.
O terceiro mostra imagens que estão sendo usadas no site numa dimensão menor do que ela é. Para acabar com esse problema, tente dimensionar as imagens exatamente no tamanho que elas serão usadas no site.
Se você seguir todos esses passos, seu site estará extremamente otimizado em relação às imagens. Muito mais leve e agradável para que seus usuários permaneçam no seu site, aumentando cada vez mais seu ranqueamento no buscador do Google.
Agora, se você não tiver afim de fazer esse trabalho todo, fala com a gente!
A 7mídias faz um site lindo e otimizado pra sua empresa, sem falar no trabalho de SEO pra que ele fique no topo do Google!
QUERO UM SITE LINDO E OTIMIZADO PARA MINHA EMPRESA!
Gostou desse post? Não deixe de compartilhar com seus amigos!
Para mais conteúdos como esse, fique de olho no nosso Blog e siga a 7mídias no Instagram, estamos sempre trazendo conteúdos interessantes sobre o marketing digital por lá!