Sprites CSS são ruins para SEO?

18

Hoje em dia, muitas vezes o que foi realizado com uma <img>tag agora é feito com algo como um <div>com uma imagem de plano de fundo CSS definida usando um 'sprite' CSS e um deslocamento.

Fiquei me perguntando que tipo de efeito ele tem sobre SEO, assim como perdemos o altatributo (que é indexado pelo Google) e ficamos presos ao atributo 'title' (que, pelo que entendi, não é indexado).

Isso é uma desvantagem significativa?

seo css

— Até o riacho
fonte

25

Os sprites CSS devem ser usados apenas para elementos decorativos por esse motivo - use <img>para elementos específicos de uma página e use sprites para elementos decorativos que não sejam contextualmente relevantes para o conteúdo apresentado.

Se você precisar de uma imagem de botão para os itens de navegação, faz muito mais sentido adicionar essa imagem como plano de fundo no link de navegação, em vez de uma marcação como esta:

<a href="/">
  <img src="/images/home.gif" title="Home" alt="Home Button" /> 
  Home
</a>

(ou seja, onde o conteúdo da imagem é redundante para o conteúdo de texto na página ou o conteúdo da imagem pode ser melhor descrito como "decoração")

Como um bônus adicional de separar elementos de modelo de site como sprites, mais tarde você poderá alterar a "aparência" do site alterando a folha de estilo em vez de substituir os arquivos de imagem de design antigos ou reescrever toda a sua marcação HTML.

— danlefree
fonte

Concordo com seus pontos de vista e acrescentaria que um dos principais objetivos / vantagens dos sprites é a velocidade de carregamento mais rápida para o desempenho geral do site. Um carregamento mais rápido da página É SUBSTITUÍDO para ajudar nos rankings de SEO, então acho que é uma questão da ferramenta certa para o trabalho certo.

— digit1001

@ digit1001 - os bots como o googlebot realmente carregam todos os recursos associados a uma página?

— UpTheCreek 5/05

4

Você pode usar <img>tags com sprites CSS:

<img alt="description of image" src="images/sprite.png" id="someSprite" />

sprite.png pode ser um pixel transparente de 1x1 compactado para <50 bytes.

Estilo:

#someSprite {

     width:74px;
     height:38px;
     background:url('/images/sprites.png') left 0px top 84px;

}

Dessa forma, você obtém a otimização de desempenho dos sprites - e mantém suas alttags.

— JohnnyFaldo
fonte

Tenho certeza de que se o Google pode compor um mecanismo de pesquisa com processos complexos para classificar e indexar 30 trilhões de páginas, ele pode detectar asserções alt de 1x1 pixel.

— Ricky Boyce

11

@ Ricky B Não é se eles o detectarão, mas se eles o penalizarem de maneira bizarra, o que seria estranho, pois eles o penalizariam por reduzir o tempo de carregamento da página e o número de solicitações, o que é algo que eles tendem a incentivar: )

— JohnnyFaldo 02/02

1

A alttag está superestimada. Acho que muitas pessoas fazem o possível para garantir que tenham alttags em suas páginas. Eu não acredito que dói você não ter um. É apenas uma questão de garantir que img, se você tiver uma altetiqueta , tenha uma etiqueta atribuída a ela.

Acredito que o tempo de carregamento e o desempenho do site tenham um impacto maior no SEO em geral do que as alttags e, para cada solicitação de imagem ou HTTP, o site ficará mais lento. O objetivo de um sprite de CSS é ajudar a minimizar essas solicitações e acelerar o tempo de carregamento da página.

— Brandon Buttars
fonte

5

O alttexto também é usado pelos leitores de tela. Eu acho que você pode ter uma opinião diferente sobre o texto alternativo se for cego.

— MikeTheLiar

1

Eu costumo usar sprites para ícones decorativos, eles não têm nada a ver com a página como um todo, portanto, para o SEO, tudo bem nesse caso. Qualquer conjunto de imagens que você tem e todas as mesmas dimensões que não contribuem para o significado da página são bons candidatos aos sprites de CSS.

— Agile Noob
fonte