Как автоматически добавлять атрибуты alt к изображениям в WordPress

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

Почему важно добавлять атрибут alt к изображениям

Атрибут alt служит для описания изображения, если оно не может быть загружено, и помогает поисковым системам понять содержимое картинки. Кроме того, пользователи с ограничениями зрения, использующие скринридеры, получают описание изображения именно из этого атрибута.

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

Автоматическое добавление alt с помощью кода в functions.php

Если вы хотите добавить автоматическую генерацию атрибутов alt для уже загруженных и новых изображений, можно использовать хук wp_get_attachment_image_attributes. Пример функции с префиксом wplesson_:

function wplesson_add_alt_attribute($attr, $attachment) {
    if (empty($attr['alt'])) {
        $title = get_post($attachment->ID)->post_title;
        if (!empty($title)) {
            $attr['alt'] = esc_attr($title);
        } else {
            $attr['alt'] = 'Изображение';
        }
    }
    return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'wplesson_add_alt_attribute', 10, 2);

Этот код проверяет, есть ли у изображения атрибут alt. Если нет, в качестве значения устанавливается заголовок вложения (название файла без расширения или название, заданное при загрузке). Если заголовок отсутствует, ставится значение по умолчанию — «Изображение».

Код нужно добавить в файл functions.php вашей активной темы или в подключаемый плагин.

Использование плагинов для автоматического заполнения alt

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

• Auto Image Attributes From Filename With Bulk Updater — плагин автоматически заполняет атрибуты alt, title и description на основе имени файла изображения. Также поддерживает пакетное обновление уже загруженных файлов.
• SEO Friendly Images — плагин, который автоматически добавляет атрибуты alt и title для всех изображений на сайте, что улучшает SEO.
• Imsanity — хотя основная задача плагина — оптимизация размеров изображений, он также позволяет автоматически генерировать атрибуты alt при загрузке.

Все эти плагины можно найти и установить напрямую из панели администратора WordPress. Для примера рассмотрим работу с Auto Image Attributes From Filename.

Настройка плагина Auto Image Attributes From Filename

После установки и активации плагина перейдите в Настройки > Auto Image Attributes. Здесь можно выбрать, какие атрибуты заполнять (alt, title, description), а также настроить правила формирования текста из имени файла (например, заменить дефисы на пробелы, сделать заглавные буквы и т.д.).

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

Как автоматически добавить alt к изображениям в редакторе Gutenberg

В редакторе Gutenberg при добавлении блока изображения можно вручную добавить атрибут alt. Но для автоматизации процесса можно расширить функционал редактора с помощью фильтра blocks.getSaveContent.extraProps.

function wplesson_gutenberg_auto_alt($props, $block) {
    if ($block['blockName'] === 'core/image' && empty($props['alt'])) {
        $attachment_id = $block['attrs']['id'] ?? 0;
        if ($attachment_id) {
            $image_post = get_post($attachment_id);
            if ($image_post && !empty($image_post->post_title)) {
                $props['alt'] = esc_attr($image_post->post_title);
            } else {
                $props['alt'] = 'Изображение';
            }
        }
    }
    return $props;
}
add_filter('blocks.getSaveContent.extraProps', 'wplesson_gutenberg_auto_alt', 10, 2);

Этот код обеспечит, что при сохранении блока изображения, если атрибут alt не задан, он будет заполнен названием вложения.

Рекомендации по качеству alt-текста

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

Избегайте простых фраз типа «Изображение» или «Фото», если можно дать более информативное описание. Это поможет улучшить SEO и повысить удобство для посетителей с ограниченными возможностями.

Подведение итогов

Автоматическое добавление атрибутов alt — простой и эффективный способ повысить качество сайта на WordPress. Вы можете реализовать это либо с помощью небольшого кода, который легко адаптируется под ваши нужды, либо воспользоваться готовыми плагинами, например, Auto Image Attributes From Filename With Bulk Updater.

Регулярно проверяйте и корректируйте атрибуты alt для важных изображений, чтобы поддерживать высокий уровень SEO и доступности сайта.