Если ты загружаешь картинки с текстом – даже аккуратные, в нужной тематике – это не значит, что алгоритм поймёт, о чём они. Например, у нас был проект: лендинг для онлайн-курсов. Всё сверстано – красиво, быстро грузится. А в превью на поиске под картинкой – белое пятно. Не просто нет описания. Оно есть, но система его «не видит». Потому что текст на баннере – как фон, запечённый в пиксели.
А ты бы заметил это, если не открыл консоль? Если не ткнул в инспектор и не увидел, что div пустой?
Вот это и есть ловушка: визуально всё выглядит как надо. Но по факту – «немой» контент. И ты теряешь позиции, даже если кажется, что всё правильно.
Так делают почти все. В Figma дизайнер заливает заголовок на фон. Разработчик не спорит – просто вставляет PNG. А потом клиент спрашивает: «А почему у нас CTR ниже, чем у конкурентов?»
Решается просто:
- Всю текстовую часть – только живым текстом в разметке.
- Если в картинке что-то значимое – описываем это в alt, но не как мусорный набор ключей, а как короткий смысл.
- Проверяй, что у каждой картинки есть описание, логичное и понятное. Хоть на пару слов.
- Не вставляй текст на изображение, если это не надо. Особенно заголовки, призывы, цены и условия.
Пример: на лендинге одного из партнёров, после того как мы вынесли CTA из баннера в html и добавили простой alt=»Курс по Python – старт с нуля за 5 недель» – кликабельность блока выросла на 14%. Без рекламы, без редизайна. Просто его начали «видеть».
Справка от сервиса это подтверждает: в официальной документации чётко написано, как он распознаёт объекты и тексты – и где нужны сигналы. Без них, изображение для системы просто набор пикселей. Без смысла.
Попробуй у себя: открой один из баннеров на главной, посмотри в devtools. Есть текст? А alt? А смысл?
Если пусто – начни с этого. Самый быстрый способ не терять то, что уже сделал. А дальше – по ситуации.
Как машинный анализ изображений влияет на выдачу – и что с этим делать
Проверь у себя: на странице – картинка с подписью «Главный офис», в alt – просто «офис», а в тексте – ни слова о местоположении. А теперь вопрос: система поймёт, что это здание связано с юр. адресом компании? Сомневаюсь. И значит, в выдаче по запросу «официальное представительство в Казани» – пролетим мимо.
Алгоритмы давно уже не читают alt как истину. Они смотрят на само изображение: что на нём, есть ли текст на пикселях, к какому объекту оно ближе – витрине, фасаду, человеку, графику, товару. Удивишься, но даже логотип без текста считывается как логотип, если модель видит, что это шапка сайта.
И да, это напрямую влияет на позиции. Не так давно мы проверяли страницу с каталогом – 24 картинки, все в WebP, alt прописан, вес оптимизирован. Но большинство фото были некачественные: обрезаны, без фокуса, фон шумный. Визуально – так себе. Система интерпретировала их как второстепенные. Как итог – сайт болтался внизу второго экрана в выдаче, пока не заменили на понятные, чистые, сфокусированные кадры с теми же именами файлов. Через 3 недели – рост +27% в видимости по карточкам.
Вот типичная просадка: дизайнер делает красивые фоны, загружает скриншоты в макет, не проверяет – а скрин ведь с текстом. Только вот модель уже прочла «купить дешево» и сочла это за спам. Или наоборот – у тебя на баннере условия акции, но текст на картинке. А в коде – пусто. Ноль шансов попасть в тематическую выдачу по смыслу баннера.
- Если используешь изображения с текстом – дублируй смысл в коде страницы рядом (не только alt!)
- Проверяй читаемость: четкость, контраст, отсутствие наложений
- Не загружай фоновое – как ключевое. Лучше наоборот: упор на смысл
- Описывай объекты, а не процесс. «Зубная щётка с мягкой щетиной» лучше, чем «процесс чистки»
Попробуй это: загрузи свои ключевые страницы в официальный демо-интерфейс и посмотри, что видит система. Это не про метатеги. Это про то, что считывается глазами модели.
Часто хватает одного точного фото, чтобы весь блок «живёт» в выдаче лучше. И наоборот – одно нерелевантное изображение может сбить весь сигнал по теме.
Хочешь понять, где у тебя слабые картинки? Напиши – посмотрим вместе.
Оптимизация изображений под распознавание: формат, метаданные и контекст
Начни с самого простого – убери PNG, где нет прозрачности. Даже при одинаковом качестве разница в весе может быть в 2–3 раза. Лучше использовать WebP – его «видят» и индексируют, плюс он уменьшает время загрузки, а значит, контент быстрее считывается и быстрее попадает в результаты. Это не лайфхак, это база.
Вторая штука, которая часто упускается – alt не работает сам по себе. Машина смотрит на весь контекст: название файла, подпись, заголовки рядом, и главное – текст, окружающий изображение. Условный «dog.jpg» в статье про страховку – это просто собака. А если рядом написано «страхование домашних животных», то он внезапно начинает работать в тему.
На одном проекте (страница с подборкой курсов) у клиента изображения были с названиями вроде image_4_final_final2.png, без alt, и подписи к ним – просто «Подробнее». После переименования файлов, alt с ключевыми словами и замены подписи на конкретные категории («UX для медтеха», «Рекламный дизайн FMCG») – карточки стали показываться выше в подборках картинок, переходы выросли на 12% за три недели. Трафик шёл не на карточки, а на саму страницу с ними.
Проверь у себя:
- формат – WebP или JPEG с компрессией;
- имя файла – понятно, коротко, по теме (без _final-final2);
- alt – не дублирует заголовок, но связан по смыслу;
- подпись – если есть, то не “Узнать больше”, а что именно изображено;
- контекст – рядом с изображением есть текст, связанный с темой.
Отдельно – EXIF‑данные не нужны, если только это не фотография, где геолокация или автор важны. Наоборот, лучше их зачистить перед загрузкой. Это не влияет напрямую, но уменьшает вес и убирает шум. Некоторые CMS, кстати, делают это автоматически – проверь, как у тебя.
И ещё – официальная документация пишет прямо: лучше всего распознаются изображения с хорошим контрастом и без наложенного текста. Если хочешь, чтобы и текст с картинки считывался, – тогда дублируй его в коде рядом, не надейся на распознавание.
Попробуй это: возьми одну статью, где есть иллюстрации. Перепроверь по чек-листу выше. Переименуй хотя бы один файл, добавь связанный alt и подпись – и через 2–3 недели посмотри, появились ли по ним показы в Search Console. Удивишься.
Если интересно посмотреть, как это работает у тебя – напиши, гляну одним глазом.
Как выявить и устранить визуальные ошибки на сайте через API для распознавания изображений
Проще всего – прогнать ключевые страницы через распознавание изображений и посмотреть, что «видит» автомат, а не дизайнер. Никакой магии: просто отправляешь скрин, и получаешь список объектов, меток, цветов, текстов. Вся суть – не в том, чтобы знать, что это есть, а в том, чтобы сопоставить это с тем, как это влияет на сканирование и восприятие.
Например, у клиента на главной было огромное фото команды. Всё лицо – улыбки, фирменные футболки. Красиво. Но анализ показал: главные теги – «group», «smile», «people», а дальше – вообще ни одного, связанного с продуктом. Ни одного. А ты бы догадался, что для машинного восприятия там нет даже намёка на то, что это сервис по автоматизации B2B-документооборота?
Или так: лендинг с кнопкой «Попробовать» на фоне. Люди видят кнопку, а система – просто текст на белом прямоугольнике, без признаков действия. Потому что кнопка была сделана через кастомный компонент, без явных признаков кликабельности. И что в итоге? Тестировщик не заметил, дизайнер не подумал, поведение не отследили.
Вот как делаю сам:
- Делаю скриншоты ключевых экранов – можно в Figma или через DevTools
- Отправляю в интерфейс официального тестера – просто drag-n-drop
- Смотрю, какие объекты, надписи, признаки интерфейса он распознаёт
- Сравниваю с тем, что реально важно: название услуги, УТП, кнопки, брендовые элементы
Если API считает, что у тебя на странице «plant» и «wall», а ты продвигаешь финтех-платформу – значит, надо что-то менять.
Попробуй это: возьми главную, тарифы и страницу контактов. Проверь, как они читаются машиной. Есть ли там «button», «product», «logo», «price»? Если нет – интерфейс может быть красивым, но невидимым. Для поиска. Для распознавания. Для части ассистивных систем. Это не про «оптимизацию ради оптимизации», это про то, чтобы не тратить бюджет на невидимое.
Кстати, на том же интерфейсе от разработчика можно ещё и текст вытаскивать – и смотреть, какие шрифты или элементы он игнорирует. Очень показательно, особенно если ты делаешь ставку на заголовки и визуальные блоки.
