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

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

Почему важны атрибуты ALT и TITLE для картинок в WordPress

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

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

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

Как WordPress обрабатывает атрибуты ALT и TITLE

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

Чтобы избежать этого, можно использовать фильтр get_image_tag или более современный wp_get_attachment_image_attributes для добавления недостающих атрибутов при выводе.

Автоматическое добавление атрибутов ALT и TITLE через functions.php

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

function wpeasy_add_alt_title_attributes( $attr, $attachment, $size ) {
    // Если атрибут alt пустой
    if ( empty( $attr['alt'] ) ) {
        $alt = get_post_meta( $attachment->ID, '_wp_attachment_image_alt', true );
        if ( ! $alt ) {
            // Используем название файла без расширения
            $file = basename( get_attached_file( $attachment->ID ) );
            $alt = pathinfo( $file, PATHINFO_FILENAME );
            // Заменяем дефисы и подчеркивания на пробелы
            $alt = str_replace( array( '-', '_' ), ' ', $alt );
        }
        $attr['alt'] = esc_attr( $alt );
    }
    // Если title пустой
    if ( empty( $attr['title'] ) ) {
        $title = $attachment->post_title;
        if ( $title ) {
            $attr['title'] = esc_attr( $title );
        }
    }
    return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'wpeasy_add_alt_title_attributes', 10, 3 );

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

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

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

• Auto Image Attributes From Filename With Bulk Updater — плагин автоматически добавляет ALT, TITLE, DESCRIPTION и CAPTION на основе имени файла. Имеется также массовое обновление для уже загруженных изображений.
• SEO Friendly Images — плагин, который автоматически добавляет атрибуты ALT и TITLE к картинкам на вашем сайте, повышая SEO.
• Image Attributes Pro — платный плагин с расширенными возможностями управления атрибутами изображений, включая автоматизацию и массовое обновление.

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

Рекомендации по SEO и доступности для атрибутов изображений WordPress

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

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

Также не стоит злоупотреблять одинаковыми значениями в ALT и TITLE – они должны быть уникальными и информативными, чтобы улучшить SEO и сделать сайт удобным для пользователей с ограничениями.

Дополнительные советы по работе с изображениями в WordPress

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

Если вы используете кастомные темы, например Root или Reboot, убедитесь, что в шаблонах для вывода изображений реализован вызов функции wp_get_attachment_image() с правильными атрибутами.

Пример ручного вывода картинки с атрибутами

$image_id = 123; // ID вложения
$attr = array(
    'alt' => 'Описание изображения',
    'title' => 'Заголовок изображения',
);
echo wp_get_attachment_image( $image_id, 'full', false, $attr );

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