A otimização de imagens de um site é a oportunidade de conseguir gerar uma grande quantidade de tráfego orgânico. Muitas vezes é uma estratégia inicial excelente para um bom posicionamento em palavras-chave muito concorridas. Neste artigo, você vai aprender o que há de mais importante em SEO para imagens. Ao final, temos 6 dicas para a criação da imagem perfeita.

Use uma imagem

Se pudéssemos resumir este post em dois argumentos, um deles é: use pelo menos uma imagem para cada artigo que você produza. Ilustrar o conteúdo do seu site de forma adequada, torna a leitura mais interessante, mais didática e mais confortável. Alguns estudos apontam um ganho imediato de 20% no tempo de permanência do usuário na página ao adicionar figuras e vídeos.

Vá além. Não inclua em seus textos imagens de banco que você encontra na maioria dos sites por aí. Na medida do possível, procure produzir suas próprias figuras ou pelo menos personalize-as para que sejam únicas. Exclusividade de conteúdo gera credibilidade e ajuda a construir autoridade no segmento. E sim, as imagens fazem parte disso. Os usuários amam infográficos e figuras que vem para somar ao conteúdo.

SEO para imagens

O segundo argumento é: otimize sua imagem. É possível que praticamente todo e qualquer conteúdo presente no seu site seja capaz de gerar tráfego orgânico, mas isso requer um esforço adicional e é aí que está a diferença, pois boa parte dos produtores de conteúdo não fazem nem o básico.

Pense comigo, você está em seu computador, em busca da imagem perfeita para aquela foto de família de final do ano e se depara com uma pasta com duas mil e trezentas imagens com nomes que vão de “DSC000001” a “DSC002300”. Sua única opção é olhar foto a foto.

A essência de SEO para imagens de um site é exatamente essa, favorecer a compreensão dos buscadores, já que eles não têm condição de interpretar este conteúdo, afim de angariar tráfego orgânico. Vamos ver os fatores que influenciam o posicionamento das imagens no Google.

O Google modifica a maneira com que exibe os resultados de busca a todo momento, na tentativa de exibir os melhores resultados de acordo com o tipo de pesquisa. Você já deve ter notado, que dependendo dos termos que você utiliza os resultados podem aparecer de diferentes formas, apresentando vídeos, mapas e imagens. Muitas vezes, aparecem até mesmo antes do primeiro resultado. Dar atenção ao conteúdo visual do seu site, não significa estar limitado a pesquisa no Google Imagens, existe uma grande chance de ver suas figuras logo na primeira página.

O que é o atributo alt?

O atributo alt é utilizado em códigos HTML, responsáveis pela criação de páginas web, com o objetivo de atribuir um texto alternativo a imagem, se, por algum motivo, ela não seja carregada ou caso o site esteja sendo visto por um screen reader (leitor de tela, muito utilizado para acessibilidade a deficientes visuais).

O fato é que o próprio Google já se posicionou oficialmente, afirmando que o conteúdo presente neste atributo é lido pelos crawlers e utilizado como uma das informações principais para que o buscador saiba do que a figura se trata.

Sintaxe do atributo alt para a marcação :

Vamos ver um exemplo prático. Na imagem abaixo, temos a ilustração de um navegador.

Uma boa maneira de representá-la através do texto alternativo é:

Como você pode ver, acrescentamos mais algumas informações como as dimensões da imagem e o atributo source , responsável por indicar a localização do arquivo que será carregado.

Alt text vs image title

Vários webmasters utilizam o mesmo conteúdo e entendem que os dois atributos têm o mesmo objetivo. Existe uma grande discussão em torno do assunto e bastante informação nos fóruns para webmasters do Google.

Como o próprio nome já diz image title, refere-se ao título da imagem e a regra aqui é a mesma ao escrever títulos para artigos:

• Curtos
• Relevantes
• Atrativos

Existe uma certa confusão em relação ao tooltip (nome utilizado para descrever o efeito ao realizar a ação de posicionar o mouse sobre a imagem). Navegadores antigos, como o Internet Explorer e anteriores renderizavam incorretamente o texto que vem do alt e não do title.

Agora que você já sabe a diferença, vamos a algumas recomendações:

• As duas tags são consideradas relevantes para os usuários e buscadores, entretanto, textos alt são considerados mais relevantes.
• Para melhores resultados utilize ambos, incluindo palavras-chave relevantes. Procure utilizar sinônimos, a repetição de palavras pode ser considerada keyword stuffing (prática de incluir a mesma palavra várias vezes na tentativa de distorcer os resultados de busca).
  
  

Atributo longdesc

Quando você tem uma imagem complexa, incapaz de ser totalmente descrita através de title e alt, você deve utilizar o atributo longdesc (long description, ou em português “descrição longa”). Em outras palavras, deve ser utilizado como complemento da tag alt, mas nunca como um substituto.

Através de um valor (conteúdo recebido pelo atributo), o longdesc atribui um link a imagem para uma nova URL (página) com a definição completa. Podendo ser escrito da seguinte forma:

Não há limite de caracteres.

Melhores práticas para SEO

Agora que você já conhece os principais atributos, vamos entender como utilizá-los da melhor forma, acompanhados de outras características que vão influenciar no posicionamento das imagens nos motores de busca.

Tamanho, qualidade e formato

O objetivo dos sites de busca é apresentar o resultado mais relevante no menor espaço de tempo. No conteúdo visual, o foco é o mesmo. Para isso, você precisa utilizar figuras que tenham boa qualidade (visualmente e em pixels).

O Google consegue ler vários dos formatos de imagem, entretanto, procure não fugir dos populares: JPG, PNG, BMP e GIF.

Existe uma iniciativa anunciada pelo Google chamada de AMP Project (Accelerated Mobile Pages – Páginas Móveis Aceleradas) que visa otimizar os sites para dispositivos móveis de forma que o carregamento da página seja quase imediato. O que indica que o gigante das buscas tende a priorizar sites com o carregamento mais rápido e deve fazer o mesmo (se ainda não faz) com as figuras apresentadas nos resultados de busca. Por isso recomendamos que deixe suas imagens o mais leve possível, sem prejudicar a qualidade.

Dica: geralmente o formato JPG apresenta um benefício maior, pois consegue comprimir imagens sem grande perda de qualidade.

Diminua o peso das imagens

Uma boa sacada é encontrar uma forma de incluir imagens mais leves nas suas páginas, mas de forma que não prejudique o seu fluxo de trabalho. Um site que pode ajudar nisso é o TinyPNG. Apesar do nome levar apenas PNG, você também pode comprimir imagens JPEG com reduções capazes de ultrapassar os 70%. O site possibilita o upload de até 20 imagens com no máximo 5mb cada na versão gratuita. Como são poucos os artigos que levam mais de 20 figuras, é bem provável que a versão grátis seja suficiente para a maioria dos casos.

Se você quer automatizar ainda mais o processo, aí vão mais três dicas:

Plugin para Photoshop

Através do site, você pode baixar um plugin para Photoshop (pago, no valor U$ 50). Isso vai possibilitar que você exporte imagens já otimizadas pelo algoritmo de compressão do TinyPNG.

Plugin para Wordpress

Para os usuários de Wordpress, você pode baixar e instalar o plugin Compress JPEG & PNG images. As novas imagens passarão por compressão automática. No caso das antigas, você pode configurar e submeter as imagens para compressão em bulk action ou ações em massa.

Extensão para Magento

Se o seu caso é uma loja virtual baseada na plataforma Magento, a extensão tinify vai facilitar bastante as coisas. Sabemos que em lojas virtuais são centenas de imagem e automatizar processos como este pode enconomizar minutos preciosos do seu dia a dia.

Utilize o cache do servidor

É possível melhorar ainda mais a performance do seu site otimizando o carregamento das imagens. Uma excelente maneira de fazer isso é através da configuração de cache no servidor, particularmente adicionando algumas especificações ao seu arquivo .htaccess. Você pode encontrar este arquivo na pasta raiz do servidor e abrir através de qualquer editor de texto.

O primeiro passo é habilitar as datas de expiração, caso ainda não estejam ativadas. Para isso, adicione:

ExpiresActive On

Feito isso, basta adicionar informações referentes aos diversos tipos de imagens como ícones e arquivos em formatos JPG, PNG e GIF. Ficando da seguinte forma:

   ExpiresByType image/gif "access plus 1 month"
   ExpiresByType image/png "access plus 1 month"
   ExpiresByType image/jpg "access plus 1 month"
   ExpiresByType image/jpeg "access plus 1 month"

Nome do arquivo

Estamos sempre buscando otimizar nosso tempo, automatizando tarefas e utilizando ferramentas para executá-las o mais rápido possível. Entretanto, muita gente confunde produtividade com pressa e isso acaba gerando um erro básico, mas muito comum: não nomear as imagens.

Como apresentamos no início deste artigo, nomes como “DSC0001” não representam absolutamente nada e nomear as imagens é fundamental para complementar outras informações como alt e title. Parece óbvio, mas se você tem uma imagem chamada “tigela-acai-banana.jpg” o Google entende que aquele arquivo se trata de uma tigela de açaí com banana. Além disso, priorize o hífen como separador de palavras.

Texto alt

Escreva textos alternativos relevantes e condizentes com o que a figura retrata, evitando keyword stuffing e stop words (de, para, com, entre outros). Procure limitar-se a 5 palavras, caso não seja possível, sem problemas! Apenas seja breve e retrate de forma adequada.

Relacione com o conteúdo

Adicione figuras que representem trechos de conteúdo. Tão importante quanto fazer isso é posicionar cada imagem o mais próximo possível da parte do texto que ela está ilustrando. É conhecido que os crawlers do Google utilizam as informações presentes no texto para atribuir valor a imagem perante o contexto que ela se encaixa e, quanto mais distante, menos importância terá para os robôs de busca.

Dica: no caso de imagens decorativas, que façam parte apenas do visual do site, a recomendação do W3C é deixar o atributo alt em branco (alt=””), mas melhor ainda é utilizar list-style-image no CSS.

Rich Snippets - Dados estruturados para imagens

A marcação de dados estruturado, ou Rich Snippets, é utilizada para atribuir valor semântico a vários elementos globais do HTML. Isso faz com que o Google compreenda melhor vários dos conteúdos comuns em sites como imagens, vídeos, artigos, conteúdos médicos, receitas e centenas de outros itens. Vamos dar uma olhada e entender como isso funciona.

Destaque nas páginas de busca

Isso faz com que você se destaque perante os concorrentes arremate mais cliques, mesmo estando em uma colocação inferior.

Dê uma olhada neste vídeo do próprio Google realçando o uso da funcionalidade. Se necessário, o vídeo possui legenda em português que pode ser ativada clicando em Detalhes (engrenagem) > Legendas > Português (Brasil).

Tipos de marcação de dados

O Google aceita marcações em JSON-LD, Microdata e RDFA, todas seguindo as práticas do Schema.org. Aqui nós vamos utilizar Microdata como exemplo, mas fique à vontade para escolher o formato que se sinta mais confortável ou que se adeque melhor ao seu projeto.

Como foi exemplificado no vídeo, cada trecho específico que compõe o artigo deve receber uma marcação específica. Como o nosso foco aqui são as imagens, é delas que vamos tratar. A marcação base das imagens conta com os seguintes dados:

• Título (Image Heading)
• URL (Image URL)
• Autor (Author)
• Fotografado em (Photographed In)
• Data de Publicação (Data Published)
• Descrição da Imagem (Description of Image)

O código ficaria da seguinte forma:

 

Pôr-do-sol em Ribeirão

By: Rafael Costa
Photographed In: Ribeirão Preto, Brasil
Date Uploaded:2015-12-10
Description: Pôr-do-sol em uma linda chácara na cidade de Ribeirão Preto - SP, Brasil

 

Para testar se os dados e a marcação estão funcionando corretamente, você pode utiliza a ferramenta de teste de marcação de dados estruturados do Google. Ela aceita desde uma URL até o trecho específico de código que contém a marcação. Basta preencher um dos campos e clicar em validar. Se estiver ok, você receberá o retorno da ferramenta, destacando os campos marcados com uma mensagem “Está tudo bem”. Caso contrário, os erros serão apontados. Fique atento a hierarquia das propriedades inseridas, elas são responsáveis pela maioria dos erros apresentados.

Dica: Se você não é desenvolvedor e não tem muita intimidade com código, uma boa dica é utilizar a ferramenta de gerador de microdados para imagens. O site torna a criação muito prática, através do preenchimento de dados por campos separados para cada item, você submete um formulário que gera o código pronto, esperando apenas que você confirme se a marcação está ok através da ferramenta do Google.

Compartilhamento social em destaque

As redes sociais se tornaram uma das principais formas de comunicação de qualquer empresa, sendo muitas vezes a única. Por isso, é importante garantir que você tire o maior proveito possível de sua exposição social. Duas dessas formas são o Facebook Open Graph e o Twitter Cards.

Ao ativar as marcações corretamente, você garante que o compartilhamento dos artigos e das páginas do seu site sigam a estrutura correta em cada uma das redes, entendendo qual é o título, a imagem e a descrição que devem ser “puxadas” do site. Além disso, é possível otimizar as imagens, fazendo com que elas sejam exibidas em tamanho maior, conseguindo um destaque extra para o post.

Twitter Cards

As marcações são relativamente simples e devem ser feitas, adicionando ao seu HTML, algumas tags, posicionadas nodo site. A disposição das tags segue um padrão comum, recebendo um nome e um conteúdo.

Para fazer a marcação correta para os Cards, devemos inserir as seguintes informações:

• twitter:card:

  É o tipo de card que o Twitter deve exibir. Sim, existem vários e que podem ser conferidos na documentação oficial dos Cards. Se o seu site possuir imagens grandes, recomendo utilizar o summary_large_image, deixando suas imagens em tamanho grande, destacando-se perante as demais.

• twitter:creator:

  É o perfil do autor do artigo, representado pelo @nomedoperfildousuario.

• twitter: site:

  É o perfil do site na internet, também representado pelo @nomedoperfildosite.

• twitter:domain:

  Refere-se ao domínio do seu site.

• twitter:title:

  É o título que você quer que seja exibido no Twitter. Pode ou não receber o mesmo conteúdo da tag title.

• twitter:description:

  O conteúdo deve receber uma descrição de até 200 caracteres que será exibido no Card.

• og:image:

  É a tag para a imagem que será mostrada no Card.

Dessa forma, temos o seguinte resultado:

Para saber se tudo foi feito corretamente, você pode acessar o Twitter Card Validator e inserir a URL que recebeu a marcação e clicar em Preview card. Se estiver tudo ok, você receberá uma mensagem e um preview do Card será exibido.

Facebook Open Graph

Se você fez as marcações do Twitter, vai perceber que as duas são bem semelhantes. A diferença é que antes de começar você deve criar um aplicativo no Facebook, pois será necessário o App ID, que é gerado após a criação do aplicativo. Para fazer a marcação correta do Open Graph, você deve preencher os seguintes elementos:

• og:title:

  Deve receber o valor que ocupará o título do artigo.

• og:site_name:

  Deve receber o valor com o nome do site ou da empresa.

• og:url:

  Deve receber o valor com a URL do artigo ou da página.

• og:description:

  Deve receber o valor com a descrição do artigo ou da página.

• fb:app_id:

  Deve receber o valor do do App ID do Facebook.

• og:image:

  Deve receber o valor da imagem do artigo.

• og:type:

  Deve receber o valor referente ao tipo de contúdo, como por exemplo, artigo, perfil, livro, website, entre outros.

Dessa forma, temos o seguinte resultado:

O Facebook disponibiliza uma ferramenta chamada Open Graph Object Debugger na qual você pode inserir a URL e clicar em Debug. Será feita uma análise de todas as tags, além da apresentação de um preview de como o post será exibido.

6 dicas para a imagem perfeita

E pra fechar, veja abaixo 6 dicas rápidas para imagens perfeitas. Elas revisam o que vimos até agora e servem como um checklist para que você mantenha um alto padrão de qualidade com as figuras do seu site:

1. Utilize o formato JPG
2. Máximo de 200 kb
3. Mais de 1000 pixels (soma dos lados)
4. Utilize palavras-chave no atributo alt (máximo de 5)
5. Dê nome aos seus arquivos
6. Correlacione com o conteúdo

Por hoje é só, até a próxima! ;)