Добавление правильных атрибутов alt и title у изображений в WordPress — важный шаг для улучшения SEO и доступности сайта. Чаще всего эти атрибуты заполняются вручную при загрузке медиафайлов, но что делать, если на сайте много изображений без описаний? В этой статье разберём, как автоматически добавить и оптимизировать эти атрибуты без использования плагинов, используя пользовательские функции, которые можно добавить в functions.php вашей темы или в отдельный плагин.
Почему важно указывать атрибуты alt и title для изображений WordPress
Атрибут alt служит альтернативным текстом для изображений, который отображается, если картинка не загрузилась, а также читается скринридерами для людей с нарушениями зрения. Это обязательный атрибут с точки зрения SEO и доступности.
Атрибут title отображается как подсказка при наведении мыши и может служить дополнительным описанием. Хотя его влияние на SEO менее значимо, он улучшает пользовательский опыт.
Если эти атрибуты не заполнены, поисковые системы и пользователи получают меньше информации, а ваш сайт может потерять позиции.
Как автоматически добавить alt и title к изображениям при вставке в контент
Самый простой способ — использовать фильтр image_send_to_editor, который срабатывает при вставке изображения в пост или страницу через визуальный редактор.
Пример функции для добавления alt и title, если они отсутствуют:
function wppremium_add_default_image_attributes($html, $id, $caption, $title, $align, $url, $size, $alt) {
$attachment = get_post($id);
if (!$alt) {
$alt = get_post_meta($id, '_wp_attachment_image_alt', true);
if (!$alt) {
$alt = $attachment->post_title;
}
}
if (!$title) {
$title = $attachment->post_title;
}
// Заменяем alt и title в html
$html = preg_replace('/alt=".*?"/i', 'alt="'.esc_attr($alt).'"', $html);
$html = preg_replace('/title=".*?"/i', 'title="'.esc_attr($title).'"', $html);
return $html;
}
add_filter('image_send_to_editor', 'wppremium_add_default_image_attributes', 10, 8);Эта функция проверяет, есть ли атрибуты alt и title у вставляемого изображения. Если их нет, она подставляет заголовок вложения. Таким образом, вы минимизируете пустые значения.
Массовое обновление атрибутов alt и title для уже загруженных изображений
Если у вас на сайте много изображений без атрибутов, можно написать скрипт для массового обновления.
Пример функции, которую можно вызвать однократно (например, через WP-CLI или временно добавить в functions.php):
function wppremium_update_missing_image_attributes() {
$args = [
'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)) {
update_post_meta($image->ID, '_wp_attachment_image_alt', $image->post_title);
}
if (empty($image->post_title)) {
// Можно установить заголовок по имени файла
$file = basename(get_attached_file($image->ID));
wp_update_post([
'ID' => $image->ID,
'post_title' => $file
]);
}
}
}
// После запуска нужно удалить или закомментировать вызов
// wppremium_update_missing_image_attributes();Этот код перебирает все изображения, проверяет, есть ли у них alt и заголовок, и если нет, устанавливает их на основе имени файла или названия вложения. Это быстро улучшит SEO и доступность на всем сайте.
Как улучшить атрибуты alt и title с помощью контекста и пользовательских правил
Иногда полезно, чтобы alt и title отражали контекст использования изображения, а не просто название файла. Для этого можно добавить логику с фильтрами или мета-полями.
Например, можно добавить пользовательское поле image_alt_description к медиафайлу и использовать его в качестве alt:
function wppremium_custom_alt_attribute($attr, $attachment, $size) {
$custom_alt = get_post_meta($attachment->ID, 'image_alt_description', true);
if ($custom_alt) {
$attr['alt'] = esc_attr($custom_alt);
} elseif (empty($attr['alt'])) {
$attr['alt'] = esc_attr($attachment->post_title);
}
return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'wppremium_custom_alt_attribute', 10, 3);Такой подход позволяет редакторам сайта задавать более точные описания для изображений через админку, что улучшит семантику и SEO.
Пример использования с title
Аналогично можно настроить атрибут title:
function wppremium_custom_title_attribute($attr, $attachment, $size) {
$custom_title = get_post_meta($attachment->ID, 'image_title_description', true);
if ($custom_title) {
$attr['title'] = esc_attr($custom_title);
} elseif (empty($attr['title'])) {
$attr['title'] = esc_attr($attachment->post_title);
}
return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'wppremium_custom_title_attribute', 11, 3);Советы по SEO и доступности при работе с изображениями WordPress
1. Всегда добавляйте уникальный alt для каждого изображения, описывая его содержимое и контекст.
2. Не дублируйте alt на разных изображениях, это снижает SEO.
3. Используйте описательные title, которые помогают пользователям понять, что изображено или куда ведёт ссылка.
4. Для декоративных изображений, которые не несут смысловой нагрузки, используйте пустой alt alt="", чтобы скринридеры их пропускали.
5. Если используете темы с поддержкой Gutenberg, можно расширять блоки изображений пользовательскими настройками alt и title.
Как WP Premium помогает с оптимизацией изображений и атрибутов
Пакет инструментов WP Premium содержит несколько плагинов, которые могут помочь с SEO и оптимизацией. Например, плагин Clearfy Pro позволяет автоматически оптимизировать мета-теги, включая атрибуты изображений, а также управлять лишним кодом для ускорения загрузки.
Используйте автоматизацию, но не забывайте проверять, что alt и title действительно описывают содержимое — это важно для пользователей и поисковиков.