Атрибут alt тега img. Что такое 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. При клике на картинку сайт самостоятельно определяет источник, с которого было взято изображение, и перенаправляет посетителя. А это, как вы понимаете, очень важно уметь делать в будущем.

Прописываем alt и title

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

Что представляют из себя теги? Говоря обобщенно, когда мы , поисковик видит, что картинка в статье отражает ее заголовок, тему. Атрибут направлен на роботов и прямо влияет на ранжирование сайта. А когда мы прописываем title, при наведении курсора на фотографию, появляется всплывающая подсказка с текстом. Если alt направлен на ботов систем, то title улучшает юзабилити (удобство использование сайта). Если мы продуманно прописываем title, мы лучше раскрываем тему, о которой говорится в статье.

Прописываем alt тег

Главная особенность данного атрибута - значительное влияние на поисковые системы и помощь в выведении статьи в топ Яндекса или Google . Считывая тег, поисковая машина понимает, что изображено на картинке. Если прописать alt грамотно, в соответствии с тематикой статьи, ее релевантность значительно вырастет. Приятный бонус – на сайт придут пользователи из раздела Поиск по картинкам. Оттого применение тега alt особенно выгодно интернет-магазинам.

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

Рассмотрим пример продуманной SEO оптимизации. Мы выбрали сайт о цветах. На скриншоте ниже виден хорошо заполненный атрибут title, речь о котором пойдет в отдельном абзаце.

При наведении курсора на изображение, появляется всплывающий текст: какие цветы дарить. Проверим, как прописан alt. Нажимаем сочетание клавиш Ctrl+U. Открывается код сайта. Теперь жмем Ctrl+F для поиска по странице. При наборе фразы какие цветы купить, видим правильно заполненный тег alt.

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

Как видите, оптимизация по тегам прекрасно работает. Достаточно со знанием дела прописать alt . Как это сделать?

• Краткость – сестра таланта. И хорошего SEO продвижения. Приемлемое количество слов – 3-5. Лимит тега составляет 250 символов.
• Наличие поисковой фразы или слова. Если у title фраза во всплывающем тексте больше влияет на пользователя, то у alt – напрямую на поисковик. Но не стоит перебарщивать с ключевыми словами, иначе робот определит это как спам.
• Как и в случае с title, прописывать alt нужно в соответствии с изображением на странице.

Как прописать title тег

Атрибут title не влияет на продвижение напрямую. Поисковые боты не учитывают его при ранжировании статьи или товара в поисковой выдаче. По сути, мы прописываем title по желанию. Но его роль на посетителей сайта высока, ибо улучшает удобство использования сайта. Когда вы наводите курсор на изображение в статье, появляется подсказка, раскрывающая суть изображения – собственно так и работает тег title.

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

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

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

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

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

Зачем нужен атрибут alt в картинках?

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

Как и где заполнять alt в WordPress?

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

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

Как видно, на панели присутствует поле Атрибут alt . По умолчанию, оно является пустым. Задавать текст в атрибуте необходимо длиною из 2-3 слов, причем они должны точно описывать что на фото. Чтобы вставить изображение на сайт, следует нажать кнопку Вставить в запись .

Зачем нужен атрибут title в картинках?

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

Как и где заполнять title в WordPress?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Использование картинок сделает сайт привлекательнее и поможет удержать посетителей на нем, но что более важно, из поиска по картинкам в Яндексе или Google к вам на сайт может прийти дополнительный трафик (при корректном использовании атрибутов Alt и Title тега ).

Что такое атрибут Alt для картинок

Атрибут Alt для картинок - это текст, описывающий изображение в html-теге . Он становится видимым в случае невозможности загрузки изображения. На месте незагруженной картинки будет показан текст (при заполненном атрибуте Alt).

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

А вот так будет выглядеть картинка с текстом «Стиральная машина Славда WS30T/ET» в атрибуте Alt тега :

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

Как правильно составить атрибут Alt для картинок

1. Оптимальное количество слов - 3-5, но длина текста тега не более 75-80 символов. Мы рекомендуем использовать краткую и сжатую, но содержательную информацию.
2. Обязательное условие - использование ключевых запросов.
3. Ключевые слова лучше употреблять в именительном падеже, чтобы облегчить поиск.
4. Избегайте спама: мы не рекомендуем перечислять большое количество ключей через запятую, как и в других тегах.
5. Необходимо, чтобы Alt относился к тексту страницы и описывал то, что изображено на картинке.

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

Кроме атрибута Alt следует также прописывать текст в атрибуте Title. Данный параметр задает вспомогательную информацию о картинке, когда пользователь наводит курсор на изображение:

В html-коде заполненный атрибут Title для картинок выглядит так:

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

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

1. Атрибут Title должен соответствовать изображению. Не следует писать в нем то, что не имеет к картинке никакого отношения.
2. Лучше использовать небольшой по длине Title для удобства пользователей - никто не захочет читать километровую подсказку к картинке.
3. Желательно наличие ключевых слов. Не стоит употреблять такие слова, как «фото», «картинка» и т.д., ведь и так понятно, что это такое.

Пример правильного заполнения атрибутов Alt и Title для тега

Рассмотрим на примере, как можно прописать текст в атрибутах Alt и Title для картинки. Для этого возьмем изображение с сайта строительной компании.

При составлении Alt необходимо сделать акцент на то, что вы продаете/предлагаете. Для картинки из нашего примера будет предпочтительнее составить альт «Строительство дома из бревна», а не просто «дом» или «строительство».

Атрибут Title для данного изображения можно немного видоизменить и составить так: «Строительство бревенчатого дома».

Трудности при заполнении Alt и Title

Правильно заполненные атрибуты Alt и Title к картинкам помогут в поисковой оптимизации сайта. Но не стоит забывать и про другие аспекты оптимизации картинок , такие как «вес», качество и название изображений. Если у вас нет времени на составление атрибутов Alt и Title, мы можем помочь вам и выполнить эту работу за вас.