Leniwe ładowanie zdjęć i efektów na SEO

23

Używamy następującej techniki do leniwego ładowania obrazów na naszej stronie:

Dla wszystkich obrazów umieszczamy w srcatrybucie adres URL domyślnego obrazu (tj. Modułu ładującego) i umieszczamy rzeczywisty adres URL obrazu w data-srcatrybucie. Podoba mi się

<img src="loader.gif" data-src="img1.jpg" />

Gdy obraz znajduje się poza oknem ekranu, nic się nie dzieje, ale gdy obraz trafia do okienka ekranu, data-srcładowany jest adres URL z atrybutu i obraz jest poprawnie wyświetlany.

W rezultacie Google widzi wszystkie obrazy na stronie (tj. Stronie wyników wyszukiwania) jako mające ten sam srcatrybut. Ponieważ bot Google oczywiście analizuje tylko domyślny tag „niezaładowany” img src.

Moje pytanie brzmi: czy posiadanie wielu tagów img z tym samym srcatrybutem wpływa na SEO strony ?

— bmenekl
źródło

2

Myślę, że odpowiedni tytuł i alt to 90% pracy. Nazwa pliku mniejsza. Może to mieć wpływ na wyniki w Grafice Google

— Martijn

patrz także: webmasters.stackexchange.com/questions/26190/…

— Salman A

Z pewnością może to wpłynąć na liczbę obrazów, które zostały zindeksowane w Wyszukiwarce grafiki Google. Pytasz o to, czy o jakikolwiek wpływ, jaki miałoby to na rankingi w normalnym wyszukiwaniu w sieci?

— Stephen Ostermiller

@StephenOstermiller moim głównym zmartwieniem są rankingi, ale każdy efekt (natychmiastowy lub wtórny) SEO jest interesujący

— bmenekl

To pytanie zostało zadane na StackOverflow, ale moim zdaniem nie ma świetnych odpowiedzi.

— Stephen Ostermiller

10

Nigdy nie widziałem, aby leniwe ładowanie obrazu miało jakikolwiek negatywny wpływ na rankingi wyszukiwania w sieci. Poprawa postrzeganej wydajności witryny dla użytkowników może naprawdę pomóc w twoich rankingach. Gdy mniej osób wróci do wyników wyszukiwania z powodu problemów z wydajnością witryny, rankingi się poprawią.

Google nie będzie w stanie indeksować leniwie załadowanych obrazów do wyszukiwania obrazów. Zamiast tego istnieje kilka możliwych poprawek technicznych, takich jak:

używaj <noscript>tagów wyświetlających obrazy użytkownikom, którzy nie mają włączonej obsługi JavaScript (i botów wyszukiwarek)
Link do twoich zdjęć. Wyszukiwanie obrazu nie ma znaczenia, czy obraz jest w img src czy w href. Tak więc poniższy fragment spowoduje załadowanie obrazu leniwie i indeksowanie obrazu w pełnym rozmiarze podczas wyszukiwania obrazu: <a href="/webmasters//img_large/foo.jpg"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif"></a>

— Stephen Ostermiller
źródło

3

Nie polegałbym na „noscript” - widzimy wiele spamu próbującego go użyć, więc nie zawsze jesteśmy wystarczająco pewni, aby zaufać zawartym w nim treściom. Podoba mi się pomysł użycia linków do zdjęć. Ogólnie rzecz biorąc, jeśli obraz jest jednym z podstawowych elementów na stronie, nadal staram się po prostu osadzić go w sposób naturalny (co najmniej jedna wersja, jeśli używasz różnych rozmiarów), aby mieć pewność, że jest on indeksowany normalnie Pracujemy nad lepszą historią, ale nie widzę, żeby zmieniła się dzisiaj czy jutro.

— John Mueller

1

Używając tej taktyki, możesz wypróbować opakowanie <a>, jeśli twoje zdjęcia są już otoczone linkiem do produktów lub czegoś takiego:

<a href="/webmasters//img_large/foo.jpg"><a href="www.example.com/page"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif" /></a></a>

Wewnętrzny link wymaga kliknięcia interfejsu użytkownika, podczas gdy zewnętrzny powinien nadal działać dla robotów indeksujących obrazy.

— dhaupin

1

Czy ta odpowiedź jest ważna również w 2017 roku? W szczególności „Google nie będzie w stanie zaindeksować leniwie załadowanych obrazów do wyszukiwania obrazów”. Część? Więc nawet mamy 10 zdjęć w poście, Google sądzi, że nie mamy żadnych zdjęć?

— Jestem najbardziej głupią osobą

Nadal tak jest, ale nadal możesz utworzyć link do swoich zdjęć, aby je zindeksować.

— Stephen Ostermiller

1

Większość wyszukiwarek indeksuje obrazy, które są ukryte, o ile nie używasz stylów wbudowanych do ukrywania obrazu. Większość przeglądarek nie ładuje ukrytych obrazów.

Istnieje strona testowa, która może zweryfikować to roszczenie. Niektóre starsze przeglądarki mobilne są wyjątkiem, ale uważam, że leniwe ładowanie na telefony komórkowe może być szkodliwe dla dobrego przeglądania.

http://www.w3.org/2009/03/image-display-none/test.php

W swoim pliku CSS dodaj następującą modyfikację.

.lazy-img { display: none; }

Teraz możesz załadować stronę z takimi leniwymi obrazami, jak te, które zostaną zindeksowane.

<body>
   <img class="lazy-img" src="img1.jpeg" title="image title"/>
   <img class="lazy-img" src="img2.jpeg" title="image title"/>
   <img class="lazy-img" src="img3.jpeg" title="image title"/>
   <img class="lazy-img" src="img4.jpeg" title="image title"/>
</body>

Ważne jest, aby dołączyć titleatrybut obrazu. Lub otaczasz <img> znacznik linkiem <a> znacznikiem i tekstem łącza. W przeciwnym razie wyszukiwarki powiążą słowa kluczowe z obrazem według odległości słowo. Masz problem z SEO, który równie dobrze możesz przejść.

Jeśli użyjesz powyższego, jak jest. Nic nie będzie wyświetlane, ponieważ obrazy są ukryte. Chcesz usunąć tę klasę na dole dokumentu. Kluczem tutaj jest użycie wbudowanego czystego Javascript. JavaScript jest wykonywany natychmiast po zakończeniu układu powyższych elementów. Jeśli załadujesz wszystkie zewnętrzne pliki JS na dole (tak jak powinieneś). Powinieneś umieścić ten blok JavaScript nad tymi plikami. Aby nie było opóźnień w modyfikacji DOM.

<body>
   <!--[if lte IE 8]
   <style type="text/css">.lazy-img { display: block !important; }</style>
   [endif]-->
   <noscript><style type="text/css">.lazy-img { display: block !important; }</style></noscript>
   <img class="lazy-img" src="img1.jpeg" title="image title"/>
   <img class="lazy-img" src="img2.jpeg" title="image title"/>
   <img class="lazy-img" src="img3.jpeg" title="image title"/>
   <img class="lazy-img" src="img4.jpeg" title="image title"/>
   <![if gte IE 9]>
   <script type="text/javascript">
      var images = document.getElementsByClassName('lazy-img');
      Array.prototype.forEach.call(images, function(image){
         image.setAttribute("data-src",image.getAttribute("src"));
         image.setAttribute("src","loading.gif");
      });
      while(images.length > 0) { images[0].className = ""; }
   </script>
   <![endif]>
</body>

Teraz dodałem warunkowe dla IE9, ponieważ nie obsługuje ono wersji getElementsByClassName8 i starszych. To, co powinno się zdarzyć (nie przetestowane), to, że te przeglądarki po prostu załadują obraz tak, jak jest.

Zaletą tego podejścia jest utrzymanie HTML-a w czystości z perspektywy webcrawlera.

— Reactgular
źródło

1

Byłem ciekawy i wypróbowałem stronę testową. Najnowsze Chrome i Safari na Macu wydają się ładować obraz. W końcu nie jestem pewien, czy to bardzo niezawodne ...

— Pevara

Niestety przy tej metodzie wszystkie obrazy są leniwie ładowane na dole dokumentu (niezłe), ale jak wyjaśniam w moim pytaniu, w moim podejściu obrazy są leniwie ładowane tylko wtedy, gdy wchodzą do rzutni. Tak więc każdy obraz, który nie wejdzie do rzutni (tj. Użytkownik końcowy nie przewinie się w dół na stronie), nie zostanie w ogóle załadowany. Na stronie z dużą ilością zdjęć jest to naprawdę ważne

— bmenekl

@bmenekl Nie, ta odpowiedź nie wykonuje leniwego ładowania. Zmienia tylko HTML, gdy przegląda się go w przeglądarce obsługującej javascript, aby skrypt innej firmy mógł wykonywać leniwe ładowanie.

— Reactgular

1

Google zadeklarowało uruchomienie JavaScript za pomocą swoich botów, więcej informacji można znaleźć w tym poście .

Jak udokumentowano, nie wolno zabronić Googlebotowi plików statycznych w celu dynamicznego indeksowania.

— Zulus
źródło