Alt-текст изображений

Alt-текст изображений

Изображения на сайте используются по-разному – например, как кнопки навигации, позиции в маркированном списке, текстовая графика, иконки. Многие посетители смогут понимать изображения, просто на них посмотрев.

Но существует много случаев, когда пользователи не могут этого сделать:

  • Пользователи, использующие экранный диктор при просмотре страниц.
  • Пользователи, которые запретили отображение изображений в браузере
  • Пользователи, у которых только текстовый браузер
  • Сборщики поисковиков, которые не понимают изображения

Язык HTML позволяет добавлять текстовое описание изображений, так, чтобы их могли читать браузеры. Это можно сделать с помощью атрибута alt, например: img src="www.mywebsite/images/my-dog.jpg" alt="This is my dog"

Этот атрибут является важным фактором для юзабилити и SEO. Он предоставляет посетителям ограниченный доступ функциональности, которая повышает удобство использования сайта. Он так же помогает изображениям отображаться в результатах поиска.

Советы для изображений

При сохранении изображений в сети используйте следующие форматы - gif, jpeg, png, bmp, svg и webp. Когда вы сохраняете изображение, используйте имя файла, которое бы его описывало, а не стандартное, вроде DSC221069.jpg. Обычно сборщики индексируют изображения всех размеров, но если сделать размер изображения максимально маленьким, то это положительно скажется на времени загрузки страницы и улучшит опыт пользователя. Укажите ширину и высоту изображения. Это позволит браузеру узнать габариты изображения перед его загрузкой и для него будет сохранено место. Это позволит не пропускать элементы на странице во время загрузки.

Пример: img src="www.mywebsite/images/my-dog.jpg" alt="This is my dog" width="450" height="200"

Если у вас есть текст, важный в плане значимости для веб-сайта или SEO, не вставляйте его в изображение, убедитесь, что его можно прочесть, как текст, и что он часть обычного содержания страницы.

Советы по alt-тексту

Alt-текст изображений должен быть описательным и в идеале состоять из 10 слов или меньше. Правильное описание: Correct: img src="http://www.mywebsite/images/my-dog.jpg" alt="This is my dog he is called Ringo"

Следует постараться включить ключевые слова в атрибут alt, но не набивать ими текст.

Например, если веб-сайт содержит множество изображений мужских часов, убедитесь, что у каждого изображения свой alt-текст. Постарайтесь включить модель часов или цвет. Если изображение создано для навигационных целей, пусть это отразится в alt-тексте. Например, изображение для кнопки «Связаться с нами» должно содержать тот же атрибут - «Связаться с нами». Некоторые люди делают ошибку, печатая «Назад домой» в теге alt-текста для логотипа компании с ссылкой, которая ведёт на главную страницу. Всегда лучше иметь описательный alt-текст, нежели чем ссылку.

HTML теги изображений так же могут содержать атрибут заголовка и это часто путается с alt-текстом. Атрибут заголовка может прочитать только человек, в то время как alt-текст так же могут прочитать и сборщики.

Использование нулевого alt-текста

Используйте нулевой alt-текст только для изображений, выступающих в качестве разделителя. Обычно эти изображения невидимы и помогают структурировать разметку определённых элементов. Выглядит это так:
img src="www.mywebsite/images/transparent.gif" alt=""

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

Читайте также: 

Секреты SEO - пишем пресс-релиз

Продвижение сайта без контента

Топ 10 SEO экспериментовТоп 10 SEO экспериментов

 Продать блог или просто отключить его?

Современные инструменты копирайтера

6 мифов о контент-маркетинге

Геотаргетинг сайтов в Google

Наиболее часто используемые редиректы

Продвижение сайта без контента

Как правильно оформить главную страницу сайта

Органический трафик - ключевые показатели эффективности

Добавить комментарий


Защитный код
Обновить

Joomla SEF URLs by Artio

Cкачайте приложение на Андроид и будьте в курсе новостей
Интернет-маркетинга всегда!

Joomla Templates and Joomla Extensions by ZooTemplate.Com

WebSEOHelp

smp-forum.ru


.
Наверх
закрыть