Что такое альт-теги?

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

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

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

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

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

<img itemprop=»image»/upload/iblock/61f/pg_600g_pervyy_prikorm.jpg» alt=»Фото Pedigree — сухой корм первый прикорм с курицей и рисом педигри для щенков всех пород от 3 недель» title=»купить pedigree первый прикорм с курицей и рисом для щенков с 3 недель» data-giftd-block-id-product=»11″>

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

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

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

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

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

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

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

Как правильно написать alt-текст — Блог HTML Academy

Alt — обязательный атрибут тега <img>. Он появился ещё в 1995 году, в HTML 2.0. Это альтернативное описание для изображений, которые не видят пользователи:

• из-за медленного соединения;
• из-за неправильного пути или имени файла в атрибуте src;
• так как пользуются скринридерами.

Перед тем, как перейти к примерам, разберёмся с необходимостью альтернативного текста в разных ситуациях.

Когда alt-текст нужен

У любого изображения, которое иллюстрирует или дополняет текст. Например, для изображений в теге <a>, если у ссылки нет текстового содержимого.

<a href="/courses">
  <img src="keks.jpg" alt="Кекс приглашает на курсы">
</a>

Как правильно писать

• Кратко. Максимальная рекомендуемая длина — 125 символов. Один из самых популярных скринридеров JAWS не любит длинные строки. Очень длинные строки он может зачитать как три картинки, хотя это было всего лишь одна длинная строка.
• Чётко. Нужно ответить на вопрос, что именно изображено на картинке? Какую функцию она выполняет?
• Уникально. Не повторяйте текст, который уже есть на странице.
• Не начинайте со слов «картинка» или «изображение».
• Отталкивайтесь от окружающего контента.
• Следуйте правилам языка, на котором составляется описание: пунктуация, орфография.

Примеры использования

Картинка

<img src="ml.jpg" alt="Динозавры">

Так можно описать, если в статье есть текст, который рассказывает о фотографии.

Если текста нет, например, у нас галерея изображений, тогда нужно описать картинку более детально:

<img src="ml.jpg" alt="Два динозавра в национальном парке Анза-Боррего на фоне звёздного неба. Один большой, другой маленький">

Ссылка

<a href="/blog">
  <img src="blog.jpg" alt="Перейти на главную страницу блога">
</a>

Начинать текст с «ссылка» не нужно, роль уточнения играет сам тег <a>.

Диаграмма

<img src="chart.png" alt="Диаграмма с результатами опроса о том, что мешает пользователям на удалёнке">

Если текста со статистикой нет, то придётся всю статистику вынести в alt:

<img src="chart.png" alt="Еда — 10%, соседи — 15% ...">

Картинка с текстом

Просто переносим текст в alt:

<img src="courses.png" alt="HTML Academy Бесплатные онлайн-курсы...">

Figure и figcaption

Всё равно пишем нормальный alt, так как в figcaption обычно маленькое описание:

<figure>
  <img src="image.jpg" alt="Рабочее место Тани">
  <figcaption>Таня ушла на разминку</figcaption>
<figure>
 

Когда alt-текст не нужен

Когда картинка декоративная и не имеет смысла.

• Аватарка: имя пользователя и так у нас уже есть.
• Превью к статье: у нас уже есть заголовок, и этого будет достаточно.
• Иконки в кнопке.

Как не стоит писать

Если картинка оформительская и не требует alt, то не нужно писать в туда пробел или его аналоги.

Плохие примеры:

<img src="image.png" alt=" ">

<img src="image.png" alt="&nbsp;">

Если так делать, то скринридеры, либо начнут говорить, что это «картинка» (бессмыслица), либо прочитают «пробел» (ещё более бессмысленно).

Что будет, если забыть про alt-текст

Основных проблем две: пользователи ничего не увидят, а скринридеры могут прочитать неправильно или не то. Например, NVDA ничего не скажет, JAWS скажет «Графическое изображение без описания», а VoiceOver скажет название файла.

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

Чаще всего в такой ситуации вообще удаляют alt:

<img src="orange-cat-1.jpg">

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

<img src="orange-cat-2.jpg" alt="">

Искусственный интеллект и alt

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

Если посмотреть сейчас на автоматическую генерацию текстов, то там всегда присутствует доля предположения — «на изображении может находиться 1 человек».

С абстрактными картинками всё ещё хуже, так как ИИ вообще не понимает, что происходит.

Alt-текст — капля в море фронтенда

Всё остальное — в тренажёрах по вёрстке. 11 вводных глав бесплатно, и −30% на подписку в первую неделю.

Нажатие на кнопку — согласие на обработку персональных данных

Литература

Атрибут alt | htmlbook.ru

Спецификация

Описание

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

Синтаксис

<area alt="текст">

<area alt="текст" /> 

Обязательный атрибут

Да.

Значения

Любая подходящяя текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.

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

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег AREA, атрибут alt</title>
</head>
<body>
 <p><img src="images/europe.png" alt="Европа" 
   usemap="#Map">
 <map name="Map">
  <area shape="poly" coords="34,83,42,90,52,87,64,85,71,81,79,87,84,95,
  75,110,61,120,42,116,37,110,25,94,32,82" href="is.html" alt="Исландия">
  <area shape="poly" coords="168,262,173,254,180,254,207,272,201,290,206,309,
  197,318,182,316,182,323,165,320,152,317,154,292,138,276,168,263" 
  href="fr.html" alt="Франция">
  <area shape="poly" coords="250,223,264,217,274,222,295,221,298,235,301,257,
  290,269,274,268,247,254,243,241,243,241" href="pl.html" alt="Польша">
 </map></p>
</body>
</html> 

Атрибут ALT и Title изображений для SEO – правильно используем

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

Мы все уже знаем насколько важно разбивать текст статьи на блоки. А также “сухой” текст важно “разбавлять” изображениями, делая его более наглядным и читаемым. Но “красивые” картинки не просто привлекают и удерживают внимание читателя. Их можно использовать для продвижения сайта. Именно для этого и используются вспомогательные атрибуты тега <img>.

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

Так и в продвижении сайта – надо использовать все доступные возможности, в том числе и оптимизацию изображений.

Для чего необходима оптимизация изображений?

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

При правильной оптимизации:

• Вы можете получить высокие позиции в ТОП раздела «Картинки» поисковых систем (Яндекс, Google, Поиск  Mail.ru и др.). Результат – обеспечение сайта стабильным тематическим трафиком.
• Качественно оптимизированное изображение предоставляет возможность создания страницы с высокой релевантностью, которая будет успешно индексироваться поисковиками.
• Надо помнить о том, что правильно подобранное изображение является источником естественного привлечения ссылочной массы.

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

Зачем нужны вспомогательные атрибуты тега img

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

передать необходимые сведения поисковому роботу;
получить дополнительных посетителей на сайт;
повысить лояльность читателей.

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

А также помните о том, что и Yandex и Google имеют собственные сервисы  “Картинки”. Поэтому оптимизируя изображения сайта можно рассчитывать на то, что пользователь найдет ссылку на ваш сайт на этих ресурсах, что собственно обеспечит дополнительный трафик.

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

Атрибут alt (alternative text) помогает распознавать роботу изображение и индексировать его. Это краткое описание того, что изображено на картинке. Увидеть пользователь его тоже сможет, если задержит на несколько мгновений на картинке курсор. Если же браузер пользователя настроен на альтернативный просмотр изображений, то вместо изображения он увидит текст атрибута alt/

Атрибут title по сути заголовок изображения. Он генерирует всплывающие подсказки для робота.

1. Описание вспомогательных атрибутов должно полностью соответствовать содержимому картинки.
2. Обязательно должны содержать ключевое слово. Но не переусердствуйте. По последним данным, если в статье более 8 изображений, то 50 % из них, должны содержать ключ.
3. Alt теги в пределах одной страницы должны отличаться. При использовании одного и того же текста в атрибутах страница будет плохо ранжироваться. А значит появляется возможность попасть под АГС
4. Для alt оптимальное количество слов — от 3-ех до 10-ти. Title должен быть более развёрнутым.
5. Тексты для атрибута alt и атрибута title должны отличаться

Если говорить подробнее, то можно вывести некую формулу. Для атрибут alt она будет выглядеть так «прилагательное + ключевая фраза». Конечно, “прилагательное” может быть заменено на другую часть речи и вставлено за ключом. Но в любом случае, например, “двухсловник” будет разбавлен третьим словом. Даже если к ключу будет добавлена просто порядковый номер (ключ 1, ключ 2…), это будет лучше. чем просто повторяющийся из раза в раз ключ.

Для атрибута title рекомендовано расширенное описание «прилагательное + ключ + дополнение». Оно должно быть длиннее. Можно использовать ( а некоторые специалисты считаю – нужно) слова “фото”, “иллюстрация”. Это как бы подсказка для робота…

Как прописывать вспомогательные атрибуты в WordPress

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

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

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

Как всегда, предлагаю Вам свою рассылку – “Инструменты в помощь начинающему блогеру”. Подписавшись на которую, будете получать всю последнюю информацию о настройках блога

Ну что же, удачной Вам работы! Будут вопросы или пожелания, пишите в комментариях. Если информация была для Вас полезной – делитесь ей со своими друзьями в социальных сетях

ручной и автоматический способ заполнения

Для распознавания фото придумано два основных мета тега – Alt и Title, они задают тематику и вывод изображения по запросу в поисковой выдаче. Поэтому их нужно проставить для всех фотографий, как прописать тег title и атрибут alt в WordPress покажу в данной статье.

Что такое атрибут alt в CMS WordPress

ALT – специальный атрибут применяемый к медиафайлам. Разрабатывался для поисковых систем, чтобы понять что показано. На сайте увидеть нельзя только через исходный код страницы в images.

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

Как прописать атрибут alt в вордпресс

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

В классическом редакторе

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

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

Не забываем обновлять саму запись или страницу.

В Gutenberg

В новом удобном редакторе Gutenberg процесс занесения атрибута alt проще:

1. Вставляем картинку через соответствующий блок и выделяем ее нажатием
2. В правой колонке WordPress появится окно настроек блока, увидите раздел

Как автоматически проставить alt в изображениях плагином

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

Ссылка на Clearfy PRO

У плагина есть более 50 настроек по улучшению, чистке, SEO, ускорению и оптимизации блогов на WordPress. В разделе SEO передвигаем переключатель в активное положение, теперь ко всем картинкам, не имеющих альта, он сделает автозаполнение взяв текст из заголовка.

Title и подпись для картинок

Стоит отметить еще две возможности это title и подпись для картинок. В ранжировании любого элемента играет роль окружающий текст. Что делают данные элементы:

• Тайтл показывает всплывающую подсказку при наведении на объект
• Подпись добавляет текст снизу, который индексируется как простой контент, но находится в одном блоке с файлом в разметке HTML

В старом редакторе:

В гутенберге чтобы сделать все в одном месте, лучше действовать через библиотеку файлов вордпресс:

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

Что писать в alt и остальные теги в WordPress

Правил должны придерживаться не только владельцы WordPress, но и другие вебмастера:

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

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

Атрибут alt | htmlbook.ru

Спецификация

Описание

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

Синтаксис

<input type="image" alt="Текст">
 

<input type="image" alt="Текст" />

Значения

Любая подходящая текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.

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

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег INPUT, атрибут alt</title>
 </head>
 <body>

  <form method="post" action="handler.php">
   <p>...</p>
   <p><input src="images/imgbutton.gif" type="image" 
   alt="Отправить форму на сервер"></p>
  </form>

 </body>
</html> 

Атрибут ALT | SEO блог KEY-SEO

Содержание страницы

Что такое атрибут Alt? Для чего нужен тег Alt мы разберём в этой статье.

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

Так атрибут Alt для картинок выглядит в коде страницы:

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

Что значат атрибуты Alt для изображений в аспекте SEO оптимизации? Благодаря данным тегам мы даём понять поисковому роботу с помощью текста, какая графическая информация содержится на странице.

Как оптимизировать атрибут ALT

 У многих вебмастеров и сеошников возникает вопрос, а как необходимо подписывать изображение в атрибуте Alt?

Стоит учесть, что поисковики учитывают только первые несколько слов из атрибута Альт у картинки, потому делать слишком длинные описания картинки не рекомендуется. Достаточно от 3-х до 10-ти слов.

О чем и что писать в теге Alt?

Чтобы определиться, что писать в атрибуте Alt, нужно просто посмотреть на само изображение. В первую очередь, тег Alt в описании картинки должен описывать её. Если на картинке изображен тег Альт, значит и подпись должна быть соответствующая. Пример:

Текст тега Alt для изображения выше — «тег alt в коде страницы», что полностью описывает данную иллюстрацию.

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

Но не стоит заниматься спамом ключевых слов в атрибутах ALT на веб-странице, поскольку можно угодить под фильтр Яндекса АГС. Google также отрицательно относится к переспаму.

Синтаксис атрибута Альт для картинок

Так выглядит код HTML атрибута Alt тега IMG:

<img alt="текст">

В коде XHTML:

<img alt=»текст» />
Атрибуты Alt для изображения являются обязательными. В любом анализаторе HTML содержимого или онлайн сервисе SEO-аудита сайта отсутствие данного тега расценивается, как ошибка. Поэтому, если вы проверили свой сайт на ошибки и обнаружили, что нет HTML тега Alt, необходимо это срочно исправить. Тогда при следующем апдейте есть вероятность, что ПС учтут это обновление.

Как задать тег Альт для картинки

В CMS WordPress прописать атрибуты Alt для картинки достаточно просто. Необходимо кликнуть на предварительно загруженную картинку, выбрать пункт редактировать. В открывшемся окне добавьте описание атрибута Alt, нажмите кнопку обновить. Готово!

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

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

Прописать тег IMG Alt вручную тоже несложно, см. синтаксис кода выше.

Ещё интересные статьи

Атрибут alt | htmlbook.ru

• 
  Основное
• 
  HTML
• 
  CSS
• 
  Сайт

• Статьи
• Блог
• Практикум
• Форум

• Самоучитель HTML
• Справочник по HTML
• XHTML
• HTML5

• Самоучитель CSS
• Справочник по CSS
• Рецепты CSS
• CSS3

• Вёрстка веб-страниц
• Макеты
• Веб-сервер

Теги HTML

• Все теги
• Валидация тегов
• • accesskey
  • charset
  • coords
  • download
  • href
  • rel
  • rev
  • shape
  • tabindex
  • target
  • title
  • type
• • title
• alt
• архив
• код
• кодовая база
• высота
• hspace
• vspace
• ширина