Почему важно использовать alt-текст для изображений в WordPress
Атрибут alt — это текстовое описание изображения, которое помогает поисковым системам понять содержимое картинки и улучшает SEO сайта. Кроме того, alt-текст необходим для доступности сайта: пользователи с ограничениями зрения используют экранные читалки, которые озвучивают этот текст.
Однако часто при загрузке изображений на сайт alt-текст остаётся пустым или неинформативным, что ухудшает SEO и опыт пользователей. Поэтому автоматизация добавления качественного alt-текста — важная задача для разработчиков и владельцев сайтов на WordPress.
В этой статье разберём, как можно автоматизировать создание alt-текста с помощью плагинов и кастомного кода.
Использование плагинов для автоматического добавления alt-текста
Среди популярных плагинов, которые помогают автоматически создавать alt-текст, можно выделить:
- Automatic Alternative Text — плагин использует сервисы распознавания изображений на базе ИИ (например, Microsoft Azure Computer Vision) для генерации описаний.
- SEO Friendly Images — автоматически добавляет alt и title к изображениям, используя заголовок поста или имя файла.
- WPGPT Image Alt Generator — плагин от WPShop, интегрирующий возможности GPT для генерации уникального и релевантного alt-текста.
Рассмотрим пример настройки плагина WPGPT, который позволяет создавать alt-тексты автоматически с помощью искусственного интеллекта. После установки и активации плагина в его настройках укажите API ключ, затем выберите опцию автогенерации alt при загрузке изображений. Плагин отправит изображение на сервер GPT, получит описание и добавит его в атрибут alt.
Как самостоятельно реализовать автоматическое создание alt-текста через код
Если хотите обойтись без плагинов или создать свой уникальный функционал, можно написать кастомный код, который при загрузке изображения будет автоматически устанавливать alt-текст. Вот простой пример, который устанавливает alt равным имени файла без расширения:
add_filter('wp_handle_upload', 'wpgenerate_set_alt_text_on_upload');
function wpgenerate_set_alt_text_on_upload($upload) {
if (isset($upload['file'])) {
$file_path = $upload['file'];
$file_name = basename($file_path);
$alt_text = pathinfo($file_name, PATHINFO_FILENAME);
// Получаем ID вложения по пути файла
$attachment_id = attachment_url_to_postid($upload['url']);
if ($attachment_id) {
update_post_meta($attachment_id, '_wp_attachment_image_alt', sanitize_text_field($alt_text));
}
}
return $upload;
}Данный код добавляет alt-текст сразу после загрузки файла. Недостаток — alt текст получается простым и не всегда информативным. Для улучшения можно интегрировать API сервисов распознавания изображений.
Пример интеграции с Microsoft Azure Computer Vision API
Чтобы получить более качественные описания, можно отправлять изображения в облачный сервис распознавания и использовать полученный текст как alt. Пример функции для запроса к API:
function wpgenerate_get_image_description($image_path) {
$subscription_key = 'ВАШ_API_КЛЮЧ';
$endpoint = 'https://<регион>.api.cognitive.microsoft.com/vision/v3.2/describe';
$image_data = file_get_contents($image_path);
$headers = [
'Content-Type: application/octet-stream',
'Ocp-Apim-Subscription-Key: ' . $subscription_key
];
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $endpoint);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $image_data);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
curl_close($ch);
$result = json_decode($response, true);
if (!empty($result['description']['captions'][0]['text'])) {
return $result['description']['captions'][0]['text'];
}
return '';
}Этот вызов возвращает описание изображения, которое можно сохранить в alt.
Автоматическое добавление alt-текста при вставке изображений в контент
Иногда изображения уже загружены, но у них нет alt-текста. Для массового добавления можно написать скрипт, который переберёт медиафайлы и обновит alt. Вот пример функции для добавления alt по имени файла ко всем изображениям без alt:
function wpgenerate_bulk_add_alt_text() {
$args = [
'post_type' => 'attachment',
'post_mime_type' => 'image',
'posts_per_page' => -1,
'meta_query' => [
[
'key' => '_wp_attachment_image_alt',
'compare' => 'NOT EXISTS',
]
]
];
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
$attachment_id = get_the_ID();
$file = get_attached_file($attachment_id);
$alt_text = pathinfo($file, PATHINFO_FILENAME);
update_post_meta($attachment_id, '_wp_attachment_image_alt', sanitize_text_field($alt_text));
}
wp_reset_postdata();
}
}Запускать такую функцию стоит один раз вручную или через WP-CLI, чтобы не нагружать сайт.
Рекомендации по улучшению качества alt-текста
Автоматизация — это отлично, но не стоит забывать о качестве. Вот несколько советов:
- Используйте ИИ-сервисы для создания осмысленных описаний.
- Добавляйте ключевые слова аккуратно, чтобы не переоптимизировать и не навредить SEO.
- Проверяйте alt-тексты вручную для важных изображений.
- При возможности комбинируйте автоматизацию с ручной доработкой.
Плагин Clearfy Pro из WPShop помогает оптимизировать SEO, в том числе автоматически управлять атрибутами изображений, что полезно в связке с описанными решениями.
Итоги и лучшие практики
Автоматизация alt-текста в WordPress помогает повысить SEO и улучшить доступность сайта, особенно если у вас много изображений. Используйте готовые плагины, если хотите быстро стартовать, или пишите собственные функции для гибкой настройки. Обязательно тестируйте и проверяйте результаты, чтобы alt-тексты были релевантными и полезными.
Такой подход позволит и повысить позиции в поисковиках, и сделать сайт удобным для всех пользователей.