Essa é uma boa abordagem para a imagem Lazy Loading for SEO?

14

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

seo google javascript

— Aeron
fonte

Os links de saída não prejudicam o seu page rank. Não é assim que o PR funciona.

— Lèse majesté

O número total de links de saída prejudicaria o PR que cada link possui? Portanto, se originalmente a página tivesse 5 links - cada um com 20% de RP - mas com essa abordagem, haveria 50 - cada um agora teria 2%?

— Aeron

Está correto. A quantidade de PR que é aprovada é dividida pelo número de links na página, mas devido à escultura do PR, 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.

— Lèse majesté

10

Essa é uma boa abordagem. Outra abordagem que você pode adotar é usar o <noscript />elemento para armazenar a versão normal da imgtag, 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 os srcatributos na sua fila de carregamento lento). Se você fizer isso corretamente, poderá fazer isso antes que qualquer uma das imagens comece a baixar.

— Lèse majesté
fonte

2

Eu adoraria ver isso - o Google não olha <noscript>e ainda não encontrei uma maneira de bloquear o carregamento de imagens no Firefox; substituir src(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!

— mindplay.dk

@ mindplay.dk: o Google pode optar por não usar noscripttexto nos trechos, mas tudo o que li me leva a acreditar que indexa o noscriptconteúdo em geral. No entanto, você está certo sobre a substituição src. Meu pensamento original era colocar um script antes 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.

— Lèse majesté 21/12/12

Um sujo corte alguém veio com é usar JS para comentar as imagens JS-livres assim (há uma versão mais longa que lida com a análise especulativa): <script>document.write('<'+'!--');</script><img src=...>. Você terá que decidir por si mesmo se essa é uma abordagem aceitável.

— Lèse majesté 21/12/12

2

Vi imagens carregadas com este padrão:

<img data-src="path/to/image.jpg" class="js-lazy-load" />

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:

<img src="placeholder.gif" data-src="path/to/image.jpg" class="js-lazy-load" alt="Image alt text here" />

Nb. isso não se aplica necessariamente a outros mecanismos de pesquisa.

— Willster
fonte