SEO изображений и alt-атрибуты

SEO изображений и alt-атрибуты — это три разных вопроса, которые обычно смешивают: найдёт ли Google картинку, поймёт ли, что на ней, и не замедлит ли она страницу. У Google есть руководство по первым двум, а скорость описана в материалах web.dev. В этом уроке — что задокументировано, что на самом деле практика и какие правила из чек-листов, включая «только латиница в имени файла» и «alt до 125 символов», в документации Google не встречаются.

Опираться будем на руководство Google по SEO изображений.

Первое: чтобы картинку нашли

• Элемент img. Google находит изображения в атрибуте src элемента img, даже когда он вложен в другие элементы, например picture; изображения из CSS он не индексирует. Картинка, заданная через background-image, для поиска не существует.
• Запасной src. Некоторые браузеры и сканеры не понимают picture и srcset, поэтому всегда указывайте запасной адрес в src.
• Форматы. Поддерживаются BMP, GIF, JPEG, PNG, WebP, SVG и AVIF; расширение файла желательно держать в соответствии с типом.
• Карта изображений. Адреса изображений, которые Google мог не найти, можно передать картой изображений, и в ней допускаются адреса с других доменов, что подходит для CDN; домен CDN рекомендуется подтвердить в Search Console. Расширение карты — в уроке про XML-карты, а на один адрес страницы может приходиться до 1000 изображений.
• Один адрес. Если изображение используется на многих страницах, ссылайтесь на него всегда одним и тем же адресом, чтобы Google мог кэшировать и переиспользовать его.
• Не закрыто. Папки с изображениями не должны быть закрыты в robots.txt; что именно находит обход, показывает сканер сайта.

Пример с запасным вариантом:

<picture>
  <source type="image/avif" srcset="sofa.avif">
  <source type="image/webp" srcset="sofa.webp">
  <img src="sofa.jpg" alt="Серый угловой диван" width="800" height="600">
</picture>

Второе: чтобы поняли, что на картинке

Alt — главный атрибут, но не единственный источник

Формулировка Google точна: самый важный атрибут, когда речь идёт о метаданных изображения, — alt-текст, и он же улучшает доступность для людей, которые не видят изображения. Но Google использует alt вместе с алгоритмами компьютерного зрения и содержимым страницы, чтобы понять предмет изображения. Если изображение служит ссылкой, alt используется как анкорный текст.

Как писать: создавайте полезный, насыщенный информацией текст, уместно использующий ключевые слова и соответствующий контексту страницы; не набивайте alt ключевыми словами — это ухудшает впечатление и может привести к восприятию сайта как спама. Примеры из документации: без alt — плохо; список из десятков слов — плохо; «puppy» — лучше; «Dalmatian puppy playing fetch» — лучше всего.

Типы изображений: это правила W3C, а не Google

Обратите внимание на последнюю строку: старое правило «дублируй текст с картинки дословно» у W3C для случая, когда текст уже есть рядом, не подходит.

Имена файлов: лёгкая подсказка, и язык аудитории

Про имя файла сказано сдержанно: оно может дать Google очень лёгкие подсказки о предмете; по возможности используйте короткие, но описательные имена — my-new-black-kitten.jpg лучше, чем IMG00023.JPG; общих имён вроде image1.jpg лучше избегать. А вот правило «только латиница» руководство опровергает: если вы локализуете изображения, не забудьте перевести и имена файлов, помня о правилах кодирования URL для нелатинских символов. Для русско- и украиноязычного сайта это значит: имя файла по-русски или по-украински допустимо, а в ссылке оно кодируется — см. урок про структуру URL.

Контекст вокруг изображения

Google извлекает информацию о предмете изображения из содержимого страницы, включая подписи и заголовки изображений; по возможности располагайте картинки рядом с соответствующим текстом и на релевантных страницах. Слова вокруг картинки работают на неё так же, как её alt. О согласовании слов на странице — в уроке про ключевые слова.

Третье: что делает картинку заметной

• Предпочтительное изображение. Выбор превью полностью автоматический и учитывает несколько источников; повлиять можно метаданными, например свойством primaryImageOfPage или изображением главной сущности страницы.
• Структурированные данные. Для расширенных результатов и значка в Google Images атрибут image обязателен в типах разметки, которые это поддерживают. Для статей рекомендуется несколько изображений высокого разрешения (не менее 50 тысяч пикселей по произведению ширины на высоту) в пропорциях 16×9, 4×3 и 1×1.
• Лицензии. Метаданные лицензии могут сделать изображение пригодным для значка «Licensable», который ведёт на лицензию; для этого нужно, чтобы страницы с изображениями открывались без аккаунта и входа.
• Название и описание страницы. Google автоматически формирует заголовок и сниппет из нескольких источников, включая title и мета-теги страницы.

Четвёртое: скорость и ленивая загрузка

Руководство Google напоминает, что изображения часто составляют самую большую часть веса страницы, поэтому нужны современные приёмы оптимизации и адаптивные изображения. Конкретные техники описаны на web.dev:

• Размеры. По руководству по CLS, всегда указывайте атрибуты width и height у изображений и видео или резервируйте место через CSS aspect-ratio: браузер выделит место заранее, и вёрстка не прыгнет.
• Главное изображение. По руководству по LCP, никогда не загружайте лениво изображение, определяющее LCP, — это всегда даёт лишнюю задержку и ухудшает показатель. Подсказка браузеру о приоритете — атрибут fetchpriority.
• Остальные изображения. Ленивая загрузка уместна для картинок ниже первого экрана. У Google к ней есть собственное условие: решение должно загружать контент, когда он попадает в область просмотра, не требуя действий пользователя вроде прокрутки или клика, потому что Google Search не взаимодействует со страницей. И отдельно: не добавляйте ленивую загрузку к содержимому, которое, вероятно, сразу видно при открытии страницы. Подходят встроенная ленивая загрузка браузера и IntersectionObserver.

Не стоит ждать от скорости гарантий: хорошие результаты в отчётах по Core Web Vitals не гарантируют верхних позиций. Подробнее о показателях — в уроке про Core Web Vitals.

Как увидеть результат

В отчёте об эффективности фильтр типа поиска разделяет трафик: «Изображения» — трафик из результатов вкладки Google Images, а «Веб: мультимодальный» — поиск по картинкам, в том числе через Google Lens. Так видно, есть ли у сайта поток из картинок, прежде чем вкладываться в оптимизацию. Страницы с самым большим трафиком, с которых стоит начать, показывает отчёт по страницам, а общее состояние страницы — анализ страницы и аудит сайта.

Чего в документации Google нет

Эти распространённые утверждения в документации не встречаются, поэтому как правила их подавать нельзя:

• «в имени файла только латиница, три-пять слов»: Google советует переводить имена файлов при локализации;
• «alt — 80–125 символов, длиннее скринридеры обрежут»: длины Google не называет;
• «доступность — прямой фактор ранжирования» и «Google штрафует за плохой LCP»;
• «изображения в разметке — минимум 1200 px»: для статей названо 50 тысяч пикселей по произведению сторон;
• «Google Lens требует чёткого изображения и структурированных данных»;
• «10–30% трафика приходит из Google Images», целевой вес (hero до 100 КБ, иконка менее 5 КБ), экономия AVIF в 50% и процент поддержки браузерами — это ориентиры и измерения сторонних источников, на своих картинках их нужно проверять;
• кейс «LCP с 3,8 до 1,4 с, трафик из Images +340%» как доказательство.

Это не значит, что противоположное верно. Это значит, что цифры — наблюдения, а надёжная основа — то, что описано в руководстве.

Чек-лист

1. Изображения встроены элементами img с src; CSS-фон не используется для содержимого.
2. Для picture и srcset указан запасной src; формат из списка поддерживаемых.
3. У изображения один адрес на всех страницах; папки не закрыты в robots.txt.
4. Alt информативный и по контексту; без набора ключевых слов; для декоративных — пустой.
5. Имена файлов короткие и описательные, на языке аудитории, с учётом кодирования.
6. Картинка расположена рядом с релевантным текстом.
7. У всех изображений заданы width и height; LCP-изображение не загружается лениво.
8. Для нужных типов страниц — структурированные данные с image; для статей — несколько пропорций.
9. Трафик из картинок смотрят в отчёте об эффективности по типу поиска.

Ошибки

• Содержательные изображения в CSS background.
• Alt из набора ключевых слов или одинаковый у всех картинок.
• Ленивая загрузка на главном изображении первого экрана.
• Изображения без width и height.
• Считать, что кириллица в имени файла — ошибка, и не переводить имена при локализации.
• Закрыть папку с изображениями в robots.txt.

Что дальше

Следующий урок — о заголовках и содержании страницы: заголовки и контент.