Більшість веб-контенту містить зображення, однак небагато власників веб-сайтів оптимізують картинки для кращого ранжування сайту в пошуку. WordPress надає можливість додавання альтернативного тексту та заголовка зображення у відповідні теги. Розглянемо, у чому полягає різниця між атрибутами alt та title і як їх використовувати для роботи із зображеннями на сайті.
Що таке тег alt у зображень - опис картинок
Alt або альтернативний текст – це атрибут, доданий до тега вставки зображення в HTML-коді. Такий текст з'являється всередині контейнера картинки, коли вона з будь-якої причини не відображається на сторінці. Це допомагає пошуковим системамзрозуміти, що показано цьому графічному елементі.
Атрибут alt також використовується для покращення доступності веб-сайту для людей з поганим зором або тих, хто застосовує пристрої для читання екрана. Програма-читалка озвучуватиме текстову статтю, а коли справа дійде до зображення, то прочитає текст, що знаходиться в атрибуті alt. Це дозволить користувачам дізнатися, що намальовано на зображенні, навіть якщо вони її не бачать.
Віртуальний хостинг сайтів для популярних CMS:
Рекомендації щодо заповнення цього тегу, що писати в ВордПрес
WordPress дозволяє додавати атрибут altдля зображень під час їх завантаження за допомогою вбудованого мультимедійного завантажувача. На етапі створення сторінки або запису на панелі інструментів доступна кнопка "Додати медіафайл". При її натисканні відкривається вікно вбудованої бібліотеки, куди потрібно завантажити або перетягнути мишею потрібну картинку.
Коли ви завантажуєте зображення за допомогою вбудованого засобу завантаження контенту WordPress, праворуч вікна доступні кілька полів для заповнення атрибутів зображення. Поле заголовка не слід плутати з атрибутом title, що використовується всередині тега зображення. Заголовок, що додається під час завантаження, використовується лише медіабібліотекою WordPress для відображення списку мультимедійних файлів.
Задайте атрибут alt у відповідному полі - він зазвичай складається з 2-3 слів і повинен описувати те, що зображено на картинці. За бажанням у цьому ж вікні завантаження можна заповнити поля для підпису та опису зображення.
Що таке атрибут підпису заголовка title для зображень WordPress
Title – це ще один атрибут, який можна додати до тега зображення у HTML-коді. Він використовується для заголовка графічного елементата вказує його назву. Заголовок показується у підказці, коли користувач наводить курсор миші на картинку. Текст, введений усередині title, не буде показаний користувачеві, якщо зображення не відображається на сторінці.
Назву потрібно давати осмислено залежно від інформації, представленої на зображенні. У той же час, цей текст повинен відрізнятися від того, що міститься в атрибуті alt. Заголовок title можна писати російською мовою або використовувати транслітерацію, часто для SEO-оптимізації до неї додають ключові слова.
Атрибут title додається до зображення WordPress вже після його вставки в текст. Якщо ви використовуєте візуальний редактордля оформлення сторінки, клацніть на картинці. На що з'явилася додаткової панеліінструментів слід натиснути кнопку редагування із зображенням олівця.
В результаті відкриється спливаюче вікно для налаштування параметрів зображення, в якому потрібно відкрити розділ « Додаткові налаштування». З'явиться поле для додавання атрибута title, куди потрібно вписати назву картинки. У цьому ж вікні налаштування атрибута alt доступна на той випадок, якщо ви забули ввести його при завантаженні зображення. Відкоригуйте обидва поля та натисніть кнопку «Оновити».
Тим користувачам, які вміють редагувати HTML-код, достатньо переключитися з візуального на текстовий редакторта додати атрибути titleта alt у відповідний тег зображення.
Для оптимізації сайту рекомендується використовувати зображення як атрибут alt, так і title. Очевидна перевага цього кроку полягає в тому, що він допомагає пошуковим системам знаходити зображення на вашому сайті та відображати їх у результатах пошуку за картинками.
При цьому сайт отримує додатковий трафікз пошукових систем. Іншим цінним фактором є те, що ці атрибути покращують доступність вашого сайту для людей із особливими потребами.
WordPress – дуже зручна платформа для оптимізації. Якщо руки ростуть із правильного місця, і ви хоч щось знаєте про поняття SEO, тоді ви зможете правильно оптимізувати сайт на WordPress. У результаті, після написання певного обсягу контенту та публікації постів, люди на сайт почнуть приходити з пошуку, і вам нічого не потрібно буде робити. Залишиться лише вдосконалити методи монетизації чекати на приплив грошей. Це кращий спосібзробити пасивний дохіду 21 столітті, і ви зобов'язані ним скористатися!
Величезну користь для оптимізації WordPressграє атрибут the Title. Без нього складно досягти нормальних позицій у пошуку.
Тому якщо плануєте розбагатіти на органічний трафік, ви повинні навчитися робити мета теги для всіх сторінок, записів та рубрик меню, у тому числі й атрибут the Title. Інакше ваш сайт ніколи не набере пристойної аудиторії.
Як додати атрибут the Title до кожної сторінки та запису
Справа в тому, що цей атрибут вже є на всіх сторінках вашого проекту. Сайт WordPress автоматично генерує всі необхідні мета-теги, якщо цього не робить господар проекту. Але проблема в тому, що робить це двигун нікудишньо, у розрахунку на те, що вас не особливо хвилює SEO. Зазвичай він вставляє якісь найближчі слова замість того, щоб якісно прописати Title. Крім того, шаблон не передбачає цей атрибут для кожної сторінки персонально. Вам необхідно змінити це.
Додати мета теги, а точніше, атрибут the Title на сайт WordPress ви зможете вручну — через код. Вам необхідно буде додати спеціальні умови elseif, щоб кожен пост (post), рубрика меню (category) та персональна сторінка(page) обзавелися власними параметрами the Title. Але проблема в тому, що хоч прописати треба і не дуже довгий кодв 5-6 рядків, але новачок цього зробити не зможе. Тому необхідно шукати інші способи змінити слова Тайтла і відредагувати цей атрибут. І такий спосіб є – це встановлення спеціальних плагінів.
Плагіни, які активують теги WordPress
SEO Title Tag
Це вузьконаправлений плагін, який якраз розрахований на атрибут the Title. Вам необхідно буде спершу зайти, і через встановити на сайт плагін SEO Title Tag. Після цього ще потрібно буде щось зробити з кодом. Тільки нічого вигадувати не доведеться. Зайдіть до редактора файлу header.php. Заходьте на нього через хостинг, інакше ключові зміни не активуються. Знайдіть у файлі header.php замкнуті теги title. Тепер видаліть усе, що міститься між цими двома тегами і додайте наступний код:
else (bloginfo("name"); wp_title();) ?>
Цей код активує тайтл. Тепер, коли ви будете за допомогою меню адмінки, у розділі зі сторінками з'явиться рядок, куди можна вписати title. Таким чином ви зможете додати заголовок для кожної сторінки.
WordPress seo by yoast
Це справжній хіт серед інших SEO-плагінів для WordPress. Коли ви завантажуєте та встановите цей модуль, ваш сайт гарантовано покращить позиції. Зможете прописувати ключові слова та редагувати мета так, як завгодно душі. Зрозуміло, робити це потрібно буде за правилами, щоби органічний потік поступово збільшувався.
Для початку скачайте плагін WordPress seo by yoast. Під час активації модуля вам запропонують відстежувати роботу інструмента, нібито для покращення підтримки. Краще забороніть це, щоб блог не провантажувався. Якщо ви вже користувалися плагінами для мета, тоді натисніть кнопку «Імпортувати», щоб зберегти всі прописані теги та ключові слова сайту. Далі пройде процедура передачі даних, усі теги та ключові слова закріпляться вже за новим плагіном, ваша мета збережеться, і ви будете сповіщені про успішне закінчення імпорту інформації.
Після встановлення та імпорту даних у плагін, обов'язково зайдіть у меню, та налаштуйте його. Щоб сторінки отримали мета, необхідно відзначити які саме теги ви вводитимете самостійно, а які довірите модулю. Обов'язково відзначте галочку «Використовувати мета ключові слова». А для кожної сторінки можна було задавати окремий тайтл, скористайтеся функцією Title separator – це роздільник, який окремо сприймає заголовок та тайтл сторінки. Якщо ви його не активуєте, тоді ключові слова тайтла автоматично перетворяться на заголовок або на початок тексту сторінки, що дуже небажано для оптимізації.
Ще одна перевага плагіна WordPress seo by yoast – це можливість редагувати тайтли одразу для всіх розділів сайту. Модуль має вбудований масовий редактор, який надасть вам список усіх доступних сторінок. Ви зможете не заходячи до всіх розділів, змінити тайтли для сторінки. Буквально за 5 хвилин можна відредагувати до 10 сторінок. В іншому випадку у вас би на це пішла бита година. Адже щоб змінити title без редактора, вам потрібно заходити в меню Ворпдерсс в розділ «Сторінки», вибирати потрібний розділзі списку, і вже там знизу, де мета вводити свій тег.
All in One SEO Pack
Це ключовий конкурентпопереднього плагіна. На думку багатьох, цей модуль навіть кращий. Адже він нічим не поступається інструментом WordPress seo by yoast. Вам доведеться пройти аналогічну процедуру встановлення та активації плагіна. Меню налаштувань цього модуля трохи відрізняється, але в цілому все дуже схоже. Ви можете або задати автоматичну генераціютайтлів, засновану на копіюванні заголовків сторінок, або активувати теги в розділі "Мета", щоб прописувати ключові слова самостійно.
А тепер трохи про правила написання Title. Пам'ятайте, що його довжина має бути меншою за 75 символів. Тайтл має виглядати натурально, але при цьому обов'язково міститиме ключові слова. Цей атрибут зобов'язаний зацікавити пройдисвіта в пошуковій системі, щоб той здійснив перехід на ваш ресурс. І не забудьте, що чим ближче слова до початку тайтла, тим вони більшу роль відіграють, тим більша їхня вага. Тому генеруйте теги з розумом, щоб пошукові роботице оцінили.
Отримує тег зображення вказаного вкладення (прикріпленого до посту файла).
Якщо вкладення не вдалося знайти, буде повернено порожній рядок.
Якщо вкладення є картинкою, то їй буде повернуто код, відповідний зазначеному розміру (див. параметр $size).
Для прикріплених файлів типу відмінного від картинок (.zip, .xls, .flv) буде повернуто відповідна цьому типу іконка (автоматично визначається WordPress). За замовчуванням така іконка не виводиться, щоб вона виводилася, потрібно виставити 3-й параметр ($icon) в true.
Хуки з функції
Повертає
Рядок. HTML код картинки в тега.
Використання
$img = wp_get_attachment_image($attachment_id, $size, $icon, $attr); $attachment_id (число) (обов'язковий) ID вкладення, картинку якого потрібно отримати. $size (рядок/масив)Розмір картинки. Можна вказати у вигляді:
- Рядки thumbnail, medium, large, full або назва наявного розміру
- У вигляді масиву з 2-х елементів, що визначають розміри сторін картинки, що виводиться: array(32,32) .
Вказівка розмірів через масив не зменшує картинку фізично, вона зменшується тільки візуально з готової мініатюри (uploads).
Вказування розмірів не впливає на розміри іконок, що виводяться для файлів, вони завжди виводяться в оригінальному розмірі(32х32).
Замість використання масиву, іноді логічно зареєструвати новий розміркартинок (add_image_size()) і використовувати його поряд з уже встановленими (thumbnail, medium, large або full). Такий підхід ефективніший, оскільки немає потреби постійно перевіряти який розмір із наявних підходив краще.
Типово: "thumbnail"
$icon (логічний)Використовувати медіа іконки, щоб подати вкладення. За замовчуванням, для вкладень типу файл (не картинок), іконка не виводиться, якщо потрібно виводити іконки для таких типів вкладень виставте цей параметр в true.
Типово: false$attr (масив)
Будь-які атрибути для тега у масиві. Наприклад:
Array("class" => "foo bar", "title" => "назва картинки",)
Приклади
#1. Виведемо готову для HTML картинку
Виведемо картинку середнього розміру прикріпленого файлу-картинки 651:
Виведе приблизно такий HTML:
alt текст буде заповнено, тільки якщо він вказаний для вкладення у спеціальному полі (alt text). В alt не потрапляє текст із заголовка (title), опису (description) або підпису (caption) картинки.
#2. Приклад із зазначенням довільного розміру
Виведемо картинку вказаного розміру 20х20 пікселів, для вкладень типу "картинка" та відповідну іконку для інших типів вкладень (3-й параметр):
ID, array(20,20), true); ?>
$post->ID - динамічна передача ID усередині циклу. Створити такий цикл можна, використовуючи функцію get_posts() (get_posts("post_type=attachment")).
Код wp get attachment image : wp-includes/media.php VER 5.1.1
$src, "class" => "attachment-$size_class size-$size_class", "alt" => trim(strip_tags(get_post_meta($attachment_id, "_wp_attachment_image_alt", true))))); $attr = wp_parse_args($attr, $default_attr); // Generate "srcset" and "sizes" if не єнеобхідним. if (empty($attr["srcset"])) ( $image_meta = wp_get_attachment_metadata($attachment_id); if (is_array($image_meta)) ( $ size_array = array(absint($width), absint($height))); $srcset = wp_calculate_image_srcset($size_array, $src, $image_meta, $attachment_id); attr["sizes"]))) ( $attr["srcset"] = $srcset; if (empty($attr["sizes"])) ( $attr["sizes"] = $sizes; ) ) ) ) /** * Filters list attachment image attributes. * * @since 2.8.0 * * @param array $attr Attributes for the image markup. * @param WP_Post $attachment Image attachment post. * @param string|array $size Requested size. Image size або array of width and height values * (in that order). Default "thumbnail". */ $attr = apply_filters("wp_get_attachment_image_attributes", $attr, $attachment, $size); $attr = array_map("esc_attr", $attr); $html = rtrim("Починаючи з версії 3.5 WordPress, з редактора видалена функція автоматичного додавання атрибута title, що на мій погляд дуже незручно. Ні, ця функція залишилася в редакторі, але щоб дістатися до неї і додати до картинки опис потрібно зробити кілька зайвих маніпуляцій, а потім заповнити вручну необхідне поле.
У статті розглянемо стандартний метод додавання до зображень атрибут «title» та альтернативний автоматичний.
Подивимося як додавати атрибут title у редакторі WordPress за замовчуванням
Як я згадав раніше, для мене особисто додавати опис до картинок способом, запропонованим розробниками WordPress, дуже незручно. Тим більше, що я взагалі не користуюся візуальним редактором WordPress і тим більше не додаю картинки через нього.
Щоб додати атрибут title до зображення в редакторі WordPress, за промовчанням потрібно зробити кілька маніпуляцій:
1. Перейти до вкладки «Візуально»;
2. Додати зображення стандартним способом, клацнути по ньому;
3. Натиснути на кнопку редагування в вкладці;
4. Знайти та заповнити поле «Атрибут title» у «Параметри зображення» (дивіться скріншоти).
І лише після цього з'явиться бажаний та багатостраждальний підпис до картинки.
У вкладці «Параметри зображення» можна також призначати свій клас до картинки та інші атрибути. Як на мене, то швидше прописати атрибут title і додати клас до зображення вручну, використовуючи текстову вкладку в редакторі WordPress.
Автоматичний варіант додавання title до редактора WordPress
Звичайно, можна додавати опис до картинки і так, а можна один раз додати невелику функцію у файл functions.php , або в альтернативний файл функцій файл, стаття Альтернатива файлу functions.php WordPress , зі своїми надбудовами (для тих, у кого багато функціональних змін раджу, щоб за оновлення теми не злітали зміни).
Як варіант встановіть спеціальний плагін Restore Image Title. Плагін не ресурсомісткий і має в собі лише дві функції.
І ще один варіант - шляхом додавання уривка коду безпосередньо до файлу functions.php.
Подивіться на скріншоти. Тепер поле «Заголовок» буде підписом title до картинки.
Додаємо атрибут title до редактора WordPress для зображень
Для цього відкрийте файл functions.php і в кінці вставте цей уривок коду:
Function lcb_restore_image_title($html, $id) ( $attachment = get_post($id); if (strpos($html, "title="))) ( return $html; ) else ( $mytitle = esc_attr($ attachment->post_title);return str_replace("!}
Якщо ви користуєтесь галереєю, то і до мініатюр з галереї можна додати атрибут title. Для цього просто до вищеопублікованого уривка коду додайте ще один, для галереї WordPress.
Додаємо атрибут title до редактора WordPress для галереї
function lcb_restore_title_to_gallery($content, $id) ( $thumb_title = get_the_title($id); return str_replace("На сьогодні зображенням всього веб-контенту відводиться досить велике місце. Однак, не всі користувачі оптимізують їх для кращого ранжування всього сайту в цілому. WordPress, серед інших можливостей, надає зручні інструменти для додавання альтернативного тексту і заголовка зображення у відповідні теги. У цьому матеріалі розглянемо різницю між атрибутами alt/titleта сфери їх застосування.
Навіщо потрібен атрибут у картинках?
Альтернативний текст або altє HTML-атрибутом, доданим до тега вставки зображення
. Цей текст буде показано, якщо зображення з тієї чи іншої причини не буде завантажено та відображено на сторінці. Такий хід дає інформацію пошуковим роботам про те, що саме зображено на фото. Зазвичай у тезі altпишуть короткий опис зображення. Крім того, атрибут служить також для покращення доступності сайту для людей з обмеженим зором або для тих, хто використовує пристрої для читання з екрана. Програма-читалка озвучуватиме текстову частину сторінки, а коли дійде до зображення, то прочитає і текст, що знаходиться в alt. Завдяки цьому користувачі завжди знатимуть, що намальовано на картинці, навіть якщо вони її не бачать.
Як і де заповнювати alt у WordPress?
WordPress надає досить зручні інструменти для заповнення атрибуту alt. Так, його можна вказати вже під час завантаження зображення. Для цього слід відкрити запис або сторінку, вставити курсор у місце вставки зображення та натиснути кнопку Додати медіафайл.
Після натискання кнопки відкриється вікно Медіабібліотеки WordPress, де потрібно буде вказати локальне розташування файлу-картинки. У результаті Ви побачите бічну панель із параметрами завантаженого файлу.
Як видно, на панелі є поле Атрибут alt. За замовчуванням воно є порожнім. Задавати текст в атрибуті необхідно довжиною з 2-3 слів, причому вони повинні точно описувати, що на фото. Щоб вставити зображення на сайт, натисніть кнопку Вставити в запис.
Навіщо потрібен атрибут title у картинках?
Title- Ще один атрибут HTML-тега вставки зображення
. Він використовується для заголовка картинки і зазвичай вказує на її назву. Зазначимо також, що текст усередині titleне буде показано користувачеві, якщо зображення не відображається на сторінці.
Як і де заповнювати title у WordPress?
Атрибут заповнюється після завантаження зображення на сайт. Для цього в Медіабібліотеці WordPress слід виділити зображення, після чого з'явиться знайома бічна панель.
Titleабо заголовок потрібно ставити осмислено залежно від інформації, поданої на зображенні. У той же час, текст повинен відрізнятися від атрибуту alt. Заголовок можна писати російською мовою або використовувати транслітерацію. Досить часто власники сайтів використовують його для SEO-Оптимізації, вказуючи там ключові слова. Також можна задати атрибут, перебуваючи на сторінці редагування запису або сторінки. Для цього необхідно клацнути по картинці, і на додатковій панелі інструментів, що з'явилася, натиснути кнопку редагування із зображенням олівця. Взагалі для оптимізації сайту рекомендується для зображень використовувати обидва атрибути. Атрибут altмає одну перевагу – він допомагає пошуковим системам знаходити зображення на Вашому сайті та відображати їх у результатах пошуку за картинками. При цьому сайт отримує додатковий трафік із пошукових систем. Ще одна перевага обох атрибутів – покращення доступності сайту для людей з особливими потребами.
