Как пользоваться: Проверка alt-тегов
- Введите URL страницы и нажмите Проверить изображения.
- Посмотрите сводку: изображения без alt-текста, слишком большие файлы, отсутствующие размеры и битые ссылки.
- Используйте фильтры, чтобы показать только проблемные изображения, и исправьте их в CMS или в коде.
- Нажмите Экспорт CSV, чтобы передать список команде контента или разработки.
Что такое проверка alt-текста изображений?
Проверка alt-текста сканирует веб-страницу, находит все элементы <img> и показывает значение атрибута alt для каждого из них вместе с техническими данными, которые влияют на SEO и производительность. Alt-текст (альтернативный текст) зачитывает программа для чтения с экрана, он отображается, если изображение не загрузилось, и помогает поисковым системам понять, что показано на картинке. Это важно для Google Картинок и для релевантности самой страницы.
Отсутствующий alt и пустой alt
Эти два случая выглядят похоже, но значат совсем разное:
| Разметка | Значение | Вывод |
|---|---|---|
<img src="team.jpg"> | Атрибута alt нет. Программы чтения с экрана могут озвучить имя файла. | Ошибка — атрибут alt нужно обязательно добавить. |
<img src="divider.svg" alt=""> | Пустой alt: изображение декоративное, и программы чтения с экрана его пропускают. | Правильно для чисто декоративных изображений. |
<img src="team.jpg" alt="Наша команда поддержки из пяти человек в берлинском офисе"> | Описательный alt-текст. | Правильно для информативных изображений. |
Это соответствует критерию успеха WCAG 1.1.1 (Нетекстовый контент). Хороший alt-текст описывает назначение изображения в контексте, краток — часто рекомендуют около 125 символов — и не начинается со слов «изображение с». Не набивайте в него ключевые слова: опишите, что показано, а нужные слова обычно появляются естественно.
Проверки производительности
- Размер файла: мы отправляем HEAD-запрос для до 40 изображений и читаем их
Content-Length. Изображения больше 200 КБ отмечаются: они замедляют Largest Contentful Paint, особенно на мобильных устройствах. Сожмите их с помощью сжатия изображений или уменьшите с помощью изменения размера изображений. - Атрибуты width и height: без них браузер не может зарезервировать место до загрузки изображения, и контент «прыгает». Это измеряется как Cumulative Layout Shift (CLS), один из Core Web Vitals.
- Современные форматы: WebP и AVIF обычно заметно меньше JPEG или PNG при сопоставимом качестве; SVG идеален для логотипов и иконок.
- Ленивая загрузка:
loading="lazy"откладывает загрузку изображений вне экрана. Не применяйте ленивую загрузку к главному изображению в верхней части страницы — это ухудшит LCP. - Битые изображения: URL, которые отвечают кодами 4xx/5xx, тратят краулинговый бюджет и показывают пользователям значок поломанной картинки.
Проверка читает теги <img> в HTML, отданном сервером; фоновые изображения из CSS и изображения, добавленные через JavaScript, не учитываются. Для полной картины по странице запустите SEO-проверку.
Также ищут как: seo изображений, аудит изображений, доступность изображений.
Инструменты, которые хорошо сочетаются с Проверка alt-тегов
- Тест скорости страницы — Запустите Google Lighthouse для любого URL в мобильном или десктопном режиме.
- Проверка заголовков — Визуализируйте структуру заголовков любой страницы.
- Расшифровка robots.txt — Правила в robots.txt короткие, но их легко понять неправильно.
- IndexNow: отправка sitemap — Сообщайте поисковикам о новых и обновлённых страницах мгновенно.
Часто задаваемые вопросы
Нужен ли alt-текст всем изображениям?
alt. Информативным изображениям нужен описательный текст; чисто декоративным (разделители, декоративные элементы фона) лучше задать пустой alt="", чтобы программы чтения с экрана их пропускали.Помогает ли alt-текст SEO?
Почему размер файла показан не для всех изображений?
Какой размер файла изображения считается оптимальным?
Может ли атрибут title заменить alt?
title показывает подсказку при наведении и не всегда корректно читается программами чтения с экрана. Всегда используйте alt.