Від автора: атрибут alt для зображень дозволяє задати текст, який з’явиться у користувача, якщо він відключений показ цих самих картинок. Але це далеко не все, що ви повинні знати про нього. Давайте докладніше розберемося, застосовувати цей атрибут.
Взагалі щоб розуміти, як він прописується, потрібно знати основи html, мати хоча б якесь уявлення про те, як текст і зображення додаються на веб-сторінки. Зокрема, фото– це одинарний тег img, у якого є лише один обов’язковий атрибут – src. Це шлях до файлу.
Очевидно, що якщо ввести його некоректно, ви нічого не побачите. Коротше, для виведення картинки вам лише потрібно в потрібному місці html-коду писати це:
З цим все повинно бути зрозуміло, але крім src є і інші атрибути, які можна прописати у img. Ось вони вже необов’язкові, тобто без них можна обійтися. Зокрема, alt. Атрибут, який виводить так званий альтернативний текст.
Чому альтернативний? Тому що він буде виведений на екран тільки у випадку відключення графіки в браузері користувача. У такому випадку повинна ж бути якась альтернатива? У всякому разі, якщо ви вставите фотографію Ейфелевої вежі в статтю, то це здорово, але якщо раптом знайдеться людина, який вимкнув показ картинок в своєму браузері, він просто нічого не побачить у цьому місці. Там буде просто хрестик (або іконка), який вказує на те, що в цьому місці має бути зображення. Наприклад, на цьому зображенні можна побачити карту світу:
Але якщо у людини виключений показ графіки, він цього не побачить. Якщо ж прописати alt, то поруч з хрестиком буде пояснювальний текст. У такому випадку людина буде хоча б приблизно уявляти, що на ній знаходиться. Також я підозрюю, що мовні браузери якимось чином можуть читати вміст цього атрибута.
Вплив alt в SEO
Ох, скільки суперечок на SEO-форумах я бачив про те, чи впливає заповнення атрибута на поліпшення ранжирування сайту та його окремих статей в пошуку. Можна з упевненістю сказати, що сьогодні все залишилося як і раніше. Хтось вважає, що заповнення alt допомагає в пошуковій оптмизации, хтось- що це абсолютно ніяк не впливає.
Я б сказав, що обидві думки можна оскаржити, а краще обрати щось середнє. Тобто не стверджувати, що це дає прям істотний результат, але в той же час не думати, що абсолютно ніякого толку від цього немає.
Знаєте, заповнення alt я б порівняв з кросбраузерною версткою (якщо хто розуміє, про що йдеться). Це коли сайт адаптується під всі популярні браузери. Якщо у найважливіших картинок на вашому сайті ви будете заповнювати цей атрибут, ви зробите свій проект хоча б на трохи, але краще. Також ви зробите свій проект трохи доступніше для людей.
Звичайно, сьогодні людей, які сидять в браузерах з відключеними картинками, все менше і менше. Я б сказав, що їх зовсім мізер. Але якщо ви перфекціоніст і хочете ідеалізувати свій проект – ласка, заповнюйте цей атрибут, хто вам заважає?
Як заповнювати alt?
А ось це найважливіше, на мій погляд. Якщо ви читали мої минулі статті по СЕО, то напевно вже не раз чули, що пошуковики люблять природність. Відповідно, ідеальним заповненням атрибута буде максимально точний і короткий опис картинки. Як правило, 30-100 символів достатньо. При цьому максимальна довжина повинна бути приблизно 250 символів. Але навіщо вам так докладно описувати зображення?
При цьому ви повинні постаратися написати в атрибуті такий текст, щоб при його читанні можна було подумки уявити собі картинку, навіть якщо ви її не бачите. Багато оптимізаторів радять в першу картинку в публікації прописати alt, в якому буде ключова фраза.
Тут потрібно розуміти, що пошукачі стали розумнішими. Якщо ви вставили якусь ліву картинку і в нахабну прописали туди ключ, позитивного результату чекати не варто. Я не кажу, що пошуковик вас покарає, але ефекту як такого не буде.
Мало того, якщо у всі картинки напхати побільше ключів і робити так з кожною сторінкою вашого сайту, тоді покарання відхопить якраз дуже навіть реально. В такому випадку це справа часу.
Як же бути? Якщо ви вставляєте якусь ключову фразу в alt, додавайте її тільки в опис однієї картинки на статтю. Також не варто будь-що намагатися додати фразу в її точне входження. Запит може бути вставлений з розбавленням.
Ну а найголовніше, це постаратися писати alt так, щоб було максимально природно, як ніби ви випадково вжили там ключ. Для цього опис, можливо, доведеться зробити трохи більше, але це тільки для однієї картинки, куди ви будете вставляти ключ.
Власне, для інших зображень, якщо їх декілька у статті, можна заповнювати alt, а можна і ні. Це ваше особисте рішення. Взагалі важливо відноситься до заповнення цього атрибуту без всяких зайвий очікувань, ніби ви грамотно заповніть і завтра опинитеся в топі. Ефекту може і не бути, або він буде мінімальним, але головне тут, що ви все зробили якісно.
Отже, давайте підсумуємо основна щодо заповнення alt:
Потрібно максимально просто і коротко описати картинку
Якщо ви вставляєте ключову фразу, робіть це всього 1 разів і так, щоб виглядало природно
Для інших картинок заповнення alt за вашим особистим бажанням
Знову ж таки, не варто думати, що це якесь керівництво до дії. Це всього лише рекомендації. Кожен веб-майстер робить по-своєму. Хтось взагалі ніколи не заповнює alt ні в однієї картинки, хтось робить як тут рекомендовано, а хтось спам ключами.
З цих трьох варіантів оптимальними є перший і другий. Тобто тут є 2 рішення: або взагалі ніколи не чіпати alt, або заповнювати його максимально природно.
Заповнювати alt чи ні? Залежить від сайту
Наприклад, ви ведете особистий блог. Ну і навіщо вам здався цей alt? Швидше за все, вам потрібні будуть картинки чисто для розведення тексту, але ніяк не для залучення клієнтів. Інша справа – комерційний сайт. Наприклад, інтернет-магазин. Тут картинки відіграють величезну роль, тому що люди найчастіше купують те, що найбільше подобається їх оці.
Відповідно, для кожного товару в інтернет-магазині розумно прописати alt. Давайте якраз розглянемо на прикладі, як зробити це грамотно. Припустимо, у нас є товар – ноутбук ASUS G560 (не шукайте в пошуку, назву я вигадав). Природно, є фото цього ноутбука. Як прописати для неї альтернативний текст? Ось варіанти:
“Фотографія”, 1, “ыыавпв” та інше – це все варіанти, які ніяк не годяться. За такого опису абсолютно незрозуміло, про який товар йде мова. Текст “фотографія” або “картинка” (так часто підписують фото) взагалі самий забавний, адже люди і так розуміють, що це не відео. Це все одно що на слона повісити табличку, де написати, що він слон.
“Крутий червоний ноутбук для ігор” – це непоганий опис, якщо ноутбук дійсно є ігровим. Але якщо ви цілитеся на трафік з картинок, то такий опис не є найоптимальнішим, оскільки подібну фразу я в пошуку набирає 0 осіб. Люди частіше набирають назви конкретних моделей або хоча б виробника.
“Ноутбук” – опис, який можна охарактеризувати так: краще, ніж нічого. Але теж не оптимально, так як немає конкретики. Не будете ж ви кожен товар підписувати так? Опис має бути унікальним для кожного окремого ноутбука.
“Ноутбук ASUS G560” – оптимальний варіант, є конкретний опис. Можливо, якщо товар присутній в різних кольорах, можна дописати і колір, а також слова, які часто використовують при описі ноутбуків: для офісу, потужний, ігровий і т. д.
“Ноутбук ASUS G560, купити у Москві з доставкою, відгуки” – схоже на спам, правда? Це найгірший варіант з усіх.
Підсумок
Особливо тут більше говорити не про що. Оптимізація картинок alt атрибутом, це те, що може допомогти вам покращити свій сайт і отримати невеликий трафік з пошуку по зображеннях. Це справа для перфекціоністів, тому що цілком можна обійтися і без цього. І звичайно, варто враховувати, який у вас сайт. Якщо комерційний, то підписувати зображення бажано, а якщо ви ведете яке-небудь блозі або інформаційний сайт, то можна на це взагалі забити.
