Что такое атрибут alt в wordpress
Перейти к содержимому

Что такое атрибут 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, что очень важно для оптимизации. Представьте, в вашем блоге сотни постов, это где-то больше тысячи иллюстраций. И вот каждая из них приводит на сайт все больше и больше людей.

Для самих же пользователей атрибут alt невидим. Кроме случаев, когда по какой-то причине не загрузились фотографии. Либо сначала на экране появится текст без картинок, значит в это время на месте картинок будет виден текст атрибута alt, а уже потом подгрузятся изображения. Например, если интернет медленный.

Правильно заполняем атрибут alt

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

  1. Поисковики не приветствуют большие описания. Длина должна быть ограничена 250-ю знаками. А лучше выбрать для себя среднее значение в 5 или 6 слов.
  2. Смысл текста должен совпадать с тем, что изображено на картинке. Пишем в атрибуте «дворец», а на фото виден сарай. Такая бессмыслица только оттолкнет пользователей от вашего блога.
  3. Используйте в атрибутах ключевики, но не перегибайте палку. Некоторые блогеры вставляют в атрибут alt самые топовые запросы через запятую. Это автоматически будет считаться спамом и поисковик может вас заблокировать.
  4. Не прописывайте атрибуты alt у картинок, которые не несут смысловой нагрузки, а являются элементом дизайна.
  5. Не следует фантазировать с дополнительными тегами alt для похожих картинок из одной статьи или карточки товаров. Предположим, у вас интернет-магазин футболок и для каждой вещи вы припасли по несколько картинок. Поэтому все изображения одного товара надо подписывать одинаково, но разграничить цифрами на конце. Например: «футболка красная 1», «футболка красная 2».

Мы заметили, что зачастую, администраторы сайтов забывают прописывать атрибуты alt в изображениях. Чаще всего это встречается, где редактурой занимаются команды из нескольких человек. Поэтому многие наверняка задавались вопросом, как настроить автоматическое заполнение атрибута alt в wordpress.

Автоматическое заполнение атрибута alt в WordPress с помощью плагина

Мы рассмотрим способ как автоматически заполнить атрибут alt в wordpress: используя инструменты плагина Clearfy. Скачиваем и приступаем к его настройке:

Открываем «Настройки» => «Clearfy меню».

Открываем Clearfy меню

В меню настроек плагина выберите раздел «SEO».

автоматическое заполнение атрибута alt в wordpress

В первом же блоке «Базовые настройки SEO оптимизации» вы найдете необходимые функции. В строке Автоматически устанавливать атрибут alt нажмите кнопку ВКЛ и не забудьте сохраниться.

автоматическое заполнение атрибута alt в wordpress

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

Заключение

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

Атрибут alt WordPress: оптимизируем картинки 4 совета по заполнению

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

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

ALT – специальный атрибут применяемый к медиафайлам. Разрабатывался для поисковых систем, чтобы понять что показано. На сайте увидеть нельзя только через исходный код страницы в images.

Посмотреть расположение img

Но в последствии поисковые системы научились определять что показано в файле, с помощью нейросетей и специальных скриптов, понимающих цветовую структуру. Поэтому влияние альта на продвижение в Яндексе и Google стало менее ощущаться.

Как прописать атрибут alt в вордпресс

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

В классическом редакторе

В WordPress классическом редакторе нажимаем на изображение и выбираем значок редактировать.

Изменение фото в WP

Далее появится окно WP, на первой строчке будет поле с возможностью прописать альт. Заполняем и в нижнем правом углу нажимаем кнопку Выбрать, чтобы изменения сохранились.

Не забываем обновлять саму запись или страницу.

Поле для заполнения alt

В Gutenberg

В новом удобном редакторе Gutenberg процесс занесения атрибута alt проще:

Gutenberg вставка атрибутов

  1. Вставляем картинку через соответствующий блок и выделяем ее нажатием
  2. В правой колонке WordPress появится окно настроек блока, увидите раздел

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

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

Автоматическое проставление мета в плагине

Ссылка на Clearfy PRO

У плагина есть более 50 настроек по улучшению, чистке, SEO, ускорению и оптимизации блогов на WordPress. В разделе SEO передвигаем переключатель в активное положение, теперь ко всем картинкам, не имеющих альта, он сделает автозаполнение взяв текст из заголовка.

Title и подпись для картинок

Стоит отметить еще две возможности это title и подпись для картинок. В ранжировании любого элемента играет роль окружающий текст. Что делают данные элементы:

  • Тайтл показывает всплывающую подсказку при наведении на объект
  • Подпись добавляет текст снизу, который индексируется как простой контент, но находится в одном блоке с файлом в разметке HTML

Другие области для расширения представления изображений в вордпресс

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

Изменение тегов через библиотеку файлов

Приложу авторское видео, чтобы представить процесс более ясно.

Что писать в alt и остальные теги в WordPress

Правил должны придерживаться не только владельцы WordPress, но и другие вебмастера:

  • Все три параметра – alt, title и подпись должны отличаться, особенно для ресурсов продвигающихся за счет фотографий, рисунков, картин и других творческих направлений
  • Альт должен содержать конкретику, и не больше 50 символов с пробелами. Хорошо применять околотематические слова и фразы в разбаленном виде из главного ключа
  • Тайтл – показывает что на рисунке, особого значения не придавайте, если показан цветок, так и напишите
  • Подпись – в сегодняшней ситуации важнейший элемент, заносим в нее важную информацию о файле, много писать не нужно, а то получиться целостный абзац
  • Есть так же описание в настройках, но им пользоваться бессмысленно, ни на что не влияет
  • Не забывать заполнять атрибут для миниатюр записей

Закончу статью, научились заполнять атрибут alt в WordPress и сможете сделать сайт лучше для поисковых систем.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *