BodySite — технологический партнёр Ozon!Подробнее
Баг-репорты

Не правильный lazyload для Google!

Айдар
13 декабря 2020 19:34
Не принято
+1

При использовании lazyload - картинка заглушка в шаблоне подставляется в атрибут src.

А нужно помещать в srcset.

Так как Google не индексирует изображения в атрибуте data-src - как это делает yandex.

Для google важно ставить ссылку на изображение в атрибут SRC.

А в SRCSET должны быть изображения для браузера.

Можете исправить?

7 комментариев
Поддержка Bodysite
Поддержка Bodysite
+1

Приведите конкретный пример с ошибкой.

Айдар
+1

Сейчас при включении lazylod - картинки выводятся вот таким кодом:

<img src="" data-src="image_url.970.jpg" class="c-product-thumb__image c-product__image c-lazy-image" 
alt="Image Description" data-contain="1" data-rjs="2" data-sizes="thumbs"/>

То есть атрибут SRC пустой.

Google не сможет скачать эту картинку и использовать его как фактор ранжирования.

Этот пример надо сделать вот так:

<img src="image_url.jpg" srcset="ссылка на заглушку(например изображение размером в 1 пиксель)" data-srcset="image_url.jpg" class="c-product-thumb__image c-product__image c-lazy-image" alt="Image Description" data-contain="1" data-rjs="2" data-sizes="thumbs"/>

То есть атрибут src должен быть заполнен изначально тем изображением - которое должно быть.

А в srcset поместить заглушку(например изображение размером в 1 пиксель) и туда подгружать картинку из Data-src. Или добавить новый атрибут Data-srcset - где будет ссылка на подгружаемое изображение. А можно переименовать Data-src - так как в данном случае Яндекс уже будет брать ссылку на изображения из самого SRC.

И браузеры будут подгружать в первую очередь картинку из SRCSET! А SRC - это ссылка на изображение для поисковиков.


Поддержка Bodysite
Поддержка Bodysite
+1

Можете показать проблему на пример на демо-сайт - http://plugins.bodysite.ru/?

Айдар
+1

Там у вас все реализовано через тег <span></span>. И это очень плохо! Так как картинки поисковиками в таком случае не индексируются и не учитываются в ранжировании страницы. Например на странице http://plugins.bodysite.ru/category/kompyutery/mo/:

<span class="c-product-thumb__image c-product__image c-lazy-image-provider" data-src="/wa-data/public/shop/products/45/00/45/images/254/254.383.jpg" data-alt="Монитор Philips 200V4LAB/00" data-contain="1" data-rjs="2" data-sizes="m-thumbs"></span>

Но если в Тонких настройках темы дизайна отключить пункт "Не использовать тег img для Lazy Loading изображений до их попадания в область видимости" - то изображения будут выводиться так - как я написал выше.

Поддержка Bodysite
Поддержка Bodysite
+1
Но если в Тонких настройках темы дизайна отключить пункт "Не использовать тег img для Lazy Loading изображений до их попадания в область видимости" - то изображения будут выводиться так - как я написал выше.

Указано в опции, что тег src будет пустой, если опция отключена — https://yadi.sk/i/kNlPpAdTOSW_cA

Поддержка Bodysite
Поддержка Bodysite
+1
Там у вас все реализовано через тег . И это очень плохо! Так как картинки поисковиками в таком случае не индексируются и не учитываются в ранжировании страницы. Например на странице http://plugins.bodysite.ru/category/kompyutery/mo/:

Картинка есть чуть ниже — https://yadi.sk/i/mpsyJgz7lt97YA

Айдар
+1

Только вот Google картинку в теге noscript может игнорировать и не скачивать. Или может даже посчитать за спам дублирование картинки и описания к картинке.(на зарубежных форумах писали об этом в 2018 годах).

И зачем вообще через noscript увеличивать размер страницы и объем структуры DOM?

Когда можно всё реализовать через <img src srcset data-srcset> ?

И этот noscript он практически бесполезен. Так как надо постараться найти того посетителя - который вырубит у себя Javascript )

Если уж кому-то так нужен noscript - то эту настройку можно отдельно в настройках темы.


Добавить комментарий
Чтобы добавить комментарий, войдите в личный кабинет