Оптимизация картинок и ссылок атрибутами ALT и TITLE

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

Атрибуты ALT и TITLE - это неотъемлемые HTML элементы грамотно оптимизированной страницы. Благодаря картинкам можно повысить посещаемость своего ресурса на 5-10%, а оптимизированные ссылки улучшают юзабилити сайта.

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

Чем отличается ALT от TITLE

Атрибут ALT (альт) – это альтернативный текст, который отображает браузер, если по тем или иным причинам он не может загрузить картинку (если картинка была удалена с сервера или у посетителя отключен показ изображений в браузере). Поисковые боты пока не научились «читать» изображения, но благодаря альту вы сможете подсказать роботу, что это за картинка, какое у нее название и что на ней написано. Раньше по стандартам W3C наличие этого атрибута было обязательным.

Атрибут TITLE (тайтл) – это дополнительная информация о картинке или ссылке. Его основное предназначение помочь посетителю получить более подробное описание элемента. Значение этого атрибута показывается при наведении мышки на объект. Не путайте атрибут TITLE с одноименным тегом заголовка страницы!

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

Оптимизация картинок

Чтобы оптимизировать изображение, достаточно прописать к нему эти атрибуты в HTML коде:

200?'200px':'' (this.scrollHeight 5) 'px');"><img src="http://seo-for-ucoz.com/load/vnutrennjaja_optimizacija/optimizacija_kartinok_i_ssylok/http&%2358;//%D0%BC%D0%BE%D0%B9-%D1%81%D0%B0%D0%B9%D1%82.ru/kartinka.jpg" alt="Альтернативный текст картинки" title="Описание картинки"/>

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

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

1. Альт больше предназначен для поисковых роботов, а тайтл – для посетителей.
2. Альт – это «текст на замену», а тайтл – это описание. Соответственно, будет намного правильнее указать в значении ALT краткое название (2-3 слова), а в описании рассказать о нем более подробно (5-10 слов).

Как оптимизировать изображения в uCoz?

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

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

Например, переменная IMAGE1 отвечает за вывод всей конструкции:

где $IMG_URL1$ - это ссылка на картинку, сформированную автоматически при загрузке изображения с помощью кнопки «Обзор» во время добавления материала или статической страницы.

Так как вы не сможете «влезть» в эту конструкцию и добавить свои атрибуты ALT и TITLE, я рекомендую отказаться от использования такого способа вывода изображений.

Для альтернативной замены, лучше отдельно использовать переменную $IMG_URL1$, и вставить ее в код шаблона «вручную» (самостоятельно прописать всю конструкцию в шаблон страницы – это делается один раз и навсегда). Тем самым вы «освободите» себя от постоянной «ручной» вставки переменной IMAGE1 в каждый материал своего сайта, а так же сможете прописать уникальные атрибуты ALT и TITLE.

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

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

ALT = «Постер к фильму $ENTRY_TITLE$», где $ENTRY_TITLE$ - это название материала (фильма).

TITLE = «Это постер к фильму $ENTRY_TITLE$, который входит в категорию $CAT_NAME$», где $CAT_NAME$ - это название категории.

Второй способ, это прописывать альты и тайтлы вручную при добавлении материалов. Для этого необходимо активировать «Дополнительные поля 1 и 2», затем переименовать их в ALT и TITLE. В коде шаблона вставить конструкцию:

200?'200px':'' (this.scrollHeight 5) 'px');"><img src="http://seo-for-ucoz.com/load/vnutrennjaja_optimizacija/optimizacija_kartinok_i_ssylok/$IMG_URL1$" alt="OTHER1" title="OTHER2">

где OTHER1 и OTHER2 – дополнительные поля 1 и 2.

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

Оптимизация ссылок

При оптимизации ссылок используется только один атрибут – TITLE.

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

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

• Никогда не повторяйте в тайтле ссылки ее анкор. Они должны различаться – это очень важное правило!
• Делайте информативные тайтлы, чтобы посетитель примерно понимал «что, куда, зачем и почему».
• Тайтлы можно делать рекламными. Чтобы при прочтении описания ссылки, посетитель захотел кликнуть по ней.
• Прописывайте тайтлы ко всем ссылкам на сайте.
• Описания ссылок должны быть читабельными и легко восприниматься (например, «Эта ссылка ведет в Боевики» - неправильно с точки зрения синтаксиса русского языка, лучше написать так – «Смотреть фильмы из категории Боевики»)
• Как анкоры, так и описания должны быть тематическими, а ссылки должны вести на тематические страницы.
• Используйте в тайтлах ключевые слова.

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

Как оптимизировать ссылки в uCoz?

Ссылки бывают статическими (стандартная конструкция <a href="ссылка">) и динамическими (когда в конструкцию внесена переменная <a href="переменная">, которая может меняться).

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

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

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

Оптимизация ссылки-картинки

Хочется упомянуть еще об одном виде ссылок – это ссылки-картинки. Это когда при совершении клика по изображению посетитель переходит на другую страницу. Такие «кликабельные» картинки тоже подлежат оптимизации. Вот только как использовать альты и тайтлы в этой конструкции?

Главная роль этой картинки – переместить посетителя по заключенной в нее ссылке (как-никак, ссылки имеют больший вес, нежели изображения), поэтому в первую очередь нужно установить тайтл для ссылки (помните – альт в ссылку не вставляется!).

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

Нет! В картинке будет только альт, который при отсутствии изображения будет служить анкором для ссылки!

Вот и все! Ссылка-картинка оптимизирована! Установите себе подобную конструкцию и отключите в браузере показ изображений. Вы увидите, что вместо картинки будет отображаться простая анкорная ссылка, при наведении на которую будет показываться ее описание.

Общие рекомендации по оптимизации картинок и ссылок:

1. Оптимизируйте все ссылки и все картинки на своем сайте (самые мелкие картинки, которые участвуют в качестве служебных участков шаблона, можно не оптимизировать).
2. Обязательно проводите оптимизацию в информерах и ротаторах баннеров.
3. Если у вас есть рекламные баннеры, то к ним тоже нужно указать ALT и TITLE.
4. По возможности используйте полные URL адреса (с http://)
5. Текст альта или тайтла должен соответствовать объекту.
6. Не нужно в качестве описаний делать перечисление ключевых слов через запятую. Это должен быть осмысленный текст с вхождением низкочастотных «ключей».
7. Не нужно на одной странице использовать повторения TITLE и ALT (каждая ссылка и каждая картинка должна быть уникальная).
8. Обращайте внимание на текст, размещенный возле картинки. Он должен соответствовать теме изображения. Иногда даже рекомендуется поставить краткое описание под картинкой (Google это любит!)

Оптимизация ссылок и изображений – это довольно долгий процесс, требующий особую внимательность. Вам придется «читать» HTML код каждого шаблона модуля и искать в нем тэги <a> и <img>. Пользуясь анализом семантического ядра страницы, вы можете контролировать, чтобы максимальное число картинок были закрыты тэгами alt. При просмотре страницы своего сайта в браузере, наводите мышкой на каждую ссылку, чтобы убедится в присутствии ее описания.

Порядок вывода комментариев:

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

29.11.2015 в 09:33

Дополнительные поля активируются в настройках модуля (там галочки нужно поставить). После этого у вас будут доступен новый оператор $OTHER_1$. Его нужно вставить в HTML код в содержимое тега ALT картинки. При добавлении&%2392;редактировании материала вы увидите новое поле для заполнение "Дополнительное поле 1" - в него пишите то, что хотите видеть в альте (можно зайти в замену стандартных надписей и изменить название поле на другое).

25.11.2015 в 14:13

Купил сайт - страницы в поиске есть около 1500 а картинок штук 10. Старые хозяева вообще не прописывали алты к картинкам - предстоит долгая и упорная работа))) Потому и интерисуюсь как добавить эти поля.

25.11.2015 в 14:09

Здравствуйте, подскажите подробней на счет "добавления полей 1 и 2": вот у меня есть при добавлении новости для картинок http://c2n.me/3qPeaOZ, только выбираю картинки а прописать альт - таких нету. Это сюда добавятся эти поля? Где прочитать как подробно добавить?

08.11.2015 в 02:19

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