Атрибут ALT и Title изображений для SEO – правильно используем

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

Мы все уже знаем насколько важно разбивать текст статьи на блоки. А также “сухой” текст важно “разбавлять” изображениями, делая его более наглядным и читаемым. Но “красивые” картинки не просто привлекают и удерживают внимание читателя. Их можно использовать для продвижения сайта. Именно для этого и используются вспомогательные атрибуты тега <img>.

атрибут alt

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

Так и в продвижении сайта – надо использовать все доступные возможности, в том числе и оптимизацию изображений.

Для чего необходима оптимизация изображений?

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

При правильной оптимизации:

  • Вы можете получить высокие позиции в ТОП раздела «Картинки» поисковых систем (Яндекс, Google, Поиск  Mail.ru и др.). Результат – обеспечение сайта стабильным тематическим трафиком.
  • Качественно оптимизированное изображение предоставляет возможность создания страницы с высокой релевантностью, которая будет успешно индексироваться поисковиками.
  • Надо помнить о том, что правильно подобранное изображение является источником естественного привлечения ссылочной массы.

С учетом того, что оптимизация сайта это комплексная работа с SEO и не забывать о графическом контенте.

Зачем нужны вспомогательные атрибуты тега img

Конечно, если у изображения на сайте будут отсутствовать вспомогательные атрибуты, оно все равно загрузится корректно для пользователя. Но тогда возможности SEO не будут задействованы. Если приложить усилия, то автор сможет:

передать необходимые сведения поисковому роботу;
получить дополнительных посетителей на сайт;
повысить лояльность читателей.

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

А также помните о том, что и Yandex и Google имеют собственные сервисы  “Картинки”. Поэтому оптимизируя изображения сайта можно рассчитывать на то, что пользователь найдет ссылку на ваш сайт на этих ресурсах, что собственно обеспечит дополнительный трафик.

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

Атрибут alt (alternative text) помогает распознавать роботу изображение и индексировать его. Это краткое описание того, что изображено на картинке. Увидеть пользователь его тоже сможет, если задержит на несколько мгновений на картинке курсор. Если же браузер пользователя настроен на альтернативный просмотр изображений, то вместо изображения он увидит текст атрибута alt/

Атрибут title по сути заголовок изображения. Он генерирует всплывающие подсказки для робота.

  1. Описание вспомогательных атрибутов должно полностью соответствовать содержимому картинки.
  2. Обязательно должны содержать ключевое слово. Но не переусердствуйте. По последним данным, если в статье более 8 изображений, то 50 % из них, должны содержать ключ.
  3. Alt теги в пределах одной страницы должны отличаться. При использовании одного и того же текста в атрибутах страница будет плохо ранжироваться. А значит появляется возможность попасть под АГС
  4. Для alt оптимальное количество слов — от 3-ех до 10-ти. Title должен быть более развёрнутым.
  5. Тексты для атрибута alt и атрибута title должны отличаться

Если говорить подробнее, то можно вывести некую формулу. Для атрибут alt она будет выглядеть так «прилагательное + ключевая фраза». Конечно, “прилагательное” может быть заменено на другую часть речи и вставлено за ключом. Но в любом случае, например, “двухсловник” будет разбавлен третьим словом. Даже если к ключу будет добавлена просто порядковый номер (ключ 1, ключ 2…), это будет лучше. чем просто повторяющийся из раза в раз ключ.

Для атрибута title рекомендовано расширенное описание «прилагательное + ключ + дополнение». Оно должно быть длиннее. Можно использовать ( а некоторые специалисты считаю – нужно) слова “фото”, “иллюстрация”. Это как бы подсказка для робота…

Как прописывать вспомогательные атрибуты в WordPress

При загрузке изображения в медиа библиотеку есть возможность сделать текстовое описание для вспомогательных атрибутов.

атрибут alt wordpress

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

Используйте все возможности для продвижения своего ресурса.

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

Ну что же, удачной Вам работы! Будут вопросы или пожелания, пишите в комментариях. Если информация была для Вас полезной – делитесь ей со своими друзьями в социальных сетях

Полезные статьи...
Хороший блог – десять основных определяющих элементов

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

Last Modified – что это такое и зачем он нужен сайту

last modified - это заголовок блога, который сообщает поисковому роботу о последних изменениях на Вашем сайте. "Ну и зачем это Подробнее...

Обновление информации старых статей на блоге

Я задумалась об обновление информации в старых записях блога, когда ко мне обратилась подписчица с вопросом создания группы ВК. Информация Подробнее...

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

Как проверить релевантность, как настроить свою статью так, что бы поисковая система ее видела и выдавала на первых местах... Эти Подробнее...

Комментарии 43

  • Скажите пожалуйста, я загрузил картинку на сайт wordpres, при изменении атрибута альт через медиа библиотеку я не вижу этих изменений, когда проверяю страницу с этими картинками сервисом на наличие alt i title у картинок, как мне изменить Alt?

    • Просто зайдите в медабиблиотеку и отредактируйте. А проверку наличия alt проверьте на сервисе https://varvy.com/ Он покажет все картинки без alt

  • Здравствуйте. Спасибо за информацию. Но такой вопрос, почему у меня на сайте при заполнении “alt” отображается его содержимое под картинкой 9или рядом с ней). картинка видна…

  • спасибо что ответили Но у меня на сайте написано charset=”UTF-8″

  • здравствуйте может сможете мне помочь? Когда к картинкам тайтл и альт пишу на русском – то на сайте высвечиваются на картинках козяблики. что делать?

    • Это проблемы с кодированием. Проверьте настройки сайта. Код должен быть – UTF-8

  • Нет, вставляю именно html кодом, сгенерированным через X-lines. Однако код начинается с тега , а к нему робот требует описание в виде атрибута alt.
    Это очень легко проверить с помощью средств диагностики в bing вебмастер.
    Дело в том, что X-lines генерирует код без описания alt, т.е. вот так: alt=””
    Во вкладке “html” код, а во вкладке “визуально” картинка в виде подписи автора. Alt везде надо прописывать вручную. Но как-то настораживают одинаковые атрибуты (по-сути описание картинок) на каждой странице…

    • У каждого поисковика свои заморочки. Я под Bing ничего не проверяю. У Google и Яндекс у меня такой вопрос не возникал. При проверке в MegaIndex эта ошибка не определяется. Поэтому я просто не пишу alt. Мне кажется, если у Вас этот вопрос вызывает какие-то сомнения – может просто не использовать такую подпись?

  • Ирина, здравствуйте! Недавно seo анализ показал, что у меня на главной странице не прописаны атрибуты alt у картинок. Я удивилась, ведь я тщательно подхожу к этому вопросу. Программа указала, что атрибуты отсутствуют у картинок, сгенерированных с помощью X-lines (Жду Ваших комментариев и подпись автора). На других страницах блога та же проблема. Для главной я прописала атрибуты. Вопрос такой: подпись автора у меня на каждой странице. Если все атрибуты к этой картинке будут одинаковыми, как на это посмотрят поисковики? Не падает ли из-за одинаковых картинок на блоге его уникальность в глазах поисковых роботов?

    • День добрый Лариса. Я не поняла, почему у Вас эти подписи считаются картинками. Ведь Вы же вставляете код… В этом случае поисковик видит Вашу подпись как код а не как картинку. Если Вы вставили их в виде скриншота, тогда Ваши опасения верны…

  • Спасибо. Все доступно и исчерпывающе

  • Здравствуйте,Ирина! Спасибо за ответ. Просмотрела еще раз нашу переписку на эту тему и растерялась. В Вашем ответе от 17. 12 – “Когда вы будете вставлять картинки, то в первом окне – title, у Вас при загрузке сразу пропишется наименование на латинице. Вы его копируйте и вставляйте в поле alt и Описание.” Еще раз посмотрела видео – там на русском пишем “alt и Описание” и я на русском тоже прописала. Только название картинки осталось на латинице. Это описка или я что-то неправильно поняла?. Спасибо.

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

  • Здравствуйте,Ирина! все атрибуты прописаны правильно на картинках, благодаря Вам. Я вставляла по одной картинке,а сейчас иногда, возникает необходимость вставить еще посередине текста. Вот этот нюанс прошу Вас помочь отобразить. На основной картинке – Атрибут Alt – название статьи, а на второй тогда что прописывать? Спасибо, Вам, Вы так все понятно объясняете, а Ваши авторские видео – дорогого стоят.

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

  • Здравствуйте, Ирина! Очень благодарна Вам за статью, просто нет слов. У меня на блоге поменяли дизайн и вместо картинок – пустые окна отобразились.Да, я еще перешла на другой хостинг – Джино. Я не знала, что нужно картинкам присваивать название статей именно на латинице. На старом блоге были только миниатюры и русский проходил. Я в панике, информацию нахожу только как вставить медиофайл. А про атрибут ALT и латиницу нашла случайно только у Вас. Попробовала поменяла на латиницу, удалила старое на паре статей – работает!!!!!!! Ура. Но меняла только название картинок, а вот прочитав у Вас еще про ALT, хочу и его вставить, чтобы было правильно. Это мне надо удалить снова картинку и снова вставить, прописав все, как у Вас в видео?. Как я Вам благодарна, столько нервов измотано, а Вы все разложили по полочкам. У меня все названия картинок были на русском, так что придется менять все до единого. Спасибо, Вам, огромное и если не затруднит, подскажите – правильно ли я мыслю – удалить картинки с латинскими названиями, где поменяла и снова вставить прописав атрибут. Спасибо!

    • Когда вы будете вставлять картинки, то в первом окне – title, у Вас при загрузке сразу пропишется наименование на латинице. Вы его копируйте и вставляйте в поле alt и Описание. А дополнить эти поля Вы можете просто зайдя в библиотеку медиофайлов и пройдя по ссылке под картинкой – изменить. откроется окно. Под рисунком будет кнопка – Редактировать. Заполните поля и обновите.

  • Случайно попала на Ваш сайт, Ирина, и уже почерпнула много нового! Спасибо, интересные и полезные статьи! Обязательно прочитаю все!

  • Спасибо Ирина! Все очень понятно и доходчиво. Я хочу правильно научится писать статьи. Поэтому смотрю нужную информацию.

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

  • интересно Вы отвечаете на вопросы или нет?

  • Здравствуйте, Ирина! я исправила ALT, но не могу исправить “meta-description: ключевая фраза” и “Ключевая фраза в url” не получается можете ссылку дать или напишите пост.

    • Марина, я не совсем поняла, где Вы исправляете? Просто надо оптимизировать картинку и вся информация пройдет на автомате

      • В самом изображении получилось.
        но ни как не могу написать meta-description: ключевую фразу, то есть “описание записи”?

        • Когда не можете написать? Когда оптимизируете картинку? У Вас окошко ОПИСАНИЕ не отображается? Марина – выйдите ко мне в скайп – irinas1952 – мы откроем экран и посмотрим

  • Здравствуйте, девочки! Я вижу вас тут целое сообщество!
    Прочитал эту статью. Действительно, написано, очень доходчиво и логично. Самому начинающему блогеру такую информацию не найти.

  • Спасибо. Узнал хоть, а то раньше не знал что за атрибут alt и поэтому не использовал его.

  • Хотя веду свой блог давно, всё же было полезно узнать кое-какие детали. Спасибо !

  • Иринушка, здравствуйте! Рада с Вами познакомиться. Давно искала материал на эту тему, но только у Вас нашла подробное и конкретное описание. Огромное спасибо, Вы мне очень помогли! Ставлю Ваш сайт в закладки! И приглашаю в гости!

  • Спасибо за статью..рада что попала на ваш блок…действительно все оч понятно расписано!

  • спасибо, я как-то не задумывалась над тем, какие надписи должны быть у картинок

  • Спасибо большое, Ирина, за статью! Очень полезная и главное, простая для начинающих! Обязательно еще сюда приду!

  • Ирина, спасибо за разъяснения и уточнения. Теперь все, все понятно – какую ссылку в каком случае использовать.

  • Здравствуйте Ирина. Давно не была у вас в гостях.
    Действительно, ваш блог как хороший учебник. Все четко и понятно. И появилось очень много новой и нужной информации.
    Можно много знать, но не уметь донести это другим людям.
    У вас это прекрасно получается. Вы прирожденный педагог.
    Нахожусь на вашем Блоге уже больше часа.
    Сделала 2 задания и не могу оторваться. Сейчас буду делать “Иконки на блог” – давно хотела этим заняться.
    Спасибо!!!!!

  • Скучаю за Вашими уроками. Теперь слушаю все в записи.Все просто и доходчиво Спасибо

  • Ирина, добрый день. У Вас, как всегда, кладезь информации.
    А скажите, пожалуйста, можно ли поменять ALT-картинки и Title, так сказать, задним числом. В уже опубликованной статье?

    • Я не думаю, что замена будет критичной. Главное – не меняйте ссылки самой статьи

  • Ирина, почему-то на некоторых сайтах после оставления комментария стал пропадать мой граватар. Вот и на вашем – тоже

  • Здравствуйте, Ирина! Видео прекрасно дополнило текст, стало все понятно, и, главное, не трудно сделать. С каждым уроком объем необходимых знаний расширяется, как перевернутая воронка… Но вообще все очень интересно!

Добавить комментарий