O que é um Alt Tag e como você deve usá-lo?

As imagens ajudam a tornar seu site atraente e visualmente atraente. No entanto, se você não otimizar imagens com texto alternativo (também conhecido como “texto alternativo” ou “tags alternativos”), você perderá uma oportunidade importante de melhorar a experiência do usuário e a acessibilidade de seu site.

Para usá-los corretamente, é importante primeiro entender o que são tags alt. Neste post, discutiremos o que são tags alt e por que são usadas. Também explicaremos como adicionar tags alt a imagens no WordPress e apresentaremos algumas das melhores práticas para fazer isso.

Vamos começar!

Inscreva-se no nosso canal no Youtube

O que é um Alt Tag?

As tags Alt são adicionadas às imagens em HTML para descrever seu conteúdo e contexto na página da web. A tag alt também aparece dentro do contêiner de imagem quando o arquivo de mídia não pode ser carregado ou exibido corretamente:

As tags Alt ajudam as pessoas que usam leitores de tela, como pessoas com deficiência visual, a entender o conteúdo do seu site. Além do mais, os bots de mecanismos de pesquisa os usam para interpretar suas imagens ao rastrear, indexar e classificar seu site.

Adicionada dentro da tag de imagem, uma alt tag de qualidade é uma breve descrição que explica não apenas o que a imagem apresenta, mas também sua finalidade na página. Quando usada em código HTML, a tag de imagem completa se parece com isto:

<img src="motorcycle-sunset.png" alt="Man in black and red checkered shirt riding an orange motorcycle at sunset."/>

As tags alt de imagem às vezes são confundidas com títulos ou legendas de imagens. No entanto, os títulos das imagens são um tipo diferente de atributo. Eles são exibidos como texto pop-up quando uma pessoa passa o mouse sobre uma imagem. Por outro lado, as legendas aparecem com uma imagem, normalmente abaixo dela, e fornecem informações adicionais ou detalhes sobre ela. Em circunstâncias normais, os visitantes nunca verão as tags alt de suas imagens.

Por que usar Alt Tags em imagens?

As tags Alt têm várias finalidades. Embora você não seja obrigado a usá-los, existem alguns benefícios importantes em fazê-lo. Uma vez que são usados ​​por rastreadores de mecanismos de pesquisa e ferramentas de leitura de tela, eles são um componente crítico de acessibilidade na web e otimização de mecanismos de pesquisa (SEO).

Eles melhoram a acessibilidade da web

As tags Alt ajudam a garantir que os visitantes possam acessar e desfrutar do conteúdo do seu site, mesmo quando usam tecnologia assistiva ou navegadores somente de texto. Quando alguém com deficiência visual visita seu site, o leitor de tela lê o texto da página. Quando chegar a uma imagem, ele usará a tag alt para descrever o que é essa imagem.

Se a tag alt estiver faltando, o leitor de tela poderá ler o nome do arquivo de imagem. Isso geralmente não é apenas ineficaz para explicar a imagem de maneira adequada, mas também pode ser confuso e perturbador, principalmente se o nome do arquivo não for otimizado para SEO.

Em alguns casos, como quando você deixa o campo alt tag de uma imagem vazio no WordPress, o leitor de tela pula essa imagem completamente. Supondo que as imagens que você inclui em suas páginas da web tenham um propósito, essa ausência significa que o visitante não está obtendo o valor total ou a experiência que você pretendia ao consumir seu conteúdo.

Eles podem impulsionar suas classificações do mecanismo de pesquisa

As tags alt de imagem podem facilitar a classificação das palavras-chave que você está tentando atingir. Os robôs dos mecanismos de busca são inteligentes, mas não conseguem interpretar e entender os aspectos visuais de uma imagem da mesma forma que os humanos.

Os atributos Alt oferecem uma alternativa baseada em texto para traduzir imagens e, mais especificamente, para incorporar palavras-chave relevantes. As descrições textuais que contêm palavras-chave específicas podem aumentar suas chances de classificação elevada em pesquisas de imagens.

Para enfatizar o papel importante que as imagens (e, por sua vez, as tags alt) desempenham no SEO, considere a página de resultados do mecanismo de pesquisa (SERP) para "cama king size":

A primeira página não produz apenas resultados baseados em texto; também há muitos resultados de imagem. Quando otimizadas e usadas corretamente, as tags alt podem ajudar a impulsionar seu SEO e gerar imagens clicáveis ​​com hiperlinks para aparecer em pesquisas como essas. Isso é particularmente benéfico para sites de comércio eletrônico e páginas de destino.

Como adicionar uma tag Alt de imagem no WordPress

Depois de entender os benefícios de usar os atributos alt de imagem em seu site, é hora de aprender como fazer isso de fato. Felizmente, o WordPress torna essa tarefa incrivelmente direta e simples.

Para adicionar uma tag alt de imagem no WordPress, faça login no painel de administração e navegue até a página ou postagem à qual deseja adicionar sua imagem. Dentro do editor WordPress, clique no ícone e selecione o bloco Image:

Em seguida, carregue sua imagem ou selecione uma da sua Biblioteca de mídia. Depois de inserir a imagem no bloco, o painel Configurações de imagem será aberto na barra lateral à direita. Você pode inserir sua descrição na caixa de texto Alt :

Quando terminar, salve suas alterações. Você também pode fazer isso para imagens existentes. Por exemplo, se você deseja atualizar uma imagem em um post que já foi publicado em seu site, basta clicar na imagem e inserir sua nova tag alt na barra lateral.

Como adicionar uma tag alt de imagem em HTML

Quando você usa o WordPress ou outro CMS que inclui um módulo para adicionar e editar tags alt, ele adicionará automaticamente o código HTML para você. No entanto, se você quiser adicionar o código sozinho, poderá fazer isso facilmente.

Para adicionar HTML tag alt no WordPress, clique no bloco de imagem relevante. Na barra de ferramentas do bloco, selecione o botão com os três pontos verticais e escolha Editar como HTML :

O código HTML exibirá a tag da imagem. Você notará que o atributo alt está vazio. Coloque seu texto entre aspas:

Quando terminar, clique no botão Visualizar para retornar ao editor visual e salve suas alterações. Você pode usar essa mesma sintaxe e formato para editar a marca de imagem HTML de qualquer arquivo.

Dicas e práticas recomendadas para escrever tags alt de imagem

Ao criar suas tags alt, existem alguns pontos-chave a serem considerados. Aderir a essas práticas recomendadas ajudará a tornar suas tags alt mais eficazes:

• Seja específico e descritivo. O objetivo das tags alt é descrever a imagem, então você deseja ser o mais específico possível. Se você não tiver certeza se sua descrição é suficiente, considere que imagem você visualizaria se visse apenas aquela linha de texto.
• Mantenha breve. Embora queira ser detalhado, você também não precisa fazer com que seu alt tag tenha um parágrafo longo (ou mesmo uma frase inteira). Apontar para cerca de 100 a 125 caracteres no máximo.
• Não seja redundante. Para aproveitar ao máximo sua alt tag, você não deseja incluir palavras desnecessárias. Isso inclui adicionar “Imagem de” ou “Imagem de” antes da descrição. Esses elementos são desnecessários, porque já estão implícitos.
• Incorpore palavras-chave relevantes naturalmente . Considere suas palavras-chave alvo e, sempre que possível, incorpore-as organicamente no contexto da página. Isso é mais fácil quando você usa imagens altamente relevantes que correspondem ao texto.
• Evite o excesso de palavras-chave. Embora o uso de palavras-chave em suas tags alt possa melhorar o SEO, tome cuidado para não exagerar. O preenchimento de palavras-chave pode realmente prejudicar seu SEO e produzir uma experiência ruim para o usuário.
• Não use imagens no lugar de texto. O objetivo principal de uma tag alt é fornecer contexto textual para máquinas que não podem processar e interpretar os elementos visuais em uma página. Portanto, não faz sentido usar texto dentro de imagens, especialmente para seus cabeçalhos e títulos de página.

Ao criar alt tags para suas imagens, sempre lembre que o objetivo é descrever a imagem para aqueles que podem não ser capazes de vê-la. Embora levar em conta o SEO e as palavras-chave seja definitivamente uma ideia inteligente, escrever suas tags alt com usuários reais em mente pode ajudar a gerar resultados mais positivos.

Conclusão

As imagens podem ajudar a melhorar a aparência de suas páginas da web e torná-las mais interessantes, informativas e envolventes. No entanto, para maximizar seu valor, é melhor complementá-los com tags alt. Essas explicações breves, porém descritivas, fornecem contexto para usuários e mecanismos de pesquisa. As tags alt das imagens ajudam a aprimorar a experiência do usuário, melhorar a acessibilidade e facilitar a classificação para palavras-chave relevantes.

Você tem alguma outra pergunta sobre o que é uma tag alt ou como adicionar uma no WordPress? Deixe-nos saber na seção de comentários abaixo!

Imagem apresentada por Honza Hruby / shutterstock.com