Одним из важных факторов ранжирования в 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.
Хорошая реклама. Я уже почти готов стать клиентом)
Есть сайт- https://fix4car.ru и... при внимательном его изучении понимаешь что с оптимизацией кода и в т.ч. с ускорением- там просто ахтунг. Да, пейджспид сейчас показывает не плохие цифры, но реалии находятся несколько дальше, чем только статистика пейджспида. Посмотрите, Есть ли вам что предложить? Обсудили бы сотрудничество.
Посмотрел только главную страницу.
У вас та же проблема что описана в статье - вместо картинок заглушки lazy_placeholder.gif
Валидатор validator.w3.org показывает что есть лишние кавычки - то есть бот гугла может неправильно парсить страницу.
Незакрытый тег <p>
Ну и несколько других ошибок чисто по вёрстке. Влияют ли они на SEO - это нужно смотреть подробнее.
Семантически свёрстано не очень правильно.
Это то что навскидку и бросается в глаза
Ой вей
С каких пор валидность кода по w3c стала фактором ранжирования?
Используйте fetch в Search Console - и будет ясно, что там боту доступно.
Я не сказал что валидность показатель. Я сказал, что лишние кавычки и незакрытые теги могут нарушить парсинг html кода ботом Google.
Гуглоиды ещё лет 15 назад утверждали, что париться этой темой смысла нет: бот может понять, где и что, несмотря на мелкие косячки вёрстки.
Более того: за заголовок h1, скажем, бот примет то, что написано максимальным по размеру шрифтом, а вовсе не то, что окружено тегами h1.
У Вас есть кейсы подтверждающие что "за заголовок h1, скажем, бот примет то, что написано максимальным по размеру шрифтом, а вовсе не то, что окружено тегами h1"?
Хотелось бы ознакомится
А зачем тут кейсы? Я цитирую вождей гугла, если мне не изменяет память, об этом говорил Мэтт Каттс.
Была заруба в ФБ на эту тему - про h1, их количество, соответствие структуре. Много сказок обсуждалось, а пруфами были подтверждены несколько утверждений: количество h1 не важно, последовательность - тоже, а вот размер шрифта - таки да.
Это распространённое заблуждение. И я постоянно объясняю людям что нельзя буквально слушать и делать что говорит Каттс и прочие. Да, можно делать хоть миллион Н1 на странице. Но при этом нужно правильно сверстать её с учётом вложенности секций. А судя по Вашему комментарию Вы не знаете как это делать. Если применять "в лоб" то что говорят гуглоиды, то ничего хорошего не получится.
Да понятно, что нельзя слепо доверять говорящим головам Гугла. А факты-то опровергающие что-то или доказывающие можно использовать?
Ну провести эксперимент с тем что можно просто выделить жирным фразу и Гугл посчитает её заголовком довольно просто. Прямо сейчас создать хтмл страничку. И разметить одну фразу через Н1, а другую просто выделить стилями. И посмотреть по какой фразе будет ранжироваться. Эксперимент довольно простой и быстрый. Сделайте и отпишитесь тут в комментариях. Думаю всем будет интересно.
Мне есть с чем экспериментировать. Придирки к тегам - это как-то неинтересно.
Ну если тема неинтересная - жаль. Значит Вам нечего делать здесь в комментариях :)
ну почему же. Я люблю мифологию и её анализ.
Любой сервис автоматического аудита, которым пользуются джуны в SEO и начинающие вебмастера, обязательно покажет: и код невалидный, и картинки большие, и микроразметки нету. И джуны старательно эти ошибки исправляют. А сайт не движется.
Вы же не джун? Или у вас есть примеры, когда такие вот правки драматически влияли на позиции? Покажите, интересно.
Чтобы мы понимали друг друга, о каких правках идёт речь?
В данном случае мы обсуждаем lazy load и валидность кода (да ещё по w3c)
Вопрос w3c.
Я ещё раз говорю: валидность по w3c не фактор ранжирования.
Незакрытые теги - вот проблема. Их и показывает w3c.
Если от незакрытых тегов "едет" вёрстка - это действительно проблема. Если таких ошибок вкупе очень много - поисковик может заподозрить, что сайтец-то - так себе, и им не занимаются, и в топах ему делать нечего. Это бесспорно.
Но убить сайт с помощью lazy load и невалидной вёрстки невозможно. Это, в худшем случае, просто не играет на продвижение.
Немного кликбейта в заголовке ещё никому не вредили
Согласен. Психология - тоже часть seo
Этой статьей я обозначил наличие проблемы.
Насколько сильно она влияет на каждый конкретный сайт?
Это 1%? 5%? 25%? Нужно смотреть в каждом случае индивидуально.
Естественно если на сайте незакрытые теги, то нужно в первую очередь решать эти проблемы, а не лейзилоад. Но если владелец намерен развивать ресурс, то и фактическое отсутствие картинок на странице тоже нужно решать.
Не спорю. Все возможные недочёты, тем более - явные, в рамках SEO должны быть устранены. Каждая техническая ошибка отрицательно влияет на сайт на хостовом уровне. И если есть хотя бы минимальное сомнение в негативном влиянии на результаты продвижения - надо исправлять.