Изменение атрибута alt у изображений в WordPress: практические решения и примеры кода

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

Почему важно изменять атрибут alt у изображений в WordPress

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

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

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

Плагин "Auto Image Attributes From Filename With Bulk Updater"

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

• Плагин позволяет заполнить пустые атрибуты массово.
• Есть возможность настроить шаблоны и фильтры.
• Поддерживает обновление атрибутов для уже загруженных изображений.

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

Плагин "SEO Friendly Images"

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

Настройки позволяют выбрать шаблоны для генерации атрибутов, например, использовать заголовки постов или таксономии.

Кастомное изменение атрибута alt через функции темы

Если вы хотите более гибко управлять атрибутами alt, можно написать собственные функции, добавив их в файл functions.php вашей темы или в отдельный плагин.

Например, функция wpeducation_filter_image_alt ниже проверяет, есть ли у изображения alt, и если нет — ставит заголовок вложения:

function wpeducation_filter_image_alt( $attr, $attachment = null ) {
    if ( empty( $attr['alt'] ) && $attachment ) {
        $alt_text = get_post_meta( $attachment->ID, '_wp_attachment_image_alt', true );
        if ( ! $alt_text ) {
            $alt_text = $attachment->post_title;
        }
        $attr['alt'] = esc_attr( $alt_text );
    }
    return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'wpeducation_filter_image_alt', 10, 2 );

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

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

Можно также автоматически заполнять поле alt при загрузке новых изображений, используя хук add_attachment. Ниже пример функции wpeducation_set_alt_on_upload, которая ставит имя файла без расширения в качестве alt:

function wpeducation_set_alt_on_upload( $post_ID ) {
    $post = get_post( $post_ID );
    if ( $post->post_type === 'attachment' && strpos( $post->post_mime_type, 'image/' ) === 0 ) {
        $alt = get_post_meta( $post_ID, '_wp_attachment_image_alt', true );
        if ( empty( $alt ) ) {
            $filename = pathinfo( $post->post_title, PATHINFO_FILENAME );
            update_post_meta( $post_ID, '_wp_attachment_image_alt', sanitize_text_field( $filename ) );
        }
    }
}
add_action( 'add_attachment', 'wpeducation_set_alt_on_upload' );

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

Изменение атрибута alt в контенте с помощью фильтров

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

Пример функции wpeducation_add_alt_to_content_images, которая ищет все <img> без alt и добавляет описание из имени файла:

function wpeducation_add_alt_to_content_images( $content ) {
    if ( preg_match_all( '/<img[^>]+src=["\']([^"\']+)["\'][^>]*>/i', $content, $matches ) ) {
        foreach ( $matches[0] as $key => $img_tag ) {
            if ( strpos( $img_tag, 'alt=' ) === false ) {
                $src = $matches[1][$key];
                $path_parts = pathinfo( $src );
                $alt_text = sanitize_text_field( urldecode( $path_parts['filename'] ) );
                $new_img_tag = str_replace( '<img', '<img alt="' . esc_attr( $alt_text ) . '"', $img_tag );
                $content = str_replace( $img_tag, $new_img_tag, $content );
            }
        }
    }
    return $content;
}
add_filter( 'the_content', 'wpeducation_add_alt_to_content_images' );

Этот способ не меняет базу данных, но улучшает доступность и SEO на фронтенде.

Рекомендации по созданию качественного alt

Чтобы атрибут alt был полезным, следуйте нескольким правилам:

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

Пример хорошего alt: alt="Логотип компании WPEducation на белом фоне".

Заключение

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