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


14

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


Linki wychodzące nie wpływają na pozycję strony w rankingu. Nie tak działa PR.
Lèse majesté

Czy całkowita liczba linków wychodzących szkodziłaby PR, który ma każdy link? Więc jeśli pierwotnie strona miała 5 linków - każdy z 20% PR - ale przy takim podejściu byłoby 50 - czy teraz każdy miałby 2%?
Aeron

To jest poprawne. Liczba przekazywanych PR jest dzielona przez liczbę linków na stronie, ale ze względu na rzeźbienie PR, nofollowlinki są teraz uwzględniane również przy dzieleniu PR między linkami. Więc nawet jeśli masz 45 linków nofollow i 5 zwykłych linków, 5 zwykłych linków nadal przekazuje tylko 2% soku z linków. Chociaż jeśli Google byłby inteligentny, traktowałyby linki obrazkowe inaczej niż linki HTML, ponieważ Twoje rozwiązanie jest ważne pod względem użyteczności i dostępności i nie powinno się go zniechęcać, zmniejszając przepływ PR.
Lèse majesté

Odpowiedzi:


10

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


Edycja: Użycie linków jako symboli zastępczych dla obrazów może spowodować podzielenie przepływu PR ze strony na więcej linków, chociaż PR jest zawsze zachowany, chyba że użyjesz go, nofollowwięc teoretycznie zwiększy to PR tych obrazów do wyszukiwania obrazów.

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


2
Chciałbym to zobaczyć - Google nie patrzy <noscript>i jeszcze nie znalazłem sposobu, aby zablokować ładowanie obrazu w Firefoksie; zastępowanie src(nawet <script>tagiem bezpośrednio po <img>tagu) nie wydaje się uniemożliwiać pobrania obrazu w najnowszej wersji Firefoksa. Jeśli znasz inny sposób na zrobienie tego, udostępnij!
mindplay.dk

@ mindplay.dk: Google może zdecydować się nie używać noscripttekstu we fragmentach, ale wszystko, co przeczytałem, prowadzi mnie do przekonania, że noscriptogólnie indeksuje treść. Masz jednak rację, zastępując src. Moją pierwotną myślą było umieszczenie script przed pierwszym obrazem, aby blokował ładowanie obrazów do momentu załadowania i wykonania skryptu. Ale po dokładniejszym zbadaniu nie zadziałałoby, ponieważ obrazy nie pojawiałyby się w DOM w tym momencie. Państwo mogłoby zablokować pobieranie przez maxing równoczesnych połączeń z hostem, ale to niepraktyczne te dni.
Lèse majesté

Brudny Hack ktoś wpadł na to, aby korzystać z JS do zakomentuj JS-darmowe zdjęcia jak tak (jest dłuższa wersja, która zajmuje się spekulacyjnego parsowania) <script>document.write('<'+'!--');</script><img src=...><!---->. Musisz sam zdecydować, czy jest to akceptowalne podejście.
Lèse majesté

2

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.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.