Novomatic img alt img

Мы увеличиваем посещаемость и позиции в выдаче. Вы получаете продажи и платите только за реальный результат, только за целевые переходы из поисковых систем

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

Оглавление [Показать]

SEO атрибуты изображений – alt и title

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

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

Атрибут title – это описание, составляемое для посетителя. Пользователь увидит его, если на некоторое время задержит курсор мыши на картинке. Как правило, для заполнения этого тега используют развернутое описание из 1-2 предложений.

Пример кода изображения с хорошей оптимизацией


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

Разумеется, графическое изображение корректно загрузится даже в том случае, если у тега отсутствуют атрибуты title и alt. Но в этом случае возможности SEO картинки останутся незадействованными. Затратив немного времени на составление альтернативного описания, вебмастер сможет:

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

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

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

Как использовать alt в SEO продвижении

Чтобы привлечь дополнительных посетителей по продвигаемым запросам, вебмастер должен составить для alt и title описания с вхождением ключевых фраз. Текст, предназначенный для тега alt, может выглядеть следующим образом: «прилагательное + ключевая фраза». Для атрибута title рекомендовано использовать расширенное описание «прилагательное + ключ + дополнение».

К примеру, есть ключ «недвижимость Москвы». Для данной фразы можно составить описание alt «элитная недвижимость Москвы», а также title «элитная недвижимость Москвы в Центральном административном округе». В качестве ключа для оптимизированного описания изображения наиболее подходят фразы, в которых присутствуют слова «фото», «иллюстрации» и т.п.

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

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

HTML код для ссылки:

заголовок вашей страницы

На вымышленном примере рассмотрим, как реально применяются ат — трибуты title и alt для ссылки на, скажем, e-book, предлагаемую для скачивания со страницы сайта «Основы ипотечного кредитования»:

=»/downloads/skachat-besplatno.html» target=»_blank» title= «Любо — знательный читатель найдет здесь информацию о том, как формируется процентная ставка по кредиту, узнает разницу между плавающей и фиксированной процентами, получит представление о том, как рассчитать сумму кредита, которую он, как заемщик, может позволить себя занять и много чего другого.» alt= «Как выбрать ипотечный кредит, наиболее полно отвечающий ВАШИМ целям и возможностям»>Как выбрать ипотечный кредит, наиболее полно отвечающий ВАШИМ целям и возможностям

HTML код для изображения:

Атрибуты ALT и TITLE тега IMG

Несмотря на то, что использование при оптимизации изображений атрибутов title и alt — это простой способ поднять позиции сайта в поисковых системах, многие вебмастера не в полной мере применяют их, а то и вовсе игнорируют. Некоторые их путают и не понимают, какая разница между title и alt. Следует отметить, что частенько title и alt по ошибке именуют тегами, хотя это атрибуты тега img (от слова “image”), а не отдельные теги.

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

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

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

Поисковые системы учитывают не весь текст, заключенный в атрибут alt: Google, к примеру, показывает только первые  15-17 слов, а Яндекс чуть больше – до 28 слов. В любом случае, этого количества слов вполне достаточно, чтобы составить вразумительный контекст.

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

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

Рекомендации от Google по оптимизации изображений

Информацию о изображениях передает атрибут “alt”

Изображения часто кажутся одним из самых простых элементов сайта, но их использование также можно оптимизировать. Каждому изображению соответствует имя файла и атрибут “alt”. Оба эти элемента полезны. Атрибут “alt” позволяет ввести текст, который будет отображаться, если изображение по какой-либо причине невозможно показать (1).

Зачем используется этот атрибут? Если пользователь просматривает ваш сайт через браузер с отключенными картинками или использует программу чтения текста с экрана, alt-текст будет служить описанием изображения.

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

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

Файлы следует хранить в отдельных директориях, и сохранять их в общедоступных форматах

Вместо того, чтобы хранить файлы изображений по разным директориям и субдиректориям на домене, следует собрать их все в одну папку (например, moyastranaotkrytok.ru/images/). Это упрощает путь к графическим файлам.

Используйте широко поддерживаемые типы файлов. Большинство браузеров поддерживают графику в формате JPEG, GIF, PNG, и BMP. Также неплохо если расширение файла совпадает с его типом.

Пишите информативные анкоры.  Анкорный текст должен содержать хотя бы краткую информацию о странице по ссылке. Не советуем:

  • использовать в качестве анкорного текста общие слова вроде “страница”, “статья”, или “кликните здесь”;
  • использовать анкорный текст, не имеющий никакого отношения к материалу по ссылке;
  • использовать URL страницы в качестве анкорного текста (хотя возможны исключения, например, если нужно прорекламировать новый адрес сайта).

Стремитесь к краткости.  Ваша цель – короткий и информативный текст, обычно одна точная фраза. Не советуем:

  • писать длинный анкорный текст, например целое предложение или параграф.

Выделяйте ссылки. Сделайте анкорный текст ссылок визуально отличимым от обычного текста вашего сайта. Пользователя вводят в заблуждение малозаметные ссылки или ссылки, на которые он может нажать случайно. Не советуем:

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

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

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

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

Наверх      Предыдущая страница

  • Главная»
  • HTML-Шпаргалка»
  • img

Поддержка браузеров

Вставляем картинку:


Описание и использование

Тег вставляет изображение в документ HTML.

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

У тега два обязательных атрибута: src и alt.

В HTML тег не имеет закрывающего тега.

В XHTML тег должен быть правильно закрыт.

Атрибуты «align», «border», «hspace», и «vspace» элемента img устарели и не поддерживаются в XHTML 1.0 Strict.

Советы и примечания

Совет: Атрибут alt используется как альтернативный текст в случае отсутствия изображения, а не как текст при наведении мышки. Для показа текста при наведении мышки на изображение используйте атрибут title. Вот так: .

Необязательные атрибуты Событийные атрибуты

novomatic img alt imgДобрый день, друзья!

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

Скажите, для чего вы используете картинки на страницах ресурса? Привлечь внимание, удержать интерес, украсить статью? Все верно! Но эти же картинки могут использоваться и для поисковой оптимизации сайта. Главное, нужно внимательно прописать атрибуты ALT и TITLE для каждого значимого изображения.

По статистике, этот простой ход использует только 30% сайтовладельцев. А кто нам мешает воспользоваться ситуацией и на шаг опередить сразу две трети конкурентов?

Для начала давайте познакомимся с «неведомыми зверушками» 🙂

ALT и TITLE часто называют тегами, но это неверно. На самом деле это атрибуты тега .

Атрибут ALT

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

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

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

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

И теперь главный вопрос.

Как правильно прописать атрибут ALT?

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

novomatic img alt img

Что же касается непосредственно написания текста для этого атрибута, то есть несколько простых правил:

  1. Текст должен правдиво описывать картинку.
  2. Оптимальный объем – словосочетание из 2-4 слов или такое же короткое предложение. Хорошо, если это будут разбавленные и дополненные ключевые слова.
  3. Картинки на одной странице должны иметь разный ALT. Если вы используете в атрибуте одни и те же ключевые слова для всех изображений, то это отрицательно скажется на ранжировании сайта в выдаче.
  4. Не заполняйте ALT для смайликов и маленьких декоративных рисунков.

Некоторые браузеры не поддерживают атрибут ALT (например, текстовый Lynx). И тогда уж точно не обойтись без атрибута TITLE.

Атрибут TITLE

С английского слово TITLE переводится как «заголовок» — собственно, это и есть основная функция данного атрибута. Если навести курсор на изображение, размещенное на сайте, то всплывает надпись – название рисунка. Это означает, что атрибут TITLE прописан.

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

Как и в случае с ALT, необходимо просто заполнить поле с надписью TITLE в настройках рисунка или прописать HTML-код. Например:

novomatic img alt img

Вы заметили, что тексты для атрибутов ALT и TITLE отличаются между собой? Это обязательное правило: они никогда не должны совпадать для одной картинки!

Вот ещё несколько рекомендаций касательно текста для TITLE:

  1. Соответствие картинки и подписи – обязательны.
  2. Сделайте TITLE чуть более развернутым, чем ALT. Лучше всего – короткое предложение с участием ключевых слов.
  3. Не используйте пустые эмоциональные слова или метафоры. Например, писать TITLE «Какое чудо!» не имеет никакого смысла. Пусть это будет банальная фраза типа «Красивый ребенок с соской», зато подпись соответствует картинке (требование пункта 1).

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

Что касается моего сайта, то скажу сразу: я сапожник без сапог:) Буквально пару недель назад мне удалось совершить подвиг, сделав аудит своего ресурса с помощью одного из специальных сервисов.

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

А вы прописываете атрибуты ALT и TITLE картинкам? Поделитесь своим опытом в комментариях, буду рада.

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

Загрузка ...