Что такое атрибут alt в wordpress

Как получить атрибут alt, заголовок, подпись и описание изображения

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

На всякий случай проясним один момент:

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

Все эти данные мы можем заполнить при редактировании изображения через админку или даже в медиазагрузчике непосредственно при редактировании поста:

как получить информацию изображения в WordPress (alt, title, подпись и описание)

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

Как получить значение атрибута alt?

Значение атрибута alt у изображений хранится в качестве произвольного поля с ключом _wp_attachment_image_alt , поэтому мы можем легко получить его функцией get_post_meta().

$alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true );

Как получить заголовок (тайтл) изображения?

А тут всё легко – точно так же, как и заголовок любого поста.

$title = get_post_field( 'post_title', $image_id);

$title = get_the_title( $image_id );

Или из объекта сразу:

$image = get_post( $image_id ); $title = $image->post_title;

Как получить подпись изображения?

$caption = get_post_field( 'post_excerpt', $image_id );

$caption = get_the_excerpt( $image_id )

Или напрямую из объекта:

$image = get_post( $image_id ); $title = $image->post_excerpt;

Описание изображение

$content = get_post_field( 'post_content', $image_id );

Всё вместе

$alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true ); $caption = get_post_field( 'post_excerpt', $image_id ); $title = get_post_field( 'post_title', $image_id ); $content = get_post_field( 'post_content', $image_id );

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

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

Приветствую вас, уважаемые читатели Хабра. Как часто мы сталкиваемся с заполнением атрибутов для изображений? Я — довольно часто. И каждый раз начиная пользоваться WordPress на очередном сайте, этот процесс вызывает некоторое раздражение. Поскольку из коробки CMS устанавливает метатеги изображений не корректно, точнее не так, как того требуют поисковые системы для грамотного предоставления информации о картинке. Я решил исправить эту несправедливость.

Проблематика

WordPress по умолчанию устанавливает название файла в поле «Заголовок», которое соответствует атрибуту title, а поле «Атрибут alt» оставляет пустым. Это вызывает дополнительные манипуляции при заполнении тегов для каждого изображения. При использовании стандартного загрузчика, параметры файла выглядят следующем образом:

Как пишет Яндекс, в своей документации:

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

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

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

Google, в своей справке, упоминает только alt:

Замещающий текст в атрибутах alt делает контент доступным для пользователей, которые не видят изображения на страницах (например, потому что используют программы для чтения с экрана или из-за медленного подключения к Интернету).

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

Исходя из моего опыта, можно сделать вывод о том, что alt существенно важнее title. Но тем не менее заполнять все-таки лучше два атрибута. Помимо этого, важно учитывать, что название файла изображения на сайте (используя транслитерацию) должно соответствовать alt. То есть грамотная оптимизация изображения для поисковых систем может выглядеть следующем образом:

название файла: Метатеги для изображений.png;
адрес до изображения: /metategi-dlya-izobrazhenij.png;
alt: Метатеги для изображений;
title: Изображение — метатеги для изображений.

Решение

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

атрибут alt (alt): Название файла;
заголовк (title): Изображение — название файла.

Установка решения

Для установки решения необходимо добавить следующий код в functions.php вашей темы:

# Automatically sets the image Title, Alt-Text, Caption & Description upon upload add_action('add_attachment', 'pami_set_image_meta_upon_upload'); # Helper function if (!function_exists('pami_image_meta_first')) < function pami_image_meta_first($my_image_title, $encoding = 'UTF-8') < $my_image_title = mb_ereg_replace('^[\ ]+', '', $my_image_title); $my_image_title = mb_strtoupper(mb_substr($my_image_title, 0, 1, $encoding), $encoding). mb_substr($my_image_title, 1, mb_strlen($my_image_title), $encoding); return $my_image_title; >> # Main function function pami_set_image_meta_upon_upload($post_ID) < if (!wp_attachment_is_image($post_ID)) return; $my_image_title = get_post($post_ID)->post_title; // Sanitize the title: remove hyphens, underscores & extra spaces: $my_image_title = preg_replace('%\s*[-_\s]+\s*%', ' ', $my_image_title); // Sanitize the title: capitalize first letter of every word (other letters lower case): $my_image_title = str_replace('"', '', $my_image_title); $my_image_title = str_replace('«', '', $my_image_title); $my_image_title = str_replace('»', '', $my_image_title); $my_image_title = str_replace('—', '', $my_image_title); $my_image_title = str_replace(':', '', $my_image_title); $my_image_title = str_replace(' ', ' ', $my_image_title); $my_image_title = str_replace(' ', ' ', $my_image_title); $my_image_title = pami_image_meta_first(mb_strtolower($my_image_title)); // Set the image Alt-Text update_post_meta($post_ID, '_wp_attachment_image_alt', $my_image_title); $my_image_title = mb_strtolower($my_image_title); $my_image_meta = [ 'ID' => $post_ID, 'post_title' => 'Изображение — ' . $my_image_title, // Set image Title to sanitized title ]; // Set the image meta (e.g. Title, Excerpt, Content) wp_update_post($my_image_meta); >

Предложенное решение так же удаляет лишние символы (кавычки, дефисы, двойне пробелы и другие символы) из названия изображения. А конструкцию для title «Изображение — », можно легко изменить на любую другую (56 строчка, при просмотре в редакторе).

Надеюсь, что решение будет полезным для вас и поможет сэкономить некоторое количество времени работы контент-менеджерам.

P.S. Для тех кто не хочет добавлять код самостоятельно, предлагаю просто установить плагин Prostudio Auto Meta Images из официального репозитория WordPress.

Как автоматически добавлять атрибут Alt к изображениям WordPress

Хотите в Яндексе получать хорошие позиции? Один из способов — ко всем картинкам автоматически добавлять атрибут Alt WordPress. Разберем как это сделать правильно.

Что такое Alt, и что писать в нем?

Это атрибут для HTML-тега , который отвечает за вставку изображения на страницу. В Альте прописывается альтернативный текст для фото. Посетитель его увидит, если с загрузкой картинки возникнут проблемы. Обычно описывает то, что изображено.

Как вставить атрибут в изображения?

Его можно прописать вручную при загрузке фото на сайт. Но если картинок много? Тогда делают так: автоматом заполняют названием публикации. И вот как это сделать.

Плагин Clearfy Pro

Это платное многофункциональное решение для ускорения работы и SEO-оптимизации WP-сайтов. Одна из его функций — заполнение альтернативным текстом.

Настройка плагина Clearfy Pro

В админке откройте Clearfy Pro,
перейдите на вкладку Код,
активируйте Автоматически проставить alt.

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

Он не только добавляет значение Альт, но также Title, Caption и Description.

Настройка плагина Auto Image Attributes From Filename With Bulk Updater

Установите и активируйте дополнение,
откройте Настройки > Image Attributes,
перейдите на вкладку Bulk Updater,
нажмите кнопку Run Bulk Updater.

Плагин Update Image Tag Alt Attribute

Еще один инструмент, который добавляет мета-данные к изображениям. Он “жестко” устанавливает значения, которые невозможно изменить для отображения в разных постах.

Активируйте расширение,
перейдите Maui Marketing > Update Alt,
кликните Start Update Only Media.

Модуль запустит поиск и начнет проставлять значения Alt.

Что такое атрибуты alt и title в WordPress

Большая часть веб-контента содержит изображения, однако немногие владельцы веб-сайтов оптимизируют картинки для лучшего ранжирования сайта в поиске. WordPress предоставляет возможность добавления альтернативного текста и заголовка изображения в соответствующие теги. Рассмотрим, в чем заключается разница между атрибутами alt и title и как их использовать для работы с изображениями на сайте.

Что такое тег alt у изображений — описание картинок

Alt, или альтернативный текст, – это атрибут, добавленный к тегу вставки изображения в HTML-коде. Такой текст появляется внутри контейнера картинки, когда она по какой-либо причине не может быть отображена на странице. Это помогает поисковым системам понять, что показано на этом графическом элементе.

вордпресс тег альт

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

Что такое атрибут подписи заголовка title для изображений в WordPress

Title – это еще один атрибут, который можно добавить к тегу изображения в HTML-коде. Он используется для заголовка графического элемента и указывает его название. Заголовок показывается во всплывающей подсказке, когда пользователь наводит курсор мыши на картинку. Текст, введенный внутри title, не будет показан пользователю, если изображение не отображается на странице.

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

вордпресс пример тайтла