Modelo de SEO de imagens e texto alternativo

Nomes de arquivo descritivos

Renomeie os arquivos de imagem antes do upload para que descrevam o assunto e ajudem a busca por imagens.

Nomeie os arquivos antes de fazer o upload

Os motores de busca leem o nome do arquivo como um sinal do que a imagem mostra, e um nome claro é mais fácil de gerenciar na sua biblioteca de mídia. Substitua padrões de câmera como [IMG_4827.jpg] por uma descrição curta e legível por humanos.

• Descreva o assunto: [cadeira-de-escritorio-couro-vermelho.jpg], não uma sequência aleatória.
• Use hifens entre as palavras; evite espaços, sublinhados e caracteres especiais.
• Mantenha em minúsculas para consistência entre servidores.
• Seja conciso: algumas palavras significativas superam uma longa cadeia de palavras-chave.

Não encha de palavras-chave nem repita a mesma frase em todos os arquivos. Nomeie cada imagem pelo que ela realmente retrata para que o nome permaneça preciso e útil.

Verificação rápida: Alguém conseguiria adivinhar a imagem só pelo nome do arquivo? Se sim, você terminou. Para um lote de fotos parecidas, acrescente um detalhe distintivo, como cor, ângulo ou modelo: [nome-do-produto-vista-frontal.jpg] e [nome-do-produto-vista-lateral.jpg].

Texto alternativo (acessibilidade em primeiro lugar)

Escreva atributos alt que descrevam imagens para usuários de leitores de tela e para os motores de busca.

Escreva o texto alternativo pensando primeiro nas pessoas

O texto alternativo existe principalmente para a acessibilidade: ele é lido em voz alta por leitores de tela e exibido quando uma imagem não carrega. Descreva o que a imagem transmite em linguagem simples, como se estivesse explicando a alguém que não pode vê-la.

• Seja específico e conciso: [uma barista despejando latte art em uma xícara branca], cerca de uma frase curta.
• Transmita o propósito: descreva por que a imagem está ali, não apenas seus detalhes visuais.
• Dispense o supérfluo: não comece com [imagem de] ou [foto de]; a tecnologia já anuncia que é uma imagem.
• Não encha de palavras-chave: uma menção natural a um termo relevante está ok; uma lista de palavras-chave prejudica a acessibilidade.

Para imagens puramente decorativas que não acrescentam informação, use um alt vazio ([alt=""]) para que os leitores de tela as ignorem. Se a imagem também for um link, o texto alternativo deve descrever o destino ou a ação do link.

Dica: Se uma legenda já descreve totalmente a imagem, mantenha o alt breve para não repetir as mesmas palavras duas vezes.

Compressão e formatos modernos (WebP/AVIF)

Reduza o tamanho do arquivo e mude para formatos modernos para melhorar o tempo de carregamento e o LCP.

Comprima e modernize cada imagem

Imagens grandes deixam as páginas lentas e podem prejudicar seu Largest Contentful Paint. Reduza o tamanho do arquivo antes do upload e sirva formatos modernos que comprimem muito melhor que os antigos com qualidade semelhante.

• Escolha o formato certo: AVIF ou WebP para fotos e a maioria dos gráficos; SVG para logotipos e ícones simples; mantenha PNG apenas quando precisar de transparência ou texto nítido.
• Redimensione para o tamanho de exibição: não envie um arquivo de [4000px] para um espaço de [800px].
• Comprima com bom senso: busque o menor arquivo que ainda pareça limpo; teste alguns níveis de qualidade e compare.
• Ofereça alternativas: use o elemento picture para oferecer AVIF ou WebP com um fallback JPEG para navegadores antigos.

Fluxo de trabalho: exporte nas dimensões corretas, passe o arquivo por uma ferramenta de compressão e depois confirme que ele parece nítido em uma tela de alta resolução. Para a imagem principal ou de destaque, priorize um carregamento rápido, pois costuma ser o elemento LCP da página.

Imagens responsivas e carregamento lento

Sirva o tamanho certo por dispositivo e adie imagens fora da tela para acelerar o carregamento.

Dimensione corretamente e adie as imagens

A marcação responsiva permite que o navegador escolha o melhor arquivo para cada tela, enquanto o carregamento lento adia as imagens até as quais o visitante ainda não rolou. Juntos, eles cortam bytes desperdiçados e aceleram a renderização inicial.

• Use srcset e sizes: forneça várias larguras para que os celulares baixem arquivos pequenos e as telas grandes recebam imagens nítidas.
• Defina width e height: adicione dimensões explícitas (ou aspect-ratio) para reservar espaço e evitar deslocamento de layout.
• Carregue de forma lenta abaixo da dobra: adicione [loading="lazy"] às imagens que começam fora da tela.
• NÃO use carregamento lento na imagem LCP: a imagem principal ou de destaque acima da dobra deve carregar imediatamente; em vez disso, marque-a como alta prioridade.

Por que isso importa: adiar imagens fora da tela libera banda para o que aparece primeiro. Reservar espaço com dimensões definidas evita que o conteúdo pule à medida que as imagens chegam, o que protege seu Cumulative Layout Shift e a experiência de leitura.

Legendas, contexto ao redor e sitemaps de imagens

Reforce a relevância das imagens com contexto na página e ajude os rastreadores a descobrir imagens.

Adicione contexto e facilite a descoberta

Os motores de busca leem o texto ao redor de uma imagem, a legenda e o título da página para entendê-la. Um contexto forte, aliado a um sitemap de imagens, torna seus visuais mais fáceis de interpretar e encontrar.

• Adicione legendas quando forem úteis: as legendas são lidas com mais frequência que o corpo do texto, então use-as em figuras, gráficos e fotos de produtos.
• Posicione as imagens perto do texto relevante: coloque cada imagem ao lado do parágrafo que ela ilustra.
• Use o elemento figure: envolva uma imagem e sua figcaption juntas para uma estrutura clara e semântica.
• Liste as imagens em um sitemap: inclua entradas de imagem (ou um sitemap de imagens dedicado) para que os rastreadores descubram gráficos carregados por scripts ou galerias.

Aplique: para a imagem em [URL da página], escreva uma legenda que acrescente informação em vez de repetir o texto alternativo, e certifique-se de que o título e o texto próximos mencionem o mesmo assunto. Depois, confirme que o arquivo aparece no seu sitemap XML.

Dados estruturados de imagem e licenciamento

Marque as imagens para que possam aparecer com resultados avançados e licenciamento claro.

Marque e licencie suas imagens

Os dados estruturados informam aos motores de busca o papel e a propriedade de uma imagem, o que pode desbloquear resultados de imagem mais ricos e um selo de licenciável. Adicione-os onde os direitos ou o contexto da imagem importam, como páginas de produto, receita ou artigo.

• Use o schema certo: referencie URLs de imagem de alta resolução na sua marcação Product, Recipe, Article ou ImageObject.
• Forneça imagens grandes e rastreáveis: os dados estruturados devem apontar para imagens que não estejam bloqueadas e atendam às diretrizes mínimas de tamanho.
• Adicione metadados de licenciamento: inclua [license] e [acquireLicensePage] no ImageObject para que os termos de uso fiquem claros.
• Mantenha os metadados honestos: os campos de crédito ([creator]) e direitos autorais devem corresponder à página e aos direitos reais da imagem.

Valide antes de publicar: teste sua marcação com um validador de dados estruturados, corrija os erros e confirme que a imagem referenciada carrega. Campos de licenciamento precisos ajudam seu trabalho a aparecer corretamente e protegem a forma como ele é reutilizado.

O que faz um bom texto alternativo?

Um bom texto alternativo descreve de forma concisa o que a imagem mostra e por que está na página, em linguagem simples que um leitor de tela possa anunciar. Mantenha-o em cerca de uma frase, dispense expressões como "imagem de" e mencione um termo relevante apenas se ele se encaixar naturalmente. O objetivo é a acessibilidade, não a densidade de palavras-chave.

Quando devo usar texto alternativo vazio (alt="")?

Use um atributo alt vazio para imagens puramente decorativas que não acrescentam informação, como enfeites de fundo, espaçadores ou ícones ao lado de um texto que já diz a mesma coisa. O alt vazio orienta os leitores de tela a ignorar a imagem. Reserve o texto alternativo descritivo para imagens que carregam significado.

Qual formato de imagem devo usar para velocidade?

Para a maioria das fotos e gráficos, AVIF ou WebP oferecem os menores arquivos com boa qualidade, sendo os melhores para a velocidade da página. Use SVG para logotipos e ícones simples e mantenha o PNG principalmente para transparência ou texto nítido. Sirva um fallback JPEG pelo elemento picture para navegadores antigos.

Devo usar carregamento lento em todas as minhas imagens?

Não. Use carregamento lento nas imagens que começam abaixo da dobra para que o navegador não as baixe até serem necessárias. Não use carregamento lento na imagem principal ou de destaque acima da dobra, pois ela costuma ser seu elemento LCP e atrasá-la torna o carregamento percebido mais lento. Carregue essa imediatamente e com alta prioridade.

Nomes de arquivo descritivos realmente ajudam no SEO?

Eles ajudam os motores de busca e a busca por imagens a entender o que um arquivo retrata e tornam sua biblioteca de mídia mais fácil de gerenciar. Use nomes curtos, em minúsculas e separados por hifens que descrevam o assunto. São um sinal de apoio entre muitos, então combine-os com um texto alternativo forte e contexto ao redor, em vez de depender apenas dos nomes de arquivo.

Como os motores de busca encontram minhas imagens?

Os rastreadores descobrem imagens seguindo seu HTML, lendo o texto ao redor e as legendas e analisando seu sitemap. Listar imagens em um sitemap XML (ou um sitemap de imagens dedicado) ajuda a exibir visuais carregados por scripts ou galerias. Garanta que as imagens não estejam bloqueadas por regras do robots e estejam posicionadas perto de conteúdo relevante na página.