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

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

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

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

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

Для объяснения:

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

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

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

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

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

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

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

<a href="page2.html" title="Next Page"> <img src = "pfeil.gif" alt = "Следующая страница"> </a>

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

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

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

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

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

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

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

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

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

Оптимизировать атрибуты alt

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

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

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

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

Вывод: маленький, но мощный

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

Похожие

Комментарии