Что обозначает атрибут alt тега img. Нужно ли прописывать возле атрибута Alt ещё и Title? Влияние alt в SEO

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

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

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

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

Приступим!

Что такое alt и title для изображений?

Атрибут «alt»!

Его предназначение для отображения фрагмента текста картинки. Чаще всего, это описание изображения.Вашим пользователям он не заметен. Подобные теги очень важны для поискового продвижения. Для людей они практически ничего не значат.

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

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

ТОП — это высокая посещаемость. А, как её нарастить я писал в статье про

Атрибут title!

«title» — это заголовок. Наверное, каждый об этом знает. В картинке — это название, которое доступно каждому, допустим, когда мы наводим курсор мыши на изображение появляется короткий текст, который и является title. С этим все ясно. Указать название можно у себя на ПК или ноутбуке, а потом вы закидываете картинку в сам пост и опять же прописываете заголовок и описание (alt).

Что касается того, что-куда писать, то с этим не волнуйтесь.

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

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

Вот еще на счет «title». Они не должны быть длиннее 5 слов. А также желательно, чтобы вы их прописывали на латинском языке, то есть английском. И самое важное формат изображения должен быть jpg. Это снижает вес, а значит и загрузка будет быстрее, что оказывает немалое влияние на трафик сайта.

Снизить массу картинки можно в фотошопе. Открываем его. Кликаем файл и далее Сохранить для WEB. Там, где написана цифра 50, 60 или какая-нибудь другая вы её можете регулировать, чем меньше, тем вес ниже. Если у вас еще нет фотошопа, тогда вперед овладевайте им. Ведь это неотъемлемый элемент любого вебмастера.

Если кто-то сомневается в том, что оптимизация картинок оказывает большое влияние на продвижение блога, то могу сказать одно — не сомневайтесь. Попробуйте проверить, проведите эксперимент. Главное не закрывать на это глаза, ведь лишние 5 минут потратить не жалко. Тем более если вы перед этим написали статью и вложили туда частичку себя. Думаю, не будет лишним, как можно лучше оформить её, а вы как думаете?

Почему важно прописывать теги title и alt? Как они добавляются к изображениям?

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

Вот и они:

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

Короче преимущества в следующем, это для тех, кто еще не убедился до конца.

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

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

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

С уважением, Жук Юрий.

Здравствуйте, уважаемые друзья. Сегодня, по просьбе одного из моих подписчиков, расскажу про тег (атрибут) ALT, который должен присутствовать в параметрах каждого изображения на сайте.

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

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

Зачем нужен атрибут alt

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

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

Alt="значение"

Как проверить изображения на наличие атрибута alt

Самый простой и доступный каждому способ – это проверить исходный код страницы (валидация кода) на ошибки.

Для этого нужно открыть сервис проверки кода W3C и ввести url страницы.

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

Примечание: если ошибок много, советую использовать поиск CTRL+F для быстрого поиска нужной информации.

А вот ещё один способ, который позволит узнать об ошибках в исходном коде вашего сайта. Но, для использования этого инструмента нужно зарегистрироваться в кабинете веб-мастера Bing. И в этом самом кабинете есть инструмент «Средства анализа SEO» .

Где вы также вводите адрес страницы сайта для анализа и получаете отчёт. И если где-то отсутствует тег alt , вы это увидите.

Можно также посмотреть исходный код страницы, увидеть, где именно нужно искать. Для этого нужно перейти в закладку «Код страницы» и найти, где допущена ошибка. Сделать это легко, нужный код будет выделен жёлтым цветом.

Как найти нужный фрагмент исходного кода и добавить атрибут alt

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

— на имя файла изображения,

— на название класса, блока в котором размещено изображение,

— на соседние элементы.

Все эти элементы помогут в дальнейшем с поиском файла, а в нём и нужного фрагмента исходного кода.

В качестве примера, посмотрите на размещённый выше скриншот. Код, который нам нужен, ничем не примечателен. Да, мы знаем, что это баннер на новую бесплатную книгу Азамата . Более того, мы знаем, что баннер расположен в сайтбаре. Но представим, что я не обратил на это внимание. Так что можно узнать из этого кода?

Прежде всего, мы знаем имя файла изображения. И неважно, что расположено изображение на другом сайте. Также мы видим, блок ДИВ с классом

. И то, что этот блок находится внутри списка, элемент которого имеет идентификатор id=»text-10″ .

И уже по классу «textwidget» становится понятно, что нужный нам код расположен в Виджетах. А раз так, то искать все эти элементы, на которые мы обратили внимание – бесполезно. Так как в большинстве тем WordPress виджеты в сайтбаре формируются динамически. А значит, в коде файла, отвечающего за cайтбар (sidebar.php ) будет преимущественно php код. Который никак не укажет на конкретный виджет.

Следовательно, идём в административную панель WordPress – «Внешний вид» — «Виджеты» и ищем нужный виджет.

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

До

После

alt="Инфомаркетинг 20/80" />

Вот и всё готово.

Но, с виджетом всё понятно, тут любой справится. А как быть с конкретными элементами дизайна?

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

Открываем вкладку «Код страницы» и анализируем код. Ищем элементы, за которые можно зацепиться, по которым можно найти нужный файл и код.

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

Далее, лучше сделать резервную копию файл (скопируйте отдельно на компьютер) и можно приступать к редактированию. В Total Commander достаточно выбрать файл и нажать клавишу F4. Или можно скопировать файл на компьютер и открыть его через Notepad++. Ну, или на крайней случай, через Блокнот.

Итак, открываем файл и ищем нужный код. Можно использовать поиск CTRL+F.

Нашли, и вставляем нужный атрибут alt. Итак, со всеми изображениями, у которых он отсутствует.

После того как изменения внесены, сохраняете файл и снова проверяете инструментами анализа.

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

И конечно, почитайте статью про в целом. Узнаете, что изображения многих шаблонов не только не имеют тегов alt, но вовсе не оптимизированы.

А у меня на этом сегодня всё. Жду ваших комментариев. Всех успехов и хорошего настроения! До встречи в новых видео и статьях.

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

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

<A HREF = "http://www.yoursite.com" title = "заголовок вашей страницы" alt = "заголовок вашей страницы"> заголовок вашей страницы

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

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

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

<IMG SCR ="/images/seo/alt-and-title-attributes.gif" title ="Атрибуты ALT и TITLE тега IMG" alt ="Атрибуты ALT и TITLE тега IMG" />

Атрибуты 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 и его следует размещать в том же абзаце < p> , ячейке таблицы < td> или теге
, что и картинка .

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

ОПТИМИЗАЦИЯ ИЗОБРАЖЕНИЙ

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

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

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

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

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

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

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

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

ПРАКТИЧЕСКИЕ СОВЕТЫ

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

использовать в качестве анкорного текста общие слова вроде “страница”, “статья”, или “кликните здесь”;

использовать анкорный текст, не имеющий никакого отношения к материалу по ссылке;

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

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

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

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

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

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

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

ставить лишние ссылки, не имеющие навигационной ценности для пользователей.

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

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

Сюда еще можно добавить правильное название исходного файла, перед загрузкой на сайт. Об этом поговорим ниже.
Про создание уникальной картинки и последующее я выделю отдельные подробные статьи с видео-уроками. Сейчас я же хочу акцентировать свое внимание именно на атрибутах title и alt, так как многие их заполняют неправильно или же не заполняют вообще. А зря!
Ведь с помощью их заполнения можно придать релевантности (соответствия продвигаемому запросу) нашим страницам и увеличить количество трафика на сайт именно из поиска по картинкам. Также сделать страницу более качественной в плане описания, так как даже картинки будут показывать поисковым системам, что они размещены целесообразно, а значит - страница еще более качественная.
Ну а теперь рассмотрим процесс оптимизации изображений на практике. Как я уже говорил выше, рассмотрим заполнение всех данных - title и alt картинок.
Но для начала даю видео-презентацию, в которой я объяснил основные моменты, которых вам будет вполне достаточно, чтобы все сделать правильно и не допустить жестких ошибок. Приятного просмотра.
Как правильно заполнять title и alt изображений?
Сначала скажу пару слов об этих атрибутах. Зачем они нужны?
Основная задача - дать поисковым системам понять, о чем то или иное изображение. Также эти параметры позволяют попасть изображениям в поиск по картинкам по определенным запросам, которые мы и пропишем в данных атрибутах.

Теперь рассмотрим, как же нужно заполнять их.
На этот счет существует просто огромнейшее количество мнений. У меня сформировалось свое виденье, исходя из изучения различных курсов и докладов людей, разбирающихся в сайтов.
Сначала разберем, что это за атрибуты.
Title - во всех случаях это тег заголовка чего-либо (заголовка записи, изображений и так далее);
Alt - атрибут тега img itemprop="image", который описывает изображение. Еще называется "альтернативный текст".

Атрибут alt является очень важным для изображений. Его нужно заполнять в 100% порядке. На заполнив же Title, ничего плохо не произойдет, но для лучшего эффекта также необходимо на него обращать внимание.
Первый также отображается на сайте в виде текста, когда картинка не загружается по определенным причинам. Заголовок отображается при наведении на картинку, расположенную в статье.
На практике, если просмотреть код изображения на сайте, title и alt выглядят следующим образом.

Видим, что эти атрибуты находятся в коде во 2й строке. Им заданы определенные значения, а точнее те фразы или слова, которые описывают содержимое картинки. Именно содержимое картинки, а не ключевые слова и еще что-то.
Сейчас уже нельзя вписывать в данные атрибуты большое количество ключевых слов, а там более в каждое изображение статьи. Представьте, что у вас на странице 40 изображений. Если вы пропишите в title и alt всех изображений ключевые сова, то вероятно, что попадете под санкции поисковых систем и высоких позиций в выдаче не видать.
Единственное правило, которого я придерживаюсь и рекомендую использовать его и вам - прописывать в данных атрибутах очень краткое описание того, что изображено на картинке.
Можно также вписать и ключевое слово, по которому продвигается статья, но сильно с этим не играйтесь. Я прописываю максимум к одному изображению в статье - к главной первой миниатюре.
Будет очень хорошо, если ваша картинка будет окружена тематическим текстом, который также ее описывает. Но опять же, все должно быть понятно посетителю и не восприниматься, как какая-то манипуляция. Все делаем естественно. Если тематический текст не имеет места быть возле картинки, то просто пропишите title и alt к изображению и все.

Title и alt должны быть одинаковы?
И снова куча мнений. Кто-то говорит, что должно быть различие, а кто-то - лучше эффект, когда одинаковые. Я же больше склоняюсь верить каким-то фактам. Для этого я взял пару очень успешных ресурсов и посмотрел, как прописываются данные атрибуты у них.
На ресурсах, которые быстро получили хорошие результаты, оптимизация изображений сводится к одинаковому заполнению обоих атрибутов. Да и ключевые слова в них не содержатся. В них действительно прописывается краткое описание того, что изображено на картинке.
Поэтому, следующий вывод - атрибуты title и alt можно делать одинаковыми.
Но, это не 100% догма. Можете сделать их немного отличными, но чтобы смысл не терялся от этого. И тайтл и альт должны описывать изображение. К тому же title может вообще отсутствовать (ошибки в этом нет) и содержать иную информацию кроме описания самой картинки. Более подробно о грамотном заполнении альта и тайтла я . По предыдущей ссылке я копнул глубже в вопросе заполнение данных тегов. Очень советую проштудировать материал.

Как практически прописать атрибуты к изображению
Если вы используете какой-нибудь движок, то в нем предусмотрена такая функция. Вероятнее всего, что у вас сайт на WordPress. В нем все делается очень просто.
Во всплывающем окне задаются параметры изображения, в том числе прописываются title и alt.
Заполняем все и и не забываем обновить файл, что изменения вступили в силу. Так делаем с каждым изображением.
Если же у вас сайт не управляется никакой платформой, то есть простая html страница, то придется добавлять руками.
Я рекомендую сделать следующим образом. Естественно, вам потребуется исходный код сайта, где вы можете увидеть код изображения. Вам нужен открывающий тег
Чтобы сильно не ломать голову, дам тот же код, что и ранее. Возьмите его, как болванку себе.

Смотрите на него, как на образец, куда необходимо вставлять атрибуты, которые копируете из этого же кода. Затем прибавляете их к своим картинкам, заполнив при этом свое описание.
Не забываем, что заполняем эти данные, исходя из содержимого картинки. Описываем само изображение!
С этим вопросом разобрались. Тут все предельно ясно.
Вкратце вывод таков: "title и alt заполняем одинаковыми и прописываем в них описание самого изображения, то есть того, что изображено на картинке" .
Данный вопрос мы рассмотрели. Но тема оптимизации изображений многогранна и есть еще другие важные моменты, используя которые, можно улучшить эффект своего сайта.

Другие важные моменты
Имеется еще 3 вещи, которые я не рассмотрел выше:
название файла изображения;
уменьшение веса изображений;
уникальность картинок для сайта.

Сейчас я рассмотрю только 1й момент, так как под остальные 2 я выделил полноценные объемные материалы.

Про название файла мало кто пишет в интернете. Но тут также имеются свои нюансы. Как нужно называть сам файл, перед загрузкой его на сайт?
Как всегда, мнения разделяются. Кто-то пишет, что нужно употреблять ключевые слова. Кто-то, что необходимо называть описанием картинки, то есть точно также, как title и alt.
А некоторые загружают файлы с любыми названиями. Сделали скриншот с помощью какой-то программы. Ему было присвоено имя текущей датой, таким его и загрузили.
Я склоняюсь больше ко второму варианту, когда мы и в названии самого файла тоже стараемся описать изображение. Никаких ключевых слов, за исключением самой главной картинки в статье. И то, можно не употреблять и там.
В пример покажу изображение из предыдущий статьи моего блога про создание формы подписки на обновления сайта. Возьму следующую картинку.
Код изображения имеет вид.

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

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

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

Для начала возьмем любую картинку и в качестве примера разберем, что прописывать в тег alt, а что явно не стоит.

«Фото №1» , или что-либо в этом духе. Так точно не стоит прописывать атрибут alt! Описывает картинку чисто технически и абсолютно не раскрывает ее содержание.

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

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

«Вязаная шапочка компании Bizonoff» - данный вариант представляется оптимальным, так как точно отражает как изображенное на фотографии, так и в максимальной степени удовлетворяет запросам пользователей. Такой alt отражает название компании, слово «шапочка» отражает габаритные размеры изделия (по крайней мере намекает, что эти размеру не большие), а также каким образом выполнено приведенное изделие. Если на вашем интернет-магазине, landing page или просто информационном сайте существуют типовой продукт отличающийся цветом Вы можете отразить это в атрибуте alt – «вязаная шапочка компании Bizonoff коричневого цвета» .

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

Как прописывать атрибут alt

Длина текста в атрибуте alt должна составлять до 230-250 символов. При этом минимальная длина 3-4 слова. Это объясняется чисто практическими наблюдениями – очень тяжело написать alt, отражающий всю суть изображенного объемом менее 3х слов.

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

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

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

Несколько слов насчет атрибута title для изображений

Основываясь на собственных экспериментах в области продвижения можно с уверенностью сказать, что title учитывается только поисковым алгоритмом Яндекса и полностью игнорируется гуглом. Лично я использую title только для юзабилити. Если же говорить о том, что писать в title, то я вставляю в него тоже, что и в alt. Это объясняется тем, что написать что-то отличное от текста в альте просто очень и очень тяжело. Да и можно сказать незачем.