Ленивая загрузка изображений и влияние на SEO

23

Мы используем следующую технику для отложенной загрузки изображений на наш сайт:

Для всех изображений мы помещаем в srcатрибут URL для img по умолчанию (т.е. загрузчик) и помещаем фактический URL изображения в data-srcатрибут. Вот так

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

Когда изображение находится вне области просмотра, ничего не происходит, но когда изображение попадает внутрь области просмотра, data-srcзагружается URL-адрес из атрибута и изображение отображается правильно.

В результате Google видит все изображения на странице (то есть на странице результатов поиска) как имеющие один и тот же srcатрибут. Поскольку бот Google, конечно, анализирует только тег ung с тегом «unloaded» по умолчанию src.

У меня вопрос: влияет ли множество тегов img с одним и тем же srcатрибутом на SEO страницы ?

seo google-search javascript images google-image-search bmenekl
источник
2
Я думаю, что правильное название и альт - это 90% работы. Имя файла меньше. Это может повлиять на результаты в Google Images, я думаю
Martijn
см. также: webmasters.stackexchange.com/questions/26190/…
Салман А,
Это, безусловно, может повлиять на количество изображений, которые вы проиндексировали в Поиске картинок Google. Вы спрашиваете об этом, или о каком-либо влиянии, которое это оказало бы на рейтинги для обычного веб-поиска?
Стивен Остермиллер
@StephenOstermiller Моя главная задача - рейтинги, но любой эффект (непосредственный или второстепенный) для SEO представляет интерес
bmenekl
Этот вопрос был задан на StackOverflow, но, на мой взгляд, на него нет хороших ответов.
Стивен Остермиллер

Ответы:

10

Я никогда не видел, чтобы ленивая загрузка изображений оказывала какое-либо негативное влияние на рейтинг веб-поиска. Улучшение воспринимаемой эффективности вашего сайта для пользователей может реально помочь вашему ранжированию. Если из-за проблем с производительностью вашего сайта меньше людей вернется к результатам поиска, ваш рейтинг улучшится.

Google не сможет индексировать загруженные ленивые изображения для поиска изображений. Вместо этого есть некоторые технические исправления, такие как:

  • используйте <noscript>теги, которые показывают изображения для пользователей, у которых не включен JavaScript (и роботы поисковых систем)
  • Также ссылка на ваши изображения. Похоже, для поиска изображений не имеет значения, находится ли изображение в img src или в href. Таким образом, следующий фрагмент загружает изображение с отложенной загрузкой и индексирует полноразмерное изображение при поиске изображения: <a href="/webmasters//img_large/foo.jpg"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif"></a>
Стивен Остермиллер
источник
3
Я бы не стал полагаться на «noscript» - мы видим много спама, пытающегося его использовать, поэтому мы не всегда достаточно уверены, чтобы доверять размещенному там контенту. Мне нравится идея использования ссылок на изображения. В общем, если изображение является одним из основных элементов на странице, я все же склоняюсь к тому, чтобы просто встроить его естественным образом (по крайней мере, одну версию, если вы используете другие размеры), чтобы вы были уверены, что оно проиндексировано. обычно. Мы работаем над лучшей историей для этого, но я не вижу, чтобы она изменилась сегодня или завтра.
Джон Мюллер
1
Используя свою тактику, вы можете попробовать обертку <a>, если ваши изображения уже окружены ссылкой на товары или что-то в этом роде: <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>внутренняя ссылка принимает щелчок пользовательского интерфейса, тогда как внешняя должна работать для ботов, индексирующих изображения.
дхаупин
1
Этот ответ действителен и для 2017 года? Специально «Google не сможет индексировать загруженные изображения для поиска изображений». Часть? Таким образом, даже у нас есть 10 изображений в посте, Google думает, что у нас нет изображений?
Я самый глупый человек
Это все еще так, но вы все равно можете ссылаться на свои изображения, чтобы проиндексировать их.
Стивен Остермиллер
1

Большинство поисковых систем будут индексировать изображения, которые скрыты, если вы не используете встроенные стили, чтобы скрыть изображение. Большинство браузеров не будут загружать скрытые изображения.

Существует тестовая страница, которая может подтвердить это утверждение. Исключением являются некоторые старые мобильные браузеры, но я утверждаю, что ленивая загрузка на мобильные телефоны может негативно сказаться на хорошем опыте просмотра.

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

В вашем CSS файле добавьте следующую модификацию.

.lazy-img { display: none; }

Теперь вы можете загрузить страницу с такими ленивыми изображениями, как они, и они будут проиндексированы.

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

Важно, чтобы вы включили titleатрибут для изображения. Или вы окружаете <imgтег> тегом ссылки <a> и текстом ссылки. В противном случае поисковые системы будут ассоциировать ключевые слова с изображением по расстоянию между словами. Вы идете ко всей этой проблеме для SEO, вы могли бы также пройти весь путь.

Если вы используете выше, как есть. Ничто не покажет, так как изображения скрыты. Вы хотите удалить этот класс внизу документа. Ключевым моментом здесь является использование встроенного чистого Javascript. Этот Javascript выполняется сразу после завершения макета вышеупомянутых элементов. Если вы загрузите все ваши внешние файлы JS внизу (как вы должны). Вы должны разместить этот блок Javascript над этими файлами. Так что нет никакой задержки в изменении 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>

Теперь я добавил условные выражения для IE9, так как он не поддерживается getElementsByClassNameв 8 и старше. Что должно произойти (не проверено), так это то, что эти браузеры будут загружать изображение как есть.

Преимущество этого подхода состоит в том, что он сохраняет HTML в чистоте с точки зрения веб-сканера.

Reactgular
источник
1
Мне было любопытно и попробовал тестовую страницу. Последние версии Chrome и Safari для Mac действительно загружают изображение. Не уверен, что в конце концов это очень надежно, к сожалению ...
Певара
К сожалению, при использовании этого метода все изображения загружаются лениво внизу документа (неплохо), но, как я объясняю в своем вопросе, в моем подходе изображения загружаются лениво только при входе в область просмотра. Таким образом, любое изображение, которое не входит в область просмотра (то есть конечный пользователь не прокручивает страницу вниз), вообще не будет загружено. На странице с большим количеством изображений это действительно важно
bmenekl
@bmenekl Нет, этот ответ не выполняет отложенную загрузку. Он только изменяет HTML при просмотре в браузере с поддержкой JavaScript, так что сторонний скрипт может выполнять отложенную загрузку.
Reactgular
1

Google объявил, что выполняет JavaScript со своими ботами, смотрите этот пост для более подробного объяснения.

Как документально подтверждено, вы не должны запрещать статические файлы в GoogleBot для динамического сканирования.

зулус
источник