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

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

Почему важно использовать правильные атрибуты alt

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

Если атрибут alt отсутствует или плохо заполнен, это негативно влияет на SEO и ухудшает доступность сайта.

Поэтому автоматизация заполнения alt с использованием данных страницы или поста — отличная практика.

Добавление динамических alt через фильтр wp_get_attachment_image_attributes

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

В WordPress для вывода изображения часто используется функция wp_get_attachment_image(). У неё есть фильтр wp_get_attachment_image_attributes, который позволяет изменить атрибуты изображения перед выводом.

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

Пример кода для динамического alt

function wpboot_dynamic_alt_attributes($attr, $attachment, $size) {
    // Если alt уже есть — не трогаем
    if (!empty($attr['alt'])) {
        return $attr;
    }

    // Получаем ID поста из запроса
    global $post;
    if (!$post) {
        return $attr;
    }

    // Формируем alt из названия поста и названия изображения
    $post_title = $post->post_title;
    $image_title = get_the_title($attachment->ID);

    $attr['alt'] = sprintf('Изображение "%s" для статьи "%s"', $image_title, $post_title);
    return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'wpboot_dynamic_alt_attributes', 10, 3);

Этот код проверяет, есть ли у изображения атрибут alt. Если нет, то формирует его из заголовка поста и названия изображения. Таким образом, alt становится более информативным и релевантным.

Автоматическое заполнение alt при загрузке изображения

Добавление alt на этапе загрузки через хук add_attachment

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

Пример кода:

function wpboot_set_alt_on_upload($attachment_ID) {
    $attachment = get_post($attachment_ID);
    if ($attachment->post_mime_type && strpos($attachment->post_mime_type, 'image/') === 0) {
        $title = $attachment->post_title;
        // Проверяем, есть ли уже alt
        $alt = get_post_meta($attachment_ID, '_wp_attachment_image_alt', true);
        if (empty($alt)) {
            // Устанавливаем alt равным названию файла без расширения
            $alt_text = pathinfo($title, PATHINFO_FILENAME);
            update_post_meta($attachment_ID, '_wp_attachment_image_alt', $alt_text);
        }
    }
}
add_action('add_attachment', 'wpboot_set_alt_on_upload');

Этот код автоматически записывает в мета-данные изображения alt, если он отсутствует. В качестве alt используется название файла без расширения.

Плагины для автоматизации alt и SEO изображений

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

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

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

Рекомендации по формированию alt для SEO и доступности

При создании alt следуйте простым рекомендациям:

• Alt должен точно описывать содержимое изображения.
• Не используйте ключевые слова без необходимости — alt должен быть естественным и полезным.
• Для декоративных изображений используйте пустой alt alt="", чтобы экранные читалки их пропускали.
• Динамическое формирование alt должно основываться на контексте страницы или поста.

Эти советы помогут улучшить SEO и пользовательский опыт.

Расширенный пример: alt с использованием ACF и пользовательских полей

Если на сайте используется Advanced Custom Fields (ACF) или другие плагины для кастомных полей, можно формировать alt из пользовательских полей.

Пример функции для динамического alt с проверкой поля "custom_alt":

function wpboot_dynamic_alt_acf($attr, $attachment, $size) {
    if (!empty($attr['alt'])) {
        return $attr;
    }

    global $post;
    if (!$post) {
        return $attr;
    }

    // Попытка получить alt из пользовательского поля ACF
    $custom_alt = get_field('custom_alt', $attachment->ID);
    if ($custom_alt) {
        $attr['alt'] = $custom_alt;
        return $attr;
    }

    // Иначе формируем из заголовка поста и названия изображения
    $post_title = $post->post_title;
    $image_title = get_the_title($attachment->ID);
    $attr['alt'] = sprintf('Изображение "%s" для статьи "%s"', $image_title, $post_title);
    return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'wpboot_dynamic_alt_acf', 10, 3);

Таким образом, вы получаете максимальный контроль над значением alt, используя возможности WordPress и ACF.