Czy to dobre podejście do obrazu Lazy Loading dla SEO?

W przypadku obrazów ładowanych przez AJAX lub takich, których nie chcę indeksować, użyj podejścia atrybut data- *:

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

Javascript mapuje atrybut data-src na atrybut src :

<img src="path/to/image.jpg" />

Ale dla obrazów w HTML, które chcę indeksować:

<a href="path/to/image.jpg" class="js-lazy-load">Image alt text here</a>

Javascript zastępuje kotwicę z krytym obrazu tagu:

<img src="path/to/image.jpg" alt="Image alt text here" />

Wydaje się, że zachowałoby to zdolność indeksowania i intencję strony (dla ułatwienia dostępu) bez wpływu na SEO (mam nadzieję). Ale chciałbym drugą opinię.

Edycja: Wszelkie opinie na temat tego, jak to podejście - strona z linkami do zdjęć w porównaniu do strony z wbudowanymi tagami IMG - porównałoby się w odniesieniu do rankingu strony. Domyślam się, że wbudowane tagi IMG wypadłyby lepiej, ponieważ każdy link wychodzący pogorszyłby ogólny ranking strony (chyba że miały rel = „nofollow”, co byłoby nieproduktywne).

To dobre podejście. Innym podejściem, które możesz zastosować, jest użycie <noscript />elementu do przechowywania normalnej wersji imgtagu, który zostałby zaindeksowany przez Google, i użycie JS do utworzenia leniwej wersji ładowania.

Alternatywnie możesz użyć konwencyjnych skrótów Google AJAX w połączeniu z historycznym interfejsem API HTML5, aby ustawić stany stron z możliwością dodawania zakładek i indeksów. Jest to szczególnie korzystne, jeśli robisz coś w rodzaju nieskończonej strony przewijania, ponieważ zapewnia ona formę pseudo-paginacji - czegoś, czego desperacko potrzebują najbardziej nieskończone implementacje przewijania ( :: kaszel :: Google Images :: kaszel ::) .

Jeśli nie chcesz tego lub chcesz, aby strona z wdziękiem się pogorszyła dla użytkowników spoza JS, możesz pójść w drugą stronę i zacząć od zwykłych obrazów, ale używając blokowania JS, aby zastąpić srcatrybut obrazów przy ładowaniu strony (lub nawet po prostu usuń elementy obrazu i zapisz srcatrybuty w leniwej kolejce ładowania). Jeśli zrobisz to poprawnie, możesz to zrobić, zanim którykolwiek z obrazów zacznie się pobierać.

Widziałem obrazy załadowane tym wzorem:

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

zostać złapanym przez Google i wyszukiwarkę grafiki Google, a inni też to zauważyli . Ponieważ Google wykonuje teraz javascript na twojej stronie, może nie być konieczne wstawianie rzeczywistego obrazu do atrybutu src. Zaniedbanie atrybutu src może prowadzić do powstania szarej ramki wokół obrazu, więc prawdopodobnie najlepiej zastosować coś takiego:

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

Uwaga niekoniecznie dotyczy to innych wyszukiwarek.