Зараз важко уявити сайти без зображень, тим більше інтернет-магазини та каталоги товарів. Адже це чудовий спосіб привернути увагу відвідувачів, показати товар «обличчям» та спонукати потенційних клієнтів до здійснення цільових дій: купівлі товару чи замовлення послуги. Докладніше про те, для чого ще потрібні картинки і на яких сторінках вони повинні бути, можете прочитати в нашій статті «Підбір та оптимізація зображень для сайту».

Використання картинок зробить сайт привабливішим і допоможе утримати відвідувачів на ньому, але що важливіше, з пошуку по картинках в Яндексі або Google до вас на сайт може прийти додатковий трафік (при коректному використанні атрибутів Alt та Title тега ).

Що таке атрибут Alt для картинок

Атрибут Alt для картинок- це текст, що описує зображення у html-тезі . Він стає видимим у разі неможливості завантаження зображення. На місці незавантаженого зображення буде показаний текст (при заповненому атрибуті Alt).

Давайте порівняємо. Так буде виглядати незавантажене зображення без заповненого атрибута Alt:

А ось так виглядатиме картинка з текстом «Пральна машина Славда WS30T/ET» в атрибуті Alt тега :

Атрибут Alt дає можливість дізнатися, що зображено на зображенні, коли користувач не може її побачити. Крім того, прописаний текст в атрибуті Alt враховується пошуковими роботами під час індексації сайту. Нарешті, оптимізація назв картинок та атрибутів Alt у тезі полегшує пошук зображень, наприклад, в Яндекс або Google Картинках.

Як правильно скласти атрибут Alt для картинок

1. Оптимальна кількість слів – 3-5, але довжина тексту тега не більше 75-80 символів. Ми рекомендуємо використовувати коротку та стислу, але змістовну інформацію.
2. Обов'язкова умова – використання ключових запитів.
3. Ключові слова краще вживати в називному відмінку, щоб полегшити пошук.
4. Уникайте спаму: ми не рекомендуємо перераховувати велику кількість ключів через кому, як і в інших тегах.
5. Необхідно, щоб Alt ставився до тексту сторінки та описував те, що зображено на зображенні.

Атрибут Title для зображень

Крім атрибута Alt, слід також прописувати текст в атрибуті Title. Даний параметр задає допоміжну інформацію про зображення, коли користувач наводить курсор на зображення:

У html-коді заповнений атрибут Title для картинок виглядає так:

Правильно складений атрибут Title навіть допомагає покращити поведінкові фактори.

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

1. Атрибут Title повинен відповідати зображенню. Не слід писати в ньому те, що не має до картинки жодного відношення.
2. Краще використовувати невеликий по довжині Title для зручності користувачів - ніхто не захоче читати кілометрову підказку до картинки.
3. Бажана наявність ключових слів. Не варто вживати таких слів, як «фото», «картинка» тощо, адже й так зрозуміло, що це таке.

Приклад правильного заповнення атрибутів Alt та Title для тега

Розглянемо з прикладу, як можна прописати текст в атрибутах Alt і Title для картинки. Для цього візьмемо зображення із сайту будівельної компанії.

При складанні Alt необхідно наголосити на тому, що ви продаєте/пропонуєте. Для картинки з нашого прикладу краще скласти альт «Будівництво будинку з колоди», а не просто «будинок» або «будівництво».

Атрибут Title для цього зображення можна трохи видозмінити і скласти так: «Будівництво зробленого з колод будинку».

Труднощі при заповненні Alt та Title

Правильно заповнені атрибути Alt та Title до картинок допоможуть у пошуковій оптимізації сайту. Але не варто забувати і про інші аспекти оптимізації картинок, такі як «вага», якість та назва зображень. Якщо у вас немає часу на складання атрибутів Alt та Title, ми можемо допомогти вам та виконати цю роботу за вас.

Тема сьогоднішньої статті – SEO – оптимізація зображення за допомогою атрибуту ALT. Багато хто не знає, що при оптимізації даного атрибуту ви підвищуєте можливість відвідування вашого сайту. Отже, докладніше розповім далі у статті:

Що таке атрибут ALT?

ALT– це атрибут, який містить альтернативний текст зображення. Атрибут відображається, коли в браузері вимкнено показ зображення, але у стандартних налаштуваннях ви його не побачите.

Як правильно прописувати опис картинки

Перш ніж прописувати Title, я розповім вам часті помилки, які помічаю на сайтах.

Порожні атрибутиALTіTITLE. Як правило, багато SEO оптимізатори не морочаться з приводу цього тегу. Так, можливо, якщо ваш сайт дуже великий має відвідуваність 100000 на добу морочитися не варто, але якщо ви тільки розкручуєтесь і вам потрібен перший трафік, то вказати атрибути все ж таки варто.

Не відповідність зображення та атрибутів.Допустимо якщо на вашій картинці відображена BMW X5, а в атрибуті прописуєте Audi A3, то не чекайте, що людина перейде по вашій картинці на сайт.

Переоптимізація. Найпоширеніша проблема, можна ставити прямий приклад як не потрібно робити. Оптимізатори сподіваючись отримати заповітний трафік прописують кілька ключових слів в атрибут “alt” і чекають, коли позиції у видачі серед картинок почнуть зростати. Ви повинні розуміти, що цей текст читатимуть люди, які оцінюють кілька картинок і якщо там суцільно спам ніхто не перейде за посиланням. Додавати комерційні слова "купити, замовити, ціна, вартість, найменування міста" не рекомендується.

Також пошукові системи можуть накласти на вас санкції, тому не захоплюйтеся.

А як потрібно прописувати теги для картинок?

Короткий та зрозумілий опис картинки. Як можна точніше опишіть зображення і якщо ALT був створений автоматично перевірте всі сторінки.

Довжина атрибуту обмежена.Пошукові системи враховують 3-4 слова (близько 250 символів), що ускладнює опис картинки.

Входження ключових слів.Власне, через що атрибут ALT і варто вказувати. Напишіть ключове слово зрозумілим для користувача текстом.

Наприклад:

alt=”Ремонт комп'ютерів у Чебоксарах”

Унікальні атрибути для кожної картинки. Так само важлива складова проблема, що найбільше зустрічається у SEO-оптимізаторів. На прикладі я вам покажу, як її вирішити.

Картка товару містить багато картинок

Як же розділяти картинки одного й того самого товару, якщо спамити не можна і потрібно прописувати все унікальне? Допустимо "Спліт-система HYUNDAI H-AR6-07H" можна розписати так:

"Спліт-система HYUNDAI H-AR6-07H Вид 1"

"Спліт-система HYUNDAI H-AR6-07H Вид 2"

Крім картинок товару, є на сайті є елементи: схожі товари, з цим товаром частіше дивляться і так далі. Даний вид картинок не варто скидати з рахунків і SEO оптимізувати їх, прописавши ALT і Title. Причому варто приділити час прописати конкретно: бренд, модель, номер товару, всі важливі параметри, які можуть вбивати в пошук.

Розмір зображення- Чим більша роздільна здатність картинки, тим краще. У будь-якому випадку її відображення можна підкоригувати завдяки атрибутам "width" та "height". Але не варто робити картинку занадто маленькою, інакше пошукові системи не враховуватимуть зображення менше 150 пікселів і рахуватимуть її за іконку.

Розташування зображення– якомога ближче до тексту, який містить ключові слова. Ось чому багато оптимізаторів враховують цей фактор і стандартна схема розташування картинок виглядає так:

Текст заголовка із ключовим словом

Подальший опис

Зменшення ваги зображення.Розмір картинки грає ключову роль, адже якщо вона важитиме дуже багато, що навіть гальмуватиме швидкість завантаження сайту це позначиться на ранжируванні всього сайту. Так-так бувало і таке!

Підпис під картинкою

Якщо на вашому сайті дуже багато картинок і майже немає тексту, підпис картинкою буде корисним, тому саме з точки зору SEO необхідно її оптимізувати:

• Вказати ключові слова. Входження ключових слів у підпис обов'язкове, оскільки цей текст зіграє роль ранжуванні всієї сторінки;
• Вказати будь-який факт/перевага про картинку.

Наприклад, у вас є картинка динаміків Iphone 7.

У підписі вкажіть цей факт: "Звучання звуку в Iphone 7 стало помітно краще завдяки Lighting" Відношення Яндекса до атрибуту ALT

"Як помістити мою картинку на перше місце?"

При ранжируванні картинок враховується текст, що прилягає до картинки. Чим точніше опис зображення відповідає запиту користувача, тим вище ймовірність того, що зображення буде показано на першій сторінці результатів пошуку.”

Текст під картинкою несе набагато більшу користь для пошукача, ніж сам ALT.

Ранжування картинок у Google

Крім вищезгаданого ALT, ось що враховує Google у ранжируванні зображень.

Давайте пробіжимося по основним факторам для Google.

Фотографії гарної якості- Це має бути зрозуміло, отже. Нікому не будуть цікаві розмиті фотографії чи просто погана якість. Тут швидше якість картинки грає на її клікабельність, якийсь CTR.

Окремі сторінки для кожної картинки- Цікава думка, але чесно рідко зустрічаю такі сайти. Проблематичним стає оптимізувати: інтернет-магазини, односторінкові сайти, сайти каталоги, де зберігається велика кількість зображень.

А що щодо атрибуту Title

Google не згадав, а Яндекс щонайменше атрибут Title. (Не плутати з тегом). Вказати зайвим точно не буде, тільки можна тому, що Title при наведенні на картинку відображається і несе в собі сенс. У цьому плані, як і з текстом під картинкою, можна експериментувати, вказувати корисну інформацію: різні факти, переваги і так далі.

Принаймні він несе набагато більше користі, ніж я писав зовсім недавно.

От і все. Задавайте питання у коментарях, хто що думає щодо атрибутів ALT, TITLE. Як ви оформляєте зображення?

Привіт народ. Щоб не витрачати ваш час, давайте коротко і по ділу.

Title зображення – це напис, який спливає при наведенні курсору на зображення. Це потрібно, щоб підказати відвідувачу. Розповісти, що зображено на зображенні або куди звернути увагу.

Alt малюнки – від англійського слова alternative. Це така корисна річ, яку дуже люблять індексувати пошукові системи, щоб визначити, що зображено. Також він буде видно, якщо користувач відключить у браузері відображення картинок. Що немає сенсу і відбувається у поодиноких випадках.

Якщо все ж таки користувач вимкне відображення графічного контенту або станеться якийсь збій на чиєму боці, то замість картинки буде видно маленьку іконку з текстом. Цей текст і є alt зображення.

Alt та title картинки для SEO

Для тайтл картинки має мінімальне значення. Він індексується не охоче, але може зіграти вам на руку в поведінкових факторах. На дворі 2018, seo зараз - це юзабіліті та якісний контент. Тому привертайте увагу користувача будь-яким способом.

Навіть самі подумайте, приємніше ж коли з'являється підказка у зображення.

А ось картинки - це скарб. По-перше, його відсутність GoogleBot вважає помилкою, Яндекс ставиться лояльнішою. По-друге, він охоче індексується, а таке зображення потрапляє до розділу «Картинки» у пошуку. Це означає, що у такий спосіб ви зможете залучати додатковий трафік на свій сайт.

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

Як правильно заповнювати alt та title для картинок

C title все набагато простіше. Для пошуковика правил немає, але це не означає, що ви пишите тут будь-яку брехню. Вище ми робили підведення до поведінкових чинників. Бажано вам не набридати користувачеві, бути йому корисним.

1) Він не повинен бути довгим. Погодьтеся, підказка у 4 рядки викликатиме відторгнення.

2) Повинен якось ставитись до зображення.

3) Не повинен дублюватися з основним title, заголовками h1-h5, з атрибутами alt.

Alt картинки має вагу у пошукової системи, тому тут є обмеження з правилами, але так і можливості.

1) Одного слова мало, бажано триматися у межах від 3 слів. Максимальна кількість символів 250.

2) Він повинен відповідати вмісту зображення.

4) Бажано, не повинен повторюватися з іншими на сторінці.

Тож, додаючи чергову картинку до блогу, подумайте. Може, якась людина захоче її знайти? Спробуйте перетворити його на зайвий трафік.

Де заповнювати alt та title картинок на прикладі wordpress

Наприклад, у вордпресі вам достатньо зайти з панелі керування (консоль) у розділ «Медіафайли» — «Бібліотека». Далі вибираєте будь-яке зображення.

Або, редагуючи статтю, просто тиснете на будь-яку вставлену картинку, потім на олівець.

Звичайно, на прикладі Wordpress показати найлегше, але багато популярних CMS дають таку можливість. Ось, наприклад – Joomla. Там є свої підводні камені, але більшість графічного контенту можна прописати alt якщо натиснути «Редагувати зображення»

На цьому все. Дуже сподіваємося, що ми були вам корисні. Якщо так, поставте лайк. Це нас мотивує робити більше якісного та цікавого контенту!

З повагою, Ваша сутність.

Вітаю вас, дорогі користувачі сайт. Оптимізація свого блогу - це складний процес, що вимагає певних навичок, досвіду, а якщо його немає, тоді треба володіти великою базою знань, яку ми беремо зі статей на блогах популярних вебмайстрів.

Багато хто говорить про те, що SEO вмирає, але все ж таки чимало таких, хто продовжує дотримуватися правил трьох цих букв. Той, хто зовсім не розповідає про те, що собою являє SEO, він може опинитися в безвиході. Однак, ця проблема легко вирішувана, абсолютно для кожного. Навчившись у цій сфері головним аспектам, ви зможете опанувати правила просування свого блогу в пошукових системах, а як ми знаємо- це найважливіше.

Отже, про що буде сьогоднішня стаття. Зараз йтиметься про помилку багатьох дизайнерів, блогерів тощо. Загалом, не уважність до оптимізації зображень на сайті, що позначається на просуванні вашого ресурсу в мережі.

Яка не уважність? Наприклад, назва картинки має складатися із ключового запиту, під який заточено статтю. Яндекс, Google звертають на це свою увагу, а люди в блогосфері навіть не замислюються.

Почнемо!

Що таке alt та title для зображень?

Атрибут "alt"!

Його призначення відображає фрагмент тексту картинки. Найчастіше, це опис зображення. Вашим користувачам він не помітний. Подібні теги дуже важливі для пошуку. Для людей вони майже нічого не означають.

Давайте на пальцях поясню. Пошуковий робот гуляє сайтами, прийшов до вас і якщо ви пам'ятаєте, у статті про унікальні картинки я писав, що він звертає увагу на тематичні зображення до посту, але мало того, що картинка повинна бути, вона в свою чергу повинна бути оптимізована, вам потрібно прописати назву.

Таким чином, пошукова перевірка буде захоплювати всю вашу статтю і там не буде якихось недоліків і дрібних похибок. Тому мандрівка перебуватиме поблизу ТОПА-10 або взагалі туди вилітатиме.

ТОП – це висока відвідуваність. А як її наростити я писав у статті про

Атрибут title!

"title" - це заголовок. Мабуть, кожен про це знає. У картинці - це назва, яка доступна кожному, припустимо, коли ми наводимо курсор миші на зображення, з'являється короткий текст, який і є title. Із цим все ясно. Вказати назву можна у себе на ПК або ноутбуці, а потім ви закидаєте картинку в сам пост і знову ж таки прописуєте заголовок і опис (alt).

Що стосується того, що куди писати, то з цим не хвилюйтеся.

У Тітлі вкажіть якийсь ключовий запит. Написали пост про карту сайту для людей, тоді в титлі та заповнюєте поле, тим самим словосполученням, карта сайту для людей. Опис або alt нікому не видно, крім робота, отже, можна щось на зразок цього:

Карта сайту для людей, плагін такий, рядок треба прописати тут ту і т.д. Намагайтеся компактно викласти статтю. Відзначимо лише головні аспекти, буквально кілька рядків.

Ось ще щодо «title». Вони не повинні бути довшими за 5 слів. А також бажано, щоб ви їх прописували латинською мовою, тобто англійською. І найважливіше формат зображення має бути jpg. Це знижує вагу, а значить і завантаження буде швидше, що впливає на трафік сайту.

Знизити масу картинки можна у фотошопі. Відчиняємо його. Клацаємо файл і далі Зберегти для WEB. Там, де написана цифра 50, 60 або якась інша ви її можете регулювати, що менше, то вага нижче. Якщо у вас ще немає фотошопу, тоді вперед опановуйте його. Адже це невід'ємний елемент будь-якого вебмайстра.

Якщо хтось сумнівається в тому, що оптимізація картинок дуже впливає на просування блогу, то можу сказати одне — не сумнівайтеся. Спробуйте перевірити, чи проведіть експеримент. Головне не заплющувати на це очі, адже зайві 5 хвилин витратити не шкода. Тим більше, якщо ви перед цим написали статтю і вклали туди частинку себе. Думаю, не буде зайвим, як краще оформити її, а ви як думаєте?

Чому важливо прописувати теги title та alt? Як вони додаються до зображень?

Небагато про це я вам розповів. Але зараз ми докладніше розберемося. Дивіться трохи нижче наведений список дій, які необхідно виконувати при публікації нової статті в блог.

Ось і вони:

• Насамперед, звичайно, треба написати статтю і знайти унікальну картинку. Як правило, все роблять стандартний шаблон, свій, і туди вже вставляють зображення, скрини, наприклад, або малюють щось, або замовляють у художника.
• Подивилися на ключові фрази, які ви використовували для посту та один прописали в title;
• Другий ключ прописали в alt, в опис і додали ще кілька слів, одним словом розбавили запит.
• Тепер зберігаємо зміни та додаємо картинку до тексту, потім переглядаємо статтю та наводимо курсор на зображення, дивимося: який title відображається. Все готово.

Коротше переваги в наступному це для тих, хто ще не переконався до кінця.

1. Трафік більше;
2. Якість його вища, тому що ви вказали точні ключі, яким і присвячена стаття, відвідувач забиватиме їх у пошук і знайде у вас потрібну інфу, значить пробуде на вашому блозі довше і кількість відмов буде меншою;

Ця інформація для тих, хто працює над своїм сайтом не перший рік, а результату немає. Можливо, проблема саме у цьому!

На цьому я закінчуватиму написання статті. Бажаю вам удачі у просуванні. ВАЖЛИВО! Не уникайте таких, здавалося б, дрібниць. Прислухайтеся до рекомендацій, які обов'язково допоможуть. Бувайте усі!

З повагою,Юрій Жук.

Прописуємо alt та title

При SEO просуванні статті у блозі, або товару в інтернет-магазині, значну роль відіграють зображення. Існують користувачі, які шукають товар на картинці. І щоб ваша продукція або блог були вищими у пошуковій видачі, варто приділити увагу тегам зображень. Йдеться про alt та title. Від того, як ми прописуємо alt і title залежить успіх у пошуковій видачі.

Що являють собою теги? Говорячи узагальнено, коли ми , пошуковик бачить, що картинка у статті відображає її заголовок, тему. Атрибут спрямований на роботів та прямо впливає на ранжування сайту. А коли ми прописуємо title, при наведенні курсору на фотографію з'являється підказка з текстом. Якщо alt спрямований на роботів систем, то title покращує юзабіліті (зручність використання сайту). Якщо ми продумано прописуємо title, ми краще розкриваємо тему, про яку йдеться у статті.

Прописуємо alt тег

Головна особливість даного атрибуту – значний вплив на пошукові системи та допомогу у виведенні статті у топ Яндекса чи Google. Зчитуючи тег, пошукова машина розуміє, що зображено на зображенні. Якщо прописати altграмотно, відповідно до тематики статті, її релевантність значно зросте. Приємний бонус – на сайт прийдуть користувачі з розділу Пошук на картинках. Тому застосування тега alt особливо вигідне інтернет-магазинам.

Чим корисний тег? Справа в тому, що не у всіх користувачів браузер завантажує зображення. З різних причин: через економію трафіку, через низьку швидкість з'єднання, або якщо сам користувач відключив відображення картинок. У такому випадку замість фотографії відображається текстовий опис, заданий тегом. Прописувати корисно для відвідувачів, що сидять з мобільних пристроїв, намагаються заощаджувати трафік. Ваш сайт завантажуватиметься в рази швидше. Адже саме швидкість завантаження ресурсу вагомо впливає на поведінкові фактори та кількість постійних відвідувачів.

Розглянемо приклад продуманої SEO оптимізації. Ми вибрали сайт про квіти. На скріншоті нижче видно добре заповнений атрибут title, про який піде в окремому абзаці.

При наведенні курсору на зображення, з'являється текст: які квіти дарувати. Перевіримо, як прописано alt. Натискаємо клавіші Ctrl+U. Відкривається код веб-сайту. Тепер тиснемо Ctrl+F для пошуку сторінкою. При наборі фрази якісь квіти купити, бачимо правильно заповнений тег alt.

Тобто. адміністратор сайту подбав про заповнення обох тегів, покращивши як позицію в пошуковій видачі, так і поведінкові фактори. А як справи з ранжуванням? Заходимо в пошук за картинками у Google. Вводимо запит які квіти дарувати, і перше ж зображення - з сайту, який ми оглядаємо.

Як бачите, оптимізація за тегами чудово працює. Достатньо зі знанням справи прописати alt. Як це зробити?

• Стислість сестра таланту. І хороший SEO просування. Прийнятна кількість слів – 3-5. Ліміт тега складає 250 символів.
• Наявність пошукової фрази чи слова. Якщо у title фраза у спливаючому тексті більше впливає користувача, то alt – безпосередньо на пошуковик. Але не варто переборщувати із ключовими словами, інакше робот визначить це як спам.
• Як і у випадку з title, прописувати alt потрібно відповідно до зображення на сторінці.

Як прописати title тег

Атрибут title не впливає просування безпосередньо. Пошукові боти не враховують його під час ранжирування статті чи товару у пошуковій видачі. По суті, ми прописуємо titleза бажанням. Але його роль відвідувачів сайту висока, бо покращує зручність використання сайту. Коли ви наводите курсор на зображення у статті, з'являється підказка, що розкриває суть зображення – так і працює тег title.

Як правильно прописати title?

Це приклад хорошої оптимізації, оскільки на сайті добре розставлений і alt тег, про який ми розповідали вище. Якщо ви грамотно пропишіть title, це покращить статтю щодо поведінкових факторів і стане приємним доповненням до корисності статті.

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

Щоб досягти максимального ефекту оптимізації статті, рекомендуємо звертатися до професіоналів. Фахівці з просування відмінно підковані у темі, вміло працюють із програмами пошуку ключових слів. Значну роль відіграє великий досвід розв'язання задач. На виході ви отримаєте працюючий результат і ваш сайт зможе досягти топу в пошукових системах.