Атрибут alt в HTML

Теги alt и title для изображений при оптимизации сайтов, их роль в SEO

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

Именно поэтому при добавлении графики в CMS важно обязательно прописывать предусмотренные HTML-атрибуты тега img, а именно alt и title. От них зависит, насколько эффективно индексируется ресурс поисковым роботом + они положительно влияют на прирост органического трафика. А это в свою очередь, хорошо отразится и на росте прибыли и на увеличении рентабельности.

Что такое теги alt и title

Во избежание путаницы сразу нужно обратить внимание на то, что под терминами «тег alt» и «тег title» на самом деле понимаются атрибуты, присущие HTML-тегу «img», используемому для размещения иллюстраций на веб-странице с помощью языка разметки.

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

Теперь обратимся непосредственно к синтаксису. Полный код картинки выглядит следующим образом:

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

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

Тогда как в title находится фраза/слово, что отображаются на экране компьютера, если навести на изображение курсор мыши. Эту возможность хорошо использовать для увеличения конверсии в коммерческих нишах, вставив в тег дополнительный призыв для совершения действия, например: «Купите наш товар сейчас со скидкой 25%». Однако сообщение увидят только пользователи компьютеров, поэтому особого значения в его наличии нет.

В общем, если вам обязательно нужно донести до целевой аудитории посыл, который планируете добавить в поле title, лучше разместить его где-то в контенте в виде простого текста. Если же он и вовсе нерелевантен, — удаляйте. Иное дело альты — они обязаны присутствовать всегда: для помощи плохо видящим юзерам + SЕО.

Нулевой атрибут alt

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

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

Как alt влияет на SEO

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

Эта рекомендация не случайна. Поисковые роботы при просмотре сайтов большую роль уделяют значениям атрибутов alt. Именно по ним система определяет, соответствует ли размещенное изображение окружающей текстовой информации. Специалисты по SЕО при анализе перед оптимизацией обязательно проверяют, есть ли в alt’ах ключевые слова, по которым ведется продвижение.

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

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

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

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

Заполнение атрибутов img в WordPress

При размещении статьи с помощью системы управления WordPress текст/графика добавляются в специальный редактор в таком виде, как они будут видны на сайте. Самостоятельно прописывать HTML код не нужно. Поля alt/title заполняются с помощью свойств изображения, которые открываются в отдельном окне.

Причем в некоторых случаях сама CMS автоматически прописывает в атрибут title имя файла и копирует его в alt. Если это случилось, то оставлять их в таком виде категорически не рекомендуется.

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

• Пользователи видят альтернативный контент до загрузки графики/фотки.
• Люди с ограниченными возможностями могут воспринимать инфу с веб-страниц.
• Поисковые системы быстрее поднимают сайт в результатах поиска на SERP.

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

Итого. Заполнение атрибутов title и alt у тега img – важный, но далеко не единственный способ оптимизации картинок на сайтах. Можете еще почитать пост про XML Sitemap для изображений. Также важно позаботиться и об оптимизации самих графических файлов дабы страница с ними быстрее загружалась в браузере пользователя. Однако об этом вы узнаете из других публикаций.

Атрибуты alt и title

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

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

Атрибут alt (alternative text) — это атрибут тега , позволяющий поисковому роботу «увидеть» изображение и проиндексировать его. По сути, краткое описание того, что изображено на картинке

Атрибут title — это атрибут , выполняющий роль заголовка для изображения. Он формирует всплывающие подсказки для картинки.

Так выглядят теги альт и тайтл в коде страницы:

Правила написания текста в атрибутах alt и title

• Описание должно полностью соответствовать содержимому картинки.
• Должны содержать ключевое слово.
• На одной и той же странице должны быть разные alt теги. Если использовать одни и те же ключи для всех изображений, эта страница будет плохо ранжироваться, и есть шанс попасть под фильтр АГС
• Оптимальный объём — от 3-ех до 10-ти слов для alt. Title должен быть длиннее, более развёрнутым.
• Тексты для alt и title должны отличаться

Задаём alt для изображений

В большинстве CMS задать такой атрибут довольно просто. Например, в WordPress кликаем правой кнопкой на картинку -> «Редактировать» -> добавляем описание атрибута alt.

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

Если хотите развёрнутой информации, то она есть в статье нашего блога.

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

Атрибут alt HTML тега img

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

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

Чтобы создать всплывающую подсказку, следует использовать атрибут title.

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

Альтернативный текст для изображения.

Советы по использованию альтернативного текста:

Руководство по alt-text от слабовидящего веб-разработчика

Эта статья содержит всё, что вам нужно знать об alt-text! Когда их использовать и как идеально их подготовить. Подготовил я, Дэниель, веб-разработчик с частичной потерей зрения, который ежедневно использует скринридер.

Во время сёрфинга в вебе я использую сочетание увелителя экрана и скринридера. Как показывает практика, увеличение экрана удобнее на дисплеях большого размера, а скринридер — на меньших устройствах.

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

Часто alt-text не помогает, часто это просто потеря времени, потому что не передаёт никакого смысла.

Проиллюстрирую на примере главной страницы The Verge. Вот как она выглядит для зрячих:

А ниже то, что вижу я. Я заменил картинки на текст, который читает мой скринридер:

Не очень помогает, правда?

Вот наиболее типичные ошибки alt-text, с которыми я сталкиваюсь:

• “cropped_img32_900px.png” или “1521591232.jpg” — названия файлов, вероятно, потому что в изображении нет атрибута alt.
• “ ” — на каждом изображении статьи, вероятно, для улучшения поискового ранжирования (SEO).
• “Фотограф: Эмма Ли” — вероятно, потому что редактор не знает, для чего нужен alt-text.

Атрибуты alt-text не всегда настолько плохи, но почти всегда есть способ их улучшить. Так что будь вы абсолютным новичком или хотите перевести вашу «игру» на новый уровень, вот полное руководство по alt-text!

Что такое alt-text

Alt-text — это описание изображения, что демонстрируется людям, которые по каким-то причинам не могут увидеть картинку. Среди прочего, alt-text помогает:

• людям ограничениями по зрению или незрячим
• тем, кто отключил показ изображений для экономии трафика
• поисковым системам

Первая группа — люди с ограничениями по зрению и незрячие — пожалуй, больше всего нуждаются в описании alt-text. Для навигации в Сети они используют скринридер. Эта программа преобразует графическую информацию на экране в текст или шрифт Брайля. Чтобы сделать это максимально точно, у картинок на вашем сайте должны быть текстовые описания alt-text.

Они очень важны! Настолько важны, что в правилах Web Content Accessibility Guidelines (WCAG) они указаны самым первым пунктом:

Любое нетекстовый контент, который демонстрируется пользователю, должен иметь текстовую альтернативу, которая служит эквивалентной цели.
— Правило WCAG 1.1.1

Как добавить alt-text?

В HTML alt-text является атрибутом элемента img:

Большинство систем управления контентом (CMS), вроде WordPress, позволяют ввести alt-text при загрузке изображения:

Соответствующее поле обычно называется “Alt-text”, “Alternative text” или “Alt”, но в некоторых интерфейсах оно именуется как «Описание изображения» или что-нибудь подобное.

Создадим идеальный alt-text!

Вот шаги для создания великолепных текстовых атрибутов.

Опишите изображение

Это может показаться очевидным, но alt-text должен описывать изображение. Например:

«Группа людей на железнодорожной станции»
«Счастливый ребёнок, играющий в песочнице»
«Очередь из пяти человек в супермаркете»

Что не стоит включать в описание:

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

Содержимое alt-text зависит от контекста

Как описать изображение — зависит от контекста. Позвольте привести пример:

Если бы это изображение было в статье по фотографии, то alt-text мог бы звучать так:

«Чёрно-белая фотография крупным планом человека на улице, лицо в фокусе, фон размыт».

Если изображение находится на сайте о телесериалах, то соответствующий alt-text может быть совершенно иным:

«Звезда сериала Адам Ли напряжённо смотрит через дождь».

Так что пишите максимально осмысленный alt-text для пользователей в том контексте, в котором они находятся.

Будьте лаконичны

Читая предыдущий раздел, вы могли подумать: «Я как зрячий человек вижу на картинке много деталей, вроде того, кто там изображён, как сделан снимок, тип куртки, примерный возраст мужчины и так далее. Почему бы не сделать детальное, длинное описание, так что пользователь с нарушением зрения получит столько же информации, сколько я?»

Рад, что вы спросили!

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

Один из нескольких случаев, когда уместен длинный alt-text — если вы описываете изображение с важным текстом. В идеале у вас не должно быть изображений с текстом, но иногда приходится их использовать. Например, как на скриншотах или фотографиях знаков.

Но общее правило — сохранять лаконичность и избегать многословности.

Не говорите, что это изображение

Не начинайте alt-text словами «Изображение. », «Фотография. » и тому подобными. Скринридер добавляет это по умолчанию. Так что если вы напишете «Изображение. » в alt-text, то скринридер прочитает «Изображение изображение. », когда пользователь наведёт на него фокус. Не очень приятно.

Единственное, вы можете закончить alt-text сообщением, что это особый вид изображения, например, иллюстрация.

«Пёс прыгает через обруч. Иллюстрация».

Завершение точкой.

Завершайте alt-text точкой. Это позволит скринридеру сделать небольшую паузу после последнего слова alt-text, что более приятно звучит.

Не используйте атрибут title

Во многих интерфейсах есть поле для добавления в тег изображения атрибута title-text рядом с alt-text. Не нужно его использовать! Никто их не использует — они не работают на тачскринах, а на десктопах отображаются, если пользователь наведёт курсор на изображение и ненадолго задержит его там, чего никто не делает. Кроме того, добавление title-text заставляет некоторые скринридеры читать и title-text, и alt-text, что является избыточным. Так что просто не добавляйте title-text.

Когда не следует использовать alt-text

В большинстве случаев нужно снабжать изображения описанием alt-text, но есть некоторые исключения, когда этот атрибут лучше оставить пустым. Важное примечание: никогда не удаляйте атрибут alt, потому что это нарушает стандарт html. Но можно оставить его пустым, вот так: alt=”” . Делайте это в следующих случаях.

Повторяющиеся изображения в фидах

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

Другие примеры фидов:

• Список ссылок на статьи. Примерно как на нашей странице «Статьи».
• Фиды чатов или мессенджеров
• Фиды комментариев

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

Иконки с текстом

Рядом с иконками всегда должно быть текстовое описание. Если так, то у иконки не должно быть alt-text. Позвольте объяснить!

В качестве примера посмотрите на кнопки социальных сетей:

Если вы укажете текст в атрибуте alt-text для иконки Facebook, то скринридер произнесёт что-то вроде «Facebook Facebook». Очень избыточно!

Окей, технически это не касается alt-text, но всё равно важно: убедитесь, что у иконки и текста ссылки одинаковый атрибут link, для большего удобства пользователей. Примерно так:

Другая типичная ошибка — это иконки на кнопках меню:

Если на кнопке меню отсутствует текстовая надпись — что, по-моему, очень неудобно для пользователей — тогда нужно добавить к ней alt-text (или, как вариант, описать её функциональность в самом коде, как aria-label). Объясните функцию иконки, например, «Меню». Не пишите «Три горизонтальные линии» или «Основной гамбургер» — к сожалению, это реальные примеры, которые мне встречались.

Если на иконке меню есть надпись, то поле alt-text следует оставить пустым. Я часто встречаю кнопки меню, которые звучат как «Меню меню». Однажды мне даже попался «Гамбургер меню меню». Немного сбивает с толку, вы не находите?

Изображения в ссылках

Обычно изображение с ссылкой сопровождается текстовой ссылкой. Как в этом примере:

В этом случае изображение и ссылка должны иметь одинаковый link-tag в HTML. Поле alt-text можно оставить пустым. Пользователю важно услышать текст по ссылке. Описание alt-text для изображения только отвлечёт, добавив ненужную информацию. Скорее всего, это изображение будет в статье по ссылке, и там уже можно дать хорошее описание в alt-text.

Если вам очень, очень нужно поместить в ссылку изображение без сопутствующего текста, тогда alt-text должен описать, куда ведёт ссылка, а не само изображение.

Декоративные изображения

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

Я бы классифицировал как декоративные большинство изображений, которые вы вставляете в текст. Там не нужен alt-text. Например, картинка на заглавной странице Netflix:

Особые случаи

Логотипы в баннере

Логотипы в баннерах почти всегда ссылаются на главные страницы веб-сайтов. По поводу атрибута alt-text в логотипе мнения немного отличаются.

Некоторые говорят, что там следует указывать название компании, тот факт, что это логотип, и направление ссылки. Например, так:

«Axess Lab, логотип, ссылка на главную страницу».

По-моему, это слегка многословно. Слишком много шума! Поскольку мой скринридер уже сказал, что это картинка со ссылкой, то мне кажется, достаточно названия компании. Из того факта, что это картинка, я предположу, что это логотип, а из того факта, что это ссылка — предположу, что она следует конвенциям и ведёт на заглавную страницу.

Масштабируемая векторная графика (SVG) — это формат изображений, который становится всё более популярен в интернете. И он мне нравится! Такие изображения остаются резкими при масштабировании, занимают меньше места и быстрее загружаются.

Есть два основных способа добавить SVG на страницу HTML.

Внутрь элемента img. В этом случае просто добавляете alt-text как обычно:

Разве компьютер не может сделать это за меня?

Хотя машинное обучение и искусственный интеллект быстро улучшаются и могут довольно точно описать некоторые изображения, пока они недостаточно хороши в понимании релевантного контекста. Кроме того, машины недостаточно хорошо понимают смысл «краткости» и часто используют слишком много или слишком мало слов.

В реальности Facebook разработал функцию для автоматического описания изображений. Но мне такие описания кажутся слишком обобщёнными. Прямо сейчас одно изображение в моём фиде описано как «Кот в помещении». В реальности на фотографии кот охотится за игрушечной мышью.

Так что извините, вам всё ещё придётся писать атрибуты alt-text самостоятельно!

Спасибо, что делаете веб лучше!

Читают сейчас

Похожие публикации

• 1 апреля 2020 в 18:27

SVG 3D: создание, вращение по оси и анимация

Эффекты фильтрации SVG. Часть 7. Продвижение вперед

Эффекты фильтрации SVG. Часть 6. Создание текстуры с помощью feTurbulence

Вакансии

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Комментарии 12

Да, это правда отлично. Но одно дело — государственные сайты, а другое — частные. Для гос. учреждений пишутся регламенты, которым они обязаны следовать. Тут все относительно просто. А вот законодательное навязывание стандартов для частных лиц, малых и средних организаций — это беда. Есть определенный порог до которого это можно делать. Введение каждого обязательного к исполнению регламента означает удорожание ведения основной деятельности. В нашем случае — удорожанию разработки и ведения сайтов. Плюс штрафы за невыполнение. Плюс дополнительная квалификация персонала (контент-менеджеров). Плюс недобросовестная конкуренция. Плюс необходимы средства контроля за соблюдением. И т.д. Все это делает повсеместное введение подобных стандартов в интересах меньшинств малопривлекательным со стороны как владельцев сайтов, так, в принципе, и государства. В порядке частной инициативы — пожалуйста. Для гос. учреждений — обязательно.

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

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

И, кстати, WCAG 2.0, если я не ошибаюсь, никак не регламентирует содержание текстовых альтернатив. Т.е. я могу соблюсти его дав изображению не совсем подходящее описание. Например явно избыточное или, наоборот, недостаточное.

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

Насчет небольших проектов — не знаю, наверное, могут не следовать до поры до времени пока в суд не подали.

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

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

Спасибо за ссылку. Если я правильно понимаю, то Coles — это очень большой магазин. С маленькими будут судиться только очень упертые. Из статьи, которую мы обсуждаем, я, например, узнал, что слабовидящим нужны описания, составленные определенным образом: без лишних подробностей и т.д. В своей практике я, конечно, попытаюсь следовать тому, что узнал. С другой стороны, даже если заставить всех законодательно следовать некоторому стандарту, то это родит больше проблем. В частности, многие будут соблюдать его формально, что ничуть не улучшит ситуацию для слепых пользователей. Следить за его исполнением тоже сложно. В результате будем иметь: «строгость закона компенсируется необязательностью его соблюдения».

Я думаю, что логичнее было бы использовать что-то вроде микроразметки вместо стандартных атрибутов, а их просто игнорировать. Ну и

В любом случае, я неожиданно заинтересовался проблемой. Попробую найти кого-нибудь, кто пользуется скринридером постоянно, чтобы понять нюансы. И да, с разделом WCAG 2.0 про клавиатуру я тоже вполне согласен.

Атрибут alt

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

Синтаксис

Значения

Любая подходящяя текстовая строка.

Значение по умолчанию

Пример

Браузеры ?

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Атрибут alt тега img

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

Атрибут alt=»» (от англ. alternative) тега img представляет собой альтернативный текст или проще говоря — описание изображения. Для каждой картинки он прописывается отдельно и вкратце рассказывает, что на ней изображено. Синтаксис его крайне прост. Внутри тега img необходимо прописать атрибут alt=»», внутри кавычек которого и располагается описание.

Ниже приведен пример использования атрибута alt в теге img у нас на сайте.

Для чего нужен данный атрибут?

На заре развития Интернета, когда скорость передачи данных была крайне низка, не все пользователи при просмотре сайтов загружали фотографии. Была даже такая функция у браузеров — не загружать изображения. Для тех времен они «весели» слишком много и могли открываться по 10 минут. Как раз в этом случае на помощь приходил атрибут alt=»», который описывал изображенное на фотографии текстом. (Вместо рисунка отображался пустой квадрат, в котором находилось описание незагруженного изображения)

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

Роль alt в SEO

С окончанием эпохи низкоскоростного Интернета и сильно ограниченного трафика alt получает «новую жизнь». Причиной тому стала постоянно развивающаяся SEO индустрия.

Все дело в том, что поисковая система не способна точно определить, что изображено на рисунке. Она может найти похожие изображения, и основываясь на их описаниях догадаться, что же находится на Вашей фотографии. Но, все же основным источником данных будет являться текст. В нашем случае, альтернативное описание — alt.

Совместно с тегами description, title и h1, атрибут alt является одним из основополагающих элементов внутренней оптимизации сайта. Прописывать его необходимо основываясь на спросе, используя ключевые слова и ориентируясь на пользователя.

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

Заполнение атрибута alt основывается на трех столпах — статистика ключевых слов, удобство для пользователей и технические требования.

Статистика ключевых слов

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

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

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

Действительно, в отличие от тегов title, h1-h6 и description, атрибут alt человек скорее всего не увидит. Но, данное описание используется поисковыми системами в органической выдаче, то есть, подходить к нему нужно со всей серьезностью.

Немного технических требований

Атрибут alt не имеет длинного списка технических требований, однако должен соответствовать всему ниже перечисленному:

Длинна не более 160 символов. Физически, alt=»» не ограничен в своем объеме, однако многочисленные исследования показали, что эффективно поисковиками используется лишь 160 первых символов. (Google — 160, Yandex чуть больше — около 240);

Длинна не менее 20 символов. Очень короткое описание не способно передать всю суть изображения;

Атрибут alt должен находится внутри тега img: ;

Должен быть написан на том же языке, что и содержимое страницы;

Недопустим пустой alt.

Автоматическая генерация alt

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

Какой он — правильный alt?

Правильный атрибут alt должен соответствовать следующим требованиям:

Корректно и правдиво описывать содержимое изображения;

Должен быть понятен пользователю и легко читаться;

Имеет длину не более 160, но и не менее 20 символов;

Не обманывать и не вводить в заблуждение;

Содержать в себе основные ключевые слова;

Написан на том же языке, что и содержимое страницы;

Не является поисковым спамом или списком ключевых слов;

Атрибут не должен быть пустым;

Желательно отсутствие сложных технических терминов и аббревиатур. (Если это не оправдано тематикой сайта).

Если Ваш alt полностью соответствует вышеуказанным требованиям, то можете считать его просто превосходным!

Ошибка — «Отсутствует alt»

Многие online сервисы, проводящие анализ сайта с точки зрения поисковой оптимизации, обращают внимание на атрибут alt и при его отсутствии выдают ошибку. Что в этом случае необходимо делать, думаем объяснять не стоит. Просто прописываем недостающие alt.

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

Alt для распространенных CMS

Так как большинство сайтов созданы на основе популярных CMS, таких как WordPress, Joomla! или Bitrix, то скорее всего Вам придется столкнуться с заполнением атрибута alt в этих системах управления. Поэтому мы собрали несколько пошаговых инструкций.

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

Атрибут alt для картинок в WordPress

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

Способ 1 — При добавлении фотографии в статью

После того, как Вы нажали в визуальном редакторе «Добавить медиафайл«, откроется окно со всей медиабиблиотекой WordPress. При выборе конкретного изображения, справа появится информация и поля для заполнения. Одним из полей будет «Атрибут alt«.

Способ 2 — Если изображение уже в статье

Если изображение уже вставлено в статью, нужно его выделить и нажать на карандаш во всплывающей подсказке. (Как показано на рисунке ниже)

Далее перед Вами откроется всплывающее окно со всеми параметрами, среди которых также будет атрибут alt.

Атрибут alt для картинок в Joomla!

Создание атрибута alt в Joomla! происходит на этапе добавления изображения в статью. Находим иконку показанную на рисунке ниже и нажимаем на нее.

Перед Вами откроется всплывающее окно, в котором будет поле «Описание изображения». Это и есть атрибут alt.

Атрибут alt для картинок в Bitrix

Если не устанавливать дополнительные расширения и модули, то добавление alt в bitrix происходит в два этапа.

Открываем статью в режиме редактирования. Нажимаем на пункт меню «Изменить страницу» -> «В визуальном редакторе«.

Перед Вами откроется статья в визуальном редакторе и html коде. Далее находим наше изображение в коде и прописываем для него alt.

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

Атрибут alt для картинок в Opencart

Добавление alt в Opencart очень похоже на все вышеперечисленные способы. Для этого нужно перейти в визуальный редактор и найти иконку показанную ниже на рисунке. (На иконке изображены горы и солнце — миниатюрная картина)

Далее открывается всплывающее окно, в котором сразу под ссылкой располагается поле «Альтернативный текст«. Это и есть наш alt.

HTML Атрибуты

Атрибуты задаются в начальном тэге элемента и состоят из имени и значения, которые отделяются друг от друга знаком равно (=). Например в атрибуте href=»http://www.wm-school.ru/» href является именем, а http://www.wm-school.ru/ значением.

HTML-теги могут содержать один или несколько атрибутов. Атрибуты добавляются в тег для того, чтобы информировать браузер о том, как данный тег должен отображаться в html-документе.

Атрибут title

Рассмотрим следующий пример:

Имя атрибута title. В этом примере, мы дали ему значение Язык гипертекстовой разметки .

Атрибут title может (необязательно) использоваться в любом HTML — элементе, чтобы предоставить дополнительную информацию о содержимом элемента.

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

Атрибут alt

Вы уже знаете, что изображения вставляются в Web-страницы с помощью одинарного тега . Атрибут alt добавляется внутрь тera и определяет для добавленноrо на WеЬ-страницу rpaфическоrо элемента альтернативный текст. Этот текст называется альтернативным, поскольку может отображаться на экране как альтернатива самому изображению.

В следующем примере вы увидите, как браузер работает с атрибутом alt, когда появляется «отсутствующее» изображение. Если рисунок не может быть найден или по какой-то причине не загружается, вместо него выводится значение атрибута alt. Поменяйте имя файла с изображением с orange.jpg на pencil.jpg. На самом деле такого файла не существует, поэтому вы получите «отсутствующее» изображение.

Атрибут href

Вы можете добавить сразу несколько атрибутов к элементу.

Атрибут href определяет расположение веб — страницы, на которую ведет ссылка.

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

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

W3C рекомендует использовать кавычки в HTML, и требует применение кавычек для более строгих типов документов, таких как XHTML.

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

Одинарные или двойные кавычки?

Чаще всего в HTML используются «двойные кавычки», но вы можете использовать и ‘одинарные’. Иногда вам придется использовать одинарные кавычки, если в значении есть часть, которая отдельно должна быть заключена в кавычки:

Общие атрибуты

Ниже представлен список некоторых атрибутов, которые стандартны для большинства html-элементов:

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

Первое итоговое задание [1-4]

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

Пришло время повторить изученное и выполнить несложные задания:

Всплывающая подсказка

Сделайте всплывающую подсказку с текстом «Хороший сайт», который появляется когда вы наводите указатель мыши на абзац, как показано на рис. 1.

Атрибут alt тега в HTML

Атрибут alt устанавливает текстовое описание для тега img в HTML-разметке.

Работает в браузерах Chrome 1.0+, Internet Explorer версии 3.0+, Opera 2.1+, Firefox 1.0+, Safari 1.0+, а также поддерживается в Android 1.0+ и iOS 1.0+.

Присутствует в языке разметки HTML в 3.2, 4.01 и 5.0 версиях, а также в XHTML версиях 1.0 и 1.1.

В HTML-коде атрибут альт тега img прописывается следующим образом:

‹img src=»https://prozhector.ru/wiki/alt/%D0%B0%D0%B4%D1%80%D0%B5%D1%81%20%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F» alt=»альтернативный текст»›

Для чего нужен атрибут alt тега ‹img› в HTML?

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

Атрибут alt тега img

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

Атрибут alt=»» (от англ. alternative) тега img представляет собой альтернативный текст или проще говоря — описание изображения. Для каждой картинки он прописывается отдельно и вкратце рассказывает, что на ней изображено. Синтаксис его крайне прост. Внутри тега img необходимо прописать атрибут alt=»», внутри кавычек которого и располагается описание.

Ниже приведен пример использования атрибута alt в теге img у нас на сайте.

Для чего нужен данный атрибут?

На заре развития Интернета, когда скорость передачи данных была крайне низка, не все пользователи при просмотре сайтов загружали фотографии. Была даже такая функция у браузеров — не загружать изображения. Для тех времен они «весели» слишком много и могли открываться по 10 минут. Как раз в этом случае на помощь приходил атрибут alt=»», который описывал изображенное на фотографии текстом. (Вместо рисунка отображался пустой квадрат, в котором находилось описание незагруженного изображения)

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

Роль alt в SEO

С окончанием эпохи низкоскоростного Интернета и сильно ограниченного трафика alt получает «новую жизнь». Причиной тому стала постоянно развивающаяся SEO индустрия.

Все дело в том, что поисковая система не способна точно определить, что изображено на рисунке. Она может найти похожие изображения, и основываясь на их описаниях догадаться, что же находится на Вашей фотографии. Но, все же основным источником данных будет являться текст. В нашем случае, альтернативное описание — alt.

Совместно с тегами description, title и h1, атрибут alt является одним из основополагающих элементов внутренней оптимизации сайта. Прописывать его необходимо основываясь на спросе, используя ключевые слова и ориентируясь на пользователя.

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

Заполнение атрибута alt основывается на трех столпах — статистика ключевых слов, удобство для пользователей и технические требования.

Статистика ключевых слов

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

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

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

Действительно, в отличие от тегов title, h1-h6 и description, атрибут alt человек скорее всего не увидит. Но, данное описание используется поисковыми системами в органической выдаче, то есть, подходить к нему нужно со всей серьезностью.

Немного технических требований

Атрибут alt не имеет длинного списка технических требований, однако должен соответствовать всему ниже перечисленному:

Длинна не более 160 символов. Физически, alt=»» не ограничен в своем объеме, однако многочисленные исследования показали, что эффективно поисковиками используется лишь 160 первых символов. (Google — 160, Yandex чуть больше — около 240);

Длинна не менее 20 символов. Очень короткое описание не способно передать всю суть изображения;

Атрибут alt должен находится внутри тега img: ;

Должен быть написан на том же языке, что и содержимое страницы;

Недопустим пустой alt.

Автоматическая генерация alt

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

Какой он — правильный alt?

Правильный атрибут alt должен соответствовать следующим требованиям:

Корректно и правдиво описывать содержимое изображения;

Должен быть понятен пользователю и легко читаться;

Имеет длину не более 160, но и не менее 20 символов;

Не обманывать и не вводить в заблуждение;

Содержать в себе основные ключевые слова;

Написан на том же языке, что и содержимое страницы;

Не является поисковым спамом или списком ключевых слов;

Атрибут не должен быть пустым;

Желательно отсутствие сложных технических терминов и аббревиатур. (Если это не оправдано тематикой сайта).

Если Ваш alt полностью соответствует вышеуказанным требованиям, то можете считать его просто превосходным!

Ошибка — «Отсутствует alt»

Многие online сервисы, проводящие анализ сайта с точки зрения поисковой оптимизации, обращают внимание на атрибут alt и при его отсутствии выдают ошибку. Что в этом случае необходимо делать, думаем объяснять не стоит. Просто прописываем недостающие alt.

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

Alt для распространенных CMS

Так как большинство сайтов созданы на основе популярных CMS, таких как WordPress, Joomla! или Bitrix, то скорее всего Вам придется столкнуться с заполнением атрибута alt в этих системах управления. Поэтому мы собрали несколько пошаговых инструкций.

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

Атрибут alt для картинок в WordPress

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

Способ 1 — При добавлении фотографии в статью

После того, как Вы нажали в визуальном редакторе «Добавить медиафайл«, откроется окно со всей медиабиблиотекой WordPress. При выборе конкретного изображения, справа появится информация и поля для заполнения. Одним из полей будет «Атрибут alt«.

Способ 2 — Если изображение уже в статье

Если изображение уже вставлено в статью, нужно его выделить и нажать на карандаш во всплывающей подсказке. (Как показано на рисунке ниже)

Далее перед Вами откроется всплывающее окно со всеми параметрами, среди которых также будет атрибут alt.

Атрибут alt для картинок в Joomla!

Создание атрибута alt в Joomla! происходит на этапе добавления изображения в статью. Находим иконку показанную на рисунке ниже и нажимаем на нее.

Перед Вами откроется всплывающее окно, в котором будет поле «Описание изображения». Это и есть атрибут alt.

Атрибут alt для картинок в Bitrix

Если не устанавливать дополнительные расширения и модули, то добавление alt в bitrix происходит в два этапа.

Открываем статью в режиме редактирования. Нажимаем на пункт меню «Изменить страницу» -> «В визуальном редакторе«.

Перед Вами откроется статья в визуальном редакторе и html коде. Далее находим наше изображение в коде и прописываем для него alt.

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

Атрибут alt для картинок в Opencart

Добавление alt в Opencart очень похоже на все вышеперечисленные способы. Для этого нужно перейти в визуальный редактор и найти иконку показанную ниже на рисунке. (На иконке изображены горы и солнце — миниатюрная картина)

Далее открывается всплывающее окно, в котором сразу под ссылкой располагается поле «Альтернативный текст«. Это и есть наш alt.

Как прописать атрибут ALT к картинке правильно?

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

Оптимизация кода

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

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

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

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

Итак, для понимания данного текста в первую очередь необходимо разбираться в языке разметки HTML. Это — код, на котором пишутся базовые веб-страницы, который, как уже было отмечено, имеет свойство отображаться в браузере. Весь язык состоит из специальных атрибутов (например, IMG, ALT, FONT и так далее). Каждый из них отвечает за работу с тем или иным элементом дизайна. На практике применяется упомянутый выше атрибут ALT для картинок, которые можно встретить на страницах сайтов. Если говорить конкретнее, то с его помощью создается описание к картинкам, по которым пользователь (посетитель сайта) может легко и просто разобраться в том, что же на них показано. Наверняка вы и сами сталкивались с такими описаниями — они возникают при наведении мышки на картинку.

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

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

Бонусы от поисковиков

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

Как прописать атрибут ALT?

Технически нет ничего сложного в том, чтобы заполнить под той или иной картинкой описание. Это очевидно: нужно зайти в HTML-редактор на своем сайте и найти код изображения (начинается с IMG и заканчивается им же). Внутри этого блока кода есть код. Именно его и имеют в виду, когда говорят, что нужно прописать атрибут ALT. Делается это так: “alt = “описание”.

Если вы работаете не с чистым кодом, а используете какой-то отдельный “движок” для сайта (например, WordPress или Joomla), — в нем интегрирован особый механизм добавления “альтов”, через которые наш сайт и запомнится поисковикам. Если вы заполняете новый ALT, обновление оказывается на вашей странице.

Что пишут в атрибуте?

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

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

Требования

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

Например, первое такое требование — это длина всего текста. Если вы ищете, как правильно прописать атрибут ALT, решение элементарно: используйте не больше 2-3 слов. Текст такого размера будет, во-первых, идеально считываться поисковым роботом (и делать ваш сайт более релавантным); во-вторых, такое описание более понятно самим пользователям. Согласитесь, читать целое предложение, если вы хотите просто знать, что показано на картинке, никто не будет. Достаточно кратко и точно изложить описание, что будет полезно как вам, так и клиентам.

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

Еще один важный момент (который был установлен в ходе многочисленных практичных испытаний) — это уникальность. Если ищете, как прописать атрибут ALT к картинке, помните: его нужно подбирать уникальным для каждой из перечисленных фотографий на сайте. Например, публиковать три картинки подряд с подписью “мой слон” будет неправильно — это только навредит вашему ресурсу в поисковой выдаче. Лучше назвать изображения “слон 1” и “слон 2”, что сделает их более уникальными.

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

Поиск ALT

Наконец, мы поговорили об основах атрибута, о некоторых правилах его составления и требованиях обеих сторон (как пользователей, так и поисковых роботов) к ним. Теперь подумаем: так как же искать ключевые слова и фразы, которые мы будем прописывать на своем сайте? Как уже отмечалось выше, поиск нужно направлять в сторону готовых баз ключевых слов, которыми реально начать привлечение клиентов на ваш сайт. Разумеется, этого не добиться, если у вас все же отсутствует атрибут ALT. Берите в готовом виде ключевые слова и фразы, которые применяете в контенте, и вставляйте в картинки.

Если таких сведений у вас нет и вы совсем не думали над тем, чтобы начать понемногу раскручивать свой ресурс, предлагаем начать искать базы таких “ключевиков”, с которыми вы сможете легко создавать новые сайты. Для этого отлично подойдут сервисы вроде Google Keyword Extract Tool или Yandex.Wordstat, где показана статистика поиска по тем или иным фразам. “Играя” с этими настройками, можно существенно расширить долю поискового трафика на своих сайтах и тем самым начать извлекать новую выгоду. Главное, чтобы не возникло ситуации, в которой у всех видимых изображений отсутствует атрибут ALT.

Выводы

Итак, что можем сказать об описанном в этой статье атрибуте? Он является частью языка, на котором создаются простейшие сайты — HTML. Делать это очень просто, поскольку описывается элементарный, базовый язык. Для того чтобы все-таки прописать тег в картинках, необходимо самостоятельно оформить его через исходный код. Или же, воспользовавшись новой инструкцией, начать оформлять заново. Как бы там ни было, а указание тегов ALT — это тот идеальный случай взаимной выгоды, когда остаются довольными и посетитель, и владелец ресурса.

Указание тега может привести и новых посетителей — особенно часто такое явление наблюдается на таких сервисах, как Google и Yandex Images. При клике на картинку сайт самостоятельно определяет источник, с которого было взято изображение, и перенаправляет посетителя. А это, как вы понимаете, очень важно уметь делать в будущем.