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).
źródło
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.Odpowiedzi:
To dobre podejście. Innym podejściem, które możesz zastosować, jest użycie
<noscript />elementu do przechowywania normalnej wersjiimgtagu, 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 zapiszsrcatrybuty w leniwej kolejce ładowania). Jeśli zrobisz to poprawnie, możesz to zrobić, zanim którykolwiek z obrazów zacznie się pobierać.źródło
<noscript>i jeszcze nie znalazłem sposobu, aby zablokować ładowanie obrazu w Firefoksie; zastępowaniesrc(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!noscripttekstu we fragmentach, ale wszystko, co przeczytałem, prowadzi mnie do przekonania, żenoscriptogólnie indeksuje treść. Masz jednak rację, zastępującsrc. Moją pierwotną myślą było umieszczeniescriptprzed 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.<script>document.write('<'+'!--');</script><img src=...><!---->. Musisz sam zdecydować, czy jest to akceptowalne podejście.Widziałem obrazy załadowane tym wzorem:
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:
Uwaga niekoniecznie dotyczy to innych wyszukiwarek.
źródło