Olá, pessoal! Voltando para algumas colunas sequênciais sobre práticas básicas de SEO, muito pedida por alguns leitores. Antes de começar o artigo, não posso deixar de agradecer a um professor e amigo que tive neste segmento, o Rafael Comin, que pretendo trazer para cá em breve! Um grande profissional!

Considerações Iniciais

Hoje em dia os mecanismos de busca examinam o site como um todo para definir prioridades em seus resultados orgânicos (resultados não-pagos). Poucos sites possuem um planejamento estratégico para isso, porém cresce cada dia mais o número de portais com práticas básicas de SEO.

Especificamente para imagens, devemos ter alguns cuidados básicos, muitas vezes esquecidos, não só na hora do desenvolvimento, como também na criação. Isso que veremos a seguir.

Cuidados na estrutura básica

Embora muitas vezes seja inviável, o recomendado seria apenas imagens principais, como logotipo da empresa, títulos em forma de imagem e ícones específicos possuírem a tag IMG no layout. Demais imagens, como background, alinhamento, 'cantos' e outros detalhes, viriam das folhas de estilo (CSS).

Obviamente isso requer cuidados para deixar o código limpo. Muitas vezes é inviável fazer todas as imagens virem do CSS.

Em casos especiais, como páginas fixas que possuem fotos, ou em listagem/detalhes de um registro que possui imagem, são necessários cuidados na nomenclatura e parâmetros.

Sempre utilize um prefixo, conforme o tema da imagem, e sempre que for viável, trate o título inteiro.

Exemplo:

tipodoproduto_nomedoproduto.formato ==> dvd_somlivre.jpg, camiseta_listradamarfino.gif

É possível tratar os valores do banco para ajustar a nomenclatura.

Para páginas fixas, com textos longos e imagens decorativas, é necessário ter certeza de que o texto é relacionado à imagem. Se existir um texto que fale de internet, os buscadores ligarão a imagem com este assunto. Por isso que grande parte dos sites tem a descrição logo abaixo de sua imagem, dentro da mesma DIV. Isso facilita na busca.

Nomenclatura e parâmetros

É necessário um cuidado específico nesta parte. Para imagens decorativas, que não puderam serem chamadas do CSS, é aconselhado usar valores neutros, que não se assemelhe ao conteúdo.

Imagens representativas (logotipos, ícones, títulos) exigem um cuidado especial e é aconselhável, sempre que possível, obedecer algumas regras:

1 - Título da imagem nítido, direto e ligado ao tema.

logotipo_nomedaempresa ==> logotipo_fdd.gif

2 - Parâmetro Title, descrevendo o título sem underlines.

<img src="_imagens/logotipo_fdd.gif" title="Logotipo da empresa FDD">

3 - Parâmetro Alt, descrevendo o título sem underlines. É o texto que vai aparecer quando você deixar o mouse em cima da imagem. Alguns navegadores utilizam ele, e não o Title, para efetuarem a leitura.

<img src="_imagens/logotipo_fdd.gif" title="Logotipo da empresa FDD" alt="Logotipo da empresa FDD">

4 - Parâmetro Longdesc, como o próprio nome diz, é para descrições longas. Não é necessário o uso sempre, mas em imagens importantes, é interessante usar este parâmetro. Ele 'resgata' a descrição de um arquivo de texto.

<img src="_imagens/logotipo_fdd.gif" title="Logotipo da empresa FDD" alt="Logotipo da empresa FDD" longdesc="desc/logo.html">

Vale lembrar que estes cuidados são para imagens representativas (logotipos, ícones, títulos e etc).

Espero que tenham gostado do artigo, em breve tem mais!