Title и Alt атрибуты

Title и Alt атрибуты помогают как пользователям, так и поисковым системам лучше понять, что изображено на картинке.

Атрибут `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="Фотография популярного туристического места">

Рекомендации:

Используй атрибут title для добавления дополнительных деталей или контекста.
Не повторяй информацию из alt в title, если это не нужно.

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

Полезные статьи