Estamos usando a seguinte técnica para carregar preguiçosamente imagens em nosso site:
Para todas as imagens, colocamos no src
atributo um URL para um img padrão (ou seja, um carregador) e colocamos o URL da imagem real no data-src
atributo. Igual a
<img src="loader.gif" data-src="img1.jpg" />
Quando a imagem está fora da janela de visualização, nada acontece, mas quando a imagem entra na janela de visualização, a URL do data-src
atributo é carregada e a imagem é mostrada corretamente.
Como resultado, o Google vê todas as imagens na página (ou seja, uma página de resultados de pesquisa) como tendo o mesmo src
atributo. Como o bot do Google, claro, analisa apenas a tag img 'unloaded' com o padrão src
.
Minha pergunta é: ter muitas tags img com o mesmo src
atributo afeta o SEO da página ?
Respostas:
Nunca vi um carregamento lento de imagem ter um impacto negativo nos rankings de pesquisa na web. Melhorar o desempenho percebido do seu site para os usuários pode realmente ajudar seus rankings. Quando menos pessoas retornam aos resultados da pesquisa devido a problemas de desempenho no seu site, suas classificações melhoram.
O Google não poderá indexar imagens carregadas preguiçosamente para pesquisa de imagens. Existem algumas correções técnicas possíveis, como:
<noscript>
tags que mostram as imagens para usuários que não têm o JavaScript ativado (e robôs de mecanismo de pesquisa)<a href="/webmasters//img_large/foo.jpg"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif"></a>
fonte
<a href="/webmasters//img_large/foo.jpg"><a href="www.example.com/page"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif" /></a></a>
O link interno recebe o clique da interface do usuário, enquanto o externo ainda deve funcionar para indexar imagens de bots.A maioria dos mecanismos de pesquisa indexa imagens ocultas, desde que você não use estilos embutidos para ocultar a imagem. A maioria dos navegadores não carrega imagens ocultas.
Há uma página de teste que pode verificar esta reivindicação. Alguns navegadores móveis mais antigos são a exceção, mas eu argumento que o carregamento lento em telefones celulares pode ser contraproducente para uma boa experiência de navegação.
http://www.w3.org/2009/03/image-display-none/test.php
No seu arquivo CSS, adicione a seguinte modificação.
Agora você pode carregar uma página com imagens preguiçosas como esta e elas serão indexadas.
É importante que você inclua o
title
atributo para a imagem. Ou você envolve a<img
tag> com uma<a
tag> link e texto do link. Caso contrário, os mecanismos de pesquisa associarão as palavras-chave à imagem por distância da palavra. Você está enfrentando todo esse problema para o SEO e pode ir até o fim.Se você usar o acima como está. Nada será exibido quando as imagens estiverem ocultas. Você deseja remover esta classe na parte inferior do documento. A chave aqui é usar Javascript puro embutido. Este Javascript é executado imediatamente após a conclusão do layout dos elementos acima. Se você carregar todos os seus arquivos JS externos na parte inferior (como deveria). Você deve colocar esse bloco Javascript acima desses arquivos. Para que não haja atraso na modificação do DOM.
Agora eu adicionei condicionais para o IE9, uma vez que não suporta
getElementsByClassName
em 8 ou mais. O que deveria acontecer (não testado) é que esses navegadores apenas carregam a imagem como estão.A vantagem dessa abordagem é que mantém o HTML limpo da perspectiva do webcrawler.
fonte
O Google declarou executar o JavaScript com seus bots. Consulte este post para obter mais explicações.
Conforme documentado, você não deve proibir arquivos estáticos no GoogleBot para rastreamento dinâmico.
fonte