Прописываем alt и title. Атрибуты Alt и Title для картинок: искусство составления Что такое тег alt

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

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

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

Информацию о изображениях передает атрибут “alt” Изображения часто кажутся одним из самых простых элементов сайта, но их использование также можно оптимизировать. Каждому изображению соответствует имя файла и атрибут “alt”. Оба эти элемента полезны. Атрибут “alt” позволяет ввести текст, который будет отображаться, если изображение по какой-либо причине невозможно показать (1). Зачем используется этот атрибут? Если пользователь просматривает ваш сайт через браузер с отключенными картинками или использует программу чтения текста с экрана, alt-текст будет служить описанием изображения. Alt-текст также используется в графических ссылках. В таком случае он обрабатывается поисковыми системами как анкорный текст ссылки. Несмотря на это, мы не советуем использовать большое количество графических ссылок для навигации по вашему сайту, так как текстовые ссылки справляются с этой ролью не хуже. Ну и, наконец, грамотное описание изображения в теге alt вместе с информативным именем файла помогают системам поиска картинок, таким как Поиск Картинок Google, проиндекси- ровать изображения с вашего сайта. Файлы следует хранить в отдельных директориях, и сохранять их в общедоступных форматах Вместо того, чтобы хранить файлы изображений по разным директориям и субдиректориям на домене, следует собрать их все в одну папку (например, moyastranaotkrytok.ru/images/ ). Это упрощает путь к графическим файлам. Используйте широко поддерживаемые типы файлов . Большинство браузеров поддерживают графику в формате JPEG, GIF, PNG, и BMP. Также неплохо если расширение файла совпадает с его типом.

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

Пишите информативные анкоры. Анкорный текст должен содержать хотя бы краткую информацию о странице по ссылке. Не советуем: использовать в качестве анкорного текста общие слова вроде “страница”, “статья”, или “кликните здесь”; использовать анкорный текст, не имеющий никакого отношения к материалу по ссылке; использовать URL страницы в качестве анкорного текста (хотя возможны исключения, например, если нужно прорекламировать новый адрес сайта). Стремитесь к краткости. Ваша цель – короткий и информативный текст, обычно одна точная фраза. Не советуем: писать длинный анкорный текст, например целое предложение или параграф. Выделяйте ссылки. Сделайте анкорный текст ссылок визуально отличимым от обычного текста вашего сайта. Пользователя вводят в заблуждение малозаметные ссылки или ссылки, на которые он может нажать случайно. Не советуем: использовать для ссылок стиль CSS, визуально неотличимый от обычного текста страницы. Не забывайте про анкорный текст для внутренних ссылок. Возможно, вы уделяете внимание прежде всего ссылкам, указывающим на другие веб-сайты, но внутренние ссылки не менее важны, так как они помогают Google лучше сканировать ваш сайт. Не советуем: наполнять анкорный текст большим количеством ключевых слов; ставить лишние ссылки, не имеющие навигационной ценности для пользователей.

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

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

1. Баннер будет висеть у Вас на блоге до тех пор, пока не кончится срок размещения баннера.
2. Нет ротации, т.е. возможности показывать другие баннеры в ротации с баннером рекламодателя.

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

Теперь перейдем к настройке плагина AdRotate.

Скачиваем и устанавливаем на наш WordPress-блог AdRotate и переходим к созданию рекламной ротации баннеров.

Плагин предназначен для вставки ротации нескольких рекламных баннеров. Каждая группа должна иметь баннеры одинаковых размеров, например в группе 1 будет ротация баннеров 468х60, а в группе 2 — 125х125.

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

Как добавить баннер?

Ищите в админпанели AdRotate, заходите в пункт Manage Ads и кликаете на Add New , чтобы добавить в ротатор новый баннер.

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

В поле AdCode следует указать код вашего баннера, к примеру:

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

Для каждого баннера можно установить приоритет показа (Weight ), т.е. насколько больше(меньше) остальных будет показываться данный баннер. Приоритет от 2 до 10.

В пунктах Display From … Until можно указать период показа данного баннера. После этого в пункте Activate выбирайте Yes, this ad will be used , чтобы включить баннер. Это удобно, если на Вашем сайте кто-то купил рекламное место, допустим, на месяц.

Теперь нужно перейти в Manage Groups , чтобы создать группу ротации ваших баннеров. Здесь указываем имя для группы баннеров, и затем выберите галочкой баннеры, которые будут входить в данную группу.
Жмем на Save .

Чтобы добавить ротацию в пост, или на страницу, можно использовать шорткод.

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

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

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

Плюсы и минусы применения изображений на web-проекте:

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

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

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

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

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

2.Минусы.

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

Заливка некачественных в ужасном состоянии картинок;
Использование фотографий вообще не по теме;
Присутствие чересчур большого числа картинок, что придает лишний вес страничке и удлиняет ее загрузку (даже фон шаблона);
Отсутствие оптимизации, т.е. изображения атрибуты alt и title не имеют и «не заточены» под определенные ключевые запросы.

Роль атрибутов title и alt в SEO-оптимизации картинок

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

Несмотря на то, что это простой метод поднять позиции web-проекта в поисковиках, большинство web-мастеров в полном объеме их не используют, а то и вообще их игнорируют. Некоторые вообще их путают, и не осознают какая между ними разница. Также бывает, что данные атрибуты именуют тегами, а ведь это атрибуты тега img (от слова «image»), но ни как не отдельные теги, запомните это!

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

1. Атрибут ALT.

Этот атрибут входит в HTML-язык. Его предназначение состоит в том, чтобы описать какой-либо объект с целью подачи дополнительной информации об этом объекте (в нашем случае картинок). Т.е. атрибут alt для картинок передает ее описание для браузеров при отключенной графике. Если вы не пропишете этот атрибут, то посетитель увидит пустую иконку вместо желаемой картинки, если же прописать атрибут alt, то показывается его текст. Этот атрибут, кстати, сильнее всего оказывает влияние на ранжирование картинок ботами поисковых систем.
Как этот атрибут работает? Да очень просто: берете выбранную картинку, которую вы уже скачали себе на компьютер и заливаете на необходимую страничку вашего сайта в нужном месте. Затем находите HTML-код этой картинки и прописываете в нем следующее значение: alt=”Описываете кратко картинку и вписываете ключевые слова”. Описание нужно сделать как можно кратким (максимум парочка предложений) и вписывать в него много ключевиков также не нужно, поскольку, поисковые системы к этому относятся отрицательно, и это может негативно отразиться на вашем проекте.

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

2. Атрибут TITLE

Этот атрибут title то же входит в HTML-язык. Его предназначение в принципе такое же, как и атрибута alt, но разница в том, что ваше описание будет видеть посетитель, если наведет курсор на выбранную картинку. Этот атрибут не оказывает влияния на раскрутку и продвижение сайта, но он может повлиять на поведенческий фактор, который влияет на ранжирование web-проекта. Пишем его таким образом: title=”Описываете картинку”. Вот и все. Добавим, что оптимизация изображения, атрибуты его, все это играет существенную роль в раскрутке сайтов в поисковиках.
Далее приведем примеры SEO-оптимизированных картинок с применением атрибутов title и alt

Вы видите образцы оптимизированных картинок с данными атрибутами:

Заполнение атрибутов title и alt пользователю значительно облегчено в CMS WordPress. При заливке изображения на сайт появляется специальный загрузчик и специальное окошко для оптимизации:

Заголовок (не путать с title) заполняется автоматически, а вот атрибут alt придется заполнить самостоятельно. Далее, непосредственно после вставки картинки на сайт, ее нужно отредактировать. Кликните по ней в визуальном редакторе, и вы попадете в окошко редактора:

Как видите, атрибут alt можно прописать и здесь, но он уже заполнен (это еще важно для картинки, которую вы будете использовать в качестве миниатюры). Вот именно здесь и заполняете атрибут title , прописывая в нем ключевые запросы, идентичные тем, что вы указываете в плагине: All In SEO Pack. После этого, сохраняете и все – ваша картинка оптимизирована.

В каком качестве необходимо использовать картинки на сайте

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

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

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

Так же, для уменьшения веса картинки можно использовать программу Фотошоп. В программе заходите в меню «Файл»→ «Сохранить для web и устройств» — вот и все.

Улучшайте оптимизацию вашего проекта, вместе с грамотной у вас будет хороший !