O que é alt text?
Alt text ou texto alternativo é o texto incluído no código HTML para descrever uma imagem em um site.
Ele ajuda os rastreadores de mecanismos de pesquisa a entenderem melhor o contexto da página, assim como os usuário que utilizam ferramentas para leitura de tela, como é o caso das pessoas com deficiência visual.
Veja um exemplo de alt text no código fonte de uma página:
E um exemplo de texto alternativo em HTML:
<img src="luminaria-teto.jpg"<b> alt="Luminária pendurada no teto com plantas ao redor</b>">
Por que o texto alternativo é importante para SEO de imagens?
As buscas do Google Imagens correspondem a 22,6% de todas as pesquisas feitas no site.
Isso faz com que as imagens sejam uma ferramenta poderosa para obter mais tráfego por meio de estratégias de SEO.
Como vimos, o Google lê o texto alternativo para entender as imagens. Sem alt text, elas têm muito menos chances de classificar para uma busca no Google Imagens. Afinal, os algoritmos do buscador não conseguem (ainda) entender o conteúdo de uma elemento visual sem essa “ajuda”.
O Google também costuma exibir imagens no topo dos resultados da pesquisa tradicional, mostrando-as antes dos links azuis na SERP:
Portanto, otimizar o texto alternativo de suas imagens pode gerar mais tráfego por meio das diferentes formas de pesquisa no Google.
Exemplos de alt text
Para que seja eficaz, o texto alternativo deve ser descritivo e usar um tom de voz natural. Pense em como você descreveria a imagem para alguém durante uma conversa.
Vamos ver alguns exemplos do que fazer e do que não fazer.
Começando por esta imagem de um tábua de frios:
Exemplo incorreto: alt=”ideias para café da manhã”
Exemplo ok: alt=”tábua de frios”
Exemplo bom: alt=”tábua de frios com frutas e embutidos”
Melhor exemplo: alt=”tábua de frios redonda com embutidos, queijo, bolachas, frutas e outros lanches coloridos”
O exemplo “ruim” aqui é segmentar uma palavra-chave específica (“ideias para café da manhã”) sem detalhar o que está na imagem. Por sua vez, os exemplos “ok” e “bom” fazem um trabalho melhor e são mais descritos.
No entanto, é último exemplo que fornece mais detalhes e contexto para a imagem.
Agora, veja esta foto tirada no Central Park, em Nova York:
Exemplo incorreto: alt=”ponte flores árvores parque verde”
Exemplo ok: alt=”Central Park”
Exemplo bom: alt=”ponte no Central Park”
Melhor exemplo: alt=”ponte no Central Park, em Nova York, cercada por árvores, flores e vegetação”
O exemplo “ruim” é uma lista de palavras, e não uma descrição propriamente dita. O “melhor exemplo”, por outro lado, inclui informações sobre o local específico, bem como o que é mostrado na imagem.
Por último, uma imagem dos Jogos Olímpicos de Pequim, em 2008:
Exemplo incorreto: alt=”medalha de ouro em evento esportivo”
Exemplo ok: alt=”atletismo”
Exemplo bom: alt=”atletismo nas olimpíadas”
Melhor exemplo: alt=”evento de atletismo nos Jogos Olímpicos de Pequim, em 2008″
Observe que todos os melhores exemplos são os mais descritivos possíveis, sem soarem como spam. E quando há um nome ou evento claro relacionado à imagem (como Central Park ou Jogos Olímpicos de Pequim), isso também ajuda.
Como otimizar o alt text para SEO
Vamos ver algumas regras básicas a serem seguidas para escrever o texto alternativo.
Como comentamos, um bom alt text é aquele que é descritivo sem parecer spam. No entanto, é possível otimizá-lo ainda mais pensando em SEO:
Escreva 125 caracteres ou menos
Ferramentas de leitura de tela e outras tecnologias de assistência geralmente deixam de ler o alt text a partir de 125 caracteres.
Por via das dúvidas, é melhor limitar o texto alternativo para que ele não seja cortado.
Inclua a palavra-chave principal
Isso pode parecer contra-intuitivo em relação ao que falamos até agora. No entanto, é uma boa ideia incluir a palavra-chave principal no texto alternativo, principalmente se ela ajudar a fornecer contexto para a página em que a imagem está insirida.
Vamos lembrar que o objetivo do alt text é fornecer informações e contexto adicionais sobre a imagem em questão, e a palavra-chave principal geralmente é útil nesse aspecto.
Para tornar a descrição mais natural, você também pode usar variações da sua palavra-chave principal.
Digamos que estamos escrevendo texto alternativo para esta imagem que aparece no post do nosso blog sobre link building:
Este post tem como alvo a palavra-chave “link building”, mas seria um pouco forçado inseri-la no atl text, porque a imagem é sobre um assunto mais específico.
Então, uma boa estratégia aqui poderia ser: “exemplos do que torna um link bom”.
Dessa forma, incluímos a palavra-chave parcial “link”, de forma que ela ainda é relevante tanto para a imagem quanto para a página como um todo.
Não utilize alt text em imagens “decorativas”
Embora o objetivo do texto alternativo seja fornecer o máximo de contexto possível para as imagens, existem algumas que não precisam de mais explicações.
Não há necessidade de incluir alt text para imagens “decorativas”, como quebras de linha ou o ícone de lupa em uma barra de pesquisa, por exemplo.
Aqueles que usam leitores de tela não precisam dessas imagens para entender a página, e o Google não precisa de mais informações ou um contexto adicional para classificar a página.
Não inclua “imagem de…” no alt text
Como mencionado, você tem apenas 125 caracteres para descrever sua imagem. Incluir expressões como “imagem de…” só faz com que você desperdice espaço, pois já está implícito para os usuários e o Google que se trata de uma imagem.
Vamos usar o exemplo desta luminária de chão para indicar o que não fazer e o que é recomendado na hora de descrever uma imagem:
❌ alt=”imagem de uma luminária de chão”
✅ alt=”luminária de chão moderna no canto de uma sala de estar mobiliada”
A segunda opção é mais direta, agrega informações e traz um contexto à imagem.
Não repita o texto da legenda
Não há motivo para incluir informações redundantes no texto alternativo. Se uma foto tiver uma legenda, em vez de repeti-la no alt text, trabalhe o contexto.
Exemplo de uma imagem de uma livraria famosa de Nova York com uma legenda hipotética:
❌ alt=”ponto da Union Square da Livraria Strand”
✅ alt=”Exterior da Livraria Strand com toldos vermelhos e pessoas passando em frente à vitrine”
O segundo texto alternativo é mais acessível – em vez de repetir a legenda, ele descreve o que realmente está na imagem.
Localize e corrija imagens sem alt text
Para verificar se está há alguma imagem sem texto alternativo no seu site, use a ferramenta Auditoria de site, da Semrush.
Para começar, clique no botão “Adicionar novo projeto” no canto superior direito.
Em seguida, adicione o domínio e o nome do seu site e clique em “Criar projeto”.
Siga as instruções para concluir a configuração e espere até que a auditoria seja finalizada.
Quando o relatório estiver pronto, acesse-o. Em seguida, clique na aba “Problemas”:
Você será direcionado para uma lista de erros e advertências. Filtre seus resultados procurando por “atributo alt” na barra de pesquisa. Isso mostrará quantas imagens estão sem o alt text:
Clique no link (“X imagens não possuem atributo alt”) para ver exatamente quais imagens estão causando o problema e que você deve corrigir.
Seu próximo passo é fazer login no seu CMS e adicionar o texto alternativo a todas essas imagens.
Depois de adicionar o alt text ausente, você pode executar novamente a Auditoria de site para que ela atualizar as alterações.