Alt Tag – Dicas para utilizar o Alt Tag em seu Site

por Celso Lemes em 11/03/2008

na categoria Otimização de site

Construtor de sites wix
ecológico

Quem já utilizou o buscador do Google, já deve ter notado ou mesmo utilizado o Google Imagens, que é o mecanismo de busca que procura apenas por imagens presentes nos websites.

Digamos que você acesse o buscador de imagens e pesquise pela palavra “Ferrari“. Lhe será mostrado várias imagens de Ferraris e se você clicar em uma, será enviado a página onde a imagem está sendo exibida. Esta é uma forma alternativa de um visitante encontrar o seu site.

Porém, como você já deve imaginar, os computadores não são muito bons para entenderem a mensagem que uma determinada imagem tenta passar. Então como será que o Google faz para saber quais imagens exibir após um usuário realizar uma busca no Google Images?

A resposta está na tag <alt> ou Alt Tag. ALT é o acrônimo para Alternative (alternativa) que é um código adicionado ao HTML da imagem e que deve refletir a mensagem que represente o conteúdo da imagem.

Essa descrição é utilizada pelo Google para retornar os resultados sempre que alguém realize uma busca por imagens.

Por ser um texto alternativo, a tag <alt> também é importante quando a imagem não é carregadana página, seja porque houve erro no carregamento por parte do servidor, porque o usuário desabilitou o carregamento de imagens no navegador ou porque a imagem realmente não existe.

Nesse caso o texto alternativo é exibido no lugar em que a imagem deveria aparecer, indicando ao visitante do que se trata a imagem que está faltando.

Daí a importância de o texto alternativo ser altamente descritivo, refletindo exatamente o que a imagem trata. Confira um exemplo abaixo que mostra uma imagem normal e outra que não existe no servidor do CriarSites.com. Repare que a segunda somente mostra o texto alternativo.
Ferrari 360 Modena Ferrari 360 Modena

Como criar o texto alternativo

A maioria dos editores de sites em suas versões mais recentes, pedem o texto alternativo sempre que uma imagem é incluída na página, nesse caso o próprio editor se encarrega de gerar o código da tag <alt>, porém se você precisar criar o código manualmente, pode fazê-lo inserindo o seguinte código alt=”Texto Alternativo” dentro da tag <img>

Ficaria algo mais ou menos assim:
<img src=”http://www.site.com/imagem.gif” alt=”Ferrari Modena” />

Você pode adicionar o texto que quiser, mas evite criar um texto muito longo para que o texto alternativo não pareça  ser spam para o Google.

Escrito por Celso Lemes

facebooktwittergoogle plus

Celso Lemes é Blogueiro profissional. Vivo de blogs, blogo para viver, vivo blogando, blogando eu vou vivendo.


{ 31 comentários… leia abaixo ou deixe o seu }

1 Juliana 17/11/2008 às 8:44 am

Celso,no "texto alternativo" eu coloco o nome da imagem ou o endereço?

Abraço!

Responder

2 Celso Lemes 19/11/2008 às 8:53 pm

Juliana,

Você não deve colocar o nome e nem o endereço. Você deve é colocar uma descrição da imagem.

Abraço!

Responder

3 Júnior Grigolo 29/03/2009 às 12:56 am

Muito boas suas dicas,vou usar no meu blog!!

Responder

4 Lucas Souza 03/06/2009 às 11:06 am

Olá Celso, tudo bem?
Tempo atrás enviei um e-mail, e você gentilmente me respondeu, mesmo não tendo a resposta. Bom, agora eu tenho uma outra dúvida, é possível configurar um código de busca personalizada do Google para imagens? É que através “http://www.google.com/coop/cse/” você cria mas só vale para palavras. Obrigado.

Responder

5 Celso Lemes 03/06/2009 às 12:59 pm

Lucas,
Creio que isso não seja possível, o buscador é feito apenas para textos.

Abraço!

Responder

6 Pablo 03/07/2009 às 1:49 pm

Muito bom, essa postagem, tirou minha duvida.

Responder

7 Frederico 08/08/2009 às 8:54 am

Celso,

Como você sempre me ajudou, acho importante dá uma dica a você.

Notei que você usa sempre a palavra acrônimo para qualquer abreviatura. Mas isso é um engano. Vou explicar melhor.

Regra geral tudo é abreviatura ou abreviação, como você queira. Exemplos: alt, html, CIA, Nasa, Petrobras, etc. Mas há abreviaturas que são acrônimos.

Acrônimos são abreviaturas ou abreviações geradas por letras iniciais de palavras. O acrônimo deve ser lido como se fosse uma palavra. Veja:

NASA – é um acrônimo, você ler como se fosse uma palavra.
CIA – é um acrônimo, você ler como se fosse uma palavra.

FBI – NÃO é um acrônimo, você lê letra por letra.
HTML – NÃO é acrônimo, você lê letra por letra.
ALT – é uma abreviação de “alternative”

———————
Mudando de assunto…

Atualmente estou inserindo cerca de oito palavras chaves no ALT. As palavras seleciono do Adwords. Dizem que isso surte efeito. Estou alterando páginas antigas com parcimônia, como você recomenda.

Valeu, meu amigo.

Visite meu site e me dê outras dicas.

Abraço.

Responder

8 celsoalemes 09/08/2009 às 12:25 am

Frederico,
Agora ficou mais claro para mim sobre esse negócio de acrônimo e e abreviaturas. Obrigado pela lição.

Realmente as alterações em páginas antigas devem ser feitas lentamente. Eu mesmo já tive um site penalizado por causa disso.

Abraço!

Responder

9 francisco 22/04/2010 às 1:41 pm

Ola, lei seu post e gostei muito, coloque no meu blog, e foi tudo um suceso.
Tenho uma pergunta, se coloco o titulo do post como descripção da imagen, qual e o efeto.
Obrigado pela ajuda.

Responder

10 Celso Lemes 22/04/2010 às 3:01 pm

Francisco,
Isso Não é bom porque a descrição da imagem deve descrever a imagem.

Abraço!

Responder

11 Lucas Masotti 29/05/2010 às 4:27 pm

Estava procurando sobre como adicionar discrição nas imagens, muito bem explicado!

Responder

12 junior 07/11/2010 às 10:19 am

como colocar atribulto alt no web acappela ?????

Responder

13 Celso Lemes 08/11/2010 às 1:04 am

Olá Junior,
Desculpe, mas eu não sei como isso poderia ser feito.

Abraço!

Responder

14 Fabio Destro 01/03/2011 às 10:44 pm

Ótima dica Celso mas eu tenho uma pergunta será que com melhores posicionamento com imagens posso conseguir mais visitas sendo pelo google imagens ou pelo proprio google normal .?

Responder

15 Celso Lemes 02/03/2011 às 1:45 am

Fabio,
A otimização nas imagens seria mais refletido no Google Imagens.

Abraço!

Responder

16 Roberto 04/07/2011 às 10:26 pm

Eu uso esse atributo a algum tempo e cerca de 50% da visitas do meu site vem do google imagens.

Meus posts costumam ter 5 até 10 fotos, eu coloco o mesmo alt para todos, será que o google pode considerar spam?

abaraços

Responder

17 Celso Lemes 05/07/2011 às 1:02 am

Roberto,
Pelo que eu sei, isso não seria considerado spam. Acho que não tem problema.

Abraço!

Responder

18 Francsico 03/11/2011 às 3:32 pm

Olá sempre venho aqui em seu site e sempre consigo tirar minhas dúvidas parabéns pelo trabalho tenho um blog de downloads http://centralforrodownloads.blogspot.com/ e apliquei essas dicas à pouco tempo tive um crescimento nas vistas ainda considerado pouco mais já é lucro, vlw!!!

Responder

19 Francisco 04/11/2011 às 1:49 am

Olá estou com uma dúvida sobre esse post. Eu tenho um blog de download de cds, no meu blog tem vários posts de uma banda X com a mesma foto só muda a data e local do show. Intão eu quero saber se eu colocar o mesmo nome na TAG ALT nas imagens de todos os posts da banda X vai ser considerado spam? tem algum outro tipo de problema?
O site tá de parabéns sempre que tenho alguma dúvida eu tiro aqui.

Responder

20 Celso Lemes 05/11/2011 às 10:52 am

Francisco,
Agora você me pegou. Acredito que você não terá problemas com spam, mas provavelmente estas imagens não aparecerão no Google Imagens.

Abraço!

Responder

21 Nestor - 07/12/2011 às 2:19 pm

Muito boa essas dicas. Na verdade tenho muita dificuldade em acertar essa tal alt, algumas imagens ficam visíveis no Google outras não, por que será que isso acontece?

Abraços

Responder

22 Celso Lemes 07/12/2011 às 11:30 pm

Nestor,
O Google não indexa todas as imagens. Eu também não entendo muito bem essa seleção, mas sei que as imagens sem o ALT Tag tem menos chances de aparecer no Google Images.

Abraço!

Responder

23 Patrícia Silva de Jesus 22/12/2011 às 8:23 pm

Existe uma coisa que não foi abordada aqui neste post, mas que é de suma importância: é através no atributo alt que as pessoas com deficiência visual, utilizando ledores de tela, conseguem apreciar uma imagem em um site. Mas aí a descrição deve ser de acordo com algumas regras de acessibilidade. Parabéns pela postagem!

Responder

24 radu caraus 31/12/2011 às 12:23 am

Tenho uma duvida eu so tenho que acrescentar o alt e a descrição que o resto já la esta no editar html? img alt=”Ferrari” e já esta ?

Responder

25 Celso Lemes 01/01/2012 às 1:49 pm

Radu,
Não sei se entendi direito. Depois que você adiciona a imagem no editor, basta que você adicione o título alternativo utilizando o editor de HTML.

Abraço!

Responder

26 Marco Gomes 22/02/2012 às 12:31 pm

Por que as minhas imagens não aparecem no navegador (i.e,) com as respectivas descrições mesmo utilizando a Tag “alt”.
Vide exemplo tirado da minha página:

Agradeço antecipadamente.

Responder

27 Celso Lemes 23/02/2012 às 2:57 am

Marcos,
Acessei o seu site e não vi o problema. De qualquer forma, se você estiver criando seu site com um editor de sites, certifique se de que está publicando todas as imagens nos locais corretos no servidor. Você deve manter os mesmos nomes e pastas que está utilizando na hora de criar seu site.

Abraço!

Responder

28 Marcia 08/03/2012 às 7:47 am

Bom Dia Celso,

Uma duvida, tenho um e-commerce, tem alguma dica para salvar o nome do arquivo das imagens para ter melhor visulização, pois não tenho como inserir o “alt”.
Por exemplo: Iniciar com letra maiscula e a extensão toda junta, separ as letras, tudo em minuscula- LembrancinhaNascimentoBiscuitJoaninha.jpg ou lembrancinha nascimento biscuit joaninha.jpg ou lembrancinha_nascimento_Biscuit_joaninha.jpg ?
Obrigada.

Responder

29 Celso Lemes 08/03/2012 às 11:50 pm

Marcia,
Neste caso você pode salvar as imagens com as palavras-chave separadas por um hífen. Por exemplo, dicas-para-criar-sites.jpg

Abraço!

Responder

30 Anunciar site 03/04/2012 às 1:37 pm

Isto realmente faz sentido e estou aplicando nas imagens em meu site:
http://www.anunciarsites.com e espero conseguir bons resultados.
Excelentes dicas!
Obrigado.

Responder

31 Jose Carlos 13/05/2012 às 8:15 pm

OLA

Parabens

Boa matéria sobre , como colocar tecla ALT.

Grato

Responder

Deixe um comentário

Atenção antes de Deixar um Comentário!
- Se o seu comentário for relacionado ao post, tenha certeza de que o leu.
- Todo comentário obsceno, ilegal, ofensivo, anônimo, escrito todo em maiúscula, contendo gírias em excesso ou estritamente publicitários, serão "apagados".
- Somente inclua links no comentário se ajudar a explicar o seu comentário.
- Se precisa de ajuda, procure deixar o máximo de informação possível.
- Não peça para adicionar ao MSN.
- Spam não será tolerado.


Este site lhe foi útil? Então ajude na divulgação clicando aqui.

Post Anterior:

Próximo Post

aprenda a ganhar dinheiro na internet com blogs lucrativos