Neste artigo falarei um pouco sobre como conseguir que suas imagens fiquem mais acessíveis os buscadores de imagens como (Google Imagens, Bing Imagens, Yahoo Imagens…) e leitores de tela.

A maioria dos sites dinâmicos gera as imagens como esta:

<img src=”/imgs/128/1321255.jpg”>

Isso para que fique mais facial à forma de se fazer o upload das imagens e evita um processamento maior no servidor, para não precisar verificar se ela já existe no servido ou não “Porque se ela já existir será substituída ou gerar um erro ”, mas o correto seria fazer esta conferencia, alguns componentes asp já geram esta conferencia na hora do upload no php algumas classes fazem isso , e quando ele confere que a imagem existe já gera um novo nome exemplo:

Você esta fazendo upload da foto “Foto Amigos.jpg“ se ela já existir ele cria um novo nome automaticamente “Foto Amigos2.jpg ou Foto Amigosb.jpg“ e muitos outros padrões.

Legal então se eu usar um componente e pronto, não!

Ainda existem outros padrões a serem corrigidos como, por exemplo, o nome da sua imagem que é “Foto Amigos.jpg” não deve conter espaços, caracteres especiais ou acentuação.

O caminho da sua imagem src deve ser o caminho completo a partir de uma url:

<img src=” http://exemplo.com.br/imgs/128/foto_amigos.jpg ”>

Assim o google buscara direto a foto no diretório correto até mesmo se ele não esteja associada mais a um HTML.

LARGURA E ALTURA

A sua imagem deve trazer também a largura e altura, para que os buscadores possa  distinguir o tamanho no caso do google pequeno e médio e grande.

<img src=”http://exemplo.com.br/imgs/128/foto_amigos.jpg” width=”400″ height=”340″>

Evite colocar imagens muito grandes na pagina isso acarreta no render mais demorado e pode ocorrer algum cancelamento do robots e também os usuários podem desistir de acessar por demorar muito a ser carregar a pagina e parte para o próximo link da busca.

Caso seja necessário colocar uma imagem grande coloque no HTML uma miniatura com link para a imagem maior.

<a href=”http://exemplo.com.br/imgs/128/foto_amigos800x600.jpg” alt=”foto dos amigos ampliada”><img src=”http://exemplo.com.br/imgs/128/foto_amigos.jpg” width=”400″ height=”340″></a>

TAG: Alt

A tag alt é muito importante para o seu site pois ela é um nome alternativo para a sua imagem este elemento HTML é exibido pelo browser caso a sua imagem não tenha sido carregada, no caso dos leitores de tela ele serve para dizer ao usuário o que é exatamente esta imagens a tag  alt não deve conter muitos caracteres.

Para aqueles que gostam de fazer menus com imagens essa tag também e importante porque indica ao leitor de tela ou boot qual será a pagina exibida ao clicar no link.

<a href=”http://exemplo.com.br/imgs/128/foto_amigos800x600.jpg” alt=”foto dos amigos ampliada”><img src=”http://exemplo.com.br/imgs/128/foto_amigos.jpg” width=”400″ height=”340″ alt=”foto dos amigos”></a>

TAG: Title

Tem quase o mesmo objetivo da tag alt com a diferença de não ter limitações de quantidade de caracteres, mas não e bom abusar muito (caso queira colocar uma descrição grande utilize a tag longdesc) eu costumo colocar a mesma quantidade de caracteres.

Alguns browsers não renderizam a tag alt então a tag title entra fazendo praticamente a mesma função.

TAG: Longdesc

Quando a imagem for um gráfico, planilha, fluxograma ou outra imagem complexa, que não será possível detalhar no alt ou title será necessário usar esta tag.

A tag longdesc é na verdade uma url alternativa para a imagem, nela pode conter um HTML que com a descrição completa da imagem, um vídeo/flash ou áudio e como é um novo HTML é possível trabalhar com a quantidade de caracteres que quiser.

Finalizando

Bom só para concluir é muito importante que as suas imagens tenham formato e qualidade bons e aceitáveis para a web.

Os formatos mais indicados são gif, jpg e png e a qualidade bom isso da mais um tema mais não vou entrar nele, pois o meu amigo já fez um post sobre o assunto no blog dele, para quem interessar clique Fireworks Vs. Photoshop – Compressão de arquivos.

Para saber se as imagens do seu site estão sendo indexadas pelo google acesse o google  imagens e digite “site:nome do seu site” ele exibira todas as imagens que o google imagens indexou do seu site.