Одним из важных факторов ранжирования в Google является скорость загрузки страниц сайта, которую измеряют с помощью теста PageSpeed Insight (PSI). Мы в WP Booster давно занимаемся оптимизацией сайтов на WordPress под требования Google PageSpeed и к нам периодически обращаются за консультациями.
Просматривая чужие сайты, мы видим, что вебмастера, в погоне за “зелёненькими” цифрами, устанавливают плагины, которые улучшают показатели в тесте PSI, но при этом нарушают индексацию изображений. Типичный случай - установка одного из плагинов для отложенной загрузки (Lazy Load) изображений.
Как Lazy Load нарушает индексацию изображений
Если на странице много картинок, то установка плагина отложенной загрузки может значительно увеличить баллы. Проблема в том, что все эти плагины подставляют в атрибут src тега <img> заглушку типа placeholder.svg. И только после прокручивания страницы скрипт подставляет в src ссылку на нужное изображение. Но бот Google не умеет прокручивать страницу! В итоге вместо картинок бот “видит” на странице примерно следующее:
вместо:
Владельцы интернет-магазинов и статейных сайтов стараются, делают картинки, фотографируют товары, добавляют их на сайт, но Google о них никогда не узнает, потому что в погоне за баллами PSI они напрочь убили индексацию изображений установкой неправильного Lazy Load.
Вы подумаете что я нагнетаю и проблемы нет? Давайте проанализируем типичные сайты.
Пациент 1. Сантехника-Тут.Ру
Не прокручивая страницу жмём ctrl+U и смотрим исходный код:
Вместо ссылок на изображения в src стоят заглушки preloadbox.png! Хотите узнать как они выглядят? А вот так:
Именно их “увидит” бот Google вместо изображений унитаза, смесителя и кухонной мойки.
То же самое на внутренних страницах:
Пациент 2. Связной
Смотрим исходный код:
У “Связного” не то что заглушки, даже атрибута src нет!
Пациент 3. Мастер ремонта
Смотрим исходный код:
Опять нет атрибута src!
Проверим индексацию картинок на этой странице через оператор site:https://mastera-remonta.com/remont-novostrojka/chistovoj-remont/remont-2-k-kvartiry/ на вкладке Картинки:
На момент проверки на данной странице проиндексировано всего 15 изображений. Хотя в слайдерах и вкладках 49 изображений. И это без учёта фотографий сотрудников (которые в принципе и не должны ранжироваться на этой странице). То есть из-за Lazy Load проиндексировалось менее 50% изображений в этом конкретном примере.
Пациент 4. Santechsklad.com.ua
Опять открываем исходный код:
Судя по всему это Bitrix и в src мы видим заглушку ajax-loader.gif. Тем же способом, что и выше проверяем индексацию картинок. Кроме логотипа не проиндексировалось ни одной картинки!
Единственное, что хоть как-то спасает эти сайты - наличие микроразметки и sitemap.xml, благодаря которым можно сообщить поисковым системам о наличии этих изображений.
Как видите, это не единичный случай. Так что, прямо сейчас проверьте свои сайты, не используете ли Вы неправильный Lazy Load и тем самым “улучшаете” ранжирование сайта в Google.
Как сделать “правильный” Lazy Load?
Так как мы занимаемся в основном оптимизацией сайтов на WordPress, то буду приводить примеры для этой CMS, хотя данная проблема касается сайтов на Bitrix, Opencart и т.д. …..
Для начала грустная новость - в репозитории WordPress нет ни одного плагина, который реализует правильный Lazy Load. Неважно что Вы поставите: Lazy Load от Smush, Lazy Load от WP Rocket или a3 Lazy Load - они все подставляют в src заглушки. Из всех скриптов отложенной загрузки только 2-3 реализуют её правильно.
Но Вы можете сделать сами правильную отложенную загрузку. Для этого нужно, чтобы в атрибуте src всегда была ссылка на изображение, а заглушка подставлялась в атрибут srcset.
Вот так должно быть до прокручивания страницы:
Вот так после прокручивания страницы:
В этом видео специалист по техническому SEO под ником Demi Murych объясняет, как правильно сделать Lazy Load .
Скрипт рекомендованный в видео для правильного Lazy Load:
Плагин для WordPress, реализующий “правильный” Lazy Load
Если у Вас нет навыков программирования и разработки, то для WordPress Вы можете установить платный плагин True Image & Lazy Load.
Возможности плагина:
- Правильный Lazy Load — отложенная загрузка изображений на JS, которая не нарушает их индексации.
- Добавление к изображениям атрибута decoding=”async” (асинхронная загрузка изображений).
- Добавление ко всем изображениям микроразметки https://schema.org/ImageObject.
- Добавление к логотипу сайта микроразметки https://schema.org/Organization.
- И многое другое …..
Мы всегда готовы ответить на Ваши вопросы и бесплатно проконсультировать по оптимизации Ваших сайтов. Пишите в Telegram чат WP Boost.
Комментарий недоступен
Всегда интересно поговорить со специалистом, который занимается чем-то похожим. А вот "в ссылке с превью на полноразмер" - это Вы про Lightbox, когда картинка оборачивается в ссылку, чтобы можно было увидеть полный размер?
Комментарий недоступен
Наши опыты с картинками начали с общения с Мурычем, просмотра его видео и выступлений на вебинарах. И вот основные тезисы:
тег figure нужно убирать, он снижает значимость контента внутри него;
соответственно и figcapture отпадает;
Lightbox в том виде как есть, то есть картинка обёрнутая в ссылку, это плохо. нужно чтобы картинка была без ссылки и просто отрабатывался клик на картинке по JS и затем "всплытие" картинки в бОльшем размере;
Можете прокомментировать?
Ну и если интересно, добавляйтесь в тг, возможно нам есть что обсудить.
Прошу прощения за отсталость, а Вы не могли бы объяснить, в чем именно проблема лайтбоксов? Сейчас стала заниматься старым сайтом и обнаружила, что картинки в lightbox (большая картинка открывается ссылкой) Яндекс практически не индексирует. Правда, в Гугле все нормально.
Здравствуйте. Нужно смотреть саму страницу. Потому что так нужно только гадать. Вариантов несколько:
Например:
1. большая картинка есть в микроразметке ld-json, которую Яндекс не поддерживает.
2. Яндекс не счёл нужным индексировать эту картинку
.....
ну и т.д.
Евгений, спасибо за ответ! Фенечек особых нет, разметка только самая простая с микроданными (и вообще пока все в состоянии "2 прихлопа, 3 притопа"). Но большая картинка открывается по ссылке, а превью в теге img src - уменьшенная картинка. Поэтому я и подумала, может, яндекс не устраивает ее размер и надо как-то давать ему именно большое изображение.
Например, на этой странице ни одна картинка не проиндексирована (если делать проверку в Я.Картинках с пометкой "на сайте:")
https://www.center-eko.ru/konoplyaniy-uteplitel-akoterm
А картинки, которые просто вставлены без ссылок, в индексе есть.
Для Яндекса и Гугла картинкой является то, что в теге <img>. А у Вас там уменьшенные копии. А то что есть ссылка на большое.... Ну их тоже может проиндексировать .Через год или никогда.
Именно так и есть! Но ведь таким образом картинки оформляются на множестве сайтов. Какой правильный подход - добавлять в код какие-то события или элементы, чтобы робот видел сразу большое изображение? Или вместо уменьшенной версии использовать большую и уменьшать атрибутами html (но это как-то не очень(?))
Если у Вас WordPress - то эту проблему решает наш плагин True Image & Lazy Load. Если другая CMS - тут уже надо кодить.
Спасибо))