Ваш путь: Главная » Сниппеты, хаки, функции » текущая страница

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


обновлено 2024-02-13 в теме: Сниппеты, хаки, функции
Запросто с WordPress создание и продвижение сайтов ATs media

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

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

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

 

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

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

 


 

 

 

 

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

 

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

 

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

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

 

 

к слову:

попробуйте проверить валидатором страничку и убедитесь, что тестер непременно покажет отсутствие атрибута alt, а вот о теге title, коли его нет – умолчит, собака, не посчитав за ошибку.

Так что внимательнее…

 

 

 

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

 

 

 

добавим title к ссылке миниатюры WordPress

 

 

 

И коли у вас в ссылке тега 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)  – это очень важно в плане индексации и продвижения сайта!

 

 

 

 

добавление тега 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 к картинке */

 

 

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

 

 

 

авто title 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 */

 

 

 

 

Статья дополнена кодом автодобавления к загружаемой картинке атирибута alt – этот код я увидел впервые у автора campusboy.

 

 

 

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

 

 

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

 

 

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

 

 

 

важно !!

 

Прописка кода в файл functions.php, это дело хорошее !! Однако не всё и вся стоит в него пихать – правильнее (и для скорости загрузки в том числе) сгруппировать некоторые циклы кода в оформленном плагине: легко, надёжно и правильно в плане создания сайта.

 

 

Все доказательства «ЗА» читать:

 

 

Вот ссылка – как сделать собственный плагин WordPress – добавочный файл my-functions.php

 

 

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

 

 


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

 

 


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


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


 

 

 

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

 

 

 

 


...вопросы в комментариях - помогу, в чём дюжу...
mihalica.ru !


Михаил ATs - владелец блога запросто с Вордпресс - в сети нтернет давным-давно...

...веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети... - заказы, вопросы... разработка...





Нажатия на кнопочки определяют Ваше высокое гражданское сознание

Поделитесь соображениями: Ваши мысли очень важны!

Внимание! Обязательные поля помечены *

  отныне доступен плагин: ats privacy policy ©


  1. Хорошее решение!
    Спасибо.
    А не знаете ли такого же решения для ссылок?
    Начиная с версии 4.2 в wordpress данное поле отключено, есть ли решение без плагина?
    Заранее спасибо!

    Ответить - tstas

    • Да не за что…
      Насчёт 4.2 что-то сомнительно!
      Взгляну, как только будет время…

      А не знаете ли такого же решения для ссылок?

      это не понял… Чтоб к ссылкам статьи title прописывался автоматом, что ли?
      Поясните, посмотрим что можно сделать… (именно сейчас крайне занят)

      Ответить - Михаил

      • это не понял… Чтоб к ссылкам статьи title прописывался автоматом, что ли?
        Поясните, посмотрим что можно сделать… (именно сейчас крайне занят)

        Да, да именно к ссылкам внутренним, начиная с версии 4.2 WP, разработчики убрали это поле из редактора, очевидно вырезали или закомментировали часть кода. Связано это с якобы отсутствием восприятия title гуглом при ранжировании, как влияет на ранжирование яши неизвестно, жду ответ от техподдержки, ответят или нет не знаю. Посмотрел на блогах конкурентов, у всех title в ссылках прописаны!
        Вот сижу ставлю в ручную, кроме решения с помощью плагина не нашел, плагин ставить не хочу.
        Интересует Ваше мнение по поводу title в ссылках и может есть простое решение наподобии добавки кода в функцион темы?
        P.S.
        Ранее к примеру в WP, разработчиками была уничтожена кнопка выравнивания текста по ширине страницы, так она возвращается добавлением в функционал темы простым кодом:

         function my_mce_buttons_2( $buttons ) {
        
        	$buttons[] = 'underline';
        	$buttons[] = 'alignjustify';
        
        	return $buttons;
        }
        add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );

        Вот может Вы подскажите решение типа такого?
        Заранее спасибо.

        Ответить - tstas

        • отвечу подробнее через часок-два…

          Посмотрел на блогах конкурентов, у всех title в ссылках прописаны!

          Это естественно! они должны быть прописаны… Можно, к примеру, кнопку title добавить в html редактор.

          А чтоб автоматом – нет – без плагина так на вскидку решения не дам. Да и к тому же будет прописывать равное заголовку ссылки значение: не знаю насколько это выгодно.
          …большинство админов устанавливают плагин TinyMCE Advanced (в помощь виз редактору) и не заморачиваются: этот плагин, кстати оч. оправдан. есть много полезного…
          Со ссылками всё-таки правильнее работать в этом плане вручную.

          Ответить - Михаил

          • Спасибо Михаил!
            Буду ковырять вручную, сразу проворонил этот момент, теперь надо ставить на 70 страниц :(
            Интересный у Вас блог, лежит в закладках, нашел много полезного. Спасибо.

            Ответить - tstas

            • 70 это не 700..! Однако поправить нужно.
              Спасибо, за визит и высказывания!
              Заходите и впредь. …и спрашивайте, коли что не ясно…

              Ответить - Михаил

  2. Подскажите пожалуйста, как сделать чтоб в атрибут title автоматически подставлялся текст из Title страницы?

    Ответить - Артем

    • Какой имеется в виду title: имя страницы (записи) или title сформированный неким SEO плагином?
      В любом случае – подставляйте в данном коде требуемые вызовы данных…
      Код немного поправить нужно…

      Ответить - Михаил

      • Вот отсюда брать Title страницы и подставлять в атрибут

        Именно тайтл страницы брать. Я не знаю как “подставлять в данном коде требуемые вызовы данных…”

        Ответить - Артем

        • Не понял, откуда “отсюда брать Title…”?
          Вам нужно, чтобы в ТИТЛЕ картинки (ко всем картинкам) добавился ТИЛЕ статьи?
          …извините, не могу въехать в вопрос…

          Ответить - Михаил