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

Проте візуал, це не єдина важлива роль яку відіграють зображення. Вони є важливою частиною пошукової оптимізації (SEO), оскільки правильно оптимізовані зображення з відповідними alt текстами допомагають пошуковим системам краще індексувати сайт. Це підвищує його видимість у пошукових результатах і сприяє залученню більшої кількості відвідувачів. Таким чином, використання якісних зображень на сайті сприяє його успішності та досягненню цілей. Варто ж розібрати, що таке alt text та як його інтегрувати до вашого вебсайту.

Що таке alt text та для чого він потрібний

Alt text (альтернативний текст) — це текстовий опис зображення, що додається в атрибут alt HTML-тегу img. Його основна функція полягає у забезпеченні доступності веб-контенту для користувачів з обмеженими можливостями, зокрема для тих, хто використовує екранні читачі. Також він служить як резерв, коли зображення не можуть бути завантажені, надаючи контекстну інформацію.

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

До прикладу, ось повне завантажене фото в порівнянні з альт текстом який з’явився через перебій в системі.

Вигляд коду для альт тексту. 

<img src=“image-file-example.jpg” alt=“Figma prototype development for an iphone”>

Які плюси використання alt text

Доступність

Взявши до уваги глобальні дослідження, близько 200 мільйонів користувачів Інтернету мають порушення зору або слабкий зір. Саме альт текст забезпечує доступність вебконтенту для людей з обмеженими можливостями, особливо для тих, хто використовує екранні читачі. Коли екранний читач натрапляє на зображення, він озвучує альт текст, дозволяючи людям із вадами зору отримати уявлення про вміст зображення. Це робить вебсайт інклюзивнішими та доступнішими для ширшої аудиторії. 

Відображення у разі помилок

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

SEO (пошукова оптимізація)

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

Поліпшення користувацького досвіду

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

Як інтегрувати альт теги у ваш сайт

Інтеграція через код:

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

Наступним кроком буде написання ефективного тексту, враховуючи такі деталі: 

  • Опис зображення повинен бути точним та лаконічним.
  • Не потрібно використовувати такі слова як ‘зображення, картинка, фото’.
  • Опишіть конкретно те що бачите на зображенні, без зайвих деталей.
  • Є загальна рекомендація не використовувати понад 125 символів.
  • Використовуйте ключові слова до фото. Для цього можна скористатись системою Google Keyword Planner, яка є безоплатною.

Розберемо декілька прикладів хорошого альт тексту.

Okay alt text: <img src=”bird.png” alt=”Woman at work“>

Better alt text: <img src=”bird.png” alt=”Woman working on a computer“>

Best alt text: <img src=”bird.png” alt=”A woman working on a computer in an office.”>

Okay alt text: <img src=”bird.png” alt=”Portrait drawing.“>

Better alt text: <img src=”bird.png” alt=”Portrait drawing of a woman“>

Best alt text: <img src=”bird.png” alt=”An artist making a portrait of a woman.”>

Досить цікавим, наступним кроком буде додавання альт тексту до HTML коду. Для цього ми повинні використати атрибут alt у тегу img. 

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

Інтеграція за допомогою CMS системи:

Якщо ви використовуєте систему управління контентом (CMS), таку як WordPress, Drupal або Joomla, процес додавання альт тексту може бути ще простішим. У багатьох CMS є вбудовані інструменти для додавання альт тексту під час завантаження зображень.

Приклад для WordPress:

  1. Увійдіть в адміністративну панель.
  2. Перейдіть до “Медіа” та виберіть “Додати нове”.
  3. Завантажте зображення.
  4. Додайте альт текст у поле “Альтернативний текст” в медіабібліотеці.

Висновок

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