O texto alternativo geralmente encontra seu caminho nas discussões de otimização de conteúdo de SEO. Projetado como um meio de aumentar a acessibilidade de um site, esses atributos alternativos aparentemente inconsequentes podem ter um impacto no SEO e na usabilidade do seu site. Para ajudá-lo a aproveitar ao máximo seu texto alternativo, abordaremos como escrever texto alternativo para maximizar o potencial de SEO e melhorar a acessibilidade do seu site.

O que é texto alternativo?

Texto alternativo ou texto alternativo são descrições de imagem escritas dentro do atributo ALT da tag IMG de uma imagem em código HTML.

Também chamadas de “atributos alt” ou “descrições alt”, essas descrições de texto fornecem informações sobre a aparência e a função das imagens em uma página da Web caso a imagem não seja carregada ou o usuário seja deficiente visual.

Usos para texto alternativo

Esses atributos alternativos podem estar na vanguarda das listas de verificação de SEO na página. No entanto, o impulso para o texto alternativo começou em 2006, quando as Nações Unidas auditaram os sites mais populares do mundo e descobriram que muito poucos ofereciam acesso igual às informações fornecidas para usuários com deficiência visual. Desde então, este texto tem sido utilizado principalmente para:

Texto alternativo para acessibilidade

Os usuários da Internet com deficiências visuais de cegueira a daltonismo confiam no texto alternativo para obter acesso total ao conteúdo de um site. Usuários de leitores de tela e usuários de outras tecnologias assistivas têm o texto alternativo lido em voz alta. Isso fornece aos usuários de leitores de tela uma imagem mais clara de todas as informações na página.

Usar um leitor de tela para explorar sites pode fornecer uma melhor compreensão do que um usuário experimentaria se confiasse em um leitor de tela.

Alt Text para problemas de carregamento e experiência do usuário

Se um arquivo de imagem não puder ser carregado, seu texto alternativo será exibido em sua ausência. Isso pode ser bastante útil se um usuário tiver baixa largura de banda ou optar por desativar as imagens do navegador para economizar dados. Assim como os usuários com deficiência visual contam com esse texto alternativo para preenchê-los sobre a finalidade e o conteúdo de uma imagem, os usuários com conexões de internet mais lentas não perdem a imagem por meio do uso de texto alternativo para uma melhor experiência geral do usuário.

Além disso, quando o texto alternativo substitui uma imagem, ele enriquece seu conteúdo e fornece ao leitor uma compreensão mais completa do texto.

Texto alternativo para SEO de imagem

Os rastreadores da Web usam NLP para ler o HTML de texto alternativo para entender melhor o que é a imagem, o propósito da imagem e o contexto da imagem para melhor indexação e melhores resultados de pesquisa de imagem.

Isso dá ao rastreador uma melhor compreensão de sua página da web e dá à sua imagem a oportunidade de aparecer em uma pesquisa de imagens do Google.

Exemplos de texto alternativo

Ironicamente, entender como criar um bom texto alternativo geralmente requer uma abordagem do tipo mostre e não conte. Então, aqui estão alguns exemplos de imagens com seus textos de tags alt:

alt=”Beagle parado em um campo gelado em uma manhã fria.”

Veja como fica no HTML:

alt=”Dignidade da Estátua da Terra e do Céu”

alt=”<p>Evidência clara: as correntes do Atlântico carregam a Corrente do Golfo</p>”

Formatação de texto alternativo

A maioria dos CMSs formatará seu texto alternativo em HTML para você. No entanto, para implementar o texto alternativo, você pode inserir o seguinte código em sua tag IMG:

< img src =”arquivo” alt =”adicionar texto” largura =”” altura =””>

Como escrever um bom texto alternativo

Escrever um bom texto alternativo não requer experiência em escrita criativa ou codificação. No entanto, exige que você olhe as imagens através de uma nova lente.

Uma maneira de fazer isso é imaginar que você está descrevendo a foto para alguém pelo telefone. Ao fazer isso, tenha em mente se seu ouvinte se beneficiaria ou não de uma explicação sobre o propósito da imagem.

Como você pode melhorar seu texto alternativo com acessibilidade e SEO em mente?

1. Seja o mais descritivo possível.

Um texto alternativo mais descritivo fornece aos usuários uma melhor compreensão da imagem. Ao construir seu texto alternativo descritivo, inclua o que torna a imagem importante, única e como ela enriquece o texto.

Todos podemos concordar que a representação é importante. Os usuários de leitores de tela também querem saber quando uma marca é inclusiva em suas imagens. Portanto, certifique-se de incluir gênero e etnia quando for relevante em suas descrições.

2. Mantenha-o conciso, mas não muito curto. Deixe de fora informações estranhas.

O exemplo acima é muito longo e teria se beneficiado do uso da tag de legenda ou da tag de descrição longa.

O melhor texto alternativo é uma frase ou duas no máximo (ou uma linha de texto alternativo). Ao construir seu texto alternativo, considere o que é dado, quais são as prioridades informacionais e como ele informa o conteúdo da página da web. Reduza a redundância omitindo qualquer coisa incluída no conteúdo.

Novamente, considerar o propósito da imagem e do artigo para o contexto é fundamental.

Tenha em mente que o texto alternativo não é uma legenda. Se você precisar fornecer o crédito da fonte ou uma citação da fonte, use uma legenda para essa informação.

3. Use suas palavras-chave de destino.

Se sua palavra-chave de destino estiver evidente na imagem, inclua-a em seu texto alternativo. Como apontamos, os rastreadores da Web lerão esses atributos para entender melhor seu conteúdo.

Lembre-se de que as palavras-chave de cauda longa são mais fáceis de classificar, mesmo quando se trata de pesquisas de imagens.

Por exemplo, em vez de classificar para “tubarão-baleia”, você pode tentar classificar para “tubarão-baleia com a boca aberta”.

4. Não encha suas palavras-chave.

O preenchimento de palavras-chave nunca é uma boa ideia. Especialmente quando leva o usuário ao erro quanto ao que a imagem retrata. Sempre procure um texto alternativo apropriado e informativo que substitua o significado no lugar das imagens quando necessário.

Além disso, lembre-se de que o Google NLP é ótimo para descobrir nossas relações semânticas entre as palavras, portanto, se sua imagem estiver relacionada à sua palavra-chave de destino, seu texto alternativo também deve estar - e o resultado deve ser um sinal natural para o sistema de indexação do Google.

Por exemplo, observe na imagem acima que o texto alternativo menciona “brinquedos para mastigar para cães pesados”. O Google exibe essa imagem em consultas de pesquisa por “brinquedos de cachorro para mastigadores pesados”, que está semanticamente relacionado à consulta original.

Texto alternativo incorreto = preenchimento de palavras-chave: alt=“tag de cachorro personalizada, etiqueta de identificação de cachorro personalizada, ID de cachorro personalizada.”

5. Não precisa explicar que é uma foto.

Um erro que muitas pessoas cometem é incluir “foto de”, “imagem de” ou “imagem de” em seu texto alternativo. Isso não é necessário. Sua tag alt indica que é uma foto, então isso apenas adiciona palavreado e redundância desnecessários.

6. Use longdesc=”” para descrições longas.

Há momentos em que uma imagem se beneficia de uma descrição mais longa no texto alternativo, resultando em uma melhor experiência do usuário. Por exemplo, um infográfico que não seja acompanhado por um blog não agrega valor a menos que seja explicado claramente.

Para esses casos, você vai querer usar a tag longdesc="”.

7. Descreva também os botões.

Os botões geralmente são imagens com texto incorporado. Eles se enquadram na categoria de imagens de texto, o que significa que você precisa informar ao usuário o que ele diz para que seja útil.

Forneça ao seu usuário uma alternativa acessível para botões com:

< tipo de entrada = “” src= “” nome= “”

altura= “” largura= “” alt= “texto no botão” >

8. Evite erros de digitação e palavras incorretas.

A revisão e a ortografia correta podem prejudicar a capacidade de um leitor de tela de transmitir corretamente o significado de sua imagem. Além disso, erros de digitação em seus atributos alt podem se tornar um desastre de SEO de imagem se não forem verificados.

9. Considere o tipo de imagem.

Embora você não precise apontar que está descrevendo uma imagem, você pode querer mencionar se o tipo de imagem é único. Alguns formulários de imagem que você pode querer mencionar incluem:

• Ilustração
• Gráficos e tabelas
• Pinturas ou outras belas artes
• Mapas
• Infográficos
• Gifs e animações

O que mais você precisa saber sobre texto alternativo?

Escrever um texto alternativo eficaz se tornará uma segunda natureza ao longo do tempo. No entanto, saber quando usar texto alternativo de imagem, quando ignorá-lo e outras práticas recomendadas de imagem também podem melhorar o SEO e a acessibilidade do seu site.

Evite imagens de apenas texto.

O que não fazer:

Pode ser tentador adicionar uma captura de tela, PNG ou JPEG de texto. No entanto, este texto nunca será lido por rastreadores da web. Além disso, como você não deseja excluir os deficientes visuais das informações em uma imagem, digite o texto dessa imagem na tag de texto alternativo.

Quando não adicionar texto alternativo

Imagens decorativas não precisam incluir texto alternativo. Isso ocorre porque o conteúdo da imagem não adiciona significado ao conteúdo da página da web. No entanto, você deve incluir um atributo alt vazio ou nulo em seu HTML. Este texto alternativo nulo sinalizará ao leitor de tela para não ler uma descrição da imagem.

Você pode escrever um atributo alt nulo como: alt=“ “ ou alt=””

Você também pode usar um atributo null alt com uma imagem que é um link com uma versão de texto ao lado.

Você precisa de Alt Text para vídeos?

Não, mas você desejará incluir uma transcrição do vídeo para usuários com deficiência auditiva, aqueles que falam outros idiomas e aqueles espectadores que não podem reproduzir o vídeo com áudio ativado.

Como verificar o texto alternativo de suas imagens ou o texto alternativo de outro site

Para ler o texto alternativo de uma imagem, tudo o que você precisa fazer é clicar com o botão direito na imagem e selecionar “Inspecionar” ou “Inspecionar elemento”. Isso abrirá a ferramenta de inspeção de elementos HTML e CSS. Em um Mac, você também pode usar Control + clique.

Você também pode usar um verificador de acessibilidade para problemas de acessibilidade.

Sempre considere o contexto da imagem

Quando se trata de fornecer um texto alternativo atencioso, considere o propósito da imagem. Isso também apresenta mais algumas oportunidades para usar suas palavras-chave de destino.

Por exemplo, se o objetivo de um blog é comparar a qualidade de petiscos para cães, sua palavra-chave é ração premium para cães e sua imagem são duas tigelas de ração para cães para comparação, você pode usar o texto alternativo “uma tigela de ração premium para cães comida ao lado de uma tigela de qualidade inferior para fins de comparação.” Isso permite que você integre sua palavra-chave sem problemas.

O texto alternativo é o mesmo que uma legenda de imagem?

Não. As legendas das imagens ficam visíveis para os usuários do site mesmo quando a imagem é carregada, enquanto o texto Alt fica apenas no seu HTML. O objetivo das legendas é fornecer informações de direitos autorais ou uma explicação necessária para entender o conteúdo da imagem.

Como adicionar texto alternativo no WordPress

Adicionar texto alternativo de imagem no WordPress é simples. Ao fazer upload de uma imagem, você pode adicionar o texto alternativo da imagem antes de inseri-la na página. Algumas versões do WordPress incluem o menu de atributos alt da imagem ao lado das miniaturas da imagem. Outros incluem o menu na parte inferior da tela de miniaturas.

Alguns modelos de texto alternativo decente a eficaz

Quando se trata de texto alternativo, existem vários níveis de qualidade. Você pode se contentar com um texto alternativo decente ou pode se esforçar para fornecer o melhor texto alternativo para seus usuários e SEO. Aqui estão alguns exemplos de modelos básicos de texto alternativo:

Ruim: alt=”cão”

Melhor: alt=”cachorro marrom com coleira”

Melhor: alt=”Tan poodle brincando alegremente na grama com a coleira ainda presa”

Ruim: alt=”pessoas com livros”

Melhor: alt=”mãe e filho fazendo lição de casa”

Melhor: alt=”ilustração de uma mãe negra ajudando seu filho com a lição de casa para demonstrar o poder dos pais envolvidos.”

Ruim: alt=”imagem de um copo, guardanapo e caneta”

Melhor: alt=”uma caneca de café azul ao lado de um guardanapo com escrita e caneta”

Melhor: alt=”uma caneca de café azul com café à esquerda sentado em uma mesa de madeira com uma caneta em frente e um guardanapo entre com as palavras estabelecer metas, não limites”

Texto alternativo: uma melhor experiência do usuário e SEO

Pode ser fácil pular ou apressar a construção do texto alternativo de suas imagens. Mas fazer isso seria um desserviço aos visitantes da sua página e ao seu SEO. Recomendamos que você pense em seu texto alternativo como uma forma de melhorar cada página da web. A otimização de suas imagens para mecanismos de pesquisa inclui fornecer contexto aos rastreadores da Web por meio de texto alternativo. Além disso, muitas pessoas confiam no texto alternativo para entender e interagir completamente com seu site. O texto alternativo aumenta a acessibilidade substituindo a imagem caso ela não seja carregada ou um usuário tenha deficiências visuais ou cognitivas.