Title alt для картинок – Как правильно заполнять Alt и Title для картинок

Содержание

Оптимизация изображений: что такое Alt и Title для картинок и как их правильно заполнять

Одним из важнейших направлений оптимизации на сайте — это оптимизация картинок. Хорошо оптимизированные картинки это важные ключевые компоненты, которые могут помочь веб-страницам занять хорошее место в результатах поиска по ключевым словам. Такие поисковые системы как Yandex или Google используют поиск по картинкам, тем самым дают дополнительный трафик.

Правильное имя файла

Имя файла изображения, которое используется для иллюстрации статьи должно соответствовать тематике текста (статьи). Большинство веб-сайтов публикуют свои изображения подобным образом:

<img src="/images/147a/365893.jpg">

<img src="/images/147a/365893.jpg">

С точки зрения оптимизации картинки это неправильно. Бессмысленное название файла, нет атрибутов ALT и TITLE. Давайте посмотрим далее на правильно оформленный пример:

<img src="/images/seo-optimizaciya/seo-kartinki.jpg" alt="Seo оптимизированная картинка" title="Seo оптимизация картинки" />

<img src="/images/seo-optimizaciya/seo-kartinki.jpg" alt="Seo оптимизированная картинка" title="Seo оптимизация картинки" />

Поисковые системы уделяют большое внимание названию самого файла. То есть, если пишете статью о SEO оптимизации картинок, то имя файла изображения должны быть seo-kartinki.jpg

Не забывайте прописывать атрибуты ALT и TITLE для изображений

Атрибут Alt

ALT у изображений — это альтернативный источник информации для поисковиков (он помогает понять, что изображено на картинке), а также для пользователей, у которых по какой-то причине не смогла загрузится картинка. Имеет довольно значительный вес для поискового продвижения, поскольку индексируется поисковыми роботами, а это важно как для релевантности страницы так и для привлечения дополнительного трафика из поиска по картинкам. К примеру у нас есть такая картинка:

Дарт Вейдер: темный лорд ситхов

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

Дарт Вейдер: темный лорд ситхов

В коде страницы, данный атрибут будет выглядеть вот так:

Alt атрибут в коде страницы

Атрибут Title

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

 

Где заполнять атрибуты Alt и Title?

Все зависит от Вашей системы управления сайтом. Как правило, в популярных движках все это доступно в параметрах изображения. Если Вы используете WordPress то в режиме редактирования изображения доступны все необходимые поля:

Alt атрибут в коде страницы

Ну а в чистом HTML придется все править вручную:

<img src="Путь к картинке" alt="Альтернативное описание" title="Дополнительная информация">

<img src="Путь к картинке" alt="Альтернативное описание" title="Дополнительная информация">

Правила заполнения атрибутов Alt и Title:

  • Должны быть информативными. То есть, описывать именно то, что действительно изображено на картинке;
  • Длина не должна превышать 250 символов (3-5 слов будет вполне достаточно) для атрибуа Alt. Для Title допустимо и больше, но согласитесь длинющий текст, который будет отображаться при наведении на изображение, явно будет только отпугивать пользователей;
  • Должны содержать ключевые запросы. Особенно это касается атрибута Alt;
  • Отсутствие спама. Не используйте перечни ключевых запросов, написанных через запятую.
  • По возможности используйте разное описание для Alt и Title.

Какое расширение использовать для изображений?

  • .jpg — распространенное расширение для фотографий;
  • .gif,. png – для других изображений.

Именно указанные форматы изображения являются наиболее используемыми веб-мастерам, которые заинтересованы в поисковом трафике.

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

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

SEO оптимизация картинок — это постоянная работа над каждой страницей и каждой записью, которую Вы публикуете. Именно этот комплекс мер и позволяет посетителям найти ваш сайт на просторах Интернета.

seozona.net

SEO оптимизация изображений. Атрибуты Alt и Title у изображений

Опубликовано: 24.12.2014 12:46

Просмотров: 10892

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

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

При правильном применении поисковой оптимизации изображений можно добиться хороших результатов. Во-первых, с правильно оптимизированными картинками можно получить отличный стабильный трафик с разделов "Картинки" популярных поисковых систем. Во-вторых, изображение, которое соответствует тематике страницы, повышает вес страницы и положительно влияет на поисковую выдачу. В-третьих, сайт, который имеет оптимизированные картинки получит больше кликов из социальных сетей (люди охотнее тыкают на ссылки с картинками, чем без них). Итак, поехали!

Alt (альтернативный текст изображения)

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

<img src="путь до картинки" alt="описание картинки" />

Title (заголовок или название)

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

Код, для данного изображения:

<img src="kote.jpg" title="очень милый котик" alt="милый кот, который склонил голову на бок" />

SEO-профессионалы рекомендуют заполнять этот тег, так как он имеет большое значение в продвижении по изображениям. Кстати, поисковые пауки не "понимают" текст, который написан на изображениях. Например картинка с текстом "СКАЧАТЬ ФИЛЬМЫ" не будет распознана поисковым роботом, а та же картинка, в которой будет заполнен тег title="скачать фильмы" распознается роботом и даст ему информацию о том, что на это странице речь идет о кинематографе.

Советы по оптимизации изображений

  1. Не злоупотребляйте ключевыми словами. Лучше написать небольшое осмысленное предложение с парой ключевиков, чем перечислить ключевые слова через запятую.
  2. Используйте уникальные описания для каждого изображения на сайте.
  3. По возможности делайте изображения ссылками
  4. Храните картинки у себя на хостинге. Дело в том, что если картинки хранятся на других ресурсах, вы будете передавать вес своих страниц сайтам, на которых размещены картинки.
  5. Не используйте очень "тяжелые" картинки. Ни люди ни поисковые машины не любят когда сайт загружается очень долго.

Выводы о заполнении метаданных у изображений

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

Если статья была для Вас полезной - Поделитесь ссылкой!

Советуем почитать

Закрепленные

Понравившиеся

seo-love.ru

Битрикс - Alt и Title для картинок: как прописать правильно?

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



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

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

Title (англ. «заголовок») — название изображения, которое появляется при наведении курсора. Для поисковиков этот атрибут особого значения не имеет, но подобные подсказки положительно влияют на поведенческие факторы, а соответственно имеют косвенное влияние на SEO.

Title и Alt можно указать в настройках картинки или прописать в HTML. Причем это можно сделать и после индексации иллюстрации.

Какими должны быть Alt и Title
Единого мнения нет, но вот ключевые моменты:

  1. Они могут быть идентичными (поддержка Яндекса подтверждает).
  2. Четкое, точное описание изображения
  3. Использование ключевиков. Если следовать популярной инструкции и добавлять в атрибуты главный ключ из h2, то при множестве изображений на странице с включением этого запроса будет переспам со всеми вытекающими санкциями и снижением позиций в выдаче. Вместо этого можно использовать разные низкочастотные ключи.
На заметку! Альт нужно прописывать обязательно, Тайтл — хорошо, если сделаете. Причем текст может начинаться как с заглавной, так и строчной букв. Для русскоязычных сайтов атрибуты лучше прописывать кириллицей.
«Правильный» Alt
  1. Короткий текст (фраза из 2–4 слов или краткое предложение), раскрывающий суть изображения. Именно четкое описание дает шанс попасть в SERP.
  2. Описание должно состоять из ключей, дополненных или разбавленных.
  3. Для разных иллюстраций — разные ключевые запросы.
«Правильный» Title
  • Заголовок отражает суть фото
  • Ключевые слова — по возможности
  • Объем до 240 знаков.

Готовые решения от веб-студии Некстайп:


Следите за нашими новинками и акциями. Подписывайтесь на нас в социальных сетях и блогах:

marketplace.1c-bitrix.ru

Все об Alt и Title для картинок

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

C точки зрения поиска, если картинки закрыты для индексирования, то любое содержимое бессмысленно.

Для чего нужен атрибут Alt

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

Значение атрибута Alt для валидации

Валидатор ругается только при отсутствии атрибута Alt, при этом он может оставаться пустым.

An img element must have an alt attributeAn img element must have an alt attributeОшибка валидации, отсутствует атрибут alt

Чтобы пройти валидацию, атрибут alt обязательно должен быть.

An img element must have an alt attribute

То есть для прохождения валидации хватает достаточно пустого атрибута alt=»», так что при публикации в Вордпресс, если не собираетесь собирать картиночный трафик, заполнять его не надо. В случае закрытия картинок в ноуиндекс, достаточно загрузить картинку и все.

Но в спецификации всегда приводится пример с заполненным альтом https://www.w3.org/TR/html51/semantics-embedded-content.html#alt-text
The alt, src, srcset and sizes IDL attributes must reflect the respective content attributes of the same name.

<img src=»filename.jpg» alt=»» />

Для чего картинкам атрибут title

Атрибут title не обязателен, но он будет полезен посетителю при наведении мышки на картинку. Ему отобразится подсказка и дополнительно описание. Этот атрибут можно использовать с целью вовлечения пользователя и мотивируя его кликнуть по ссылке-изображению.

fortress-design.com

Оптимизация изображений: Атрибуты Alt и Title

deo

Изображения стали неотъемлемой частью современных сайтов, в частности интернет-магазинов. Чтобы заинтересовать посетителей и подтолкнуть их на покупку каких-либо товаров или заказать услугу, клиент должен увидеть их фотографии. Более детально узнать о назначении картинок и как правильно их оформлять, вы можете, прочитав в нашей статье «Картинки для SEO. Где искать, как правильно размещать и оптимизировать.»

___________

Использование графического контента на интернет-ресурсе не только заинтересует посетителей, но и принесет дополнительный наплыв клиентов, которые нашли сайт по поиску изображений на Google и Yandex. Для этого следует лишь научиться грамотно применять атрибут Alt и Title, о чем вы и узнаете из данной статьи.

Атрибут Alt в теге img — что это?

Атрибут Alt — это описание картинки, находящееся в html-теге. Оно проявляется вместо фото, если по каким-то причинам изображение не отображается на странице.

Рассмотрим на сравнительном примере. Вот так будет отображаться незагруженное фото, если Alt оставить пустым:

А если написать в свойствах тега название товара, то вид поменяется:

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

Как заполнять атрибут Alt для изображений

  1. Ключевые слова указываем обязательно. Для облегчения поиска их лучше прописывать в именительном падеже.
  2. Текст не должен быть больше 80 знаков, а по количеству — 3-5 слов. Советуем писать коротко и по сути, при этом содержательно.
  3. Старайтесь не спамить: не перегружайте многообразием ключевых запросов.
  4. Описание должно соответствовать тому, что представлено на фотографии.

Использование Title тега для картинок

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

Заполненный параметр Тайтл в html разметке выглядит следующим образом:

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

Правила составления Title для изображений

  1. Описание атрибута должно касаться того, что представлено на картинке. Не нужно придумывать текст, не соответствующий смыслу фото.
  2. Желательно делать короткие заголовки, ведь мало кому понравится читать длинные подсказки.
  3. Стоит использовать ключевые фразы. Но не используйте общие слова, например, «изображение», «фотография», так как это само собой понятно.

Пример грамотного составления атрибутов Alt и Title

Разберем на примере картинки с сайта строительной фирмы, как нужно заполнять рассматриваемые параметры.

При заполнении следует уделять внимание товару/услуге, которую предлагаете. В нашем случае рациональнее указать «строительство домов из оцилиндрованного бревна» вместо «стройка» или «дом».

Параметр Тайтл в этом случае можно немного поменять, прописав: «Стройка домов под ключ».

Сложности при составлении Alt и Title

1. Одинаковый товар представлен на нескольких фото.
Что делать онлайн-магазинам, которые предоставляют фото с разных ракурсов для лучшего обозрения своим пользователям? В такой ситуации лучше заполнить параметры Альт и Титл одинаково для группы изображений.

2.Продукт тот же, но отличия в расцветке.
Здесь советуем указывать название цвета. К примеру, для брюк коричневой расцветки напишите следующий Альт: «Женские брюки коричневые», а для синей расцветки — «Женские брюки синие».

3. Широкий ассортимент товаров

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

____________________________________________

С помощью грамотно составленных атрибутов Alt и Title к изображениям улучшится оптимизация картинок, а значит, и оптимизация в целом Вашего сайта в поисковых системах. Хотя, не следует пренебрегать и другими, не менее важными деталями, — названием, размером и качеством картинок.

Возможно вам будет интересно:

prime-ltd.su

Как заполнить атрибуты title и alt у картинок

После загрузки изображений через мультимедийную библиотеку Word Press её нужно оптимизировать. Атрибуты title и alt позволяют настроить изображение по потребности SEO. Таким образом, если  настроить эти параметры правильно, то картинки станут дополнительной силой в продвижении сайта.

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

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

Атрибут alt

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

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

Атрибут title

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

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

В title также не стоит давать слишком много информации. Ничего страшного не случится, если alt и title будут абсолютно одинаковыми.

Из заключительных рекомендаций следует сказать о том, что для продвижения с помощь картинок, их следует загружать в форматах *.jpeg, *.png, *.bmp или *.gif. Другие форматы картинок поисковики либо не видят, либо плохо индексируют.

wpuroki.ru

Роль атрибутов ALT и TITLE у изображений — Devaka SEO Блог

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

Цель эксперимента

Цель данного эксперимента — определить, играет ли какую-то роль атрибуты ALT и TITLE для тега IMG, если изображение обрамлено в ссылку, передается ли ссылочный вес по этим атрибутам и можно ли найти по тексту из них донор или акцептор.

Гипотеза

Текст атрибута ALT изображения попадает в анкор-лист и, соответственно, по нему можно найти акцептор. Донора также можно найти по тексту из атрибута ALT тега IMG, а TITLE не участвует в поиске.

Проведение эксперимента

Для проверки гипотезы была создана специальная экспериментальная страница с размещенным изображением в виде ссылки на блог Руслана Ахметова, с которым мы виделись этим летом в Севастополе 🙂

Страница почти сразу же проиндексировалась в основных поисковых системах. Итак, что мы имеем?

Результаты

Введя текст из атрибута alt изображения на экспериментальной странице в Google, мы можем видеть, что находится и донор и акцептор. Гугл индексирует и учитывает этот атрибут. Однако, по тексту из атрибута TITLE поисковик не находит нужных страниц.

Google учитывает ALT для изображений

Даже из сниппета по первому запросу видно, что альт в нем присутствует, а тайтл отсутствует.

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

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

Выводы

Итак, какие же выводы можно сделать об основных поисковых системах Google и Яндекс? Во-первых, гипотеза подтвердилась только для Google и не работает для Яндекса.

Google учитывает атрибут alt при поиске, а также передает ссылочный вес акцептору по тексту из alt для ссылки-изображения. Яндекс не учитывает этот атрибут и по нему нельзя найти ни донор ни акцептор. Атрибут TITLE изображения не учитывается при поиске сайтов в Google и Яндексе.

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

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

 

devaka.ru

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *