Adicionar texto alternativo a imagens

Escreva descrições de imagem claras e concisas para ajudar seu SEO e tornar seu conteúdo mais acessível.

Ultima atualização 1 de Janeiro de 2025

Texto alternativo é aquele que você adiciona às imagens para deixá-las mais acessíveis aos visitantes. Como os buscadores também usam texto alternativo para identificar o conteúdo da imagem, ele é ótimo para a SEO do site. Em alguns locais, o nome do arquivo da imagem serve como texto alternativo se você não adicionar manualmente esse texto. No bloco de imagem e no layout automático, você precisa adicionar manualmente o texto alternativo. 

O texto alternativo também é útil para leitores de tela e browsers assistivos com imagens desativadas. Se o browser não mostrar a imagem, o texto alternativo poderá aparecer no lugar. O texto alternativo não precisa estar visível como texto simples na página para que o leitor de tela o leia. Ao adicionar texto alternativo, use termos curtos e fáceis de ler para descrever a imagem. Siga nossas dicas para deixar as imagens acessíveis.

Este guia mostra como adicionar texto alternativo às imagens do seu site, e imagens que incluem texto alternativo, automaticamente.

Assista a este vídeo

Práticas recomendadas para texto alternativo

Ao escrever o texto alternativo, lembre-se de que você está se dirigindo a pessoas que usam leitores de tela assistivos ou que têm imagens desativadas no browser. Lembre-se:

  • Seja descritivo e prestativo. Como você descreveria essa imagem para quem não a enxerga?
  • O texto deve ser curto, com doze palavras ou menos.
  • Para otimizar seus textos para as buscas, incorpore palavras-chave, mas sem excesso.
  • Use frases normais, não separe as palavras com hífens.
  • Você pode omitir palavras como "a" e "um", e termos como "foto" ou "imagem". Por exemplo, em vez de foto de um vaso verde, use vaso verde.

Nomes de arquivos de imagens

O nome do arquivo de uma imagem atua como texto alternativo se não houver nenhum outro texto alternativo adicionado, exceto nos blocos de imagem e layouts automáticos. Recomendamos seguir nossas recomendações para o texto alternativo ao criar o nome de arquivo das suas imagens.

Para trocar o nome do arquivo, atualize-o na biblioteca de ativos.

Dica

use apenas letras, números, sublinhados e hífenes nos nomes de arquivos.

O campo nome do arquivo no editor de Bloco de Imagens

Logo do site

O título do site serve como texto alternativo para o logotipo do site.

Blocos de Imagem

Você pode adicionar um texto alternativo de até 250 caracteres a qualquer layout de bloco de imagens. Se você não adicionar nenhum texto, a imagem ficará oculta a tecnologias assistivas, como o leitor de tela. A forma de adicionar um texto alternativo ao bloco de imagens depende da versão do site Squarespace.

  1. No editor do bloco de imagens, clique na aba Conteúdo.
  2. Vá para Texto alternativo da imagem e insira o texto alternativo no campo.
  3. O texto alternativo é salvo automaticamente.
  1. No editor de blocos de imagens, clique na aba Conteúdo.
  2. Vá para Texto alternativo da imagem e insira o texto alternativo no campo.
  3. O texto alternativo é salvo automaticamente.

image_block_with_alt_text.png

Imagens de seção de galeria e layout automático

Acessando o recurso

Layouts automáticos e seções de galeria só são suportados na versão 7.1.

Você pode adicionar texto alternativo a Layouts Automáticos e Seções de Galeria, mas cada um usa um método diferente.

Layouts automáticos

Se o campo do texto alternativo da imagem não aparecer, ative a opção Mostrar imagem na aba Elementos. Para adicionar um texto alternativo às imagens nas seções de layout automático:

  1. Ao editar uma página, passe o mouse sobre a seção de layout automático e clique em Editar conteúdo.
  2. Clique na aba Conteúdo.
  3. Clique na imagem à qual você deseja adicionar texto alternativo.
  4. Role até Texto alternativo da imagem e insira o texto alternativo no campo.
  5. Clique em Voltar e depois em Salvar.

Se você não adicionar texto alternativo aos layouts automáticos, nenhum texto alternativo será exibido.

Seções de galeria:

A seção de galeria serve basicamente para imagens. Se você adicionar uma descrição às imagens na seção de galeria, ela automaticamente é usada como o texto alternativo e a legenda da imagem.

Imagens no Bloco de Galeria

Acessando o recurso

Na versão 7.1, só é possível adicionar um Bloco de Galeria a publicações do blog, itens de produto e eventos específicos.

Para adicionar texto alternativo a uma imagem em um Bloco de Galeria:

  1. Clique duas vezes no Bloco de Galeria ou clique em Editar.
  2. Procure a imagem para editar, passe o cursor sobre ela e clique em .
  3. Adicione texto alternativo ao campo Inserir um título de imagem. Se você não adicionar um título de imagem, o texto no campo de descrição se tornará texto alternativo.
  4. Clique em Salvar.
O editor de imagens com título e descrição fields.png

Publicação do blog e imagens em destaque do evento

O título de uma publicação do blog ou de um evento serve como o texto alternativo da imagem em destaque da publicação ou evento. Na página do evento, ele é o mesmo nos layouts de lista e de calendário.

Imagens em destaque da página

O nome do arquivo serve como um texto alternativo das imagens em destaque na página. Dê um nome a todas as imagens em destaque antes de carregá-las.

Imagem em miniatura do bloco de vídeo

Ao usar o URL para adicionar um bloco de vídeo à página, o bloco gera automaticamente uma miniatura e aparece como sobreposição. Se você adicionar uma miniatura personalizada, o nome do arquivo aparecerá no URL estático, mas não como texto alternativo. Não é possível adicionar texto alternativo à miniatura do bloco de vídeo.

Imagens de produtos

Você pode adicionar um texto alternativo com até 200 caracteres a uma imagem do produto. Se você não adicionar nada, o texto alternativo será o nome do produto. Para adicionar o texto alternativo:

  1. Na página da loja, passe o cursor sobre um produto e clique duas vezes nele.
  2. Mova o cursor sobre a imagem do produto, clique nos três pontos e clique em Editar metadados.
  3. Adicione o texto ao campo Texto alternativo.
  4. Clique em Aplicar.

Imagens da Página de Entrada (versão 7.0)

Para adicionar o texto alternativo a uma imagem da página de entrada:

    1. No menu da Página de Entrada, clique no painel Mídia.
    2. Passe o cursor sobre a imagem e clique em .
    3. Adicione texto alternativo no campo Digite o texto alternativo….
    4. Clique em Salvar.

Imagens da Página de Galeria (Versão 7.0)

Para adicionar texto alternativo a uma imagem em uma Página de Galeria:

  1. Clique na Página de Galeria no painel de Páginas.
  2. Procure a imagem para editar, passe o cursor sobre ela e clique em .
  3. Adicione texto alternativo no campo Título da imagem. Se você não adicionar um título de imagem, o texto no campo de descrição se tornará alt text.
  4. Clique em Salvar.

Imagem de campanhas por e-mail, blog e seções de produto

Nas Campanhas por e-mail do Squarespace, você pode adicionar texto alternativo a imagens, publicações de blog e produtos adicionados à sua campanha:

  1. No rascunho da campanha, clique em uma seção de imagens, seção do blog ou seção do produto.
  2. No painel direito, clique na imagem, na publicação do blog ou no produto em que você deseja adicionar texto alternativo.
  3. Adicione texto alternativo em Texto alternativo da imagem. O texto alternativo é salvo automaticamente.

Se você não adicionar texto alternativo a essas seções, nenhum texto alternativo será exibido. Não é possível adicionar texto alternativo a imagens ou logotipos no cabeçalho da campanha.

Imagens de fundo da seção

Não é possível adicionar texto alternativo às imagens de fundo. Imagens puramente decorativas, como imagens de fundo abstratas e gráficos que separam o conteúdo, não exigem descrição. Saiba mais em "Diretrizes para acessibilidade do conteúdo da web".

Se ainda assim você quiser adicionar texto alternativo a uma imagem de fundo, um jeito é usar um bloco de imagens como fundo da seção, preencher o bloco e adicionar o texto alternativo a ele.

Para incluir um texto alternativo à imagem de fundo, você também pode adicionar um código personalizado. Saiba mais nesta publicação no Squarespace Forum. Nosso suporte não cobre modificações no código personalizado. Por isso, não ajudamos na configuração nem na resolução de problemas com código.

Próximos passos

Dica

para que o tamanho das imagens, nomes dos arquivos e textos alternativos sejam otimizados para os buscadores e visitantes, vincule a extensão TinyIMG . O TinyIMG também faz uma auditoria da SEO para identificar problemas que afetem a SEO da imagem. Trabalhamos com serviços externos para que as Squarespace Extensions funcionem corretamente; porém, as extensões fogem do escopo do nosso suporte. Podemos ajudar você a vincular ou a desvincular suas extensões. Para todas as outras perguntas, procure o provedor da extensão.

Footer Image
  • Peça ajuda à nossa comunidade

  • Peça ajuda à nossa comunidade sobre personalizações avançadas.

  • Contrate um Squarespace Expert

  • Ganhe destaque on-line com a ajuda de um designer ou desenvolvedor experiente.