Тег alt: Атрибут alt | htmlbook.ru

Тег alt: Атрибут alt | htmlbook.ru

Содержание

что это такое и как прописать в тексте

Обучение в IMBA

Мы собрали для тебя подробный список терминов, методик и инструментов, которые встречаются в учебных программах.

Alt – это текстовый атрибут, который есть у HTML-тега ‘img’, описывающего изображение. Идея примерно такая же, как у метатегов веб-страницы: атрибут коротко описывает, что изображено на картинке. По сути, это альтернативное текстовое содержание изображения, отсюда название alt – сокращение от alternative.

Изначальное назначение Alt

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


Для чего нужен атрибут Alt сегодня

Сейчас проблема низкой скорости загрузки и быстро заканчивающегося трафика почти отпала. Но альтернативное описание картинки все равно полезно в случаях, когда:

  • человек пользуется мобильным интернетом;
  • пользователь находится в месте, где плохо ловит связь, к примеру за городом;
  • в браузере по какой-то причине отключено отображение картинок;
  • сайт просматривает человек с ограниченными возможностями.

Такие ситуации встречаются довольно редко, так что основное назначение Alt сейчас – поисковая оптимизация. Благодаря альтернативному описанию понять, что изображено на картинке, сможет не только человек с медленным интернет-соединением, но и поисковый робот. В Alt добавляют короткий текст, содержащий ключевые слова. В результате картинки индексируются, отображаются в поиске в разделе «Изображения», а значит, приносят сайту дополнительный трафик.

Как правильно заполнять Alt

Прописывая атрибуты картинок, оптимизаторы придерживаются тех же правил, что и в случае с текстами. Наполнение страницы должно отвечать конкретному поисковому запросу. Это касается и изображений: они обязаны быть тематическими. На них что-то изображено, задача специалиста – сообщить поисковому роботу, что это такое: Alt должен быть информативным.

  • Оптимальная длина – не больше 200–250 символов, 5–6 слов.
  • Описание в точности соответствует картинке.
  • Желательно включать ключевые слова из заголовков, но нужно избегать переспама и переоптимизации.
  • Графическим элементам меню и страницы Alt не нужен, их лучше отделять в CSS-файлы.
  • Для нескольких однотипных картинок вроде фотографий одного товара в разных ракурсах Alt желательно делать одинаковым, для уникализации описания можно пронумеровать.

Синонимы:

Все термины на букву «A»

Все термины

что это такое, что значит тег

SEO WikiGoogleАлгоритмы ранжированияАнализ эффективностиВеб разработкаВнутренняя оптимизацияВредоносные технологииЗапросыИндексация сайтаИнтернет рекламаКонтекстная рекламаМета-тегиПоисковые системыПоисковые фильтрыПродвижение сайтовРанжированиеСервисыСоциальные сетиСпециалистыСсылочная оптимизацияСтруктура сайтаТекстовая оптимизацияТехническая оптимизацияЧерное SEOЯндекс

Оглавление

  1. org/ListItem»> Зачем заполнять атрибут alt
  2. Правила правильного заполнения alt

Alt (Альт) – это атрибут для тега img, в котором устанавливается альтернативный текст для изображения. Текстовая информация отображается при отключенной загрузке графики в браузере пользователя и дает понять, что изображено на этой картинке. Название «alt» HTML-тег получил от слова alternative – альтернативный вариант текста.

Зачем заполнять атрибут alt

В поисковой системе индексируется не только текст, но и графическая информация, и изображения – один из источников дополнительного трафика. Чтобы показывать релевантные изображения при поиске по картинкам, Google и Яндекс ориентируются на теги, в которых и написано, что представлено на них. Благодаря этому в результатах поиска пользователь получает именно то, что искал.

Поисковый робот же в первую очередь ориентируется на изображения с атрибутом alt, поэтому с точки зрения seo-оптимизации это очень важный пункт. Например, если у вас на сайте размещено более 1000 изображений в сотнях статей, то каждое из них может принести дополнительный трафик.

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

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

Правила правильного заполнения alt

Для достижения максимального результата от заполнения тегов alt нужно придерживаться следующих правил.

  • Поисковые системы игнорируют длинные описания, поэтому регулируйте длину alt до 5–6 слов, но не превышайте 200–250 символов.
  • Описание изображения должно четко соответствовать его содержимому. Например, бессмысленно вставлять фразу «домашний кот» для изображения с автомобилем.
  • Для увеличения эффекта от оптимизации картинок рекомендуется использовать ключевые слова из тега h2 или заголовка статьи, но только в том случае, если они похожи по смыслу.
  • Не используйте в тексте большое количество ключевых слов, не допускайте спама в описании.
  • Не оптимизируйте атрибуты alt у изображений, которые относятся к фону вашего сайта, элементам меню. У них тег должен быть пустым или вовсе отсутствовать. Изображения для элементов дизайна по возможности можно выносить в CSS-спрайты.
  • Не придумывайте дополнительные теги alt для похожих картинок из одного материала или товара. Например, у вас интернет-магазин курток, у каждой несколько фотографий. Это значит, что для всех вы пишете одно и то же название, только можете добавить цифры 1, 2, 3 для разграничения.

Правила заполнения тега ALT

Правила заполнения ALT

  • Продвижение сайтов
  • Внутренняя оптимизация

Rookee — простой способ поднять сайт в ТОП поисковых систем

Начать продвижение

Базовая техническая оптимизация

12 090 ₽

Написание метатегов

от 2790 ₽

Наполнение сайта

Популярно

от 13 390 ₽/месяц

Настройка ссылочной стратегии

Популярно

1290 ₽

Настройка целей в Яндекс. Метрике

3590 ₽

Общий технический аудит

Популярно

3490 ₽

Оптимизация коммерческих факторов

4090 ₽

Оптимизация сайта под мобильные устройства

7990 ₽

Подбор запросов для продвижения

Популярно

от 3290 ₽

Присвоение региона продвижения

1290 ₽

Техническое задание на тексты

Популярно

от 1290 ₽

Увеличение кликабельности сайта в выдаче

3690 ₽

Установка Яндекс. Метрики

1490 ₽

SEO Wiki

Подписывайтесь на «Новости SEO рынка»

Нажимая кнопку, вы подтверждаете свое согласие на
обработку персональных данных.

Перейти в блог

HTML img alt Attribute

❮ HTML тег

Пример

Изображение с указанным альтернативным текстом:

Девушка в куртке

Попробуйте Себя »

Определение и использование

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

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

Совет: Для создания всплывающей подсказки к изображению используйте атрибут title !

Поддержка браузера

Атрибут
или Да Да Да Да Да

Синтаксис

<i><noscript><img alt= text «>

Значения атрибутов

Значение Описание
текст Указывает альтернативный текст для изображения.

Рекомендации для альтернативного текста:

❮ HTML-тег


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To Tutorial
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

8 лучших ссылок Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры How To
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Авторское право 1999-2023 по данным Refsnes. Все права защищены.
W3Schools работает на основе W3.CSS.

Что это такое, как это написать и почему это важно для поисковой оптимизации

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

На приведенном выше снимке экрана показана первая страница результатов поисковой системы (SERP), которую Google создает для поискового запроса «примеры таблиц Excel». Обратите внимание, как в дополнение к вкладке «Изображения» вверху Google загружает значительный пакет интерактивных изображений в начало главной страницы результатов — еще до того, как какие-либо результаты с органическим текстом становятся видимыми.

Сегодня почти 38% поисковой выдачи Google содержат изображения, и это число, вероятно, будет увеличиваться. Это означает, что, несмотря на все ваши усилия по SEO, вы все равно можете упустить еще один источник органического трафика: изображения вашего сайта. Как получить доступ к этому источнику трафика? Альтернативный текст изображения.

Что такое альтернативный текст?

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

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

Как добавить замещающий текст к вашим изображениям

В большинстве систем управления контентом (CMS) нажатие на изображение в теле сообщения блога вызывает оптимизацию изображения или модуль форматированного текста, где вы можете создавать и изменять альтернативный текст изображения.

Давайте рассмотрим следующие шаги для CMS Hub и WordPress ниже.

Как добавить замещающий текст в HubSpot CMS

В HubSpot после нажатия на изображение и значка редактирования (в виде карандаша) появится всплывающее окно оптимизации изображения.

Вот как это окно оптимизации изображения выглядит в CMS внутри вашего портала HubSpot:

Затем ваш замещающий текст автоматически записывается в исходный HTML-код веб-страницы, где вы можете дополнительно редактировать замещающий текст изображения, если ваша CMS этого не делает. У вас есть легко редактируемое окно альтернативного текста. Вот как может выглядеть этот тег alt в исходном коде статьи:

Как добавить замещающий текст в CMS WordPress

В WordPress при нажатии на изображение автоматически открывается вкладка Block на боковой панели. В разделе «Настройки изображения» добавьте замещающий текст в пустое поле.

Когда будете готовы, нажмите Обновить на панели инструментов в верхней части экрана.

Самое важное правило альтернативного текста? Будьте описательными и конкретными. Однако имейте в виду, что это правило замещающего текста может потерять свое значение, если замещающий текст не учитывает контекст изображения. Альтернативный текст может не попасть в цель тремя разными способами. Рассмотрим примеры ниже.

3 Примеры альтернативного текста изображения (хорошие и плохие)

1. Ключевое слово и детали

Неверный альтернативный текст

alt="Стена офиса HubSpot Фрески на рабочем месте в сфере входящего маркетинга в Сингапуре оранжевые стены отправляют"

Что не так со строкой альтернативного текста выше? Слишком много ссылок на HubSpot. Использование альтернативного текста для вставки ключевых слов в фрагментированные предложения добавляет слишком много лишнего к изображению и недостаточно контекста. Эти ключевые слова могут быть важны для издателя, но не для поисковых роботов.

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

Хуже всего то, что если вы наберете слишком много ключевых слов, Google может оштрафовать вас.

Хороший альтернативный текст

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

alt="Orange mural that says 'ship it' on a wall at HubSpot's Singapore office"

2.

Detail vs. Specificity

Image via Winslow Townson

Bad Alt Text

alt="Бейсболист бьет по мячу на бейсбольном поле"

Строка замещающего текста выше технически следует первому правилу замещающего текста — быть описательным — но она не является описательной в правильном смысле. Да, на изображении выше показано бейсбольное поле и игрок, бьющий по бейсбольному мячу. Но это также фотография Фенуэй Парка и 34-го номера Дэвида Ортиса из «Ред Сокс», забивающего мяч над правым полем. Это важные особенности, которые Google должен будет правильно проиндексировать, если это изображение, скажем, в блоге о спорте в Бостоне.

Good Alt Text

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

alt="Дэвид Ортис из Boston Red Sox, отбивающий мяч с домашней площадки в Fenway Park"

3.

Специфичность и контекст

Изображение через UCLA

Оба изображения выше имеют четкий контекст, который может помочь нам написать хороший альтернативный текст — одно из офиса HubSpot, а другое из Fenway Park. Но что, если ваше изображение не имеет официального контекста (например, географического названия), с помощью которого можно было бы его описать?

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

Для статьи о посещении бизнес-школы
Плохой замещающий текст

alt="Женщина, указывающая на экран компьютера"

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

Хороший альтернативный текст

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

alt="Профессор бизнес-школы указывает на экран компьютера студента" Образовательное программное обеспечение для учителей бизнес-школ

Плохой альтернативный текст

alt="Учитель указывает на экран компьютера ученика"

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

Хороший альтернативный текст

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

alt="Профессор использует образовательное программное обеспечение для обучения студента бизнес-школы"

Альтернативный текст изображения Лучшие практики

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

  • Опишите изображение и будьте точны. Используйте как тему, так и контекст изображения, чтобы направлять вас.
  • Добавить контекст, относящийся к теме страницы. Если на изображении нет узнаваемого места или человека, добавьте контекст на основе содержимого страницы. Например, альтернативным текстом для стокового изображения человека, печатающего на компьютере, может быть «Женщина, оптимизирующая веб-сайт WordPress для SEO» или «Женщина, изучающая бесплатные платформы для блогов», в зависимости от темы веб-страницы.
  • Сохраняйте замещающий текст менее 125 символов . Инструменты чтения с экрана обычно перестают читать замещающий текст на этом этапе, обрезая многословный замещающий текст в неудобные моменты при озвучивании этого описания для слабовидящих.
  • Не начинайте замещающий текст словами "изображение..." или "Изображение..." Сразу переходите к описанию изображения. Инструменты чтения с экрана (и Google, если уж на то пошло) идентифицируют его как изображение из исходного HTML-кода статьи.
  • Используйте ключевые слова, но экономно. Включайте целевое ключевое слово вашей статьи только в том случае, если его легко включить в альтернативный текст. Если нет, рассмотрите 90 226 семантических ключевых слов 90 227 или просто самые важные термины в длинном ключевом слове. Например, если ключевым словом вашей статьи является «как привлекать потенциальных клиентов», вы можете использовать «привлечение потенциальных клиентов» в свой альтернативный текст, поскольку «как» может быть трудно включить в альтернативный текст изображения естественным образом.
  • Не втискивайте ключевое слово в альтернативный текст каждого изображения. Если ваш пост в блоге содержит серию изображений тела, включите ключевое слово хотя бы в одно из этих изображений. Определите изображение, которое, по вашему мнению, наиболее полно отражает вашу тему, и назначьте ему ключевое слово. Придерживайтесь более эстетичных описаний в окружающих СМИ.
  • Проверка на орфографические ошибки. Слова с ошибками в замещающем тексте изображения могут ухудшить взаимодействие с пользователем или запутать поисковые системы, сканирующие ваш сайт. Вы должны просмотреть замещающий текст, как и любой другой контент на странице.
  • Не добавляйте замещающий текст к каждому изображению. Вы должны добавить замещающий текст к большинству изображений на веб-странице ради SEO, UX и доступности — однако есть исключения. Изображения, которые носят исключительно декоративный характер или описаны в тексте рядом, например, должны иметь пустой атрибут alt. Для получения более подробной информации о том, когда добавлять замещающий текст, а когда нет, ознакомьтесь с этим деревом решений.

Как замещающий текст влияет на SEO

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

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

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

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

Источник изображения

Поскольку это изображение имеет оптимизированный замещающий текст, оно отображается в результатах поиска изображений по ключевому слову «как удалить дубликаты в Excel». Поскольку сообщение также появляется в результатах веб-поиска по тому же ключевому слову, посетители могут перейти к сообщению в блоге через эти два разных канала.

Почему важен замещающий текст изображения?

Мы уже упомянули несколько причин, по которым замещающий текст изображения важен: а именно: доступность, взаимодействие с пользователем и трафик изображений. Понимание этих причин поможет вам написать лучший замещающий текст для ваших изображений. Ниже мы более подробно рассмотрим основные причины, по которым альтернативный текст изображения важен.

Доступность

Еще в 1999 году W3C опубликовал свои Рекомендации по доступности веб-контента 1.0, чтобы объяснить, как сделать контент более доступным для пользователей с ограниченными возможностями. Одно из этих правил заключалось в том, чтобы «предоставить эквивалентные альтернативы слуховому и визуальному контенту». Это означало, что любые веб-страницы, включая изображения (или фильмы, звуки, апплеты и т. д.), должны содержать информацию, эквивалентную визуальному или слуховому содержанию.

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

User Experience

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

Например, пользователь может видеть изображение слева. Если они не могут — из-за инвалидности, проблем с пропускной способностью или по другой причине — они услышат или увидят альтернативный текст справа. Это поможет обеспечить лучший пользовательский интерфейс, чем если бы не было альтернативного текста.

Источник изображения

Трафик изображения

Одной из наиболее важных вещей, которую альтернативный текст изображения может сделать для вас, является преобразование ваших изображений в результаты поиска с гиперссылками, которые появляются либо в Google Images, либо в виде пакетов изображений. Пакеты изображений — это специальные результаты, отображаемые в виде горизонтального ряда ссылок на изображения, которые могут появляться в любой органической позиции (включая место № 1 в поисковой выдаче, как показано в примере во вступлении).

Изображения, которые появляются либо в Google Images, либо в пакетах изображений, предоставляют еще один способ получить обычных посетителей. Это может привести к увеличению числа посетителей на тысячи — по крайней мере, так было в случае с HubSpot.

Начиная с 2018 года команда блога HubSpot внедрила новую SEO-стратегию, которая частично была сосредоточена на оптимизации замещающего текста изображения. Это помогло увеличить трафик изображений блога на 779% менее чем за год, что привело к увеличению числа органических просмотров на 160 000. Подробнее об успехах команды можно прочитать в этом блоге.

Добавление замещающего текста изображения на ваш веб-сайт

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

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

Об авторе

alexxlab administrator

Оставить ответ

© 2019 ICQ Information Center