Тег alt для картинок пример

Время чтения: 7 минут Нет времени читать?

Тема сегодняшней статьи – SEO – оптимизация изображения с помощью атрибута ALT. Многие не знают, что при оптимизации данного атрибута вы повышаете вероятность посещения вашего сайта. Итак, более подробнее расскажу далее в статье:

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

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

Так же, как и Title и Description он учитывается поисковой системой

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также:  Gigabyte geforce gtx 970 gv n970wf3oc 4gd

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

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

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

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

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

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

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

Комментариев: 21 на “ Атрибут ALT ”

Следующая статья про титл будет?-)

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

Спасибо за помощь

Это бесполезная статья!

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

норм статейка, надо и про атрибут тайтл написать бы автору

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

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

Спасибо за замечание )
некоторые читатели путают эти два термина, поэтому и статья написана так, чтобы читатель мог найти эту статью и в ней ответ на свой главный вопрос – что такое alt и где применяется)

Здравствуйте. Спасибо Вам за статью. Извините, но я не совсем понял: атрибут Alt что вписывать в поле? Название заголовка статьи? Или-что? Подскажите пожалуйста. С уважением, пенсионер.

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

Подскажите пожалуйста, если на сайте много похожих картинок (допустим изображения интернет-магазина), то Альт тег для каждого изображение лучше указывать разный? Или можно одинаковый? Как это будет расцениваться поисковыми системами?

Да, лучше разный. Одинаковый тег Альт могут расценивать как переспам, особенно если в него вставлять только ключевую фразу.

Подскажите, пожалуйста, какие знаки препинания и спецсимволы можно использовать в альт для картинки? И можно ли цифры?

Можно ли, например, знак %?

Для описания в alt того, что изображено на картинке, обычно хватает нескольких слов (3-5), и знаки препинания обычно не нужны.
Если же вы хотите использовать спецсимволы "для красоты", визуальной составляющей, то ничего плохого, в этом нет.

Читайте также:  Что такое бэкап папки

Отличная статья! Тема раскрыта. Нашел то, что искал. Для меня оказалась полезной. Автору спасибо! Так держать 🙂

А если в каждой картинке в статье писать один и тот же альт прям слово в слово с точным вхождением ключа?
Это считается переспамом?

Да, считается, это делать крайне нежелательно. Атрибуты должны быть уникальные.

Привет
не подскажешь, можно ли использовать точку в alt?
когда alt="Текст. Текст"

Есть частные случаи, их стоит рассматривать отдельно. В статье описаны общие понятия.

Атрибуты alt и title в роли помощников по оптимизации

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

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

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

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

Если честно, атрибут title является далеко не обязательным элементом SEO-оптимизации. Основная цель его использования – давать подсказки пользователям насчет содержимого просматриваемого изображения. При наведении курсора на картинку выводится содержимое атрибута title в белом прямоугольнике.

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

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

  1. Не содержал информацию, по смыслу не соответствующую картинке. Иначе это будет вызывать отталкивающий эффект.
  2. Был не слишком длинным. Ограничений как таковых нет, но всплывающая подсказка в две–три строки явно будет портить впечатление.
  3. По возможности содержал одно из основных ключевых слов. Да, поисковики не зачтут этот дополнительный «прогиб». Но зато посетитель лишний раз убедится в релевантности просматриваемого материала его изначальному запросу в поисковой системе.
  4. Не дублировать заголовки на странице (основной title, H1, H2 и т. д.) и содержимое атрибута alt. 100%-й уникальности тут, конечно же, добиться невозможно. Но добавить разбавляющие слова вроде «фото» или «картинка» по силам каждому.

Важность и нюансы заполнения атрибута alt изображений

В отличие от атрибута title, по своей сути ориентированного на посетителей, заполненный атрибут alt у картинок более существенен для поискового продвижения.

Читайте также:  Как заряжать аккумулятор сотового телефона

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

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

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

    При отключении в браузере отображения графического контента (что по сути случается довольно редко).

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

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



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

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

  1. Как и название самого графического файла, атрибут alt для картинок должен по смыслу соответствовать их содержимому и быть релевантным обтекающему тексту.
  2. Длина текста не должна быть меньше 3–4 слов и длиннее 250 символов.
  3. Использовать ключевые слова можно, но не стоит перечислять в нем сразу несколько из них, так как поисковики посчитают это спамом и могут исключить из выдачи не только само изображение, но и всю страницу, на которой оно размещено.

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

Также можно взять ту же фразу, что и в атрибуте title (если она не очень длинная) и заменить употребленные там слова-разбавители (например, вместо «картинка» использовать «фото»).

  • Не употреблять слова вроде «купить», «оформить», «цена», если они напрямую не относятся к изображению (если это не прайс-лист, например).
  • Коротко подведем итоги

    Атрибут title:

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

    Заполненный атрибут alt изображений:

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

    Все вышеперечисленные моменты однозначно являются положительными. И поэтому выводы по поводу необходимости заполнения атрибутов alt и title Вы вполне сможете сделать сами.

    Благодарим за внимание. Ждем Ваших вопросов под этой статьей.