Agência W3MAlt text: como escrever o texto alternativo das imagens para SEO e acessibilidade
Geraldo JuniorFundador da Agência W3M · PUBLICADO
Quando se fala em SEO, todo mundo pensa em título, palavra-chave e velocidade. O texto alternativo das imagens, o alt text, quase sempre fica para depois. E é um dos ajustes mais simples de fazer direito.
É a descrição escrita de uma imagem, colocada no código da página. Ela é lida em voz alta por leitores de tela, aparece quando a imagem não carrega e ajuda o Google a entender o que a imagem mostra.
Por que o alt text importa
Para as pessoas. Quem tem deficiência visual navega com leitores de tela, que leem o alt em voz alta. Sem ele, a imagem vira um vazio na página.
Para o Google. O Google afirma que o texto alternativo é o atributo mais importante para dar informação sobre uma imagem, e que ele é usado junto com visão computacional e o conteúdo da página para entender o assunto dela. Se a imagem for um link, o alt ainda funciona como o texto desse link.
Como escrever um bom alt text
Descreva o que a imagem mostra, e o que ela significa naquela página. Imagine que você está lendo a página em voz alta, por telefone, para alguém que precisa entender o conteúdo. É o teste que o W3C, que cuida dos padrões da web, sugere.
Seja breve. O W3C recomenda a descrição mais concisa possível do propósito da imagem. Se precisar de muito texto, a explicação deve ir para o corpo da página ou para uma legenda.
Não comece com "imagem de" ou "foto de". O leitor de tela já avisa que é uma imagem, então essas palavras só atrasam a leitura.
Use a palavra-chave só quando ela descrever a imagem de verdade. O Google pede alt útil, informativo e no contexto da página, e alerta que excesso de palavra-chave nesse atributo prejudica a experiência e pode fazer o site ser visto como spam.
Veja o exemplo que o próprio Google dá, para a foto de um cachorro:
| Alt text | Avaliação |
|---|---|
| (sem alt) | Ruim |
| "filhotinho cachorrinho cãozinho filhotinhos ração barata..." | Ruim: excesso de palavra-chave |
| "filhote" | Melhor |
| "Cachorrinho Dálmata brincando de busca" | Muito melhor |
Dois cuidados que quase ninguém tem
Imagem decorativa leva alt vazio. Se a imagem não informa nada (um fundo, um ornamento), use alt="", sem espaço entre as aspas. Assim o leitor de tela pula a imagem em vez de ler algo sem sentido.
O nome do arquivo também conta, um pouco. O Google diz que o nome do arquivo dá pistas leves sobre o assunto da imagem. "fachada-loja-centro.jpg" é melhor que "IMG00023.JPG".
Como fica no código
<img src="equipe-atendimento.webp" alt="Equipe da loja atendendo uma cliente no balcão">
Por onde começar
- Liste as imagens das páginas mais importantes do site
- Para cada uma, pergunte: ela informa algo ou é decoração?
- Informativa: escreva uma descrição curta do que ela mostra naquela página
- Decorativa:
alt="" - Renomeie os arquivos com nomes descritivos quando for subir imagens novas
Alt text é uma peça pequena de algo maior: fazer o Google entender o seu site. O resto dessa conversa está no conteúdo sobre SEO técnico.
- Google Search Central, "Práticas recomendadas de SEO para o Imagens do Google": developers.google.com ↗
- W3C Web Accessibility Initiative, "Images Tutorial: Tips and Tricks": w3.org ↗
Quer que o Google entenda o seu site de ponta a ponta?
Do texto alternativo à velocidade e à indexação, a W3M cuida da base técnica que faz o seu site aparecer.
Fundador da Agência W3M, com mais de 15 anos em marketing digital. Une performance, inbound e comercial num único sistema e aplica IA no dia a dia dos negócios: automação de atendimento, qualificação de leads e análise de dados. Criador do XamiHub, o CRM da W3M que conecta aquisição, comercial e IA em um só lugar. Ajuda empresas a sair do achismo e montar uma operação de marketing e vendas previsível. LinkedIn ↗