четверг, 29 марта 2012 г.

Как писать теги alt и title у картинок

У картинок в HTML-коде есть теги alt и title.
Для чего они нужны и почему советуют их писать?

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

Тег  title - это тот текст, который появиться при наведении на картинку курсора мыши.
Для поисковиков он не так важен. Но, все равно, его советуют прописывать.

Как прописать теги alt и title у картинок:

С недавних пор эта функция появилась во встроенных возможностях Блоггера. Во время редактирования сообщения при нажатии на картинку выдается контекстное меню "Маленький-Средний-Крупный-Исходный размер-....-Добавить подпись-Свойства-Удалить".
Надо выбрать "Свойства" и заполнить поля для title ("текст заголовка") и alt ("альтернативный текст").



Второй способ - править HTML-код сообщения. Об этом я писала в посте "Код картинки и его оптимизация".

Как писать текст в alt и title:
  • Теги должны быть короткими - одно-два слова.
  • Описание должно соответствовать картинке, лучше обойтись без метафор и ничего не значащих фраз типа: "Прелесть!"
  • Слова в тегах должны быть ключевыми.
  • alt и title в одной картинке не должны быть одинаковыми.
  • В title лучше писать чуть-чуть развернутей, чем в alt.

23 комментария:

  1. Класс! Спасибо! Все доступно и понятно)))

    ОтветитьУдалить
    Ответы
    1. Вы не против,если я сделаю перепост с ссылкой на ваш блог?

      Удалить
  2. Век живи и век учись... Спасибо!

    ОтветитьУдалить
    Ответы
    1. Не за что, я сама это изменение в интерфейсе не сразу обнаружила :)

      Удалить
  3. Спасибо! Наконец-то нашла, где просто и доступно :)

    ОтветитьУдалить
  4. Кэп даёт советы)))

    ОтветитьУдалить
    Ответы
    1. Зачем же вы их читаете, если вам так очевидно? Посмотрите на шапку моего блога - я написала, что это для "чайников". Для тех, кто не знает, для чего эти окошки и что туда писать. И уж тем более не знает, чем alt от title отличается.

      Удалить
  5. всё таки напишу) спасибо, только узнал об этом, когда задумался почему у меня картинки Яндекс не индексирует, будем смотреть )

    ОтветитьУдалить
    Ответы
    1. Если у вас все фото вставлены прямо с компьютера или через альбом Пикаса (что по-сути одно и то же), то Яндекс совсем не будет индексировать их - уже почти год, как продолжается такая политика. Поэтому для Яндекса изображения лучше вставлять через Яндекс.Фотки, например. Но это неудобно для Блоггера (ведь тогда в гаджетах изображения не показываются: они берутся из вебальбома Пикаса. Т.е. не будет фото на гаджете последних сообщений, популярных сообщений, в других блогах и т.д.)
      Я сама еще не определилась, как поступать - мечусь между обоими вариантами

      Удалить
  6. alt и title в одной картинке не должны быть одинаковыми.
    В другом источнике, кажется, связанном с "Сеопультом", читала обратный совет - они вроде как должны совпадать или, по крайней мере, не критично, если совпадают.
    Честно говоря, сейчас уже давно не встаёт вопрос, как вставить эти теги, можно как минимум тремя способами это сделать. Другая проблема: на сайте 1500+ страниц, на каждой по две-три картинки. Какая программа позволяет выявить картинки без этих атрибутов? А то вручную каждую страницу открывать-закрывать - очень долго и не очень продуктивно.

    ОтветитьУдалить
    Ответы
    1. Насчет совета - я не скажу на 100%. Сама у себя эти теги делаю обычно так: alt - пишу то, как можно будет мою картинку найти по поисковому запросу, а title - конкретно то, что изображено на картинке.
      А насчет того, что старые картинки очень муторно исправлять - это да. У меня самой такая же история. Но я для себя решила уже оставить их в покое, потому что у меня на старых постах не по одной-две картинки, а до десятка бывает: это сколько времени придется их оформлять! В конце-концов, они же все равно как-то проиндексированы. Кроме того, несмотря ни на какие ухищрения Яндекс так и не индексирует мои изображения(((

      Удалить
    2. Убиваю на это дело целые дни, приносит некоторую пользу: картинки всё-таки индексируются. Причём ставлю одинаковый текст в оба атрибута. Нормально отображаются, по-моему, до 70 символов в каждом.

      Удалить
  7. Большое спасибо, приятно когда в поисковик забиваешь вопрос, а ответ дает знакомый блоггер)))

    ОтветитьУдалить
  8. спасибо за доступную информацию!

    ОтветитьУдалить
  9. ух, спасибо! и почему я раньше на вас не наткнулась?!?!

    ОтветитьУдалить
  10. Подскажите пожалуйста, эти самые Title и Alt заполняются на русском или нужно прописывать по русски, но латинскими буквами. Я где-то читала, что сама картинка должна быть с базовым наименованием прописанным англ.буквами.Так и делаю, но поисковик все равно игнорит. И еще влияет ли на поиск подпись под картинкой?

    ОтветитьУдалить
    Ответы
    1. Эти теги заполняются так, как вы хотите, чтобы потом их искали в поиске. Т.е. человек в гугле должен написать запрос "цветы" и среди прочих выйдут ваши картинки с тегом "цветы". Если вы ориентируетесь на русскоязычную аудиторию - пишите по-русски. Если на англоязычную - то по-английски.
      А вот название самого файла изображения, действительно, советуют писать английскими буквами и осмысленно. Но если вы вставляете в блоггере, он все равно при загрузке в блог или гуглальбом (что одно и то же) дает файлу длиннющее имя с цифрами и английскими буквами. И вы на это повлиять не можете.

      Удалить

Чтобы оставить комментарий*, напишите текст в окошке и выберите в "Подписи комментария" профиль из любого вашего аккаунта. Если вы нигде не зарегистрированы, выбирайте Имя/URL и просто вводите свое имя - оно отобразится в подписи.

*Оставляя комментарий вы тем самым подтверждаете, что даете свое согласие на обработку своих персональный данных. См. Политика конфиденциальности

Примечание. Отправлять комментарии могут только участники этого блога.

Related Posts Plugin for WordPress, Blogger...