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

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

Оглавление

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

10 490 ₽

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

от 2390 ₽

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

Популярно

от 11 590 ₽/месяц

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

Популярно

1090 ₽

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

3090 ₽

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

Популярно

2490 ₽

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

3490 ₽

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

6890 ₽

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

Популярно

от 2390 ₽

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

1090 ₽

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

Популярно

от 1090 ₽

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

3190 ₽

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

1290 ₽

SEO Wiki

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

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

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

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

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

• из-за медленного соединения;
• из-за неправильного пути или имени файла в атрибуте 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 вводных глав бесплатно, и −40% на подписку в первую неделю.

Регистрация

Литература

• Рекомендации W3C по alt-текстам (англ.)
• Альтернативный текст в доступности (англ.)
• Использование ИИ для генерации alt-текста на изображениях (англ.)
• Accessibility: Images, «Alt» tags, and the «Out Loud» Experience (англ.)

alt

• Популярные
• Последние
• Без ответа

• Alt к изображениям товаров

  Добрый вечер! Подскажите пожалуйста возможно ли добавить атрибут Alt ко всем изображениям товаров автоматизированно?пологаясь на наименование товара.

   

• Добавить TITLE для страницы и ALT для фото

  В последнее время Яндекс ругается на страницы фото товара ПРИМЕР /wa-data/public/shop/products/53/28/2853/images/5745/5745. 970.jpgХотелось бы добавить к ним:вместо <title>5745.970.jpg (970×970)</title> что бы было…

• В Промо карточках отсутствует тег alt

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

• org/Question»>

  ALT к картинке

  Подскажите, как сделать чтобы alt картинки был такой, как в написании под картинками в админке?А то сейчас стоит везде одинаковый ALT — название товара

• Атрибут alt для изображений

  Прочитал в одном SEO учебники :Про­пи­сы­вайте зна­че­ние атри­бута ALT для изоб­ра­же­ний в фор­мате gifНо заглянув в код сайта увидел, что у изображений атрибут alt уже прописан заголовком страницы. …

• alt тег в блоге

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

• org/Question»>

  Вывод характеристики в alt изображения Есть решение

  Есть вот такой кусок кода,выводящий нужную характеристику {if $product.features}{foreach $product.features as $f_code => $tsvet}{if !in_array($f_code, [‘tsvet’])}{continue}{/if}{if $features[$f_code].type == ‘divider’}…

новые проверки в Аудите сайта Serpstat

4895 14

Прочитать позже

Павел Алексеев

Product/Project Manager at Serpstat

За последнее время в модуле «Аудит сайта» вышло два глобальных обновления: Публичное API и Рендеринг JS. Но сегодня я хочу рассказать еще одну важную новость — мы увеличили количество проверок в Аудите и расширили настройки.

Теперь модуль стал еще более информативным и гибким. Ниже расскажу обо всем подробнее.

Содержание

• Новые проверки
• Новые настройки модуля
• Выводы

Мы доработали 3 новые проверки. С их помощью можно найти:

Изображения, которые содержат пустой атрибут alt.

Страницы с дублирующимся h2.

Страницы на которых используется тег meta refresh для редиректа.

Теперь пройдемся подробнее по каждой из них:

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

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

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

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

Новые настройки модуля

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

Возможность сканировать страницы, закрытые от индексации. Таким образом можно проверить даже те страницы, которые поисковый робот не будет сканировать. Чтобы активировать настройку, включите ее в разделе «Страницы» при запуске Аудита сайта.

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

Как не расходовать зря краулинговый бюджет

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

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

Хотите узнать, как найти и устранить ошибки на сайте с помощью Аудита сайта Serpstat?

Заказывайте бесплатную персональную демонстрацию сервиса, и наши специалисты вам все расскажут! 😉

Выводы

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

Чтобы быть в курсе всех новостей блога Serpstat, подписывайтесь рассылку. А также вступайте в чат любителей Серпстатить и подписывайтесь на наш канал в Telegram.

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами 😉

Оцените статью по 5-бальной шкале

5 из 5 на основе 6 оценок

Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Рекомендуемые статьи

Обновления Serpstat

Pavel Alekseev

Как найти ошибки на страницах с JavaScript: в Аудите сайта теперь доступен рендеринг JS

Обновления Serpstat

Pavel Alekseev

Как автоматизировать поиск ошибок на сайте: Аудит сайта теперь доступен в API Serpstat

Обновления Serpstat

Анастасия Сотула

Инструмент «Пересечение доноров»: найдите новые точки роста для линкбилдинга

Кейсы, лайфхаки, исследования и полезные статьи

Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе. Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити 🙂

Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.

Поделитесь статьей с вашими друзьями

Вы уверены?

Спасибо, мы сохранили ваши новые настройки рассылок.

Сообщить об ошибке

Отменить

Что такое Alt тег? Оптимизируем изображения для поиска по картинкам

Если вы похожи на большинство интернет-фанатов, то в прошлом вы выполняли поиск картинок Google бесчисленное количество раз. Но знаете ли вы, как Google сопоставляет изображения с ключевыми словами?

Один из способов сделать это — с помощью альтернативного текста.

Если вы не знакомы с альтернативным текстом, вы ограничиваете охват поиском картинок Google. На самом деле вы ограничиваете свой охват и при стандартном поиске Google.

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

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

Что вы узнаете:

• Определение альтернативного текста
• Как выглядит альтернативный текст
• Какими еще способами это хорошо для
• Как добавить альтернативный текст
• Использование WordPress для добавления альтернативных тегов
• Как оптимизировать ваш альтернативный текст

Alt тег определение

Прежде чем мы озвучим понятие «альтернативный текст», нам нужно совершить путешествие по переулку памяти. Давайте вернемся к «старым временам» веб-браузеров.

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

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

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

Перенесемся в настоящее время. Мы больше не беспокоимся о времени загрузки изображения, не так ли?

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

Как это выглядит

Альтернативный текст в HTML. Вот как это выглядит:

<img src = ”/ img / image-of-kitty.png” alt = ”Котенок, играющий с игрушечной мышью.” />

Это довольно стандартный тег изображения. Веб-браузер покажет изображение по относительному URL-адресу https://www.site.ru/img/image-of-kitty.png, потому что это указано в атрибуте src.

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

Пример написания альтернативного текста

Пример заполнения тега alt в картинке

Хороший alt тег: Девушка на эскалаторе

Более подходящий alt тег: девушка, идущая по эскалатору

Лучший alt тег: девушка в короткой юбке поднимается вверх по эскалатору

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

Не только для поиска изображений

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

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

Черт возьми, вы можете даже найти несколько пожизненных клиентов с помощью поиска картинок.

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

Но это еще не все. Иногда Google показывает совпадения изображений в стандартных результатах.

Зайдите в Google прямо сейчас и поищите «дизайн шаблона электронной почты».

По этому запросу есть кое-что интересное — блок «Картинки по запросу…»

Элемент Картинки по запросу в выдаче Google

Что они делают с «нормальными» результатами поиска? Google определил, что они релевантны, основываясь на ключевом слове.

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

Вопрос: не было бы замечательно, если бы некоторые изображения на вашем сайте попали в самый верх страницы результатов поиска? Конечно, это круто.

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

Добавление альтернативного текста

Как мы уже видели, атрибут alt является частью HTML-тега <img>. Это означает, что все, что вам нужно сделать, это добавить alt = ”…” в тег, и все готово.

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

К счастью, есть способ добавить альтернативный текст без редактирования HTML.

WordPress на помощь

Возможно, вы используете WordPress в качестве системы управления контентом (CMS). Если это так, добавление альтернативного текста совсем несложно.

К этому моменту вы уже должны знать, как загружать изображения в WordPress. Вы можете добавить свой альтернативный текст во время загрузки или позже.

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

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

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

Это все, что вам нужно сделать. И это намного проще, чем редактировать HTML.

Оптимизация Alt-тегов

Теперь, когда вы знаете, как добавить альтернативный текст, возникает вопрос: какой текст вы должны вставить туда?

Для начала применяются стандартные правила. Не пытайтесь заполнить ваши alt-теги различными ключевыми словами. Это не принесет вам пользы с поисковыми системами.

Это не значит, что вы не должны указывать ключевые слова в теге alt. На самом деле, вы должны включить туда значимые ключевые слова.

Просто не действуйте как спамер

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

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

Теперь более конкретно. Если у вас есть фотография, на которой Кейн бросает пас, не добавляйте «пас в хоккее» в альтернативный текст.

Вместо этого поместите что-то вроде «Хоккеист Кейн бросает пас в одно касание в полуфинале Кубка Стэнли 2020». Такой контент дает поисковым системам гораздо больше возможностей для работы.

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

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

Вместо этого дайте этому контекст. «Генеральный директор ООО Вайдбиз Сергей Мухин отвечает на вопрос о SEO у аудитории» — это гораздо лучший вариант.

Почему? Потому что статья с этой картинкой, вероятно, о SEO. Если вы хотите, чтобы люди нашли эту статью с помощью поиска картинок, сообщите поисковым системам, что SEO имеет отношение к картине.

Напоследок

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

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

что такое alt-текст и почему он так важен

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

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

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

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

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

Содержание статьи

Что такое alt-текст?

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

3 ошибки при создании atl-текстов

1. Просто набор ключевых слов
2. Номер, дата или другая техническая информация
3. Не учитывает контекст

Как писать эффективные альтернативные тексты

Заключение

Что такое alt-текст?

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

Вот, как выглядит данный атрибут для поисковиков:

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

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

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

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

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

3 ошибки при создании atl-текстов

1. Просто набор ключевых слов

Это пример не самого удачного альтернативного текста: 

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

Приведенный выше альтернативный текст сильно затрудняет для Googlе понимание того, как изображение соотносится с остальной частью страницы или статьи, в которой оно размещено, делая невозможным ранжирование изображения для релевантных низкочастотных запросов (longtail keywords), которые, как правило, вводятся наиболее заинтересованными в поиске пользователями.

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

«Сделать landing page за 25 минут бесплатно и с гарантией результата»

2. Номер, дата или другая техническая информация  

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

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

Вот еще один пример: 

На этом сайте все изображения имеют один и тот же alt-текст.

3. Не учитывает контекст

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

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

Для статьи о дизайне лендингов:

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

Для страницы, посвященной фрилансерским услугам по созданию лендингов:

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

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

Читайте также: 20 базовых HTML & CSS приемов для маркетологов

Как писать эффективные альтернативные тексты

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

1. Описывая изображение, будьте конкретны. Можете задействовать контекст.
2. Каким бы длинным ни был альтернативный текст, инструменты чтения с экрана обычно озвучивают только первые 125 символов, обрывая текст буквально на полуслове.
3. Не стоит начинать описание со слов «Это изображение…» или «На этом изображении…». Переходите к описанию сразу. Скринридеры (и Google с Яндексом, если на то пошло) поймут, что перед ними изображение, исходя из HTML-кода страницы.
4. Используйте ключевые слова, но не переусердствуйте с ними. В тег стоит включить ключевое слово только в том случае, если есть возможность органично его вписать. Если это трудно или невозможно, попробуйте заменить этот «ключ» близкими по смыслу словами, либо использовать только самые важные термины в низкочастотных запросах. Например, если в теге head статьи ключевым словом является фраза «как генерировать лиды», в альтернативном тексте вы можете использовать словосочетание «генерация лидов», поскольку прямое вхождение исходной фразы затруднительно;
5. Не впихивайте одинаковые слова в alt-текст каждого изображения. Если пост или лендинг содержит серию изображений, включите в их описание только в то, которое, на ваш взгляд, лучше всех раскрывает каждое из них.

Заключение

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

Обратите внимание на то, как изменится объем поступающего трафика на те страницы, где вы изменили или добавили описания.

Чем больше изображений вы оптимизируете, тем более заметным будет результат.

Высоких вам конверсий! 

По материалам: blog.hubspot.com

19-10-2018

HTML-теги Img Alt для передовой практики SEO

В HTML-атрибутах

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше

Атрибут

HTML-теги Руководство по добавлению изображений в ваши веб-документы

Что делает HTML-теги Img Alt для передовой практики SEO - поисковые системы любят их ?

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

Содержание

• 1 Пример кода
• 2 Альтевой текст
• 3 Альт Описание — Пользователи
• 4 Альте 7 Все атрибуты элемента img
• 8 Поддержка браузером alt

Пример кода

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

• Без специальных символов. Сюда входят символы UTF-8, такие как незакодированные фигурные кавычки, а также сущности символов HTML.
• Нет HTML.
• Не более 125 символов.
• Просто определите картинку. Не нужно ссылаться на него («Это изображение…»).

     jpg" alt="Фламинго происходит от испанского фламенко, "цвета пламени", в свою очередь происходящего от провансальского flamenc от flama «пламя» и германоподобного суффикса -ing, с возможным влиянием таких слов, как Fleming. Аналогичная этимология имеет латинский греческий термин Phoenicopterus (от греческого: ????????????? phoinikopteros ), буквально «кроваво-красные перья».>    

Описание

Атрибут alt предоставляет «альтернативное описание» для изображения. Это описание обычно не предоставляется пользователю, но будет отображаться при определенных обстоятельствах:

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

Вот пример отображения текста alt вместо неудачного изображения (изображение src ни на что не указывает).

Описание

Описание alt также очень полезно для поисковых систем. Поисковым системам трудно понять, что на самом деле представляет собой содержание изображения. У них это получается лучше, но определить тему фото или картинки крайне сложно. Таким образом, поисковые системы полагаются на описание alt , чтобы узнать, что на самом деле изображено на картинке (они также используют имя файла и другие атрибуты). Кроме того, в поиске картинок Google 9Описание 0014 alt фактически показывается пользователю. «Американский фламинго» — это альтернативный текст изображения фламинго. Если вы заботитесь о SEO, вы должны убедиться, что у вас есть соответствующие описания alt для всех ваших изображений.

Узнайте больше о

Что еще нужно знать о alt ? Много. Мы составили этот учебник по Правилам Alt, чтобы помочь вам.

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

All Attributes of

Attribute name	Values ​​	Notes
height		Identifies the intrinsic height of an image file, in CSS pixels.
srcset	список источников	Определяет несколько размеров одного и того же изображения, позволяя браузеру выбрать соответствующий источник изображения.
выравнивание	вправо влево	Ранее использовался для указания выравнивания и размещения изображения относительно окружающего текста. Он устарел и не должен использоваться.
alt	текст	Определяет альтернативный текст, который может быть представлен вместо изображения.
граница	пикселей	Ранее использовалась для определения границы элемента изображения. Он устарел и больше не должен использоваться.
элементы управления		Переключаемые элементы управления медиаплеером при использовании в сочетании с атрибутом dynsrc. Оба атрибута теперь устарели.
dynsrc
hspace		Ранее использовался для добавления горизонтального пространства с обеих сторон изображения. Сейчас это устарело.
ismap		Идентифицирует изображение как карту изображения на стороне сервера. При нажатии на содержащую якорную ссылку координаты мыши будут включены в запрос.
longdesc		Определяет URL-адрес, по которому можно найти дополнительную информацию об изображении. Он был выписан из спецификации HTML5, но его статус не так ясен, как другие устаревшие функции.
Цикл		Ранее использовался для указания количества раз, которое должно воспроизводиться видео, при использовании в сочетании с атрибутом dynsource. Оба атрибута устарели.
низкий уровень		Указана версия изображения меньшего размера или более низкого качества.
имя		Идентифицировал изображение или предоставил дополнительную информацию о нем. Устарело в HTML 4.0 в пользу других атрибутов.
naturalsizeflag		Этот атрибут ничего не делает. Когда-то он использовался проприетарной программной системой.
nosave		Предназначался для предотвращения загрузки изображений пользователями. Никогда не был частью спецификации HTML и широко не применялся.
запуск	открытие файла наведение курсора мыши
подавление		Используется ныне несуществующим браузером Netscape для подавления отображения изображения до завершения загрузки изображения.
usemap		Указывает карту изображения на стороне клиента, которая будет использоваться с изображением.
ширина		Указывает внутреннюю ширину изображения в пикселях CSS.
источник		Указывает URL-адрес отображаемого изображения.

Адам Вуд

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

Browser Support for alt

Search HTML. com

Самый популярный

• HTML-тег
• Шаблон ввода: используйте его для добавления базовой проверки данных в HTML5
• Тип кнопки в HTML: вот почему вы всегда должны объявлять его Руководство
• Как использовать для создания ссылок и открытия их там, где вы хотите!

Массовая автоматическая оптимизация замещающего текста изображения (тег Alt, атрибут Alt) (оптимизация изображений) + Woocommerce — плагин WordPress

Краткий обзор