Tag Alt da imagem
Redação

Tag alt da imagem: 2 bons motivos para usar corretamente

Muitos parâmetros não são aproveitados na hora de otimizar uma página, como é o caso da tag alt. Este post vai mostrar como mudar isso!
Compartilhe!

É muito bacana compreender a teoria das coisas, mas é muito mais interessante quando isso é trazido para dentro da nossa realidade, não é mesmo?

Por isso, para não tornar a explicação sobre o que é tag alt em algo maçante ou técnico demais, o convencimento sobre a importância do uso correto desse parâmetro será feito de forma objetiva, porém bastante eficaz: trazendo dois bons motivos que impactam diretamente a experiência do usuário e o tráfego do seu site.

Vamos a eles logo depois de uma breve compreensão sobre o que é uma tag alt e em que contexto ela está inserida.

Veja também: Técnicas de SEO para página de produtos: dá pra fazer!

O que é tag alt

Dentro da linguagem html, há representações de hipertextos e marcações, tornando possível o desenvolvimento de páginas como esta, que está hospedando esse artigo e tornando possível você enxergar só aquilo que é colocado para o usuário enxergar: o conteúdo.

As marcações, por sua vez, estão entre o conteúdo como um esqueleto por trás da nossa aparência: invisíveis aos olhos de quem vê de fora, mas responsáveis por toda a nossa estrutura. A principal função das marcações, é passar instruções ao navegador, de forma que ele as convertam e mostre apenas a aparência da página.

Ainda pensando no corpo humano, vamos dizer que cada instrução dada pelas marcações, precisam estar dentro do espaço que você quer que elas sejam aplicadas. Por exemplo, se você quer dar um comando para mudar algo no braço, é preciso indicar isso. E a partir daí todas as instruções que sinalizar dentro do ambiente do braço, será aplicada apenas no Braço! Isso vai acontecer até que você feche esse comando.

Dito isso, chegamos, finalmente, ao que interessa neste artigo: a tag alt da imagem. Que como o próprio termo já nos entrega, é um parâmetro dentro das instruções a serem dadas a uma imagem, e sua função é possibilitar que você insira um texto alternativo que – mais do que apenas nomear -, seja capaz de dar um contexto a imagem, de forma objetiva, porém completa.

Vantagens da tag alt

Pronto, chegamos à parte em que você terá dois bons motivos para começar a preencher a tag alt das suas imagens de agora em diante:

Possibilitar que os navegadores consigam “interpretar” a imagem

Buscadores como Google, Yahoo, dentre outros, não são capazes de ler imagens, apenas textos. É nessa hora que a nossa amiga, tag alt, cai muito bem, uma vez que é uma oportunidade de dizer a esses buscadores o que existe na imagem. Dessa forma, possibilitando que eles consigam, em conjunto com o escaneamento, que eles fazem por natureza, do conteúdo da sua página, interpretar e categorizar a imagem para que ela apareça nos resultados de busca relacionados ao seu tema principal, que também é conhecido como palavra-chave.

A partir daí, você pode esperar só bons frutos. Já que conseguindo fazer com que a imagem seja “lida” e ranqueada nos buscadores, como num Google Imagens, por exemplo, você conta com uma porta de tráfego a mais para a sua página, o que é determinante não só para disseminar um conteúdo, mas também um produto do seu e-commerce.

Possibilitar que, mesmo sem ver a imagem, os usuários saibam do que ela se trata

Outro grande motivo para preencher a tag alt é garantir que pessoas que não conseguem ver imagens em páginas da Web como usuários que utilizam leitores de tela ou têm baixa conectividade, possam saber o que ela mostra.

Outro cenário tão importante quanto, é o de deficientes visuais, que através de áudio, podem escutar o conteúdo da página, assim como o texto alternativo da imagem, a tag alt, ajudando a tornar a experiência de todos, o mais completa possível.

Exemplos de tag alt na prática

Agora que você já sabe do que se trata a tag alt e quais suas principais funções, chegou a hora de saber preencher esse parâmetro da melhor forma (por isso, incluímos até mesmo aqueles exemplos do que NÃO fazer, para que você passe beeem longe dos erros).

Observe a imagem:

Exemplo de tag alt

Você, que está vendo, consegue facilmente interpretar o que está acontecendo na cena, correto? Mas, para os usuários que, por diversos motivos que já citamos anteriormente, não podem ver a imagem, a solução que melhor resolveria essa questão é uma tag alt bem desenvolvida – que por sinal é muuuito melhor que apenas aquele famoso ícone que frustra totalmente a experiência de navegação:

 

Erro de imagem tag alt

 

 

Bem inconveniente, né?

Pois bem, vejamos alguns exemplos abaixo:

Exemplos de tag alt (do pior para o melhor)

  • Exemplos de tags alt não recomendadas:
    <img src=”massa-de-pao.png” alt=””>

ou
<img src=”massa-de-pao.png” alt=”massa pão receita preparo receita de pão fazendo pão massa de pão”>

A primeira linha de código, na verdade não contém nenhum texto alternativo (observe que as aspas estão vazias), enquanto o segundo exemplo demonstra o preenchimento excessivo de palavras-chave no texto alternativo, que podem fazer os buscadores considerarem o conteúdo como spam. Esses são alguns dos motivos que fazem dessas duas versões, exemplos do que não se deve fazer.

  • Exemplo de uma tag alt, digamos que, “ok”:

<img src=”massa-de-pao.png” alt=”Massa de pão”>

“Ok”, porque não é muito descritiva, ou seja, não entra no detalhe, como é indicado. Sim, é uma imagem mostrando uma massa de pão, mas há mais a ser dito sobre ela, não acha?

  • Exemplo de uma tag alt ainda melhor:
    <img src=”massa-de-pao.png” alt=”Mulher preparando massa de pão sobre superfície coberta de farinha”>

Este texto alternativo é um exemplo muito melhor a seguir, porque é mais descritivo do que a anterior, dizendo muito mais do que apenas ‘massa de pão’. Ela descreve perfeitamente a cena, permitindo que, mesmo através de uma alternativa escrita, o usuário possa ter uma “visão mais precisa” de como seria aquela imagem.

Chegamos ao fim do conteúdo e você está pronto para dar os primeiros passos de melhoria na utilização de imagens no seu site.

Quer saber mais sobre essa e outras técnicas para melhorar a experiência do usuário e aproveitar todas as oportunidades de geração de tráfego? Então continue navegando pelo nosso blog e fique por dentro de todos os assuntos do universo digital. Ah, e segue lá o @bcreative.360 no Instagram pra ver tudo o que acontece por aqui em primeira mão!


Compartilhe!