Добавление уникальных атрибутов ALT к изображениям — важный аспект SEO и доступности сайта. В WordPress и особенно при использовании конструктора Elementor многие пользователи сталкиваются с проблемой одинаковых или пустых ALT-атрибутов, что негативно влияет на поисковое продвижение и пользователей с ограниченными возможностями. В этой статье рассмотрим, как автоматически и вручную добавить уникальные ALT-атрибуты к изображениям на сайте WordPress с Elementor, а также приведём примеры кода для удобного решения этой задачи.
Почему уникальные ALT-атрибуты важны для SEO и доступности
Атрибут ALT в HTML-теге <img> описывает содержимое изображения. Поисковые системы используют этот текст для понимания, что изображено на картинке, что влияет на ранжирование страницы. Кроме того, атрибут ALT необходим для пользователей с нарушениями зрения, которые используют экранные читалки.
Если ALT пустой или дублируется на многих изображениях, поисковики могут считать это признаком низкого качества сайта, а для пользователей с ограничениями доступности сайт будет менее удобен. Поэтому важно, чтобы каждый ALT был уникальным и описательным.
Особенности работы с ALT в WordPress и Elementor
В WordPress при загрузке изображения в медиабиблиотеку можно указать ALT вручную. Но часто пользователи забывают это сделать, и тогда ALT остаётся пустым или по умолчанию берётся из названия файла, что не всегда хорошо.
Elementor позволяет вставлять изображения через виджет "Изображение" или динамически из источников, но он не добавляет автоматически уникальные ALT-атрибуты, если они не заполнены в медиабиблиотеке.
Поэтому, чтобы гарантировать наличие уникальных ALT, нужно либо тщательно заполнять их при загрузке, либо использовать автоматизацию — плагины или кастомный код, который будет подставлять уникальные значения.
Автоматическое добавление уникальных ALT с помощью кода в functions.php
Если у вас много изображений без ALT, можно добавить фильтр, который при выводе изображения будет подставлять уникальный ALT на основе заголовка поста, ID или других данных.
Пример функции для темы, которая автоматически добавляет ALT, если он пустой:
function wpelementor_add_unique_alt($attr, $attachment, $size) {
if (empty($attr['alt'])) {
$post_id = get_post()->ID;
$post_title = get_the_title($post_id);
$attachment_title = $attachment->post_title;
// Формируем ALT из названия вложения и заголовка поста
$attr['alt'] = $post_title . ' - изображение ' . $attachment_title;
}
return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'wpelementor_add_unique_alt', 10, 3);Этот код проверяет, есть ли у изображения ALT, и если нет, подставляет ALT, состоящий из названия текущего поста и названия файла изображения. Это создаёт уникальность для каждого изображения на странице.
Использование плагинов для управления ALT-атрибутами изображений
Если не хочется писать код, можно использовать плагины, которые автоматизируют процесс добавления уникальных ALT:
- Auto Image Attributes From Filename With Bulk Updater — автоматически генерирует ALT, Title, Caption и Description на основе имени файла. Имеется возможность массового обновления.
- SEO Friendly Images — добавляет ALT и Title к изображениям, если они отсутствуют, используя шаблоны с возможностью настройки.
- Clearfy Pro — комплексный плагин для оптимизации WordPress, в том числе для управления SEO-атрибутами изображений.
Все эти плагины совместимы с Elementor, так как работают на уровне WordPress и медиабиблиотеки.
Добавление ALT в Elementor вручную с динамическими тегами
В Elementor Pro можно использовать динамические теги для ALT в виджете "Изображение". Это позволяет подставлять ALT из произвольных полей, заголовков или других данных.
Для этого:
- Выберите виджет "Изображение".
- В настройках изображения найдите поле ALT.
- Щёлкните иконку динамических тегов (значок базы данных).
- Выберите нужное поле, например, «Заголовок записи» или «Произвольное поле» с уникальным значением.
- Если нужно, отредактируйте шаблон ALT через кастомный PHP или плагин.
Такой подход гарантирует, что ALT всегда будет уникальным и релевантным для каждого изображения.
Советы по уникализации ALT для разных типов изображений
Для достижения максимального эффекта SEO и доступности придерживайтесь следующих рекомендаций:
- Избегайте ключевых слов в ALT без контекста. ALT должен описывать содержимое изображения, а не просто содержать ключевые слова.
- Для декоративных изображений используйте пустой ALT (
alt=""). Это позволит экранным читалкам пропускать их. - Используйте динамические данные для ALT, если изображения связаны с контентом. Например, в интернет-магазине ALT должен содержать название товара.
- Проверяйте ALT после загрузки изображений. Это можно делать вручную или с помощью плагинов аудита SEO.
Пример расширенной функции для генерации ALT с дополнительными проверками
Ниже пример более сложной функции с учётом типа записи и fallback-значений:
function wpelementor_generate_unique_alt($attr, $attachment, $size) {
if (empty($attr['alt'])) {
$post = get_post();
if ($post) {
$post_type = $post->post_type;
$post_title = get_the_title($post->ID);
$attachment_title = $attachment->post_title ?: 'изображение';
if ($post_type === 'product') {
// Для WooCommerce товаров
$attr['alt'] = 'Фото товара: ' . $post_title;
} else {
$attr['alt'] = $post_title . ' - ' . $attachment_title;
}
} else {
$attr['alt'] = $attachment->post_title ?: 'изображение на сайте';
}
}
return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'wpelementor_generate_unique_alt', 15, 3);Такой код будет полезен, если на сайте используются разные типы записей, включая товары, записи блога, портфолио и пр.