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

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

Зачем нужен alt-текст для изображений в WordPress

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

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

Автоматическое добавление alt-текста — основные подходы

Вручную прописывать alt-текст при загрузке каждого изображения неудобно, особенно при большом объёме контента. Для автоматизации можно использовать несколько подходов:

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

Заполнение alt-текста из имени файла

Этот простой метод позволяет автоматически подставлять в alt-текст название файла без расширения, заменяя дефисы и подчёркивания на пробелы. Пример реализации на PHP для WordPress:

function wpcoder_auto_alt_text($metadata, $attachment_id) {
    $attachment = get_post($attachment_id);
    if (empty(get_post_meta($attachment_id, '_wp_attachment_image_alt', true))) {
        $filename = pathinfo(get_attached_file($attachment_id), PATHINFO_FILENAME);
        $alt = str_replace(array('-', '_'), ' ', $filename);
        update_post_meta($attachment_id, '_wp_attachment_image_alt', $alt);
    }
    return $metadata;
}
add_filter('wp_generate_attachment_metadata', 'wpcoder_auto_alt_text', 10, 2);

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

Генерация alt-текста с помощью ИИ (на примере WPGPT)

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

Пример использования WPGPT API для генерации alt-текста:

function wpcoder_wpgpt_generate_alt($attachment_id) {
    $image_url = wp_get_attachment_url($attachment_id);
    // Вызов API WPGPT для анализа изображения
    $response = wpgpt_api_analyze_image($image_url);
    if (!empty($response['description'])) {
        update_post_meta($attachment_id, '_wp_attachment_image_alt', sanitize_text_field($response['description']));
    }
}
add_action('add_attachment', 'wpcoder_wpgpt_generate_alt');

Для работы этого кода потребуется зарегистрировать и настроить плагин WPGPT, а также получить ключ API.

Плагины для автоматического alt-текста в WordPress

Кроме собственного кода, есть готовые решения, которые помогут автоматизировать добавление alt-текста:

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

Для установки плагина достаточно перейти в админку WordPress в раздел "Плагины" → "Добавить новый" и найти нужный по названию.

Практические советы по работе с alt-текстом

Чтобы alt-текст действительно помогал SEO и доступности, следуйте рекомендациям:

• Не дублируйте alt-текст для разных изображений.
• Делайте описание содержательным, отражающим суть изображения.
• Избегайте излишнего наполнения ключевыми словами.
• Для декоративных изображений используйте пустой alt alt="", чтобы скринридеры их игнорировали.

Пример правильного alt-текста: alt="Логотип компании WPCoder на синем фоне".

Как проверить и массово обновить alt-тексты на сайте

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

Пример простого SQL-запроса, который заполняет alt-текст из имени файла для пустых alt-полей:

UPDATE wp_postmeta pm
JOIN wp_posts p ON pm.post_id = p.ID
SET pm.meta_value = REPLACE(SUBSTRING_INDEX(p.guid, '/', -1), '.jpg', '')
WHERE pm.meta_key = '_wp_attachment_image_alt' AND pm.meta_value = '';

Обязательно сделайте резервную копию базы данных перед выполнением запросов.

Для комплексной работы с alt-текстом удобно использовать плагин Clearfy Pro, который содержит множество инструментов для SEO и оптимизации WordPress.