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

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

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

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

Атрибут title отображается как всплывающая подсказка при наведении на изображение. Он улучшает пользовательский опыт, давая дополнительную информацию.

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

Как автоматически добавить alt и title с помощью кода

Если у вас много изображений без заполненных атрибутов, можно внедрить автоматическое заполнение их, используя данные из названия файла или заголовка вложения (attachment title) в WordPress.

Рассмотрим пример функции wpmeta_add_image_attributes, которую можно добавить в файл functions.php вашей темы или в отдельный плагин:

function wpmeta_add_image_attributes( $attr, $attachment = null ) {
    if ( empty( $attr['alt'] ) && $attachment ) {
        // Получаем заголовок вложения
        $title = get_post_field( 'post_title', $attachment->ID );
        if ( $title ) {
            $attr['alt'] = esc_attr( $title );
        } else {
            // Если нет заголовка, используем название файла
            $file = basename( get_attached_file( $attachment->ID ) );
            $alt_text = pathinfo( $file, PATHINFO_FILENAME );
            $attr['alt'] = esc_attr( str_replace( array( '-', '_' ), ' ', $alt_text ) );
        }
    }
    if ( empty( $attr['title'] ) && $attachment ) {
        $attr['title'] = $attr['alt'];
    }
    return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'wpmeta_add_image_attributes', 10, 2 );

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

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

Как это работает на практике

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

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

Если не хочется писать код, существуют плагины, которые помогают автоматизировать этот процесс.

Рассмотрим несколько популярных вариантов:

1. Automatic Alternative Text

Плагин использует возможности искусственного интеллекта (например, Microsoft Azure Computer Vision) для распознавания изображений и генерации описаний alt. Для работы потребуется API ключ.

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

Недостатки: требует настройки AI-сервиса, возможны ограничения по количеству запросов.

2. SEO Friendly Images

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

Плюсы: простота использования, базовая автоматизация без внешних сервисов.

Минусы: менее точные описания, чем у AI-сервисов.

3. Clearfy Pro (с функцией оптимизации изображений)

Плагин Clearfy Pro содержит множество функций оптимизации и SEO, включая автоматическое добавление alt и title по заданным правилам. Это удобно, если вы уже используете Clearfy для других задач.

Как массово обновить alt и title у уже загруженных изображений

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

Пример функции для массового обновления alt и title в медиа-библиотеке:

function wpmeta_bulk_update_image_attributes() {
    $args = array(
        'post_type'      => 'attachment',
        'post_mime_type' => 'image',
        'posts_per_page' => -1,
        'post_status'    => 'inherit',
    );
    $images = get_posts( $args );
    foreach ( $images as $image ) {
        $alt = get_post_meta( $image->ID, '_wp_attachment_image_alt', true );
        if ( empty( $alt ) ) {
            $title = $image->post_title;
            if ( ! $title ) {
                $file = basename( get_attached_file( $image->ID ) );
                $title = pathinfo( $file, PATHINFO_FILENAME );
            }
            update_post_meta( $image->ID, '_wp_attachment_image_alt', $title );
        }
        if ( empty( $image->post_title ) ) {
            wp_update_post( array(
                'ID'         => $image->ID,
                'post_title' => $alt,
            ) );
        }
    }
}
// Запустите функцию один раз, например, через admin_init
add_action( 'admin_init', 'wpmeta_bulk_update_image_attributes' );

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

Рекомендации по написанию качественных alt и title

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

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

Выводы

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

Если хотите более продвинутые решения, рассмотрите плагины с AI-генерацией описаний или функционал Clearfy Pro.

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