Атрибуты alt и title. Какие тексты использует робот для поиска изображений

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

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

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

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

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

Пустые атрибуты ALT и TITLE . Как правило, многие SEO оптимизаторы не заморачиваются по поводу этого тега. Да, возможно, если ваш сайт очень крупный имеет посещаемость 100000 в сутки заморачиваться не стоит, но если вы только раскручиваетесь и вам нужен первый трафик, то указать атрибуты все же стоит.

Не соответствие изображения и атрибутов. Допустим если на вашей картинке отображена BMW X5, а в атрибуте прописываете Audi A3, то не ждите что человек перейдет по вашей картинке на сайт.

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

Так же поисковые системы могут наложить на вас санкции, поэтому не увлекайтесь.

А как же нужно прописывать теги для картинок?

Краткое и понятное описание картинки. Как можно точнее опишите изображение и если ALT был создан автоматически перепроверьте все страницы.

Длина атрибута ограничена. Поисковые системы учитывают 3-4 слова (около 250 символов) что затрудняет описание картинки.

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

Например:

alt=”Ремонт компьютеров в Чебоксарах”

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

Карточка товара содержит много картинок

Как же разделять картинки одного и того же товара, если спамить нельзя и нужно прописывать все уникальное? Допустим “Сплит-система HYUNDAI H-AR6-07H” можно расписать так:

“Сплит-система HYUNDAI H-AR6-07H Вид 1”

“Сплит-система HYUNDAI H-AR6-07H Вид 2”

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

Размер изображения – чем больше разрешение картинки, тем лучше. В любом случае ее отображение можно подкорректировать благодаря атрибутам “width” и “height”. Но не стоит делать картинку слишком маленькой, в противном случае поисковые системы не будут учитывать изображение меньше 150 пикселей и будут считать ее за иконку.

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

Текст заголовка с ключевым словом

Дальнейшее описание

Уменьшение веса изображения. Размер картинки играет ключевую роль, ведь если она будет весить очень много, что даже будет тормозить скорость загрузки сайта это скажется на ранжировании всего сайта. Да-да бывало и такое!

Подпись под картинкой

Если на вашем сайте очень много картинок и почти нет текста, подпись картинкой будет полезна, поэтому именно с точки зрения SEO необходимо ее оптимизировать:

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

Например, у вас картинка динамиков Iphone 7.

В подписе укажите данный факт: “Звучание звука в Iphone 7 стало заметно лучше благодаря Lighting” Отношение Яндекса к атрибуту ALT

“Как поместить мою картинку на первое место?"

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

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

Ранжирование картинок в Google

Помимо вышеупомянутого ALT, вот что учитывает Google в ранжировании изображений.

Давайте пробежимся по главным факторам для Google.

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

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

А что по поводу атрибута Title

Google не упомянул, а Яндекс по минимуму атрибут Title. (Не путать с тегом ). Указать лишним точно не будет, только можно по тому что Title при наведении на картинку отображается и несет в себе смысл. В этом плане, как и с текстом под картинкой можно экспериментировать, указывать полезную информацию: различные факты, преимущества и так далее.

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

Вот и все. Задавайте вопросы в комментариях, кто что думает по поводу атрибутов ALT, TITLE. Как вы оформляете изображения?

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

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

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

Задать атрибут alt можно следующим образом:

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

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

Текст атрибута title тега img

Атрибут title предоставляет дополнительную информацию о картинке. Текст, заключенный в этом атрибуте, появляется при наведении курсора на картинку:

Задать атрибут title можно так:

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

Другие тексты

Кроме значений атрибутов alt и title при поиске по картинкам используются следующие тексты:

тексты ссылок на картинки с других страниц и с других сайтов;

прилегающий к картинке текст - расположенный на странице в непосредственной близости к картинке;

тексты и заголовки коротких документов, обрамляющих одиночную картинку;

имена файлов и скриптов картинок, в том числе с учетом транслитерации и упрощенного подстрочного перевода.

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

>> Оптимизация картинок | Атрибуты ALT и TITLE для описания изображений

Как правильно оптимизировать картинки для сайта.

Приветствую Вас, уважаемый читатель моего сайта!

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

Плюсы и минусы использования картинок на сайте:

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

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

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

И если Вы хотите чтобы Ваши картинки были незабываемые и красивые нужно использовать их по возможности в хорошем качестве.

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

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

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

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

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

Атрибуты alt и title в SEO-оптимизации изображений:

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

Атрибут ALT : Данный атрибут входит в язык html. Назначение его заключается в описании какого-то объекта с целью дать дополнительную информацию о данном объекте (в нашем случае изображений). Как данный атрибут работает? Работает он очень просто: Вы берете нужную картинку, которая находится у Вас на жестком диске или носителе (флэшка) и вставляете на нужную страницу сайта в нужное место.

Потом Вы берете, находите код данной картинки и прописываете туда такое значение alt=" Описание данной картинки с использованием ключевых слов " . Но описание не нужно делать слишком большим (максимально пару предложений) и тулить туда много ключевых слов, так как поисковые системы этого не любят, что в итоге может сказаться на Вашем сайте.

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

Атрибут TITLE: Данный атрибут title также входит в язык html. Назначение его такое же, как и атрибут alt, но с той разницей, что данное описание будет показываться пользователю сайта при наведении на картинку курсором. Данный атрибут не участвует в продвижении сайта, но он позволяет увеличивать поведенческий фактор, который также влияет на позицию сайта в поисковой системе. Пишется оно так title=" Описание картинки " . Поэтому оптимизация изображений играет тоже большую роль при продвижении сайта в поисковых системах.

Образец SEO-оптимизированной картинки с использованием атрибутов alt и title:

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

C атрибутом title (наведите на картинку курсором) title="Кот гимнаст" >

С атрибутом alt (без картинки) Обрацец кода данной картинки:

Без атрибута alt (без картинки) Образец кода данной картинки:

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

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

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

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

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

Кстати если Вы не знаете, как уменьшить качество картинки то воспользуйтесь программой Фотошоп. Для этого заходите в меню "Файл" и там выбираете пункт "Сохранить для Web и устройств".

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

Другие страницы сайта:

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

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

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

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

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

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

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

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

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

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

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

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

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

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