Шаблон SEO изображений и alt-текста

Описательные имена файлов

Переименовывайте файлы изображений перед загрузкой, чтобы они описывали объект и помогали поиску по картинкам.

Называйте файлы до загрузки

Поисковые системы читают имя файла как один из сигналов о том, что изображено, а понятное имя проще вести в медиабиблиотеке. Замените стандартные имена с камеры вроде [IMG_4827.jpg] коротким, понятным человеку описанием.

• Опишите объект: [krasnoe-kozhanoe-kreslo.jpg], а не случайный набор символов.
• Используйте дефисы между словами; избегайте пробелов, подчёркиваний и спецсимволов.
• Пишите строчными буквами для согласованности на разных серверах.
• Будьте лаконичны: несколько осмысленных слов лучше длинной цепочки ключей.

Не переспамливайте ключевыми словами и не повторяйте одну и ту же фразу в каждом файле. Называйте каждое изображение по тому, что оно на самом деле показывает, чтобы имя оставалось точным и полезным.

Быстрая проверка: Смог бы кто-то догадаться об изображении только по имени файла? Если да — вы справились. Для серии похожих снимков добавьте отличительную деталь: цвет, ракурс или модель: [nazvanie-tovara-vid-speredi.jpg] и [nazvanie-tovara-vid-sboku.jpg].

Alt-текст (прежде всего доступность)

Пишите атрибуты alt, которые описывают изображения для пользователей экранных читалок и поисковых систем.

Пишите alt-текст прежде всего для людей

Alt-текст существует в первую очередь ради доступности: его вслух зачитывают экранные читалки и показывают, когда изображение не загрузилось. Опишите простым языком то, что передаёт изображение, как будто объясняете его человеку, который его не видит.

• Будьте конкретны и лаконичны: [бариста наливает латте-арт в белую чашку], примерно одно короткое предложение.
• Передайте назначение: опишите, зачем это изображение здесь, а не только его визуальные детали.
• Пропускайте лишнее: не начинайте с [изображение] или [фото]; технология уже сообщает, что это изображение.
• Не переспамливайте ключами: одно естественное упоминание уместного термина — нормально; список ключевых слов вредит доступности.

Для чисто декоративных изображений, не несущих информации, используйте пустой alt ([alt=""]), чтобы экранные читалки их пропускали. Если изображение ещё и ссылка, alt-текст должен описывать назначение или действие ссылки.

Совет: Если подпись уже полностью описывает изображение, оставьте alt кратким, чтобы не повторять одни и те же слова дважды.

Сжатие и современные форматы (WebP/AVIF)

Уменьшите размер файла и перейдите на современные форматы, чтобы улучшить время загрузки и LCP.

Сжимайте и модернизируйте каждое изображение

Крупные изображения замедляют страницы и могут вредить показателю Largest Contentful Paint. Уменьшайте размер файла перед загрузкой и отдавайте современные форматы, которые сжимаются гораздо лучше старых при сопоставимом качестве.

• Выберите правильный формат: AVIF или WebP для фотографий и большинства графики; SVG для логотипов и простых иконок; оставляйте PNG только когда нужна прозрачность или чёткий текст.
• Меняйте размер под отображение: не отдавайте файл [4000px] в слот [800px].
• Сжимайте разумно: стремитесь к наименьшему файлу, который всё ещё выглядит чисто; протестируйте пару уровней качества и сравните.
• Обеспечьте запасные варианты: используйте элемент picture, чтобы предложить AVIF или WebP с запасным JPEG для старых браузеров.

Рабочий процесс: экспортируйте в правильных размерах, пропустите файл через инструмент сжатия, затем убедитесь, что он выглядит чётко на экране с высоким разрешением. Для героя или главного изображения приоритизируйте быструю загрузку, поскольку именно оно часто является элементом LCP на странице.

Адаптивные изображения и отложенная загрузка

Отдавайте нужный размер для каждого устройства и откладывайте изображения за пределами экрана, чтобы ускорить загрузку.

Подбирайте размер и откладывайте изображения

Адаптивная разметка позволяет браузеру выбрать лучший файл для каждого экрана, а отложенная загрузка задерживает изображения, до которых посетитель ещё не прокрутил. Вместе они сокращают напрасно потраченные байты и ускоряют первую отрисовку.

• Используйте srcset и sizes: предоставьте несколько значений ширины, чтобы телефоны загружали маленькие файлы, а большие экраны получали чёткие.
• Задавайте width и height: добавляйте явные размеры (или aspect-ratio), чтобы зарезервировать место и предотвратить сдвиг макета.
• Откладывайте загрузку ниже линии сгиба: добавляйте [loading="lazy"] к изображениям, которые начинаются за пределами экрана.
• НЕ откладывайте загрузку изображения LCP: герой или главное изображение над линией сгиба должно загружаться сразу; вместо этого пометьте его как высокоприоритетное.

Почему это важно: откладывание изображений за пределами экрана освобождает пропускную способность для того, что видно первым. Резервирование места заданными размерами не даёт контенту прыгать по мере прихода изображений, что защищает ваш показатель Cumulative Layout Shift и удобство чтения.

Подписи, окружающий контекст и карты сайта для изображений

Усиливайте релевантность изображений контекстом на странице и помогайте краулерам находить изображения.

Добавляйте контекст и облегчайте обнаружение

Поисковые системы читают текст вокруг изображения, подпись и заголовок страницы, чтобы его понять. Сильный контекст вместе с картой сайта для изображений делает ваши визуалы легче для интерпретации и поиска.

• Добавляйте подписи, когда это уместно: подписи читают чаще основного текста, поэтому используйте их для иллюстраций, диаграмм и снимков товаров.
• Размещайте изображения рядом с релевантным текстом: ставьте каждое изображение возле абзаца, который оно иллюстрирует.
• Используйте элемент figure: оборачивайте изображение и его figcaption вместе для чёткой, семантической структуры.
• Перечисляйте изображения в карте сайта: добавляйте записи изображений (или отдельную карту сайта для изображений), чтобы краулеры могли обнаруживать графику, загруженную скриптами или галереями.

Примените это: для изображения по адресу [URL страницы] напишите подпись, которая добавляет информацию, а не повторяет alt-текст, и убедитесь, что ближайший заголовок и текст упоминают тот же объект. Затем подтвердите, что файл присутствует в вашей XML-карте сайта.

Структурированные данные изображений и лицензирование

Размечайте изображения, чтобы они могли появляться с расширенными результатами и понятной лицензией.

Размечайте и лицензируйте свои изображения

Структурированные данные сообщают поисковым системам о роли и владельце изображения, что может открыть более богатые результаты поиска по картинкам и значок лицензирования. Добавляйте их там, где важны права на изображение или контекст, — например, на страницах товаров, рецептов или статей.

• Используйте правильную схему: ссылайтесь на URL изображений высокого разрешения в разметке Product, Recipe, Article или ImageObject.
• Предоставляйте крупные, доступные для сканирования изображения: структурированные данные должны указывать на изображения, которые не заблокированы и соответствуют минимальным требованиям к размеру.
• Добавляйте метаданные лицензирования: включайте [license] и [acquireLicensePage] в ImageObject, чтобы условия использования были понятны.
• Держите метаданные честными: поля авторства ([creator]) и копирайта должны соответствовать странице и фактическим правам на изображение.

Проверьте перед запуском: протестируйте разметку валидатором структурированных данных, исправьте ошибки и убедитесь, что указанное изображение загружается. Точные поля лицензирования помогают вашей работе корректно появляться и защищают то, как её повторно используют.

Что делает alt-текст хорошим?

Хороший alt-текст лаконично описывает, что показывает изображение и почему оно на странице, простым языком, который может озвучить экранная читалка. Держите его в пределах примерно одного предложения, пропускайте фразы вроде «изображение» и упоминайте уместный термин только если он вписывается естественно. Цель — доступность, а не плотность ключевых слов.

Когда следует использовать пустой alt-текст (alt="")?

Используйте пустой атрибут alt для чисто декоративных изображений, не несущих информации, — например, фоновых украшений, разделителей или иконок рядом с текстом, который уже говорит то же самое. Пустой alt говорит экранным читалкам пропустить изображение. Оставьте описательный alt-текст для изображений, несущих смысл.

Какой формат изображений использовать ради скорости?

Для большинства фотографий и графики AVIF или WebP дают наименьшие файлы при хорошем качестве, поэтому они лучше всего для скорости страницы. Используйте SVG для логотипов и простых иконок, а PNG оставляйте в основном для прозрачности или чёткого текста. Отдавайте запасной JPEG через элемент picture для старых браузеров.

Стоит ли откладывать загрузку всех изображений?

Нет. Откладывайте загрузку изображений, которые начинаются ниже линии сгиба, чтобы браузер не загружал их до необходимости. Не откладывайте изображение героя или главное изображение над линией сгиба, поскольку обычно это ваш элемент LCP, и его задержка замедляет восприятие загрузки. Загружайте его сразу и с высоким приоритетом.

Действительно ли описательные имена файлов помогают SEO?

Они помогают поисковым системам и поиску по картинкам понять, что изображено в файле, и облегчают ведение вашей медиабиблиотеки. Используйте короткие имена строчными буквами через дефис, которые описывают объект. Это один из многих вспомогательных сигналов, поэтому сочетайте их с сильным alt-текстом и окружающим контекстом, а не полагайтесь только на имена файлов.

Как поисковые системы находят мои изображения?

Краулеры обнаруживают изображения, переходя по вашему HTML, читая окружающий текст и подписи и разбирая вашу карту сайта. Перечисление изображений в XML-карте сайта (или отдельной карте сайта для изображений) помогает показывать визуалы, загруженные скриптами или галереями. Убедитесь, что изображения не заблокированы правилами robots и размещены рядом с релевантным контентом на странице.