Para imagens carregadas via AJAX ou que não quero indexadas, use a abordagem de atributo data- *:
<img data-src="path/to/image.jpg" class="js-lazy-load" />O javascript mapeia o atributo data-src para o atributo src :
<img src="path/to/image.jpg" />Mas para imagens no HTML que eu não deseja indexar:
<a href="path/to/image.jpg" class="js-lazy-load">Image alt text here</a>O javascript substitui a âncora por uma tag de imagem :
<img src="path/to/image.jpg" alt="Image alt text here" />Parece que preservaria a capacidade de indexação e a intenção da página (para acessibilidade) sem afetar o SEO (espero). Mas adoraria uma segunda opinião.
Editar: qualquer comentário sobre como essa abordagem - página com links para imagens versus página com tags IMG embutidas - seria comparada em relação à classificação da página. Eu estou supondo que as tags IMG embutidas se sairiam melhor, pois cada link de saída prejudicaria o ranking geral da página (a menos que eles tivessem rel = "nofollow", o que seria contraproducente).
fonte
nofollowagora os links também são incluídos ao dividir o PR entre os links. Portanto, mesmo se você tiver 45 links nofollow e 5 links regulares, os 5 links regulares ainda passarão apenas 2% do suco do link. Embora se o Google fosse inteligente, eles tratariam os links de imagem de maneira diferente dos links HTML, pois sua solução é válida para usabilidade e acessibilidade e não deve ser desencorajada diluindo seu fluxo de relações públicas.Respostas:
Essa é uma boa abordagem. Outra abordagem que você pode adotar é usar o
<noscript />elemento para armazenar a versão normal daimgtag, que seria indexada pelo Google, e usar JS para criar a versão de carregamento lenta.Como alternativa, você pode usar as convenções AJAX hashbang do Google combinadas com a API de histórico do HTML5 para criar estados de página com capacidade para marcar e indexar. Isso é especialmente preferível se você estiver fazendo algum tipo de página de rolagem infinita, pois fornece uma forma de pseudo-paginação - algo que a maioria das implementações de rolagem infinita precisa desesperadamente ( :: cough :: Google Images :: cough ::) .
Editar: o uso de links como espaços reservados para as imagens pode fazer com que o fluxo de PR da página seja dividido entre mais links, embora o PR seja sempre conservado, a menos que você o use
nofollowem teoria, isso aumentaria o PR dessas imagens para pesquisas de imagens.Se você não deseja isso ou deseja que a página seja degradada normalmente para usuários que não são JS, siga a rota oposta e comece com imagens regulares, mas usando o JS bloqueador para substituir o
srcatributo das imagens no carregamento da página (ou mesmo basta excluir os elementos da imagem e armazenar ossrcatributos na sua fila de carregamento lento). Se você fizer isso corretamente, poderá fazer isso antes que qualquer uma das imagens comece a baixar.fonte
<noscript>e ainda não encontrei uma maneira de bloquear o carregamento de imagens no Firefox; substituirsrc(mesmo com uma<script>tag imediatamente após a<img>tag) não parece impedir o download da imagem na versão mais recente do Firefox. Se você conhece outra maneira de fazer isso, compartilhe!noscripttexto nos trechos, mas tudo o que li me leva a acreditar que indexa onoscriptconteúdo em geral. No entanto, você está certo sobre a substituiçãosrc. Meu pensamento original era colocar umscriptantes da primeira imagem, para bloquear o carregamento das imagens até que o script seja carregado e executado. Porém, após um exame mais aprofundado, isso não funcionaria, pois as imagens não apareceriam no DOM naquele momento. Você pode bloquear o download maximizando as conexões simultâneas com o host, mas isso é impraticável atualmente.<script>document.write('<'+'!--');</script><img src=...><!---->. Você terá que decidir por si mesmo se essa é uma abordagem aceitável.Vi imagens carregadas com este padrão:
são apanhados pelo Google e pela Pesquisa de imagens do Google e outros também o viram . Como o Google agora executa javascript na sua página, talvez não seja necessário colocar a imagem real no atributo src. Negligenciar um atributo src pode levar a uma borda cinza em torno de sua imagem; portanto, é melhor optar por algo como:
Nb. isso não se aplica necessariamente a outros mecanismos de pesquisa.
fonte