Атрибути title і alt для поліпшення доступності та SEO

Атрибут alt

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

Приклади:

Зображення продукту: <img src=«product.jpg» alt=«Класична шкіряна сумка чорного кольору»>

Іконка: <img src=«icon.png» alt=«Іконка налаштувань»>

Фотографія на блозі: <img src=«beach.jpg» alt=«Піщаний пляж із пальмами та океаном на заході сонця»>

Рекомендації:

Будь описовим і конкретним.

Використовуй ключові слова, якщо це доречно, але уникай переспаму.

Атрибут title

Призначення: Атрибут title надає додаткову інформацію про зображення при наведенні курсору на нього. Це не обов’язково, але може додати контексту або додаткову інформацію.

Приклади:

Зображення продукту: <img src=«product.jpg» alt=«Класична шкіряна сумка чорного кольору» title=«Ця сумка виготовлена з високоякісної шкіри та ідеально підходить для ділових зустрічей»>

Іконка: <img src=«icon.png» alt=«Іконка налаштувань» title=«Налаштування облікового запису»>

Фотографія на блозі: <img src=«beach.jpg» alt=«Піщаний пляж з пальмами та океаном на заході сонця» title=«Фотографія популярного туристичного місця»>

<img decoding="async" src="https://foxtype.eu/wp-content/uploads/2024/08/placeholder-2.png" alt="Захоплюючий вид на гірське озеро з льодовиковими вершинами" title="Цю фотографію було зроблено під час походу в гори в серпні 2024 року">

Технічний SEO-аудит сайту – чек-лист

Title і Alt атрибути

Атрибут alt

Атрибут `title`

Рекомендації: