Otimização de imagens para SEO

Blog fellyph cintra - 5 dicas para deixar seu wp voando 1

Quando estava preparando a palestra para o WordCamp BH, na minha palestra do “Marketplace ao WordPress” um dos pontos da palestra foi a otimização de imagens para SEO. Dei uma lida em alguns posts do Yoast, um deles foi um post sobre otimizar imagens no seu site, que até usei como referência da minha palestra.

Otimização de imagens para SEO

Uma ótima opção para ajudar no entendimento do nosso conteúdo, descrever um determinado produto ou explicar um fluxo de uma operação. Temos um ditado “Uma imagem vale mais que mil palavras”.

Não poderia ser diferente para que gera conteúdo web e nos itens a seguir listo alguns cuidados especiais para melhorar o SEO do seu conteúdo utilizando imagens, está lista é uma adaptação do post: http://yoast.com/image-seo/

O que é otimização em SEO?

Primeiro precisamos falar o que é otimização em Search Engine Optimization(SEO) são técnicas para organizar o nosso conteúdo de forma que ajude os mecanismos de busca entender o nosso conteúdo e realizar um melhor posicionamento no assunto em que estamos compartilhando.

Assim a otimização em SEO pode ser feita de diversas formas e nesse post iremos compartilhar dicas de como você pode realizar otimização de imagens para SEO.

Qual a melhor forma de otimizar SEO as imagens que são inseridas em um texto?

Se você tem a oportunidade de adicionar uma imagem, por favor faça. As suas páginas precisam de imagens, inicialmente o seu post precisa de imagens que remetam ao artigo. Se você usa imagem somente para otimizar as métricas de plugin de SEO, você está fazendo errado “meu parça”, a imagem deve refletir o tópico do post.

Existe uma simples razão para isso: uma imagem que é cercada por conteúdo relacionado “rankeia” melhor o seu conteúdo. Adicionamos imagens ao nosso conteúdo pelas seguintes razões:

  • Elas enfatizam o título ou o assunto do post
  • Ela vai atrair um visitante para ler o post, sem ele ver o texto
  • As imagens serão usadas por redes sociais como: Facebook e Twitter

Se você não tem como usar fotos do seu próprio conteúdo, existem várias fontes de conteúdo com licença Creative Commons, por exemplo, Flicker outra ferramenta que podemos utilizar é freeimages.com. Mas tome cuidado fique longe das chamadas obvious stock photos, produzir as suas próprias imagens tornam o conteúdo mais original.

Outro tipo de imagem que é bem popular hoje são os gifs, podemos utilizar a sequência de imagens para demonstrar um passo-a-passo, ou uma cena curta. Um portal bastante conhecido começou a utilizar gif’s nas chamadas das matérias um momento chave de um acidente ou fato inusitado, estamos falando do globo.com, alguns gifs entraram até na home do canal de esportes.

Preparando a imagem para uso no seu artigo

Quando você usa uma imagem correta o próximo passo será otimização de imagens online, um ponto de atenção é o formato que irá utilizar. Assim melhor formato de imagem para seo, são os formatos suportados pelo Google imagens JPEG, GIF, PNG, SVG e WEBP.

Além disso, temos que levar em conta as seguintes considerações:

Como nomear imagens para SEO?

O início para otimizar uma imagem para SEO é dar o nome correto para o arquivo, uma forma de ganhar tráfego orgânico é  adicionando ao nome que descreva a imagem. Nada de subir imagens no post com o nome DSC938293829.jpg, o formato ideal seria  museu-louvre-paris.jpg.

Escale sua imagem

Será que você realmente precisa realizar o upload de imagens com 2500×1800 pixels, por exemplo? Na maioria dos casos a resposta é NÃO. Tempo de carregamento é um fator importante para a experiência do usuário e SEO, quanto mais rápido o site carrega mais fácil torna-se a visita do usuário.

Outro fator importante são os usuários mobile, eles não possuem uma experiência totalmente imersiva em relação aos usuários desktop. Para isso utilize imagens responsivas para salvar segundos no carregamento da página que são cruciais para usuários mobile.

O uso de imagens corretas ajudam no tempo de carregamento, e o Google adora imagens otimizadas a única recomendação referente ao tamanho da imagem é possui uma imagem com mais de 1200 pixel caso você queira aparecer no Google Discover.

Otimize o tamanho do arquivo

Além de utilizar a escala a imagem no tamanho correto, podemos reduzir ainda mais os KB’s das nossas imagens sem ficar longe do resultado original. Primeiro passo é reduzir EXIF data das nossas imagens, também podemos utilizar ferramentas como ImageOptim ou sites como Squoosh.app ou TinyPNG.

Podemos analisar o desempenho das nossas imagens com ferramentas como Web Page Test e PageSpeed Test.

Adicionando a imagem ao nosso artigo

Depois das etapas de otimização da imagem, vamos adicionar a nossa imagem ao conteúdo. Primeiramente o conteúdo deve estar situado num parágrafo que remete a imagem, a imagem deve fazer parte do contexto.

Legendas

As legendas das imagens devem ser um conteúdo que complementa a imagem. Porque isso é importante para o SEO da imagem? Pessoas usam um texto para “scannear” o artigo, depois dos cabeçalhos elas olham para as legendas das imagens como um scanner.

Nilsen em 1997 escreveu na sua pesquisa fala sobre os elementos que melhoram a leitura do texto, cabeçalhos, fonts largas, texto em negrito, texto destacados, listas, gráficos e legendas. Em 2012 uma pesquisa publicada pela KissMetric, fala que legendas das imagens são lidas 300% a mais que o corpo dos textos, por isso não usá-las ou fazer o mau uso delas, significa jogar fora uma grande oportunidade de engajar os leitores.

Propriedades Alt e title

O texto alt ou texto alternativo imagem é adicionado para criar uma descrição alternativa da imagem, por questões de acessibilidade. Tenha certeza que texto possua alguma keyword de SEO no seu conteúdo e relação ao conteúdo do post.

Na documentação do Google, temos as seguintes recomendações utilizarem o atributo alt da imagem, como uma palavra-chave ou uma descrição.

Por exemplo, a seguinte imagem:

Dog da praia
<img src="cachorro-na-praia.jpg" alt="cachorro"/>
Code language: HTML, XML (xml)

Ou

<img src="cachorro-na-praia.jpg" alt="cachorro na praia com óculos de sol e chapeu"/>
Code language: HTML, XML (xml)

OpenGraph

Use a imagem correta no HEAD do seu HTML com a meta tags do Facebook “og:image”, isto irá garantir que estará usando a imagem correta nas interações com o Facebook o OpenGraph também é usado para o Pinterest. O plugin do Yoast SEO possui uma sessão de social onde você pode definir que imagem será usada. A qualidade da imagem será importante, quanto maior a qualidade mais fácil será para estas ferramentas trabalharem com sua imagem, para verificar como o Facebook está lendo seu site pode utilizar o Facebook Debugger. O Plugin do Yoast também dá suporte aos cards do Twitter.

sitemap.xml de imagens

Se você é um desenvolvedor web, você pode se perguntar sobre sitemaps para imagens, o Google é bastante claro sobre isso:

“Para dar ao Google informações sobre as imagens no seu site você vai precisar adicionar tags específicas de imagem a um sitemap. Você pode listar separadamente as imagens, ou você pode adicionar a um sitemap já existente. Use o método que funciona melhor para você.”

O plugin do Yoast não gera um sitemap para imagens, mas em seus posts eles adicionam no sitemap do post a lista de imagens presentes, adicionar imagens ao sitemap ajudo o Google indexar suas imagens facilmente.

Resumo

SEO para imagens é uma soma de uma série de elementos, o Google cada dia está reconhecendo melhor estes elementos nas imagens, faz sentido garantir que imagem e todos os elementos apresentados contribuem na experiência do usuário, então tome nota disso para entregar uma experiência melhor e não apenas tentar rankear melhor no Google.

Tome nota dos seguintes pontos

  • Use imagens relevantes ao texto
  • Aplique o nome correto a imagem
  • Tenha certeza de utilizar as dimensões corretas das imagens
  • Otimize as suas imagens
  • Adicione legenda a suas imagens
  • Use alt, o title é opcional
  • Adicione OpenGraph e Twitter Card
  • Use imagens no seu XML sitemap

Se gostou dessas dicas e quer conferir mais conteúdo sobre SEO e WordPress confira a página da categoria.

Por Fellyph Cintra

Fellyph Cintra é um Google Developer Expert focado em tecnologias web, com participação ativa na comunidade WordPress. Com mais de 14 anos de experiência no mercado, Fellyph já palestrou em mais de 30 eventos ao redor do Brasil e Europa, sempre abordando as boas práticas de desenvolvimento na web.

Deixe um comentário

O seu endereço de e-mail não será publicado.