Альтернативний текст для зображень: вказуємо правильно

Усі зображення на сайті потрібно оптимізувати для SEO. Це означає, що в тезі потрібно прописати атрибути title та атрибут alt. Вміст атрибута alt називається альтернативним текстом. Він призначається для пошукових роботів та користувачів.

Альтернативний текст для зображення у html коді виглядає так:

Альтернативний текст для пошукових систем

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

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

Розробка SEO-сайтів з довічною гарантією Створюємо неймовірні SEO-сайти, оптимізовані за 69 параметрами вже на етапі розробки

Альтернативний текст для користувачів

Користувачі побачать альтернативний текст на місці зображення в тому випадку, якщо картинка з якоїсь причини не завантажилася, або сам користувач відключив показ картинок. Також alt-текст використовують браузери для людей з вадами зору і незрячих і спеціальні програми-скринрідери, які інтерпретують інформацію на екрані браузера. Вони перетворюють альтернативний текст картинки на звук, тим самим незрячі і слабозорі користувачі отримують уявлення про вміст зображення.

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

Правила складання альтернативного тексту для зображення:
• Текст повинен бути коротким та змістовним, і максимально повно описувати вміст картинки.
• Довжина тексту не повинна перевищувати 250 символів. Оптимально: 3-10 слів та 60-80 символів.
• До альтернативного тексту обов'язково потрібно включати ключові слова. Вони вкажуть пошуковикам на релевантність зображення пошуковому запиту та забезпечать потрапляння у пошук за картинками.
• Кількість ключових слів має бути обмеженою, не потрібно перераховувати все що є — тільки найважливіші і безпосередньо стосунки до вмісту картинки. Переспамлений атрибут alt може призвести до санкцій на сайт.
• Якщо у товару кілька зображень, допускається прописати вони однакові alt. Або можна додати до тексту додатково опис на кшталт «вид збоку» чи «оборотна сторона» тощо.

Як прописати альтернативний текст для зображення

Alt текст можна прописати відразу в HTML коді, додавши в тег атрибут: alt = "альтернативний текст". Якщо ви користуєтеся візуальним редактором CMS, то у вікні редагування зображення є поле для вписування alt атрибута.

Потрібен справжній SEO-сайт та інтернет-реклама? Пишіть, дзвоніть:

Наша пошта:
Єдина довідкова: 8 (843) 2-588-132
WhatsApp: +7 (960) 048 81 32
Залишити заявку

Як правильно написати alt-текст

Alt – обов'язковий атрибут тега . Це альтернативний опис для зображень, які не бачать користувачі:

• через повільне з'єднання;
• через неправильний шлях або ім'я файлу в атрибуті src ;
• оскільки користуються скріндрідерами.

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

Коли alt-текст потрібен

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

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

• Коротко. Максимальна довжина, що рекомендується, — 125 символів. Один з найпопулярніших скринридерів JAWS не любить довгі рядки. Дуже довгі рядки він може зачитати як три картинки, хоча це був лише один довгий рядок.
• Чітко. Чи потрібно відповісти на запитання, що саме зображено на картинці? Яку функцію вона виконує?
• Унікально. Не повторюйте текст, який є на сторінці.
• Не починайте зі слів "картинка" або "зображення".
• Відштовхуйтеся від навколишнього контенту.
• Дотримуйтесь правил мови, якою складається опис: пунктуація, орфографія.

Приклади використання

Картинка

Так можна описати, якщо у статті є текст, який розповідає про фотографію.

Якщо тексту немає, наприклад, ми маємо галерею зображень, тоді потрібно описати картинку більш детально:

Посилання

Починати текст із «посилання» не потрібно, роль уточнення грає сам тег.

Діаграма

Якщо тексту зі статистикою немає, то доведеться всю статистику винести в alt:

Зображення з текстом

Просто переносимо текст в alt:

Figure та figcaption

Все одно пишемо нормальний alt , так як у figcaption зазвичай маленький опис:

Коли alt-текст не потрібен

Коли картинка декоративна і не має сенсу.

• Аватарка: ім'я користувача і так у нас вже є.
• попередній перегляд статті: у нас вже є заголовок, і цього буде достатньо.
• Значки в кнопці.

Як не варто писати

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

Якщо так робити, то скринрідери або почнуть говорити, що це «картинка» (безглуздя), або прочитають «пробіл» (ще безглуздо).

Що буде, якщо забути про alt-текст

Основних проблем дві: користувачі нічого не побачать, а скринрідери можуть прочитати неправильно чи не те. Наприклад, NVDA нічого не скаже, JAWS скаже "Графічне зображення без опису", а VoiceOver скаже назву файлу.

Але іноді бувають картинки, яким не додають. Наприклад, це пошук «рудий кіт», і в пошуковій видачі показуються тисячі рудих котів. Сенсу вказувати немає.

Найчастіше в такій ситуації взагалі видаляють:

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

Штучний інтелект та alt

ІІ у соціальних мережах непогано справляється з генерацією текстів для зображень. Наочні приклади - у соцмережах або гугл-картинках із відключеними зображеннями.

Якщо подивитися зараз на автоматичну генерацію текстів, то там завжди є частка припущення — «на зображенні може перебувати 1 людина».

З абстрактними картинками все ще гірше, тому що ІІ взагалі не розуміє, що відбувається.

Література

"Доктайп" - журнал про фронтенд. Читайте, слухайте та навчайтеся з нами.

Читати далі

HTML-коди популярних емодзи

Емодзі давно вийшли за межі месенджерів і соціальних мереж, ставши важливою частиною веб-дизайну та інтерфейсу користувача. Вони допомагають зробити ваш сайт живим, яскравим та емоційним. Але як додати емодзі до HTML-коду без втрати якості? У цій статті ми зібрали для вас список з 50 найпопулярніших емодзи з їхніми назвами, значеннями та HTML-кодами для вставки.

Ця таблиця стане справжнім помічником для початківців та досвідчених веб-розробників, які хочуть покращити користувальницький досвід та додати яскраві елементи на свої проекти. Дізнайтеся, як просто інтегрувати емоції у свій сайт за допомогою одного рядка HTML!

Що писати в атрибуті

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

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

Що таке Lazy Loading та як її включити на сайті

Лінива завантаження (буквально, lazy loading) - це можливість відкласти завантаження непотрібного прямо зараз медіаконтенту.

Лінива завантаження робить сайт швидше і заощаджує трафік, якщо у користувача мобільний інтернет з обмеженнями.

Знайомство з HTML

Привіт, майбутні фронтенд-розробники! Ласкаво просимо до захоплюючого світу веб-розробки. Перед тим, як рухатися далі, давайте розберемося з основами - мовою розмітки гіпертексту або просто HTML.

HTML (Hypertext Markup Language) – це стандартна мова, яка використовується для створення веб-сторінок. Уявіть, що ваша веб-сторінка – це книга. Тоді HTML - це скелет цієї книги, кістяк, який визначає структуру: де буде заголовок, абзаци, зображення тощо.

Спеціальні символи в HTML

HTML використовує спеціальні комбінації символів, щоб коректно відображати певні знаки на веб-сторінках. Наприклад, замість простого знака "менше" ми бачимо комбінацію <. У цій статті наведено список таких символів. Це невеликий довідник тих, хто хоче швидко знайти потрібний код.

Навіщо потрібний метатег viewport

Кожен із нас хоч раз у житті стикався з веб-сторінками, які здаються «зламаними» або дивно відображаються на мобільних пристроях. Однією з причин такої поведінки може бути відсутність маленького, але важливого елемента коду сторінки — метатега viewport .

Метатеги — це інструкції для браузера, як відображати вміст сторінки. Один з таких метатегів – viewport, який говорить браузеру, як масштабувати та відображати сторінку на різних пристроях, особливо на смартфонах та планшетах.

Важливо, щоб сайти чудово виглядали не тільки на комп'ютерах, але і на маленьких екранах смартфона. Якщо не використовувати viewport, то сайт може виглядати як зменшена версія десктопного сайту на мобільному екрані, що робить його важкочитаним та незручним для використання. Звичайно, потрібно ще багато чого зробити для адаптивності, але viewport теж потрібен.

Атрибут class у HTML на прикладах

Атрибут класу використовується для додавання CSS-класів елементам HTML.Класи дозволяють застосовувати ті самі стилі CSS або поведінку JavaScript до різних елементів на сторінці.

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

Чим відмінності цитат

У HTML є різні теги для цитування та вказівки джерел. Основні з них: і .

Растрова та векторна графіка

Спробуймо розібратися, в чому відмінність растрової графіки від векторної.

Як відрізнити h1, h2 та h3

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

Часто здається, що заголовок - це простий і зрозумілий тег.

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

У статті розберемося, як правильно визначати заголовки за макетом, які з них краще робити прихованими і чому.