Num episódio recente do podcast Search Off the Record, a equipa de Search Relations da Google emitiu um aviso importante para programadores e gestores de websites: usar CSS para apresentar todas as imagens de um site é uma prática prejudicial. Embora as imagens de fundo em CSS possam melhorar o design visual, estas são completamente invisíveis para o Google Imagens. Esta abordagem pode levar à perda de oportunidades valiosas de indexação e visibilidade nos resultados de pesquisa.
O problema das imagens em CSS, segundo a Google
Durante a conversa, John Mueller, um dos especialistas da Google, partilhou um problema recorrente que tem encontrado. "Na semana passada, ou na anterior, alguém me contactou nas redes sociais a dizer: 'Parece que o meu programador decidiu usar CSS para todas as imagens porque acredita que é melhor'. Isto funciona?", questionou.
A resposta da equipa da Google é clara: esta abordagem nasce de um equívoco sobre como os motores de busca interpretam as imagens. Quando os elementos visuais são adicionados através das propriedades de background em CSS, em vez de usar as etiquetas HTML padrão como
Martin Splitt, outro especialista da Google, explicou o porquê: "Se tem uma imagem de conteúdo, se a imagem faz parte do conteúdo... vai querer usar uma etiqueta
Conteúdo vs. decoração: a distinção essencial
A diferença fundamental reside em saber se uma imagem acrescenta significado ao conteúdo ou se é puramente cosmética. Imagens decorativas, como padrões de fundo, efeitos atmosféricos ou animações, podem ser implementadas sem qualquer problema utilizando CSS.
No entanto, quando a imagem transmite informação ou é referenciada diretamente no texto, o CSS torna-se uma má escolha. Splitt ofereceu um exemplo prático: "Se eu tiver um artigo de blog sobre uma paisagem específica e quiser dizer às pessoas 'olhem para esta vista panorâmica incrível', e essa imagem for um background-image... o problema é que o conteúdo refere-se especificamente a esta imagem, mas não a tem como parte do conteúdo."
Nestes casos, colocar a imagem diretamente no HTML com as etiquetas
E as imagens de stock?
A equipa também abordou o uso de fotografias de stock, que por vezes são adicionadas mais pelo apelo visual do que pelo conteúdo original. Mesmo nestes casos, a recomendação mantém-se.
"O significado continua a ser 'esta imagem não é minha, é uma imagem de stock que comprámos ou licenciámos', mas ainda assim faz parte do conteúdo", afirmou a equipa. Embora estas imagens possam não ter um bom posicionamento nos resultados por serem duplicadas, implementá-las em HTML continua a ser a forma correta de garantir a sua indexação e melhorar a acessibilidade do site.
Porque é que isto é importante para o seu site?
Uma implementação incorreta pode reduzir drasticamente a visibilidade em vários cenários:
Imobiliário: Fotografias de casas usadas como imagens de fundo não irão aparecer em pesquisas de imagens relevantes.
Notícias: Gráficos ou infográficos adicionados via CSS não podem ser indexados, diminuindo a sua capacidade de serem descobertos.
Comércio eletrónico: Imagens de produtos inseridas como fundos em CSS podem não surgir em pesquisas relacionadas com compras.
Recomendações: como fazer da forma correta
Os comentários da Google indicam que deve seguir estas boas práticas:
Use as etiquetas HTML (
Reserve os fundos em CSS para elementos visuais decorativos que não carregam significado.
Se um utilizador pudesse esperar encontrar uma imagem através de uma pesquisa, essa imagem deve estar no HTML.
Uma implementação adequada não só ajuda no SEO, mas também é crucial para ferramentas de acessibilidade e leitores de ecrã, que dependem da estrutura HTML para interpretar o conteúdo. Em suma, embora o CSS seja uma ferramenta poderosa para o design, usá-lo para entregar imagens de conteúdo entra em conflito com as melhores práticas de indexação e acessibilidade.
Nenhum comentário
Seja o primeiro!