HTML

Em 05/12/2014 às 14:12h por Leonardo

Importância dos atributos Alt e Title nas Imagens

No artigo de hoje veremos que para se obter sucesso com o site ou blog, não se pode restringir-se apenas a escrita de novos artigos ou páginas. Atualmente várias questões de SEO devem ser levadas em consideração, principalmente a otimização de imagens, que aos poucos tem ganhado sua importância.

Otimização de Imagens

A otimização das imagens não somente se restringem ao peso (Kb, MB) que elas devem ter, mas também ao uso das tags Alt, Title, o próprio nome da imagem conteúdo onde a imagem está inserida e links. Importante também add suas propriedades width e height sempre, para proporcionar um carregamento mais rápido das imagens.

Tag Alt

O atributo alt é utilizado para facilitar a leitura de imagens em sites pelo Google, sendo, assim, de vital importância para o ranqueamento de seu site no Google Images. A função principal desta tag é fornecer uma descrição alternativa para a imagem e funciona, também, como texto âncora quando a imagem é usada como link.

O alt text é exibido pelos browsers quando eles por algum motivo não mostram as imagens de determinados sites, ou enquanto estas imagens são carregadas ou, até mesmo, por não estarem mais disponíveis, sendo mostrado o texto na tela no lugar de tais imagens desativadas.

Além disso, a tag alt também é utilizada pelos bots do Google que juntamente com a tag title interpreta melhor o significado da imagem e sua relação com a página em questão. Como esse texto alternativo serve para representar uma imagem (lembre-se de que não é uma descrição em si, e sim um equivalente do que a imagem significa), é de vital importância que se tenha total bom senso em produzir um texto curto e coeso com o conteúdo apresentado.

OBS: Um leitor com deficiência visual, que estiver usando leitor de tela, tal como JAWS ou Orca, irá ouvir o texto substituto no lugar da imagem. Um navegador textual como o Lynx irá mostrar o texto substituto ao invés da imagem. Um navegador gráfico tipicamente irá mostrar apenas a imagem, apresentará o texto alternativo apenas se lhe for solicitar mostrar as propriedades da image. Muitos navegadores gráficos podem ser configurados para mostrar o texto substituto ao invés da imagem.

Esta tag tem a função principal de fornecer uma descrição de que se trata a imagem para os buscadores e auxiliar na sua indexação.

Veja um exemplo sem a tag Alt:

 <img src=”img/teste.jpg” />

Já no outro exemplo abaixo a tag alt foi adicionada juntamente com o código da imagem, ou seja, basta acrescentar o alt= “texto da sua imagem entre aspas” logo após a tag <img>.

Vale alerta-los que para uma boa indexação não ultrapasse cinco (5) palavras no texto.

 <img alt=”teste” src=”img/teste.jpg” />

Tag Title

Esta tag nada mais é do que um complemento para a tag alt. Ela é que origina uma pequena descrição quando posicionado o mouse sobre a imagem. Diferente da citada anteriormente esta permite o uso de quantos caracteres forem necessários para descrever a imagem.

No entanto não é bom abusar da tag Title, pois isso pode ser considerado spam e representar um problema para o seu site. Uma boa pedida seria usar a mesma descrição do Alt.

Para adicionar essa tag basta colocar title= “texto da imagem” após o fechamento do link. Veja um exemplo da tag Title também adicionado ao HTML de uma imagem:

 <img alt=”Titulo de Teste” src=”img/teste.jpg” title=”Titulo de Teste” />

O bom uso destas tags é crucial para quem quer otimizar bem suas imagens, porém, abusar do uso destes campos pode trazer problemas para seu site, pois o Google tem se apurado cada vez mais nesse setor. Em especial, o atributo alt é fundamental para otimização de imagens e deve ser bem montado.

Tags a parte, alguns outros pontos também são interessantes de se considerar sobre otimização de imagens:

Nome da imagem – Evite usar nomes genéricos como img1.jpg, coloque sempre nomes separados por hifens ao invés de underlines.
Formatos, Qualidade e Resolução – Imagens de alta resolução causam demora no carregamento delas, então procure aliar um meio termo entre qualidade e tamanho da imagem.
Ranqueamento no Google
Evitar cópias - Se você utiliza uma imagem que pegou em outro site, evite copiar os atributos da mesma, tais como dimensão e posicionamento, pois pode ser considerado como conteúdo duplicado.
Relacionar conteúdos próximos à imagem – Procurar aliar a imagem a textos da página, não deixando ela sozinha, pois a inserção de conteúdo logo abaixo e acima dela contendo keywords relacionadas à suas tags alt e title é de grande importância para uma maior relevância entre imagem, conteúdo na página e consequente ranking na busca por imagens.
Indexação x Robots.txt - Analise seu robots.txt e confira se os bots estão chegando até suas imagens e se o mesmo não impede de alguma forma a indexação de cada uma delas.

Tenha sempre em mente a importância de se otimizar imagens. O Google vem trabalhando cada vez mais nessa área, que ainda hoje é um diferencial entre as técnicas de SEO. É importante frisar que o bot do Google responsável por rastrear imagens ainda não visita páginas com muita frequência, por isso a importância de manter todas as imagens otimizadas. Uma vez que ele passe por seu site ele certamente não voltará tão rápido.

O bot de imagens tem esse comportamento devido ao próprio fato de imagens não serem atualizado com tanta frequência, logo, não faz sentido ficar solicitando todas as imagens do site a cada visita.

Então sempre se lembre de adicionar as tags quando for publicar o seu artigo/página, pois isso pode “alavancar” o número de visitas diárias e melhorar o indexamento do seu site ou blog nos buscadores.

Dúvidas, críticas ou sugestões comentem abaixo e bons estudos. =)