Alt Text para Imagens e Vídeos: Porque é Essencial para SEO e Acessibilidade na Tua Loja Online

O que é o texto alternativo e onde é que ele aparece

O texto alternativo é uma descrição curta que fica associada a uma imagem. Quando a imagem não carrega, quando alguém usa um screen reader ou quando um motor de busca tenta perceber o que está naquela imagem, é este texto que dá contexto.

Pensa no texto alternativo como uma frase que responde a esta pergunta: se eu não pudesse ver a imagem, o que é que precisava de saber para perceber a informação principal?

• Em páginas de produto: ajuda a descrever fotos e vídeos do artigo, variações, detalhes e contexto.
• Em categorias e colecções: descreve imagens de destaque e elementos visuais que orientam o cliente.
• Em banners, galerias e slideshows: explica a mensagem de uma campanha, especialmente quando a imagem transmite informação.

Porque é que o texto alternativo é importante para SEO (e não só para o Google Images)

O Google não “vê” imagens como tu. Ele interpreta sinais: o nome do ficheiro, o contexto do texto à volta, a legenda, e o alt text. Quando essa descrição é boa, aumentas a probabilidade de:

• Seres indexado de forma mais correcta: o motor de busca entende melhor o tema da página e a relevância do conteúdo visual.
• Apareceres no Google Images: para muitos nichos, isto é tráfego com intenção alta, pessoas que estão a comparar modelos e detalhes.
• Reduzires ambiguidade: imagens genéricas, sem descrição, são oportunidades desperdiçadas.

Importante: bom texto alternativo não é “enfiar palavras-chave”. É alinhar descrição com intenção de pesquisa, de forma natural. Se ainda estás a estruturar a tua estratégia, começa por perceber como fazer pesquisa e aplicação de palavras-chave para SEO em lojas online, depois usa o texto alternativo como uma extensão desse trabalho.

Porque é que o texto alternativo é essencial para acessibilidade (e para uma experiência mais justa)

Uma loja online acessível é uma loja onde mais pessoas conseguem comprar sem fricção. Para clientes com baixa visão ou cegueira, o texto alternativo é muitas vezes a diferença entre “percebo o que estou a comprar” e “isto é um salto no escuro”.

As WCAG incluem o princípio de que conteúdo não textual deve ter uma alternativa em texto. Não é um detalhe estético, é um requisito básico para que a informação seja percebida. Podes ler a explicação oficial do critério 1.1.1 Non-text Content.

Em Portugal, também tens boas recomendações práticas, em português, sobre como descrever imagens no portal acessibilidade.gov.pt.

Há ainda um motivo extra para levares isto a sério: a acessibilidade está cada vez mais presente em obrigações e expectativas no digital, incluindo na UE. Sem fazer “terror legal”, pensa assim: se a tua loja é fácil de usar para mais pessoas, vendes mais e tens menos suporte a apagar fogos.

E vídeos? O que é que “texto alternativo” significa num vídeo

Em HTML, o atributo alt é um conceito típico de imagens. Mas em lojas online, quando falamos de texto alternativo para vídeos, estamos quase sempre a falar de equivalentes em texto que ajudam no mesmo objectivo: dar contexto e tornar o conteúdo mais acessível e interpretável.

• Miniatura do vídeo: muitas lojas usam uma imagem como thumbnail do vídeo. Essa imagem deve ter texto alternativo, porque é ela que o cliente “vê” primeiro.
• Descrição do vídeo: uma frase curta sobre o que o vídeo mostra e para que serve, por exemplo “vídeo a mostrar o casaco vestido, vista frontal e lateral”.
• Legendas e transcrição: para vídeos com fala, as legendas e uma transcrição melhoram acessibilidade e ajudam a indexação do conteúdo.

Regra prática: se o vídeo for só decorativo, não precisas de inventar uma descrição longa. Se ele explica algo importante, então a alternativa em texto deve capturar essa informação.

Como escrever bom texto alternativo na prática (para produtos, categorias e banners)

O objectivo é ser claro, específico e útil. Nem mais, nem menos. Estas regras ajudam-te a acertar quase sempre:

• Descreve o essencial primeiro: o que é, cor, material, padrão, contexto, se isso for relevante para a decisão de compra.
• Usa linguagem natural: escreve como se estivesses a explicar a imagem a um amigo.
• Evita repetir o que já está óbvio no texto ao lado: o texto alternativo complementa, não duplica.
• Inclui a palavra-chave só quando faz sentido: se for um “vestido midi de linho azul”, isso é descrição, não truque.
• Não inventes: se não tens a certeza de um detalhe, não o cries.

Exemplos rápidos:

• Produto: “Ténis brancos minimalistas em pele, vista lateral, com sola bege”.
• Detalhe: “Close-up do tecido de linho cru, textura visível e costura reforçada”.
• Categoria: “Prateleira com velas aromáticas em frascos de vidro, em tons neutros”.
• Banner de campanha: “Modelo a usar um casaco impermeável cinzento, a caminhar à chuva, campanha de meia-estação”.

Casos especiais: imagens decorativas, ícones, infográficos e fotos com texto

Nem todas as imagens precisam de uma descrição “bonita”. Precisam de uma descrição adequada ao papel que têm na página. É aqui que muitas lojas escorregam, porque tratam tudo da mesma forma.

• Imagens decorativas: padrões, separadores, elementos só para estilo. Se não transmitem informação, não devem interromper a leitura de quem usa um screen reader. Nestes casos, o ideal é não “inventar” texto e, tecnicamente, usar texto alternativo vazio.
• Ícones com significado: se um ícone substitui texto (por exemplo, um ícone de camião para “envio”), então precisa de um equivalente em texto, ou de um rótulo acessível.
• Infográficos e tabelas em imagem: se a informação está dentro da imagem, o texto alternativo raramente chega. Aqui, a melhor prática é teres também a informação em texto visível, na página, e usar o texto alternativo como resumo.
• Fotos com texto embutido: promoções, slogans, percentagens. Se o texto é importante para a mensagem, deve estar no texto alternativo e, idealmente, também em texto real no HTML, para não dependeres da imagem.

Exemplos completos de texto alternativo para lojas online (prontos para adaptares)

Quando estás a escrever muitos textos alternativos, ter um “molde” ajuda. Podes usar esta fórmula e ajustar consoante o tipo de imagem:

• Produto em fundo neutro: “tipo de produto + cor + material + vista (frontal/lateral) + detalhe distintivo”.
• Produto em contexto: “produto + como está a ser usado + cenário + detalhe que influencia a decisão”.
• Antes/depois ou comparação: “comparação entre X e Y + o que muda + porquê”.

Mais exemplos:

• Moda: “Vestido midi em linho azul, modelo a vestir, vista frontal, com cinto na cintura”.
• Beleza: “Frasco de sérum facial com conta-gotas, rótulo minimalista, em fundo branco”.
• Casa: “Candeeiro de mesa em cerâmica branca, ligado, luz quente, em mesa de cabeceira”.
• Alimentação: “Caixa com 6 chocolates artesanais, vistos de cima, com diferentes coberturas”.
• Joalharia: “Anel dourado com pedra oval verde, close-up, textura polida”.
• Banner: “Conjunto de produtos de skincare em tons neutros, campanha de oferta na segunda unidade”.
• Categoria: “Estante com cadernos e canetas, a representar a categoria papelaria”.

Se queres aplicar isto com consistência em toda a tua loja, garante que tens um processo simples para carregar e organizar os teus ficheiros. Este artigo de suporte sobre como carregar ficheiros multimédia na tua loja online dá-te o passo a passo.

Erros comuns de texto alternativo (e como corrigir sem drama)

Se só fizeres uma coisa hoje, faz isto: passa pelas tuas imagens principais e corrige estes erros clássicos.

• Nomes de ficheiro como descrição: “IMG_9383.jpg” não ajuda ninguém. Corrige para uma descrição humana.
• Descrições vagas: “produto”, “imagem”, “banner”. Troca por algo específico.
• Keyword stuffing: repetir “ténis brancos baratos” cinco vezes não melhora o ranking, só piora a qualidade.
• Texto alternativo demasiado longo: se precisas de um parágrafo, talvez seja um caso para legenda visível ou descrição mais completa noutro sítio.
• Imagens decorativas com texto alternativo inútil: padrões, separadores ou ícones que não acrescentam informação podem ter texto alternativo vazio, para não poluir a leitura.

Checklist rápido para aplicares já na tua loja

• Começa pelo que vende: imagens de produto, imagens de variação, e primeira imagem de cada categoria.
• Normaliza um padrão: “tipo + cor + material + detalhe”, por exemplo.
• Revê banners e campanhas: se a imagem comunica uma promessa, a descrição deve reflectir essa mensagem.
• Testa com um leitor de ecrã: mesmo que seja só para perceberes o fluxo. Vais aprender rápido.
• Não te esqueças de performance: imagens bem trabalhadas também pedem boa optimização. Este artigo sobre aspetos de SEO e performance da loja online dá-te um bom mapa.

Implementação moderna: como escalar texto alternativo sem perder controlo

Se tens 20 produtos, fazer texto alternativo manualmente é chato mas possível. Se tens 200, passa a ser um projecto. E se tens 2000, ou tens processo, ou isto nunca vai acontecer.

A abordagem mais inteligente é combinar duas coisas: automação para ganhar velocidade e revisão para garantir qualidade. Na prática, fazes uma primeira versão para tudo, depois ajustas as imagens mais importantes e as que trazem mais tráfego.

Na Shopkit, já podes gerir texto alternativo para imagens e vídeos na biblioteca de Multimédia, no mesmo sítio onde geres os teus ficheiros. E existe também a opção de o texto alternativo ser gerado automaticamente por IA, na língua da tua loja, como ponto de partida que podes editar quando quiseres. Se quiseres ver o anúncio técnico desta melhoria, tens aqui: Texto alternativo para imagens e vídeos.

Conclusão: o texto alternativo é um detalhe que dá resultados

O texto alternativo é daqueles trabalhos invisíveis que parecem “mais uma tarefa”, até ao dia em que percebes que ele melhora duas coisas ao mesmo tempo: descoberta (SEO) e experiência (acessibilidade). Se quiseres um plano simples, lembra-te disto:

Lê também: Redirects de URL: como preservar o SEO da loja online.

• Descreve com intenção: claro, específico, sem truques.
• Começa pelo essencial: imagens que vendem e que trazem tráfego.
• Escala com processo: automação primeiro, optimização depois.