As imagens de fundo do CSS não são indexadas

Em uma pesquisa recente no podcast Record, a equipe de relações de pesquisa do Google alertou os desenvolvedores contra o uso de CSS para todas as imagens do site.

Embora as imagens de fundo do CSS possam aprimorar o design visual, elas são invisíveis para a pesquisa de imagens do Google. Isso pode levar a oportunidades perdidas na indexação de imagens e na visibilidade da pesquisa.

Aqui está o que os advogados de pesquisa do Google aconselham.

O problema da imagem CSS

Durante o episódio, John Mueller compartilhou uma questão recorrente:

“Eu tive alguém me ping, acho que na semana passada ou uma semana antes nas mídias sociais:“ Parece que meu desenvolvedor decidiu usar o CSS para todas as imagens porque acreditam que é melhor. ” Isso funciona? “

De acordo com a equipe do Google, essa abordagem decorre de um mal -entendido de como os mecanismos de pesquisa interpretam imagens.

Quando os visuais são adicionados via propriedades de fundo CSS em vez de tags de imagem HTML padrão, elas podem não aparecer no DOM da página e, portanto, não podem ser indexadas.

Como Martin Splitt explicou:

“Se você tem uma imagem de conteúdo, se a imagem faz parte do conteúdo … você quer um imguma tag de imagem ou um picture Tag que realmente tem a imagem real como parte do DOM, porque você quer que vejamos como Ah, então esta página tem essa imagem que não é apenas decoração. Faz parte do conteúdo e, em seguida, a pesquisa de imagens pode buscá -lo. ”

Conteúdo vs. decoração

A diferença entre uma imagem de conteúdo e uma imagem decorativa é se adiciona significado ou é puramente cosmético.

Imagens decorativas, como fundos padronizados, efeitos atmosféricos ou animações, podem ser implementados com segurança usando CSS.

Quando a imagem transmite significado ou é referenciada no conteúdo, o CSS é um ajuste ruim.

Splitt ofereceu o seguinte exemplo:

“Se eu tenho uma postagem no blog sobre esse cenário específico e quero gostar de dizer às pessoas como olhar para esta incrível visão panorâmica da paisagem aqui e, em seguida, é uma imagem de fundo … O problema é o conteúdo especificamente referencia essa imagem, mas não tem a imagem como parte do conteúdo.”

Nesses casos, colocando a imagem em html usando o img ou picture A tag garante que seja entendida como parte do conteúdo da página e elegível para indexação na pesquisa de imagens do Google.

O que torna as imagens CSS invisíveis?

Splitt explicou por que isso acontece:

“Para um usuário que olhava para o navegador, do que você está falando, Martin? A imagem está ali. Mas se você olhar para o DOM, absolutamente não está lá. É apenas uma coisa do CSS que foi carregada para estilizar a página.”

Como o Google analisa o DOM para determinar a estrutura do conteúdo, as imagens estilizadas apenas por meio de CSs são frequentemente negligenciadas, especialmente se elas não forem incluídas como elementos HTML reais.

Essa distinção reflete um princípio mais amplo de desenvolvimento da Web.

Split adiciona:

“Idealmente, existe uma separação entre a aparência do site e qual é o conteúdo”.

E as fotos de estoque?

A equipe abordou o uso de fotos de ações, que às vezes são adicionadas para apelo visual, em vez de conteúdo original.

Split diz:

“O significado ainda é como se essa imagem não fosse minha. É uma imagem de estoque que compramos ou licenciamos, mas ainda faz parte do conteúdo”, observou a equipe.

Embora essas imagens possam não ser classificadas muito devido à duplicação, implementá -las no HTML ainda ajuda a garantir a indexação adequada e melhora a acessibilidade.

Por que isso importa

A equipe destacou vários exemplos em que a implementação inadequada poderia reduzir a visibilidade:

• Listagens de imóveis: Fotos domésticas usadas como imagens de fundo não aparecem em consultas de pesquisa de imagens relevantes.
• Artigos de notícias: Gráficos ou infográficos adicionados via CSS não podem ser indexados, enfraquecendo a descoberta.
• Sites de comércio eletrônico: Imagens do produto incorporadas em estilos de fundo podem não aparecer em pesquisas relacionadas às compras.

O que fazer a seguir

Os comentários do Google indicam que você deve seguir estas melhores práticas:

• Use html (img ou picture) Tags para qualquer imagem que transmita conteúdo ou é referenciada na página.
• Reserve os fundos CSS para visuais decorativos que não carregam significado.
• Se os usuários podem esperar encontrar uma imagem via pesquisa, ela deve estar no HTML.
• A implementação adequada ajuda não apenas com o SEO, mas também com ferramentas de acessibilidade e leitores de tela.

Olhando para o futuro

Os editores devem estar atentos à forma como as imagens são implementadas.

Embora o CSS seja uma ferramenta poderosa para o design, usá-lo para fornecer imagens relacionadas ao conteúdo pode entrar em conflito com as melhores práticas para indexação, acessibilidade e estratégia de SEO de longo prazo.

Ouça o episódio completo do podcast abaixo:

https://www.youtube.com/watch?v=L2E3GBDP_QY

---

Imagem em destaque: Roman Samborskyi/Shutterstock