Одним из важных факторов ранжирования в 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.
Не совсем понял логики выбора пациентов, у которые изображения сделаны не правильно. Ибо если верить данным из условного ahrefs, у данных сайтов нет каких-то видимых или весомых проблем с ранжированием. В той же выдаче изображения в сниппете есть - https://prnt.sc/v4mp3o
Было бы интересно увидеть какие-то реальные кейсы по изменениям в изображениях. Условно:
- вот 22.10 на сайте изображения сделаны криво
- замеряем позиции сайта в обычной выдаче и по картинкам
- 23.10 мы сделали правильные изображения на сайте
- 07.11 показываем результаты
- ???
- профит
2 недели слишком быстро. Переиндексация картинок длится примерно месяц. В моих экспериментах 27-30 дней.
Вернее так. Учёт изменений на странице (в том числе связанных с картинками) длится примерно 30 дней.
Ну я же написал, про условных 14 дней
Ну а про 30 дней есть какие-то видимые изменения чтоб можно было показать до/после?
Нужен пациент для внедрения. Есть такой сайт?
Любой ваш сайт, где вы это уже делали
Я же так пониманию, что раз вы понимаете какая реализация правильная, а какая не правильная, то опыты проводились какие-то
Как мы сможем зафиксировать состояние "до" если на моих сайтах нет неправильного лейзи лоада? У меня уже примерно год как всё внедрено и исправлено.
Я предлагаю взять Ваш сайт. Есть с неправильным лейзи?
А есть пример сайта без индексации картинок (невозможно найти) в гугле и в сохраненной копии, когда на их месте пусто?
Если Вы имеете ввиду кеш гугла (сохранённую копию), то он не имеет отношения к работе поискового робота и по состоянию кеша мы не можем судить о том что проиндексировалось, а что нет.
Насчёт "пример сайта без индексации картинок" - я наделся читатели статьи теперь, зная про наличие проблемы, подкинут примеры.
на самом деле у наших клиентов есть сайты где было всё плохо с индексацией картинок. Но показывать без их согласия сайты я не могу.
В приведенном примере страница просто страница дублирует картинку c https://www.svyaznoy.ru/catalog/phone/224/5756213/comments
картинка с этой страницы в индексе есть
https://www.google.com/search?q=site:https://www.svyaznoy.ru/catalog/phone/224/5756213/comments&source=lnms&tbm=isch&sa=X&ved=2ahUKEwiS24HCwsjsAhUZ4OAKHesNAMYQ_AUoAXoECAIQAw
короче реальных примеров не будет, ясно.
Я приводил в пример листинг, а не отдельную страницу товара. Насчёт того что картинка в индексе - просто потому что она на 1м экране и скрипт lazy load мгновенно при загрузке подставляет в src нужную картинку.
В статье говорится о том, что картинки ниже первого экрана не будут индексироваться.
А какой смысл что бы поиск проиндексировал мелкие картинки со второго экрана листинг?
Если мелкие - конечно не нужно. Более того, если речь идёт про иконки и сервисные изображения, то их нужно оформлять не через тег img, а стилями через background-image.
Но в статье речь идёт именно про индексацию полезных изображений, как например для Пациента 3.
А зачем тогда других пациентов приводите? Да и поиск проиндексирует как раз по ссылке большие картинки лучшие по качеству, что только плюсом будет.
Хорошая статья должна давать различные примеры сайтов
Хороша статья должна приводить конкретные примеры и аргументацию. Я конечно понимаю, что очень хочется свой плагин продать и денег заработать, но може тогда не притягивать за уши примеры, которые не о чем!
Расскажите как должен выглядеть пример "о чём"
Конкретная информация, чем ваш плагин полезен, кроме бестолкового засорения индекса мелкими превьюхами? Вы же пишите, что давно работаете, примеры должны накопиться.
А кто сказал что наш плагин засоряет индекс мелкими превьюхами? Вообще не вижу связи.
Плагин обеспечивает лейзилоад и при этом не нарушает индексацию. А вот если вся страница заполнена мелкими превьюхами -то это косяк разработчика сайта, а не плагина.
Так в чем смысл вашего плагин тогда? Разве не в попадании картинок в индекс?
Да.
Но плагин не снимает ответственности с разработчика сайта, правильно сверстать иконки и превьюшки.
Если разрабочик ошибся в этом - то ему никакой плагин не поможет.
Так кому нужен ваш плагин? Каковы условия его применения и что от даст за 1800 рублей?
В описании всё написано. Но можете написать мне в личку в тг и я объясню подробнее
Так вы статью написали для продвижения плагина своего сюда, тут и ответьте пожалуйста!
Неправда, что статья только для продвижения. Я написал статью в которой:
1. Обозначил проблему
2. Показал примеры
3. Дал бесплатный способ её решения
4. Дал платный способ её решения
Опытный разработчик по моим рекомендациям внедрит правильный лейзи и ничего не купит.
А значит для него это была полезная бесплатная инструкция.
Повторюсь тогда: Так кому нужен ваш плагин? Каковы условия его применения и что от даст за 1800 рублей?
Плагин нужен вебмастерам, у которых сайты с большим количеством изображений. Это: интернет-магазины, сайты посвящённые туризму, одежде, причёскам, недвижимости...... Владелец сайта должен быть бизнесменом, который знает сколько зарабатывает его сайт и как быстро он вернёт вложения в покупку плагина.
Конкретно, за счет чего вернуться вложения в ваш плагин? Вы ничего конкретно сказать не можете!
Приведенные сами сайты ИМ разные имеют большое количество картинок только в листингах, для которых ваше решение бесполезно, вы сами это признали. А большие оригинальные фото и так проиндексируются норамльно по ссылкам и с товарных...
В чем плюсы?
Скоросто загрузки увеличится? Нет, скорее уменьшится
На продвижение повлияет? Нет
Скопище превьюх (дублей) в индексе Гугла положительное явление? Нет
Как проиндексируются большие изображения, если на них нет ни откуда ссылок (xml карта, html) и вместо ссылок в html ссылка на заглушку.
Плагин же добавляет микроразметку с нужными для ПС размерами, добавляет правильный srcset, максимальное изображение вставляет в src (после отрабатывания лейзи)
Похоже вы не понимаете, что делает плагин и для чего. Вы видео с канала Деми Мурыча поглядите - станет яснее.
Так, ещё раз, в чем смысл индексации кучи превьюх из листингов, кроме кучи мусора в индексе поиска? Ссылки то на картинки стоят, проинднксируются в товарных нормального размера. Да и пусть разработчик отвечает, я ему вопросы задаю же. Он вроде понимаем все мои вопросы.
Гугл в разных местах покажет превью разного размера: 1:1, 4:3, 16:9 все одновременно они не будут выводиться) В сниппете один размер, в поиске по картинкам - другой и так далее.
Какой глубокий смысл в этом!???
Показать пользователю именно то фото, которое необходимо в данной ситуации, чтобы не было обрезанных лиц и прочего
При чем тут пользователь? Хватит мозги пудрить! Вы тут всем про поисковики втираете и про правильную верстку!