Как добавить теги title image, alt к картинкам автоматически? оптимизируем ссылочное описание картинки

Эта коротенькая статья очень и очень важная и посвящена оптимизации сайта на WordPress, а именно миниатюрам и картинкам статей. По умолчанию – полезной seo атрибутикой cms WP не располагает!а посему у большинства неопытных создателей сайтов руки так не доходят до оптимизации сайта, кода…

Важный аспект настройки сайта касается оптимизации изображений: нынче добавим title к ссылке миниатюры, или превьюшке… или thumbnails, кому как угодно. А также допишем – автоматически – alt к загружаемой картинке!

 

Атрибут title в цикле любой ссылки важен – это бесспорно !! Однако и alt (альтернативное описание картинки) лишнем не будет…

Ну, давайте – по порядку…

 

 

 

 

 

Вот основная теговая атрибутика, которая должна присутствовать в ссылке картинки: img src alt title…

 

Alt – подсказка имени картинки, если та не прогружается браузером пользователя (код ниже).

 

title – подсказка поисковому роботу; желательно, чтобы текст титле включал в себя ключевое слово.

Если первое можно и позабыть в процессе оптимизации, то второе ни в коем случае! Сами понимаете.

 

 

 

 

 

Вот картинка, так должен располагаться в ссылке миниатюры виновник темы сегодняшней статьи:

 

 

 

 

 

 

И коли у вас в ссылке тега title нет, нужно это дело поправить!

 

 

 

 

 

 

Итак, вот…

 

 

код автоматической прописки тега title к миниатюрам

 

 

 

 

/* КАРТИНКИ - добавляем title в атрибутику миниатюры */
function titles_gallery($atts,$img) {
$atts['title'] = trim(strip_tags( $img->post_title ));
return $atts;
}
add_filter('wp_get_attachment_image_attributes','titles_gallery',10,2);
/* фин добавляем title в атрибутику миниатюры */

 

 

Этот простенький код замечательно справляется с задачей автоматической дописки тега в ссылку картинки, причём – если у вас момент правильной ссылки title image был упущен – не печальтесь особо.

сия поэтическая кодировка автоматом пропишет необходимый в продвижении тег title ко всем уже имеющимся на сайте миниатюрам!

 

 

 

Единственный минус этого предприятия в том, что ПС не сразу хватятся – должно будет пройти какое-то время, прежде чем у вас настроится более правильная индексация картинок и статей в целом.

 

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

 

 

 

А вот ещё один важный момент, который нужно решить также (желательно) в момент создания сайта!

 

 

 

 

 

автоматическое добавление тега title к картинке в статье

 

 

 

…в системе WordPress (по крайней мере – в последних версиях) автоматическое добавление (или заполнение поля) тега title не предусмотрено.

 

 

При добавлении картинки в статью (не миниатюры), в текстовом редакторе нужно вручную прописывать атрибут (тег) Тайтл (Title)  – это очень важно в плане индексации и продвижения сайта!

 

 

 

 

 

 

 

 

На мой взгляд, это не так и плохо, ибо лишний раз напоминает о том, что нужно открыть редактирование медиафайла – оптимизировать статью! Ведь дело в том, что, тег “Титле” по возможности нужно организовать более правильно от, скажем, атрибута Alt, который используется всего-то в качестве подсказки пользователю, –

 

…а вот для тега тайтл-картинки будет весьма полезно прописать в заголовке ключевые слова (подсказки роботу поисковика).

 

 

 

Вероятно, обращали внимание у “старых блогеров”), что, к примеру, Alt фотки несколько отличается от имени – её (или его)) Title.

 

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

 

 

Ну, ладно, хорош брюзжать…

 

 

Вот код: пропишите его в своём файле функций (functions.php) активной темы…

 

 

 

/* АВТОМАТИЧЕСКОЕ ДОБАВЛЕНИЕ К КАРТИНКЕ статьи title */
if ( !function_exists('avd_insert_image_title') ) :
function avd_insert_image_title( $html, $id, $attachment ) {
if ( !strpos($html, "title=") ) {
$html = str_replace('<img', '<img title="'. get_the_title( $id ) .'"' , $html);
}
return $html;
}
endif;
add_filter( 'media_send_to_editor', 'avd_insert_image_title', 10, 3 );
/* ФИН - АВТОМАТИЧЕСКОЕ ДОБАВЛЕНИЕ К КАРТИНКЕ статьи title */

 

 

 

и напоследок:

 

 

 

автоматическое добавление тега alt к картинке

 

 

 

Добавим автоматическую прописку атрибута ALT к загружаемой картинке… Alt повторит атрибут title картинки…

 

 

 

/* добавим атрибут alt к картинке */
add_filter('wp_prepare_attachment_for_js', 'change_empty_alt_to_title');
function change_empty_alt_to_title( $response ) {
if ( ! $response['alt'] ) {
$response['alt'] = sanitize_text_field( $response['title'] );
}
return $response;
}/* добавим атрибут alt к картинке */

 

 

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

 

 

 

 

 

 

 

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

 

 

 

 

полный код автоматического добавления атрибутов title и alt картинкам статей

 

 

 

 

А вот полный код (сгруппированный из решений статьи по отдельности) который можно добавить в файл функций…

 

 

/**
* автоматически добавит атрибут alt на основе заголовка изображения
*/
add_filter('wp_prepare_attachment_for_js', 'change_empty_alt_to_title');
add_filter('wp_get_attachment_image_attributes','titles_gallery',10,2);
add_filter('media_send_to_editor', 'avd_insert_image_title', 10, 3);
/* @param array $response
 * @return array
 */
function change_empty_alt_to_title( $response ) {
if ( ! $response['alt'] ) {
$response['alt'] = sanitize_text_field( $response['title'] );
}
return $response;
}
// добавляем title в атрибутику миниатюры
function titles_gallery($atts,$img) {
$atts['title'] = trim(strip_tags( $img->post_title ));
return $atts;
}
// title к миниатюре
// автоматическое добавление к картинке СТАТЬИ title
if ( !function_exists('avd_insert_image_title') ) :
function avd_insert_image_title( $html, $id, $attachment ) {
if ( !strpos($html, "title=") ) {
$html = str_replace('<img', '<img title="'. get_the_title( $id ) .'"' , $html);
}
return $html;
}
endif;
/* фин прописки title */

 

 

 

 

 

 

 

На этом нынче всё! …теперь вся необходимая атрибутика медиафайлов будет на месте, а значит наши статьи более оптимизированы!

 

 

Однако и однако !!

 

 

В качестве эпилога, ещё один важный момент:

 

 

 

 

 

На этом занавес представления опускается…
…на рампы пыль печальная ложится…

 

 

Online консультация по настройкам и созданию сайтов на WordPress

!..подписываясь на обновления mihalica.ru —
...расстаёмся с невежеством..!

 

 

 

…Как работать с условными тегами WP: пример на странице пагинации – закрываем в noindex,follow…