Gostou do nosso conteúdo? Te ajudou?
Nos ajude também! Faça um PIX, de qualquer valor:
programacao.progressiva@gmail.com

Atributos title e alt - Passando informações da sua imagem

Neste tutorial de nosso curso de HTML, vamos falar sobre dois importantes atributos da tag img: o title e o alt, que são importantes principalmente para os motores de busca.

Isso pode te ajudar, inclusive, no rankeamento de seu site em motores de busca, como o Google, fazendo seu site receber mais visitas.

Por isso, esta aula se encaixa em duas seções de nosso curso: sobre Imagens e SEO.

Imagens em HTML e SEO (Search Engine Optimization)

Com certeza você já fez diversas buscas pelo Google Imagens, pois é uma ferramenta muito útil, e geralmente é bem precisa e nos fornece as imagens que desejamos.

Porém, agora que você é um Webmaster que estuda pela apostila HTML Progressivo, você precisa atentar para alguns detalhes por trás das coisas, tentar entender como funcionam esses sistemas web.
Por exemplo, se você salvar as imagens ou simplesmente olhar a URL da imagem, vai ver que geralmente o nome do arquivo da imagem contém as palavras que você usou para buscar.

Ou seja: é de extrema importância você dar nomes que façam sentido para suas figuras.
Está falando sobre PHP e vai usar uma figura? Não chame de foto.jpg ou 1.png, isso é burrice, é pedir para perder visitas, e se for monetizar seu site, é pedir para perder renda.

Um fato sobre o Google é: ele não sabe identificar uma imagem.

Se mandar a foto de rosto do Bill Gates, ele não vai saber que é o Bill Gates e não vai exibir essa imagem caso busque pelo BG no Google imagens.

Se colocar o logotipo do HTML5, somente com o nome 'imagem1.jpeg', o Google não vai 'ler' a imagem e perceber que aquilo é logotipo do HTML5.

Resumindo: o Google não vai identificar o conteúdo de sua imagem, portanto, não vai catalogar e exibir para determinados tipos de busca.

E quem vai fazer isso, então?
Você, Webmaster. Você que irá fornecer essas informações para o Google, e isso será feito através de dois atributos da tag img: title e alt.

Atributo TITLE - Informando ao usuário o conteúdo da imagem

Como o próprio nome do atributo pode sugerir, o title serve você dar um título para sua imagem, uma explicação em texto sobre aquela imagem, um rótulo ou legenda.

A sintaxe do atributo title é bem simples:
<img src="URL_DA_IMAGEM" title="Escreva aqui um título para sua imagem, uma breve descrição">

Um fato interessante, é que esse atributo title irá mostrar um texto, chamado tooltip, caso você pouse o mouse em cima da imagem.

Vamos usar o seguinte código:
<img src="imagens/HTML-Progressivo.png" title="HTML Progressivo - Curso de HTML online e gratuito">

Adivinha que mensagem vai aparecer se você pousar o mouse em cima da figura? Teste:
O que é, para que serve e como usar os atributos ALT e TITLE na tag IMG

E vale lembrar que este atributo é global, ou seja, pode ser usado com diversas outras tags.
Então, sempre que quiser fornecer uma informação adicional para algum elemento em HTML, use o atributo title.



Atributo ALT - Informando ao Google o conteúdo da imagem

Outra maneira de passar informação textual sobre uma imagem (uma maneira ALTernativa ao atritubo title), é através do atributo alt, cuja sintaxe é idêntica e serve para passar informações adicionais, alternativas, sobre a imagem em questão.

Uma outra utilidade do atributo alt é que o texto contido nela é exibido no lugar de uma imagem caso ela não seja exibida.
Com certeza você já teve algum problema em visualizar uma imagem e por um ou outro motivo ela não carregou. Pois bem, caso isso não ocorra, o que está escrito no atributo alt é que será exibido.

Algumas pessoas também optam por não carregar imagens dos sites, aí vemos mais uma utilidade deste atributo, pois em todos estes casos é importante que informemos ao leitor ou ao Google do que se trata aquela mensagem.

Mas sem dúvida, o uso mais precioso para este tipo de atributo é em termos de SEO, pois o Google indica, sugere e USA os dados da alt no seu rankeamento. Ou seja, é importante descrever suas imagens, criar títulos e textos alternativos.
Use vai ajudar seu site a receber mais visitas do Google.

Lembre-se, tanto alt como title são uma espécie de legenda, um resumo, uma informação mais compacta. Não exagere, não escreve muito, tente sintetizar tudo sobre a imagem na title e tente falar da relação da imagem com o conteúdo na alt.

Exemplo de código HTML usando os atributos ALT e TITLE

No tutorial passado de nosso curso, nos ensinamos como usar o atributo align para alinhas imagens em HTML e mostramos como fazer um site que exibe três imagens de logotipos de linguagens para desenvolvimento web e um texto ao redor.

Vamos mostrar o código para refazer este site, porém agora vamos fazer uso dos atributos alt e title, veja como ficou o resultado:

<html>
   <head>
      <title>As linguagens mais importantes para web</title>
      <meta name="description" content="Saiba quais as principais linguagens para desenvolvimento Web: HTML, JavaScript e PHP">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   </head>

   <body>
      <h1> Linguagens importantes para o desenvolvimento web</h1>

      <h2> HTML </h2>
      <p><img src="imagens/HTML.png" align="left" height="150" width="150" title="Linguagem de marcação HTML" alt="Saiba o que é e para que serve a linguagem HTML">
      O HTML é uma linguagem de marcação, que serve de base para a criação de sites. <br>
      Com o HTML, é possível a criação, exibição, formatação e editação de elementos de uma página de internet, como: 
      <ul>
    <li>Textos</li>
           <li>Imagens</li>
    <li>Formulários</li>
    <li>Tabelas</li>
      </ul></p>

      <h2> JavaScript </h2>
      <p><img src="imagens/JavaScript.png" align="left" height="150" width="150" title="Linguagem de programação JavaScript" alt="Saiba para que serve a linguagem de programação JavaScript"><br>
      A linguagem de programação JavaScript é usada para rodar scripts através dos navegadores.<br>
      Com o JavaScript, algumas aplicações podem ser rodadas sem a necessidade de haver trocar de informações com o servidor.<br>
      Assim, um documento poderia ser alterado através destes scripts que interagem diretamente com o usuário.<br>
      Iremos aprender JavaScript logo após estudar HTML.</p>
      
      <br>
      
      <h2> PHP </h2>
      <p><img src="imagens/PHP-logo.png" align="left" height="150" width="150" title="Linguagem de programação PHP" alt="O que é a linguagem de programação para web PHP">
      <br>A linguagem de programação PHP é do tipo interpretada e é, atualmente, uma das mais usadas no mundo.<br>
      O PHP é vastamente usado para criar aplicações e sistemas, do lado do servidor.<br>
      Usa-se muito o PHP para criar páginas com conteúdo de uma maneira dinâmica, além de ser possível acessar<br>
      e interagir com servidores e banco de dados.</p>

   </body>
</html>

Note como nosso código está ficando grande.
Não se assuste, isso é normal e não será problemas. Para criar um bom site, na unha, e totalmente otimizado e perfeito para os buscadores de busca, você terá que usar muitas coisas, como os atributos que aprendemos neste artigo.

3 comentários:

Raphael com Ph disse...

O Alt também é importante para os leitores de sites e smartphones das pessoas cegas, dessa forma o leitor vai ler o texto da imagem e descrever em forma de áudio para essas pessoas.

Anônimo disse...

Hj em dia quando se vai trabalhar com imagem em um site, usa-se a tag , ela vem com suas tags filhas que são img(usada e com a mesma funcionalidade da explicada aqui!), a tag essa seria como a title, ele dá uma descrição da imagem,uma caption, ela vem no rodapé da imagem. Então fica assim:

img src="" alt=""

Gian disse...

Comecei a colocar em meus posts.

Eu não sabia que era tão importante.

Tutoriais de HTML e CSS