Атрибут alt важен для SEO и доступности

1. Что такое атрибут alt?
2. Alt атрибуты делают изображения доступными
3. Практическая значимость атрибута alt
4. Оптимизация атрибутов alt
5. Резюме: маленький, но эффективный

Атрибут alt используется для более точного описания содержимого графического изображения на веб-сайте. Он состоит всего из нескольких текстовых символов, но их значение часто недооценивается. Назначение атрибута alt не только для обеспечения доступности; это также важно SEO фактор.

Что такое атрибут alt?

Исходный текст сайта состоит из HTML (язык разметки гипертекста). Этот язык разметки инструктирует браузер отображать текстовые отрывки, изображения, видео и другие элементы. Каждый элемент, включая графику, может быть снабжен дополнительной информацией, как в следующем примере:

<img src = ”flower.jpg” alt = ”Цветок в саду”>

Замечания:

• Угловые скобки описывают начало и конец элемента HTML.
• Соответствующим элементом в этом случае является изображение (img) .
• Цветок.jpg , файл обозначен атрибутом src (для источника ).
• Атрибут alt относится к содержанию текста («Цветок в саду») .

Короткое слово alt означает «альтернатива». Например, атрибут alt гарантирует, что в случае ошибки загрузки появится альтернативный текст вместо отсутствующего изображения. Но почему не отображаются изображения? Существуют различные объяснения:

• Изображение не на сервере.
• Устаревшие браузеры не могут отображать некоторые типы изображений.
• Пользователь настроил браузер таким образом, чтобы изображения не отображались.
• Большой файл изображения требует длительного времени загрузки - вот почему многие пользователи решают выйти из страницы до полной загрузки изображения.

Наконец, многие люди с нарушениями зрения. Атрибут alt очень важен для этой группы пользователей, в частности.

Alt атрибуты делают изображения доступными

Альтернативные тексты для визуального контента, такие как тексты и изображения, незаменимы для слабовидящих. Программа чтения с экрана не может захватить содержимое изображения исключительно на основе файла. С этой точки зрения решающую роль играют точность, краткость и избежание избыточности в описании изображения. Поэтому очень длинные тексты так же излишни, как и комментарий, который в описании относится к изображению («изображение цветка»). При написании текста, описывающего изображение, важно, чтобы оно вписывалось в общий контекст абзаца, к которому относится изображение.

В случае чисто функциональной графики (например, стрелка, которая ведет на следующую страницу), текст также должен ограничиваться описанием функции. Поэтому рекомендуется использовать тот же текст в теге <img>, что и в атрибуте title в теге <a> для атрибута alt:

<a href=veloperpage2.htmluration title= Обработанной текстовой странице>> <img src = ”arrow.gif” alt = «следующая страница»> </a>

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

<img src = ”black.gif” alt = ””>

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

Если изображение также является ссылкой, атрибут title не должен быть помещен в <img> . Атрибут alt здесь достаточен. Атрибут title принадлежит тегу привязки (<a>) , который отвечает за связывание. Такой подход гарантирует, что цель ссылки отображается в виде всплывающей подсказки в большинстве браузеров. На изображении атрибут title в <a> заменяет текст привязки в текстовой ссылке.

Практическая значимость атрибута alt

Важность атрибута alt часто недооценивают - это также относится к значению атрибута alt для SEO. Это потому, что исходный текст сайта является решающим для роботов поисковых систем. Атрибут alt предоставляет важные сведения об изображении как таковом, а также об общем контексте веб-сайта.

В более ранних версиях Internet Explorer содержимое атрибута alt отображалось как всплывающая подсказка - эффект, который фактически выполняется атрибутом title. Однако то, как браузеры работают с атрибутом alt, сегодня стандартизировано. Поэтому программисты и дизайнеры применяют следующее правило:

• Атрибут alt описывает содержимое изображения.
• Атрибут title может использоваться для предоставления дополнительной информации.

В случае сомнений следует обойтись без использования атрибутов заголовка в изображениях и вместо этого выбрать подходящий заголовок изображения. Для HTML5, новейшей версии HTML, это тег <figcaption> . Преимущество состоит в том, что заголовок изображения всегда отображается и может быть прочитан программами чтения с экрана.

Оптимизация атрибутов alt

Первоначально созданный как инструмент технической помощи и для доступности, сегодня этот атрибут также важен для SEO экспертов. Роботы поисковых систем руководствуются исходным текстом сайта - это также относится к рейтингу графики. Вот почему атрибуты alt играют такую ​​важную роль для SEO, а не только для поиска изображений в Google.

При оптимизации атрибутов alt следует начинать с ориентации на поиск изображений в Google. Подробное, но в то же время краткое и ясное описание содержания изображения улучшает рейтинг здесь. Когда основное ключевое слово появляется в URL-адресе, в заголовке H1 и в описании изображения, файл имеет хорошие шансы появиться в верхних результатах поиска изображений Google.

• Важный: размер файла также играет роль в оптимизации изображения. По возможности следует избегать больших изображений с высоким разрешением, чтобы минимизировать время загрузки веб-сайта. Если изображение загружается недостаточно быстро, показатели отказов высоки. Показатель отказов является решающим фактором рейтинга.

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

Резюме: маленький, но эффективный

Атрибут alt - это больше, чем просто обязательный элемент для программистов, которые хотят написать согласованный с правилом текст HTML. Альтернативный текст для изображения помогает людям, которые полагаются на использование программы чтения с экрана в Интернете. Но правильная разметка alt файла изображения также важна для целей SEO. Это особенно полезно, когда речь идет о создании хорошо разработанного веб-сайта и, в свою очередь, о достижении хороших позиций в Google.

Похожие

Комментарии