Como Utilizar o ALT TAG nas Imagens

Criar Site no Webnode

ecológico

Verdade ou não, que todo blogueiro procura aumentar as visitas em seus blogs a todo custo? Uma destas formas é otimizando o blog para conseguir melhores resultados nos mecanismos de buscas como o Google.

O fato é que muitos blogueiros cuidam do SEO de seus blogs, mas acabam se esquecendo de otimizar suas imagens, e é isso o que vamos discutir aqui.

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 e blogs

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?

Como Utilizar o ALT TAG nas Imagens

Entenda o que é o ALT TAG

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 é carregada na 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 Utilizar o ALT TAG nas Imagens de seu Site ou Blog

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.

Dicas importantes para otimizar suas imagens:

  • Jamais deixe suas imagens sem alt ou title;
  • Utilize nomes de arquivos e atributos “alt” curtos e descritivos;
  • Forneça atributos “alt” ao utilizar imagens como links;
  • Para toda tag “alt”, usar uma tag “title”, com o mesmo conteúdo (réplica);
  • A descrição da imagem deve ser relevante ao conteúdo da imagem;
  • A descrição da imagem deve ser relevante às palavras-chave do texto do artigo em que a imagem se encontra.
  • Prefira nomes de arquivos curtos
  • É importante que as imagens tenham boa qualidade, mas evite que os arquivos fiquem muito grandes, para que o tempo de carregamento não fique muito grande.

Se você fizer uma procura rápida no Google Imagens vai reparar que este motor de busca dá mais prioridade a imagens bem otimizadas no tamanho e no formato .jpg/.jpeg. Isto acontece porque este formato consegue ter uma boa qualidade e ao mesmo tempo um tamanho aceitável.

Gostou do artigo Como Utilizar o ALT TAG nas Imagens de seu Site ou Blog? Ainda tem dúvidas ou sugestões sobre SEO no Google? Então deixe um comentário abaixo e vamos discutir sobre o assunto.

Celso Lemes

Blogueiro Profissional. Conhecimento sobre Marketing Digital, Google SEO, Divulgação Online, Redes Sociais, Webdesign, Divulgação de Empresas

32 comentários em “Como Utilizar o ALT TAG nas Imagens

  • 17/11/2008 em 8:44 am
    Permalink

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

    Abraço!

    Resposta
  • 19/11/2008 em 8:53 pm
    Permalink

    Juliana,

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

    Abraço!

    Resposta
  • 03/06/2009 em 11:06 am
    Permalink

    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.

    Resposta
    • 03/06/2009 em 12:59 pm
      Permalink

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

      Abraço!

      Resposta
  • 08/08/2009 em 8:54 am
    Permalink

    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.

    Resposta
    • 09/08/2009 em 12:25 am
      Permalink

      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!

      Resposta
  • 22/04/2010 em 1:41 pm
    Permalink

    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.

    Resposta
    • 22/04/2010 em 3:01 pm
      Permalink

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

      Abraço!

      Resposta
  • 07/11/2010 em 10:19 am
    Permalink

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

    Resposta
    • 08/11/2010 em 1:04 am
      Permalink

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

      Abraço!

      Resposta
  • 01/03/2011 em 10:44 pm
    Permalink

    Ó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 .?

    Resposta
    • 02/03/2011 em 1:45 am
      Permalink

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

      Abraço!

      Resposta
  • 04/07/2011 em 10:26 pm
    Permalink

    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

    Resposta
    • 05/07/2011 em 1:02 am
      Permalink

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

      Abraço!

      Resposta
  • 03/11/2011 em 3:32 pm
    Permalink

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

    Resposta
  • 04/11/2011 em 1:49 am
    Permalink

    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.

    Resposta
    • 05/11/2011 em 10:52 am
      Permalink

      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!

      Resposta
  • 07/12/2011 em 2:19 pm
    Permalink

    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

    Resposta
    • 07/12/2011 em 11:30 pm
      Permalink

      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!

      Resposta
  • 22/12/2011 em 8:23 pm
    Permalink

    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!

    Resposta
  • 31/12/2011 em 12:23 am
    Permalink

    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 ?

    Resposta
    • 01/01/2012 em 1:49 pm
      Permalink

      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!

      Resposta
  • 22/02/2012 em 12:31 pm
    Permalink

    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.

    Resposta
    • 23/02/2012 em 2:57 am
      Permalink

      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!

      Resposta
  • 08/03/2012 em 7:47 am
    Permalink

    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.

    Resposta
    • 08/03/2012 em 11:50 pm
      Permalink

      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!

      Resposta
  • 11/09/2013 em 9:25 pm
    Permalink

    Muito boa essas dicas, principalmente para mim que sou iniciante. Onde encontro a tag alt? Ainda tenho um pouco de dúvida sobre o assunto.

    Resposta
  • 10/04/2016 em 8:58 pm
    Permalink

    Preciso colocar alt tags nas minhas imagens mas não sei como faze-lo, gostaria que me explique como se faz

    Resposta
  • 17/01/2017 em 12:27 pm
    Permalink

    Muito bom… Tenho uma duvida;
    Funcionaria o comando alt= colocar varias tags
    separada com virgula?

    Resposta
    • 17/01/2017 em 1:43 pm
      Permalink

      Olá Miguel,
      No ALT Tag não funcionaria muito bem. O ideal é colocar um texto que explique resumidamente o que a imagem trata.

      Abraço!

      Resposta

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *