Preguiçoso carregando imagens e efeitos em SEO

Estamos usando a seguinte técnica para carregar preguiçosamente imagens em nosso site:

Para todas as imagens, colocamos no srcatributo um URL para um img padrão (ou seja, um carregador) e colocamos o URL da imagem real no data-srcatributo. 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-srcatributo é 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 srcatributo. 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 srcatributo afeta o SEO da página ?

— bmenekl
fonte

Acho que título e alt adequados são 90% do trabalho. Nome do arquivo menos. Isso pode afetar os resultados no Google Imagens, eu acho

— Martijn

veja também: webmasters.stackexchange.com/questions/26190/…

— Salman A

Certamente, isso pode afetar o número de imagens que você indexou na Pesquisa de imagens do Google. Você está perguntando sobre isso ou sobre qualquer efeito que isso teria nos rankings de pesquisa normal na web?

— Stephen Ostermiller

@StephenOstermiller minha principal preocupação é os rankings, mas qualquer efeito (imediata ou secundário) para o SEO é de interesse

— bmenekl

Esta pergunta foi feita no StackOverflow, mas não tem grandes respostas na minha opinião.

— Stephen Ostermiller

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:

use <noscript>tags que mostram as imagens para usuários que não têm o JavaScript ativado (e robôs de mecanismo de pesquisa)
Também link para suas imagens. Não parece importar para a pesquisa de imagens se a imagem está no img src ou no a href. Portanto, o snippet a seguir carrega preguiçosamente a imagem e indexa a imagem em tamanho real na pesquisa de imagens: <a href="/webmasters//img_large/foo.jpg"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif"></a>

— Stephen Ostermiller
fonte

Eu não confiaria no "noscript" - vemos um monte de spam tentando usá-lo, por isso nem sempre estamos confiantes o suficiente para confiar no conteúdo colocado lá. Gosto da ideia de usar links para as imagens. Em geral, se uma imagem é um dos elementos principais de uma página, ainda assim eu tenderia a incorporá-la naturalmente (pelo menos uma versão, se você estiver usando tamanhos diferentes), para ter certeza de que está indexada normalmente. Estamos trabalhando em uma história melhor para isso, mas não vejo isso mudando hoje ou amanhã.

— John Mueller

Usando sua tática, você pode tentar um <a> wrapper se suas imagens já estiverem cercadas por um link para produtos ou algo assim:

<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.

— dhaupin

Esta resposta também é válida para 2017? Especialmente "O Google não poderá indexar imagens carregadas preguiçosamente para pesquisa de imagens". Parte? Então, mesmo que tenhamos 10 imagens no post, o Google acha que não temos imagens?

— Eu sou a pessoa mais estúpida

Esse ainda é o caso, mas você ainda pode vincular suas imagens para indexá-las.

— Stephen Ostermiller

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.

.lazy-img { display: none; }

Agora você pode carregar uma página com imagens preguiçosas como esta e elas serão indexadas.

<body>
   <img class="lazy-img" src="img1.jpeg" title="image title"/>
   <img class="lazy-img" src="img2.jpeg" title="image title"/>
   <img class="lazy-img" src="img3.jpeg" title="image title"/>
   <img class="lazy-img" src="img4.jpeg" title="image title"/>
</body>

É importante que você inclua o titleatributo para a imagem. Ou você envolve a <imgtag> com uma <atag> 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.

<body>
   <!--[if lte IE 8]
   <style type="text/css">.lazy-img { display: block !important; }</style>
   [endif]-->
   <noscript><style type="text/css">.lazy-img { display: block !important; }</style></noscript>
   <img class="lazy-img" src="img1.jpeg" title="image title"/>
   <img class="lazy-img" src="img2.jpeg" title="image title"/>
   <img class="lazy-img" src="img3.jpeg" title="image title"/>
   <img class="lazy-img" src="img4.jpeg" title="image title"/>
   <![if gte IE 9]>
   <script type="text/javascript">
      var images = document.getElementsByClassName('lazy-img');
      Array.prototype.forEach.call(images, function(image){
         image.setAttribute("data-src",image.getAttribute("src"));
         image.setAttribute("src","loading.gif");
      });
      while(images.length > 0) { images[0].className = ""; }
   </script>
   <![endif]>
</body>

Agora eu adicionei condicionais para o IE9, uma vez que não suporta getElementsByClassNameem 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.

— Reactgular
fonte

Fiquei curioso e tentei a página de teste. O Chrome e o Safari mais recentes no Mac parecem carregar a imagem. Não tão certo de que este é muito confiável, afinal, infelizmente ...

— Pevara

Infelizmente, com este método, as imagens são todas carregadas preguiçosamente na parte inferior do documento (nada mal), mas, como estou explicando na minha pergunta, na minha abordagem, as imagens são carregadas preguiçosamente apenas quando entram na janela de visualização. Portanto, qualquer imagem que não entre na janela de exibição (ou seja, o usuário final não rola assim na página) não será carregada. Em uma página com um monte de imagens isto é realmente importante

— bmenekl

@bmenekl Não, esta resposta não realiza carregamento lento. Ele altera apenas o HTML quando visualizado em um navegador habilitado para javascript, para que um script de terceiros possa executar carregamento lento.

— Reactgular

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.

— zulu
fonte