Самостоятельная раскрутка сайта uCoz
Главная » Раскрутка сайта uCoz » Внутренняя оптимизация


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


ALT и TITLE

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


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

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


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

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

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

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


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

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

<img src="http://мой-сайт.ru/kartinka.jpg" alt="Альтернативный текст картинки" title="Описание картинки"/>

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

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

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

    Пример:

    ALT = Домик у моря.
    TITLE = На картинке изображен деревянный дом на берегу Черного моря.

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


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

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

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

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

<img src="$IMG_URL1$">

где $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. В коде шаблона вставить конструкцию:

<img src="$IMG_URL1$" alt="OTHER1" title="OTHER2">

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

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


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

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


<a href="http://мой-сайт.ru" title="Описание ссылки">Анкор</a>

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

Например:

<a href="http://мой-сайт.ru/publ/mikrovolnovki" title="Лучшие микроволновки в нашем каталоге товаров, которые можно купить через интернет">микроволновки</a>

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

Несколько советов:

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

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


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

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

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

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

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


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

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

<a href="мой-сайт.ru"><img src="http://мой-сайт.ru/kartinka.jpg"></a>

Очень просто!

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

<a href="мой-сайт.ru" title="Описание ссылки"><img src="http://мой-сайт.ru/kartinka.jpg"></a>

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

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

<a href="мой-сайт.ru" title="Описание ссылки"><img src="http://мой-сайт.ru/kartinka.jpg" alt="Альт картинки – он же скрытый анкор ссылки"></a>

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

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

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


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

Поделитесь записью в социальных сервисах!





1 2 »
    Аватар пользователя
    0 Хороший комментарий Плохой комментарий
    1. dotsenko1990 (10.04.2015, 20:52)
    Слава богу, хоть один умный человек написал понятно, что такое альт и тайтл, и на каком языке их заполнять. На других сайтах читаешь, и такое впечатление, что находишься на другой планете. Так все заумно пишут.
    Спасибо, автор. Все очень доходчиво.
    Аватар пользователя
    0 Хороший комментарий Плохой комментарий
    2. SEOprof (10.04.2015, 21:33)
    Да, все верно. Спасибо за приятный отзыв!
    Единственное - если будете вставлять ссылку-картинку, то TITLE пишите к ссылке, а ALT картинке. Если просто картинку (как в вопросе), то и ALT и TITLE только к картинке. Если суть не ясна, советую перечитать статью еще раз.
    Аватар пользователя
    3. dotsenko1990 (10.04.2015, 22:29)
    Вроде получилось. Не знаю правильно или нет. Пожалуйста, если вам не трудно, подскажите, как заполнить тайтл страницы в ВордПресс. Я вставляю заголовок рассказа в поле для заголовка, а в самой статье заголовок не указываю. А потом включаю правой кнопкой мыши информацию о странице, а тайтла там нет.
    Спасибо.
    Аватар пользователя
    0 Хороший комментарий Плохой комментарий
    4. SEOprof (11.04.2015, 09:12)
    Для оптимизации заголовков и описаний в вордпрессе есть спец.модуль - All In Seo Pack.
    Аватар пользователя
    5. dotsenko1990 (11.04.2015, 10:05)
    Спасибо. Я уже его использую.
    Аватар пользователя
    6. dotsenko1990 (11.04.2015, 10:06)
    Но нужно же, чтобы заголовок был в H1? Этот модуль делает так?
    Аватар пользователя
    7. dotsenko1990 (11.04.2015, 10:11)
    Можно еще один вопрос? У меня каждый день на сайте регистрируются какие-то иностранцы, что с ними делать? Для чего они это делают?
    Аватар пользователя
    0 Хороший комментарий Плохой комментарий
    8. SEOprof (14.04.2015, 09:29)
    Заголовок устанавливается в шаблонах. А по-поводу иностранцев ничего не скажу. Чем они вам мешают?
    Аватар пользователя
    9. bobsidor (11.07.2015, 15:09)
    Подскажите пожалуйста для оптимизации img alt, title  в OpenCart есть какой-нибудь спец.модуль? Заранее благодарен, bobsidor.
    Аватар пользователя
    0 Хороший комментарий Плохой комментарий
    10. SEOprof (12.07.2015, 00:48)
    Что-то нашел, но не уверен что подойдет. Смотрите сами: www.opencart.com/index.php?route=extension/extension/info&extension_id=1243
    Аватар пользователя
    0 Хороший комментарий Плохой комментарий
    11. SEOprof (10.08.2015, 12:55)
    Везде, где выводится картинка переменной $IMG_URL1$ - вид материалов и страница материала и комментариев к нему. Если картинка выводится другой переменной (или она статическая), то соответственно ALT и TITLE прописываете вручную.
    Аватар пользователя
    12. Comdiv (08.11.2015, 02:19)
    Можно поставить под операторы title вид материала и комментариев к нему - модуль файлы. То стоит только одно название а в поиске, к нему то название сайта прибавят то раздела или вообще под номерами. Посоветуйте, так правильно выставить.
1-10 11-17

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Быстрый вход ]







Опрос
Ваше отношение к uCoz?

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