{"draftJsState":{"blocks":[{"data":{"image":{"id":"6a549d878e35e707df75c36e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"eupk3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Есть категория SEO-проблем, которые невозможно увидеть, глядя на сайт глазами. Сайт открывается, картинки на месте, всё красиво, PageSpeed показывает зелёные цифры, разработчик доволен собой. А в Яндекс.Вебмастере в разделе с изображениями — тишина. Ноль. Или триста картинок из четырёх тысяч.","type":"unstyled","key":"6nira"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Я занимаюсь продвижением с 2005 года, и за это время лениво загружаемые картинки превратились из редкой экзотики в стандарт по умолчанию: их ставит любой современный шаблон, любой плагин ускорения, любой конструктор. И вместе с ними в индустрию пришла одна из самых недооценённых утечек трафика — сайт годами теряет переходы из поиска по изображениям и даже не подозревает об этом, потому что в отчётах этот трафик не выделен отдельной строкой, а просто отсутствует.","type":"unstyled","key":"9kge0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разберу по-честному: где именно ломается индексация, почему «у нас же loading=lazy, всё по рекомендациям Google» — это не аргумент, как проверить свой сайт за пять минут и что делать, чтобы вернуть картинки в выдачу, не убив при этом скорость загрузки.","type":"unstyled","key":"at78a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сколько трафика на самом деле приносит поиск по картинкам","type":"header-three","key":"et39u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Начнём с масштаба, потому что большинство владельцев сайтов искренне считают поиск по изображениям чем-то маргинальным. «Ну кто ищет картинками? Школьники обои на телефон качают».","type":"unstyled","key":"5lai9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На практике всё иначе, и вот в каких нишах я лично видел, как картиночный трафик становился вторым по объёму каналом после обычной органики:","type":"unstyled","key":"8p4d4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":48,"offset":0,"style":"BOLD"}],"text":"Интернет-магазины одежды, мебели, обуви, декора. Человек ищет «диван угловой серый в скандинавском стиле» и уходит в вертикаль «Картинки», потому что глазами выбирать быстрее, чем читать карточки. Кликает по фото — попадает в карточку товара.","type":"unordered-list-item","key":"86tlt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Ремонт и строительство. «Кухня в стиле лофт фото», «фасад дома из клинкерного кирпича» — это чистый визуальный поиск, и клик по фотографии приводит человека в портфолио подрядчика.","type":"unordered-list-item","key":"fn47q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":50,"offset":0,"style":"BOLD"}],"text":"Стоматология, косметология, пластическая хирургия. Запросы «до и после» люди почти всегда смотрят через картинки, а не через тексты.","type":"unordered-list-item","key":"abt33"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":0,"style":"BOLD"}],"text":"Автозапчасти и промышленное оборудование. Тут вообще отдельная история: детали ищут по внешнему виду, когда не знают артикул.","type":"unordered-list-item","key":"fot2q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":79,"offset":0,"style":"BOLD"}],"text":"Рецепты, флористика, ландшафтный дизайн, всё, что связано с «как это выглядит».","type":"unordered-list-item","key":"6pifo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По моим замерам на проектах, где мы целенаправленно чинили индексацию изображений, поиск по картинкам давал от 8 до 30 процентов всего органического трафика. Не «пару случайных заходов», а десятки процентов. И самое приятное — этот трафик почти всегда с более низкой конкуренцией: в вертикали изображений в топе не сидят агрегаторы с миллионными бюджетами так плотно, как в обычной выдаче.","type":"unstyled","key":"cijbo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А теперь представьте, что вы просто отдали этот канал конкурентам. Не проиграли в борьбе — а даже не вышли на поле, потому что робот не смог загрузить ваши картинки.","type":"unstyled","key":"9eadr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как поисковый робот на самом деле видит вашу страницу","type":"header-three","key":"3lavn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы понять корень проблемы, нужно чётко разделять две вещи, которые постоянно путают.","type":"unstyled","key":"13i10"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Что видит человек: браузер грузит HTML, выполняет JavaScript, ждёт, скроллит, реагирует на события, подгружает картинки по мере появления в зоне видимости. Всё работает.","type":"unstyled","key":"361m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"},{"length":6,"offset":219,"style":"BOLD"}],"text":"Что видит робот: сначала — сырой HTML-код, до выполнения скриптов. Затем, если ему хватит ресурсов и терпения, он ставит страницу в очередь на рендеринг, выполняет JS и смотрит результат ещё раз. Ключевое слово здесь — «если». Рендеринг дорогой, очередь длинная, и краулинговый бюджет вашего сайта конечен.","type":"unstyled","key":"a8k1a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":42,"style":"BOLD"}],"text":"И вот главный момент, который меняет всё: робот не скроллит страницу. Он не двигает мышь, не пролистывает вниз, не проводит на странице десять секунд, разглядывая контент. Он забирает то, что доступно сразу.","type":"unstyled","key":"fccuq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":115,"style":"BOLD"}],"text":"Из этого следует простой вывод, который почему-то не доходит до 80% разработчиков: если ваша картинка подгружается только по событию скролла, для робота этого события никогда не наступит. Её просто нет.","type":"unstyled","key":"2q53d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Три способа сделать lazy load, и только один из них безопасен","type":"header-three","key":"b62rp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ленивая загрузка — не зло. Зло — конкретные её реализации. Разберём все три, которые встречаются в реальной жизни.","type":"unstyled","key":"edfjc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Нативный lazy load — безопасный вариант","type":"header-three","key":"46q9a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"ck3kt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" $\"Угловой$ ","type":"unstyled","key":"f4q1j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь атрибут src заполнен настоящим адресом картинки, а браузер сам решает, когда её грузить. Робот видит в HTML полноценный с корректным src — картинка индексируется. Это поддерживается всеми современными браузерами, и это именно то, что рекомендуют и Яндекс, и Google.","type":"unstyled","key":"1mc5h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если у вас так — вы в порядке. Дальше можно читать ради оставшихся нюансов (а их хватает — alt, размеры, sitemap, LCP).","type":"unstyled","key":"3ulhe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. JS-lazy load через data-src — главный убийца индексации","type":"header-three","key":"ff02e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"68c02"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"7qjv7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот оно. Именно так работают десятки популярных плагинов и библиотек. В атрибуте src — прозрачный пиксель размером 1×1 или серая заглушка. Настоящий адрес спрятан в data-src, откуда его вытаскивает скрипт при скролле.","type":"unstyled","key":"95hnp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что видит робот в сыром HTML? Прозрачный пиксель. Тысячу одинаковых прозрачных пикселей на весь сайт. Никакого /images/divan-loft.jpg в природе не существует, потому что data-src — это не стандартный атрибут изображения, а произвольное пользовательское поле, которое поисковик не обязан интерпретировать. Иногда рендерер это вытягивает. Чаще — нет, особенно если картинка глубоко внизу страницы, а скролла не было.","type":"unstyled","key":"fveoa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Результат: в индексе — тысячи одинаковых пустышек либо вообще ничего.","type":"unstyled","key":"e013t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Полная подмена через JS-фреймворк — худший случай","type":"header-three","key":"f4r7i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда картинки вообще не существуют в исходном HTML, а генерируются React/Vue-компонентом уже после гидрации, да ещё и по IntersectionObserver. Здесь шансов на попадание в Картинки практически нет — робот должен и отрендерить, и дождаться, и проэмулировать пересечение вьюпорта. Он этого делать не будет.","type":"unstyled","key":"3eakg"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":63,"offset":199}],"inlineStyleRanges":[],"text":"Кстати, эта же логика ломает не только картинки. Проблемы с тем, что robots видит одну страницу, а пользователь — другую, — это целый пласт технических ошибок. Я разбирал похожие ловушки в материале «Одна лишняя буква в canonical — и страница исчезает из выдачи» — механика та же: мелкая техническая деталь, а последствия катастрофические.","type":"unstyled","key":"67tpd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как проверить свой сайт за пять минут","type":"header-three","key":"t7ku"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не верьте никому на слово, включая меня. Проверьте руками — это быстро.","type":"unstyled","key":"f1ard"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":49,"offset":0,"style":"BOLD"}],"text":"Способ первый, самый честный. Смотрим сырой HTML.\nОткрываете страницу, жмёте Ctrl+U (просмотр исходного кода — именно исходного, а не «Инспектора»!). Ищете по коду добавляем .","type":"unstyled","key":"175hd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":135,"style":"BOLD"}],"text":"Парадокс, который я вижу постоянно: сайты вешают lazy load на главное фото первого экрана, из-за чего оно грузится с задержкой — и LCP ухудшается. То есть инструмент, поставленный ради скорости, скорость и портит. Проверяйте в PageSpeed Insights, какой именно элемент считается LCP-элементом, и снимайте с него ленивую загрузку.","type":"unstyled","key":"4556p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 3. Оставляем запасной путь для роботов и старых браузеров","type":"header-three","key":"7l88b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если по каким-то причинам вы обязаны сохранить JS-библиотеку (например, у вас сложный слайдер), дублируйте изображение в

\n <img src=\"/images/divan-loft.jpg\" alt=\"Угловой диван в стиле лофт\" width=\"800\" height=\"600\">\n

","type":"unstyled","key":"f1kae"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это не идеальное решение, но оно даёт роботу шанс увидеть реальный URL в исходном коде.","type":"unstyled","key":"6l5hh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 4. Всегда указываем width и height","type":"header-three","key":"fgpm5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Явные размеры убирают скачки вёрстки (CLS — второй показатель Core Web Vitals) и помогают поисковику понять, что перед ним содержательное изображение, а не иконка интерфейса. В Картинки, кстати, попадают преимущественно крупные изображения — мелочь до 200 px по стороне поисковик чаще всего игнорирует.","type":"unstyled","key":"9f28b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 5. Отдаём современные форматы, но с осторожностью","type":"header-three","key":"5qtfs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"WebP и AVIF — отлично для скорости. Только следите, чтобы конструкция