Что писать в атрибуте alt. Нужно ли прописывать в этих атрибутах ключевые слова? Title и alt должны быть одинаковы

На сегодняшний день изображениям среди всего веб-контента отводится довольно большое место. Однако не все пользователи оптимизируют их для лучшего ранжирования всего сайта в целом. 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 имеет одно преимущество — он помогает поисковым системам находить изображения на Вашем сайте и отображать их в результатах поиска по картинкам. При этом сайт получает дополнительный трафик из поисковиков. Еще одно преимущество обоих атрибутов — улучшение доступности сайта для людей с особыми потребностями.

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

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

<A HREF = "http://www.yoursite.com" title = "заголовок вашей страницы" alt = "заголовок вашей страницы"> заголовок вашей страницы

На вымышленном примере рассмотрим, как реально применяются ат - трибуты title и alt для ссылки на, скажем, e-book, предлагаемую для скачивания со страницы сайта "Основы ипотечного кредитования" :

="/downloads/skachat-besplatno.html" target="_blank" title = "Любо - знательный читатель найдет здесь информацию о том, как формируется процентная ставка по кредиту, узнает разницу между плавающей и фиксированной процентами, получит представление о том, как рассчитать сумму кредита, которую он, как заемщик, может позволить себя занять и много чего другого." alt = "Как выбрать ипотечный кредит, наиболее полно отвечающий ВАШИМ целям и возможностям">Как выбрать ипотечный кредит, наиболее полно отвечающий ВАШИМ целям и возможностям

HTML код для изображения :

<IMG SCR ="/images/seo/alt-and-title-attributes.gif" title ="Атрибуты ALT и TITLE тега IMG" alt ="Атрибуты ALT и TITLE тега IMG" />

Атрибуты ALT и TITLE тега IMG

Несмотря на то, что использование при оптимизации изображений атрибуто в title и alt - это простой способ поднять позиции сайта в поисковых системах, многие вебмастера не в полной мере применяют их, а то и вовсе игнорируют. Некоторые их путают и не понимают, какая разница между title и alt . Следует отметить, что частенько title и alt по ошибке именуют тегами, хотя это атрибуты тега img (от слова “image”), а не отдельные теги.

HTML тег img применяют для отображения на страницах сайта изображений (картинок) в графическом формате GIF, JPEG или PNG . При необходимости, картинку можно сделать гипер-ссылкой, заключив тег img в контейнер . Атрибут alt передает описание изображения для браузеров при отключенной графике. Если данный атрибут не будет прописан, то пользователи увидят пустую икону вместо изображения, а если alt прописан, то будет показано его текстовое содержание. Атрибут alt сильнее всего влияет на ранжирование изображений поисковиками.

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

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

Поисковые системы учитывают не весь текст, заключенный в атрибут alt : Google, к примеру, показывает только первые 15-17 слов, а Яндекс чуть больше – до 28 слов. В любом случае, этого количества слов вполне достаточно, чтобы составить вразумительный контекст.

Поисковые системы акцентируют основное внимание на тексте, относящемся к изображению . Особенно к тому, что написано непосредственно под ним, воспринимая этот текст как название изображения. Поэтому, название должно полностью копировать содержание соответствующего атрибута alt и его следует размещать в том же абзаце < p> , ячейке таблицы < td> или теге

, что и картинка .

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

ОПТИМИЗАЦИЯ ИЗОБРАЖЕНИЙ

Информацию о изображениях передает атрибут “alt”

Изображения часто кажутся одним из самых простых элементов сайта, но их использование также можно оптимизировать. Каждому изображению соответствует имя файла и атрибут “alt”. Оба эти элемента полезны. Атрибут “alt” позволяет ввести текст, который будет отображаться, если изображение по какой-либо причине невозможно показать (1).

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

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

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

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

Вместо того, чтобы хранить файлы изображений по разным директориям и субдиректориям на домене, следует собрать их все в одну папку (например, moyastranaotkrytok.ru/images/ ). Это упрощает путь к графическим файлам.

Используйте широко поддерживаемые типы файлов . Большинство браузеров поддерживают графику в формате JPEG, GIF, PNG, и BMP. Также неплохо если расширение файла совпадает с его типом.

ПРАКТИЧЕСКИЕ СОВЕТЫ

Пишите информативные анкоры. Анкорный текст должен содержать хотя бы краткую информацию о странице по ссылке. Не советуем:

  • использовать в качестве анкорного текста общие слова вроде “страница”, “статья”, или “кликните здесь”;
  • использовать анкорный текст, не имеющий никакого отношения к материалу по ссылке;
  • использовать URL страницы в качестве анкорного текста (хотя возможны исключения, например, если нужно прорекламировать новый адрес сайта).

Стремитесь к краткости. Ваша цель – короткий и информативный текст, обычно одна точная фраза. Не советуем:

  • писать длинный анкорный текст, например целое предложение или параграф.

Выделяйте ссылки. Сделайте анкорный текст ссылок визуально отличимым от обычного текста вашего сайта. Пользователя вводят в заблуждение малозаметные ссылки или ссылки, на которые он может нажать случайно. Не советуем:

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

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

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


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

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

    Это полезный инструмент для SEO. Поисковые системы не умеют распознавать изображения и реагируют исключительно на слова. Добавляя к картинке alt-текст, вы делаете ее «заметной» для Яндекса или Google, и в результате ваш сайт начинает подниматься в результатах поиска.

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


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

    Не будьте многословны . Добавляя alt-текст, постарайтесь уложиться максимум в 15 слов.

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

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

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

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

В добавить alt-текст очень просто. Вот инструкция.

Для Wix-сайта:

    Щелкните мышкой по изображению.

    Нажмите на иконку «Настройки».

    Добавьте alt-текст в поле «Тексты фото» - «Опишите картинку поисковикам».


Для блога на Wix:

    Откройте новый или уже написанный пост в редакторе блога.

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

Использование картинок сделает сайт привлекательнее и поможет удержать посетителей на нем, но что более важно, из поиска по картинкам в Яндексе или 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, мы можем помочь вам и выполнить эту работу за вас.

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

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

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

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

  1. «Фото №1» , или что-либо в этом духе. Так точно не стоит прописывать атрибут alt! Описывает картинку чисто технически и абсолютно не раскрывает ее содержание.
  2. «Маленький мальчик в шапочке» - такое описание с одной стороны хорошо описывает изображение, но с другой стороны не захватывает ни одного значимого запроса, что совершенно не подходит для коммерческих проектов. Да и инфо-сайтам я бы такого тоже не посоветовал. Скорее всего аудитория будет искать шапочку которую рекламирует маленький мальчик и запрос будет задан другим образом. При этом, милых мальчиков и девочек на фотосеты приглашают с целью повысить конверсию.
  3. «Шапка вязаная», «шапка детская» - такие запросы близки к теме. Пользователи действительно задают вопросы таким образом и Вы точно сможете привлечь целевую аудиторию и направить ее внимание на свой продукт. Однако, шапочек много. Даже на вашем сайте может быть раздел посвященный только детским шапочкам, поэтому лучше запрос несколько конкретизировать в угоду пользователям, которые точно знают чего хотят.
  4. «Вязаная шапочка компании Bizonoff» - данный вариант представляется оптимальным, так как точно отражает как изображенное на фотографии, так и в максимальной степени удовлетворяет запросам пользователей. Такой alt отражает название компании, слово «шапочка» отражает габаритные размеры изделия (по крайней мере намекает, что эти размеру не большие), а также каким образом выполнено приведенное изделие. Если на вашем интернет-магазине, landing page или просто информационном сайте существуют типовой продукт отличающийся цветом Вы можете отразить это в атрибуте alt – «вязаная шапочка компании Bizonoff коричневого цвета» .
  5. «Вязаная шапочка, детская шапка, детские шапочки отзывы, шапочка для ребенка» - Вы занимаетесь «душевным онанизмом» чем-то необъяснимым. Толку от такого длинномера не будет и в народе это называется переоптимизация. За такие вещи можно в худшем случае нарваться на санкции поисковиков. В лучшем санкций не будет, но и выхлопа от таких действий тоже.

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

  1. Длина текста в атрибуте alt должна составлять до 230-250 символов. При этом минимальная длина 3-4 слова. Это объясняется чисто практическими наблюдениями – очень тяжело написать alt, отражающий всю суть изображенного объемом менее 3х слов.
  2. Текст должен содержать ключевые запросы по которым пользователи смогут отыскать картинку. Важно понимать, что ключи в атрибуте alt и ключи страницы это разные вещи.
  3. Отсутствие спама. Очень важно! Не добавляйте слова «цена», «стоимость», «отзывы», «прайс» … Эти слова никак не характеризуют фото, если на изображении не представлен реальный скриншот ценников, прайсов и отзывов. Тогда конечно можно и нужно.
  4. На Вашем ресурсе всегда есть технические изображения - иконки, картинки, стрелочки, фоновые изображения и т.п. Для них советую в атрибут alt не писать ничего. Так вы покажете технический характер изображений. Некоторые люди умудряются туда вставлять ключевики страницы, но это не айс. Не связывайтесь с поисковыми роботами – они реально крутые ребята.

Несколько слов насчет атрибута title для изображений

Основываясь на собственных экспериментах в области продвижения можно с уверенностью сказать, что title учитывается только поисковым алгоритмом Яндекса и полностью игнорируется гуглом. Лично я использую title только для юзабилити. Если же говорить о том, что писать в title, то я вставляю в него тоже, что и в alt. Это объясняется тем, что написать что-то отличное от текста в альте просто очень и очень тяжело. Да и можно сказать незачем.