ALT картинки — как правильно прописать

Атрибуты Alt и Title для картинок. Ответы на популярные вопросы

like160

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

Что такое атрибут Alt?

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

В HTML-коде атрибут прописывается следующим образом:

Рассмотрим на примере.

Пример изображения с alt

Для примера я взял фото с сайта обоев для рабочего стола. Основной контент страницы – изображения.

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

Как выглядит alt при отключенных картинках

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

Появляется следующий вопрос: что же нужно добавлять в Alt, чтобы он был максимально полезным и для пользователя, и для поисковика?

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

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

Пример товара: мячик для собак

Есть несколько вариантов заполнения атрибута:

Вариант 1. В качестве альтернативного текста используем «Фото №1», «Картинка 1» и т. д. Такой альтернативный текст не несёт никакой пользы, так как не даёт информации об изображении. Более того, как пишет Яндекс: «Картинки, у которых отсутствуют содержательные описания, не попадают в поиск, так как не могут быть найдены по запросам». Подробнее: «Индексирование картинок».

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

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

Вариант 4. Alt «Мячик для собак Humunga Chomp» – этот вариант оптимален для нас. Атрибут содержит название товара и его производителя. Если такого товара много, можно расширить Alt, используя цвет, название модели.

Вариант 5. Alt «Мячик для собак Humunga Chomp, игрушка Humunga Chomp, купить, недорого, Москва» – такой вариант может быть воспринят поисковой системой как спам и нужного результата не принесёт.

Из этих примеров следует, что атрибут Alt:

  • должен быть содержательным и описывать картинку;
  • состоять из 3–5 слов, но не больше 250 символов (сложно описать картинку двумя словами);
  • по возможности содержать ключевой запрос;
  • не должен быть спамным.

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

Title у картинок даёт дополнительную информацию об изображении. Он нужен для того, чтобы пользователю было проще понять, что изображено на картинке. Атрибут выводится при наведении курсора на изображение.

Как выглядит атрибут title

На картинке выше видно, как отображается атрибут на странице.

В HTML-коде атрибут прописывается следующим образом:

Если картинка будет ссылкой, Яндекс рекомендует указывать Title в ссылке:

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

Основные требования к Title похожи на требования к Alt:

  • должен быть содержательным и описывать изображение;
  • состоять из 3–5 слов, но не больше 250 символов;
  • не должен быть слишком большим, так как при наведении текст в 3–4 строчки может отпугнуть;
  • по возможности содержать ключевой запрос;
  • не должен быть спамным.

Зная это, перейдём к вопросам.

Ответы на популярные вопросы по Alt и Title

Alt это описания к изображениям?

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

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

Если Вас интересует трафик из поиска по картинкам, Alt обязательно нужно заполнять, Title – по желанию.

Alt и Title должны быть разными или одинаковыми?

Существует два основных мнения по этому поводу:

1) Alt и Title должны быть уникальными;

2) атрибуты должны быть одинаковыми.

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

Яндекс по этому поводу пишет следующее:

Ответ Платона по одинаковым alt и title

Я считаю, что эти атрибуты могут быть одинаковыми. Главное, чтобы они давали чёткое структурированное описание вашей картинке.

Нужно ли прописывать возле атрибута Alt ещё и Title?

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

В Alt картинки надо ставить те же ключевые слова, что и у статьи, или другие?

Желательно. Главное, чтобы Alt был содержательным и описывал картинку.

Нужно ли прописывать в этих атрибутах ключевые слова?

Если эти ключевые слова будут описывать картинку, то да.

Как правильно писать атрибут Alt: кириллицей или латиницей?

Если ваш сайт на русском, заполняйте кириллицей.

Как писать – с большой или маленькой буквы?

Не имеет значения.

А если статья уже проиндексирована поисковиками, можно внести описание в картинки или не стоит?

Можно. Когда поисковики переиндексируют вашу страницу, они учтут эти описания.

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

Всё зависит от того, на какой CMS сделан ваш сайт.

Если это чистый HTML, то:

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

Где заполнять alt и title в WordPress

Если же ваш сайт на 1С-Битрикс, в дополнительных настройках параметров изображения есть поле для атрибута Alt. Атрибут Title будет подтягиваться из поля «Заголовок».

Где заполнять alt и title в 1С-Битрикс

Нужно понимать, что всё индивидуально. Многое зависит от того, на какой CMS сделан ваш сайт и как настроен.

Стоит ли и возможно ли прописывать Alt и Title для своих картинок в комментариях?

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

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

Такое происходит из-за кодировки. Нужно преобразовать текущую кодировку в UTF-8.

Итоги

Ещё раз пробежимся по тому, какими же должны быть Alt и Title.

Основные требования к атрибуту Alt:

  • содержательный, описывает изображение;
  • длиной около 3–5 слов (до 250 символов);
  • по возможности должен включать ключевой запрос;
  • не должен быть спамным.

Почему стоит заполнять Alt:

1. учитывается поисковыми системами при ранжировании картинок, а значит, если ваша картинка попадёт в ТОП, – это источник дополнительного трафика;

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

  • содержательный и описывает изображение;
  • длиной около 3–5 слов или до 250 символов;
  • по возможности должен содержать ключевой запрос;
  • без спама.

Почему стоит заполнять Title:

1. будет полезен пользователю, которому сложно разобраться, что изображено на картинке;
2. подсказки Title могут положительно отразиться на поведенческих показателях сайта.

Тег alt для изображений: зачем нужен и как правильно оформить

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

Тег alt для изображений

Этот вопрос интересует всех «молодых» владельцев сайтов. В частности, его часто задают участники моего бесплатного онлайн-тренинга, как создать свой сайт. Кстати, тренинг длится всего 4 дня. Он построен на практических заданиях. Участники просто повторяют за мной, и после окончания учебной программы у них на руках остается свой веб-ресурс – полностью готовый к развитию и продвижению. Если давно мечтаете о личном проекте, но у вас пока не было возможности заказать сайт, можете сделать его своими руками. Чтобы принять участие в обучении просто оставьте адрес своей электронной почты.

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

Зачем нужен тег alt для изображений: лаконично о главном

Зачем нужен тег альт

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

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

Как правильно прописать тег alt для изображений: основные правила и рекомендации

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

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

1. Краткое описание изображения

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

2. Оптимальная длина

Идеальный вариант – три-четыре слова. Больше – нет смысла. Потому что именно их учитывают поисковые роботы при анализе сайта.

3. Наличие ключевых слов

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

4. Уникальность для каждой отдельной картинки

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

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

  • фотоаппарат NIKON D5600 AF-P 18-55;
  • камера NIKON D5600 AF-P 18-55 вид спереди;
  • фотокамера NIKON D5600 AF-P 18-55 черного цвета;
  • NIKON D5600 AF-P 18-55 вид сверху.

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

5. Подпись под картинкой

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

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

  • гармонично вписать ключевые слова;
  • указать факт про предмет, который показан на картинке.

Допустим, что на изображении – наушники фирмы «Кактус» (название выдумано). Тогда хороший вариант подписи к картинке – «Наушники «Кактус» хорошо звучат и помогают прочувствовать каждую ноту» или «Звук в наушниках «Кактус» стал намного приятнее благодаря современной технологии «Молния»». (Название технологии, как вы могли догадаться, тоже выдумано).

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

Тег alt для изображений: как к нему относятся поисковые системы

Зачем прописывать тег alt для изображений

Очень и очень трепетно.

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

Google также учитывает тег. Кроме того, чтобы картинка оказалась на первых позициях, поисковые роботы учитывают такие показатели:

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

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

Тег alt для изображений в распространенных CMS

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

1. WordPress

Тег альт в Вордпресс

Сделать это можно двумя способами. Для этого не нужны какие-то особые умения, а также не потребуются и специальные плагины.

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

Второй метод – если картинка уже добавлена в тело статьи. Тогда нужно просто выделить ее и кликнуть на «карандаш», который появится в подсказке. После этого откроются поля с параметрами для заполнения.

2. Joomla

Альт в Джумла

Тут теги прописываются непосредственно на этапе загрузки картинки в тело статьи. Нужно нажать на соответствующую иконку в редакторе. После этого откроется дополнительное окошко с полями для заполнения.

3. Opencart

Тег альт для опенкарт

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

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

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

Тег alt для изображений: в завершение

Зачем альт для изображений

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

ALT картинки — как правильно прописать

Тема сегодняшней статьи – SEO — оптимизация изображения с помощью атрибута ALT. Многие не знают, что при оптимизации данного атрибута вы повышаете вероятность посещения вашего сайта. Итак, более подробнее расскажу далее в статье:

Что такое атрибут ALT?

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

Так же, как и Title и Description он учитывается поисковой системой

ALT правильная загрузка тега на сайт

Синтаксис html описания картинки

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

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

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

Пустые атрибуты ALT и TITLE. Как правило, многие SEO оптимизаторы не заморачиваются по поводу этого тега. Да, возможно, если ваш сайт очень крупный имеет посещаемость 100000 в сутки заморачиваться не стоит, но если вы только раскручиваетесь и вам нужен первый трафик, то указать атрибуты все же стоит.

Не соответствие изображения и атрибутов. Допустим если на вашей картинке отображена BMW X5, а в атрибуте прописываете Audi A3, то не ждите что человек перейдет по вашей картинке на сайт.

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

Так же поисковые системы могут наложить на вас санкции, поэтому не увлекайтесь.

А как же нужно прописывать теги для картинок?

Краткое и понятное описание картинки. Как можно точнее опишите изображение и если ALT был создан автоматически перепроверьте все страницы.

Длина атрибута ограничена. Поисковые системы учитывают 3-4 слова (около 250 символов) что затрудняет описание картинки.

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

Уникальные атрибуты для каждой картинки. Так же важная составляющая, самая встречающаяся проблема у SEO-оптимизаторов. На примере я вам покажу как ее решить.

Карточка товара содержит много картинок

атрибут ALT у сайта Ситилинк

Как же разделять картинки одного и того же товара, если спамить нельзя и нужно прописывать все уникальное? Допустим “Сплит-система HYUNDAI H-AR6-07H” можно расписать так:

“Сплит-система HYUNDAI H-AR6-07H Вид 1”

“Сплит-система HYUNDAI H-AR6-07H Вид 2”

Похожие товары

Атрибут ALT у компании MediaMarkt

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

Размер изображения – чем больше разрешение картинки, тем лучше. В любом случае ее отображение можно подкорректировать благодаря атрибутам “width” и “height”. Но не стоит делать картинку слишком маленькой, в противном случае поисковые системы не будут учитывать изображение меньше 150 пикселей и будут считать ее за иконку.

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

Уменьшение веса изображения. Размер картинки играет ключевую роль, ведь если она будет весить очень много, что даже будет тормозить скорость загрузки сайта это скажется на ранжировании всего сайта. Да-да бывало и такое!

Формат изображений. Рекомендую использовать проверенные временем и не запрещенные поисковыми системами – JPG, PNG, GIF.

Подпись под картинкой

Если на вашем сайте очень много картинок и почти нет текста, подпись картинкой будет полезна, поэтому именно с точки зрения SEO необходимо ее оптимизировать:

  • Указать ключевые слова. Вхождение ключевиков в подпись обязательно, так как данный текст сыграет роль в ранжировании всей страницы;
  • Указать какой-либо факт/преимущество о картинке.

Например, у вас картинка динамиков Iphone 7.

атрибут ALT - мнение Яндекса

Далее в хелпе Яндекса наткнулся на очень интересный ответ:

“Как поместить мою картинку на первое место?»

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

Яндекс про атрибут ALT

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

Ранжирование картинок в Google

Помимо вышеупомянутого ALT, вот что учитывает Google в ранжировании изображений.

ALT в Google

Давайте пробежимся по главным факторам для Google.

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

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

А что по поводу атрибута Title

Google не упомянул, а Яндекс по минимуму атрибут Title. (Не путать с тегом <Title>). Указать лишним точно не будет, только можно по тому что Title при наведении на картинку отображается и несет в себе смысл. В этом плане, как и с текстом под картинкой можно экспериментировать, указывать полезную информацию: различные факты, преимущества и так далее.

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

Вот и все. Задавайте вопросы в комментариях, кто что думает по поводу атрибутов ALT, TITLE. Как вы оформляете изображения?

ALT и TITLE атрибуты: оптимизируем картинки

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

Содержание статьи:

1. Что такое атрибут ALT

Атрибут Alt – это текстовое описание для изображения внутри HTML тега < img src >. Данное описание (тег ALT для изображений) становиться видимым пользователю в случае невозможности загрузки картинки. На месте, где должна быть картинка пользователь увидит данное текстовое описание. Другими словами, ALT артибут – это альтернативный источник информации об изображение для пользователя.

Почему пользователь может не видеть картинку:

  • отображение картинок отключено в браузере;
  • слабый интернет.

Поэтому, если ALT атрибут заполнен, пользователь увидит текстовое описание картинки:

В HTML-коде атрибут ALT имеет следующею конструкцию:

<img src=»https://advermedia.ua/blog/alt-title-atributs/%D0%9F%D1%83%D1%82%D1%8C%20%D0%BA%20%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8E» alt=»Альтернативное описание картинки» />

Почему ALT атрибут важен для заполнения:

  • возможность прочитать, что отображено на картинке, если у пользователя нет возможности ее увидеть;
  • атрибут ALT учитывается поисковыми роботами, которые сканируют и индексируют страницу;
  • Оптимизация альтернативных названий картинок и атрибутов Alt в теге <img> упрощает поиск по изображениям в Google и Яндекс.

2. Правильное заполнение атрибута ALT для картинок

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

  1. ALT должен быть содержательным и описывать содержание изображения;
  2. ALT должен состоять из 3–5 словдо 70-80 символов (не всегда можно описать содержимое картинки 2 словами);
  3. ALT должен содержать (по возможности) ключевой поисковый запрос, при этом, он не должен быть спамным. Чтобы облегчить поиск – лучше использовать именной падеж;
  4. ALT не должен дублировать заголовки страницы (к примеру TITTLE или подзаголовки H2-6).
  5. ALT, желательно, должен иметь приставку: «фото», «картинка», «изображение»

3. Частые ошибки при заполнение атрибута ALT

Разберем наиболее частые ошибки и неправильное заполнение атрибута ALT изображения:

Ошибка 1. Отсутствие заполнения:

<img src=»https://advermedia.ua/blog/alt-title-atributs/%D0%9F%D1%83%D1%82%D1%8C%20%D0%BA%20%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8E» alt=»» />

Важно:
Стоит обратить внимание на инструкцию Яндекса: « Картинки, у которых отсутствуют содержательные описания, не попадают в поиск, так как не могут быть найдены по запросам ».

Ошибка 2. Отсутствие описания содержания изображения:

<img src=»https://advermedia.ua/blog/alt-title-atributs/%D0%9F%D1%83%D1%82%D1%8C%20%D0%BA%20%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8E» alt=»Фото 1″ />
<img src=»https://advermedia.ua/blog/alt-title-atributs/%D0%9F%D1%83%D1%82%D1%8C%20%D0%BA%20%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8E» alt=»Картинка №1″ />
<img src=»https://advermedia.ua/blog/alt-title-atributs/%D0%9F%D1%83%D1%82%D1%8C%20%D0%BA%20%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8E» alt=»Изображение #1″ />

Ошибка 3. Переспам или перечисление ключевых слов:

<img src=»https://advermedia.ua/blog/alt-title-atributs/%D0%9F%D1%83%D1%82%D1%8C%20%D0%BA%20%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8E» alt=»#Название товара# — купить по низкой цене, бесплатная доставка Киев, стоимость в Киеве, недорого» />
<img src=»https://advermedia.ua/blog/alt-title-atributs/%D0%9F%D1%83%D1%82%D1%8C%20%D0%BA%20%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8E» alt=»Картинка №1″ />
<img src=»https://advermedia.ua/blog/alt-title-atributs/%D0%9F%D1%83%D1%82%D1%8C%20%D0%BA%20%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8E» alt=»Изображение #1″ />

4. Что такое атрибут TITLE

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

В HTML-коде атрибут TITLE имеет следующею конструкцию:

<img src=»https://advermedia.ua/blog/alt-title-atributs/%D0%9F%D1%83%D1%82%D1%8C%20%D0%BA%20%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8E» alt=»» title=»Альтернативное описание картинки»/>

Как TITILE видит пользователь:

Как TITLE выглядит в коде:

Важно:
Google игнорирует тег TITLE в своих рекомендациях по оптимизации картинок. В свою очередь Яндекс. выводит конкретные рекомендации по его использованию тут :

Дополнительно:
Если картинка будет ссылкой – указываем атрибут для ссылки (рекомендация Яндекса):

<a title=» Подсказка » href=»Ссылка»><img src=»https://advermedia.ua/blog/alt-title-atributs/%D0%9F%D1%83%D1%82%D1%8C%20%D0%BA%20%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B5″ /></a>

5. Правильное заполнение атрибута TITLE

Какие требования для заполнения атрибута TITLE для картинки и как правильно заполнить данные. Объективно, основные требования аналогичны ALT:

  1. Атрибут Title должен соответствовать тому, что изображено на картинке.
  2. Атрибут Title должен быть небольшим и состоять из 3-5 слов до 80 знаков. Это подсказка, а не описание.
  3. Атрибут Title изображения, желательно, должен содержать ключевые слова.

6. Практические примеры заполнения ALT и TITLE

Примеры заполнения ALT атрибута:

Пример 1. Для карточек товаров в категории:
Т.к. товаров может быть тысячи, используем шаблон, например:

<img src=»https://advermedia.ua/blog/alt-title-atributs/%D0%9F%D1%83%D1%82%D1%8C%20%D0%BA%20%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8E» alt=»#Название товара#, #актикул#»/>

Где в ## – указаны переменные (такое решение, как правило, внедряется с помощью веб-программиста).

Пример 2. Для фотографий товара на странице товара:

<img src=»https://advermedia.ua/blog/alt-title-atributs/%D0%9F%D1%83%D1%82%D1%8C%20%D0%BA%20%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8E» alt=»#Название товара#, #актикул#» />

При этом, на качественной странице товара, как правило, больше 3+ фотографии, поэтому, есть 2 варианта:

  • можно оставить одинаковый атрибутALT
  • можно минимально уникализировать, пример:
    1. <img src=”Путь к изображению” alt=”#Название товара#, #актикул# – фото товара” />
    2. <img src=”Путь к изображению” alt=”Изображение товара #Название товара#, #актикул#” />
    3. <img src=”Путь к изображению” alt=”#Название товара#, #актикул# – #название сайта# ” />

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

Пример 3. Для фотографий одного товара с разными цветами:

Оптимальный вариант – добавление переменной цвета:

<img src=»https://advermedia.ua/blog/alt-title-atributs/%D0%9F%D1%83%D1%82%D1%8C%20%D0%BA%20%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8E» alt=»#Название товара#, цвет #тут название цвета# #актикул#» />

Если же цвет уже есть в название товара, к примеру:

Это делать не нужно.

Также, нужно обратить внимание на пример от Google:

7. Как проверить отображение ALT атрибута

Как посмотреть ALT и TITLE атрибуты на сайте? Есть 2 простых способа это сделать:

Способ 1. Через браузер

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

Как это сделать:

  1. Перейдите в настройки
  2. Нажмите Дополнительно
  3. Выберите пункт:
  4. Далее п. Картинки
  5. Уберите галочку (для всех сайтов) или добавьте конкретный сайт

Способ 2. Через программный код

Нажмите правой кнопкой миши на изображение – далее посмотреть код:

8. Ответы на частые вопросы

Alt и TITLE – это описание изображение?
Нет. ALT – это альтернативное описание картинки. Title – это дополнительная подсказка. Google не рекомендует делать длинные атрибуты.

Могут ли Alt и Title дублировать друг друга?
Дублирование содержания допустимо.
Согласоно комментариями Джона Мюллера (Google) – при дублирование атрибутом это безусловно будет считаться дубликатом, но в этом нет никакой проблемы.

Яндекс рекомендует делать TITLE уникальным (но ничего не указывает, относительно дублирования содержания атрибута ALT и TITLE):

Но в других источниках можно встретить, что дублирование допустимо:

Многие крупные магазины используют формат повторения H1, пример:

Обязательно ли заполнять атрибуты Alt и Title для картинок?
Что говорит Яндекс:

Что говорит Google:

Объективно, поисковые системы рекомендуют заполнять атрибуты. На практике, основным тегом атрибутом ALT, тайтл удобно использовать как дополнение для юзабилити. Поэтому, если вам нужен трафик из поиска по картинкам и у вас отсутствует альт – у вас будут трудности.

Писать с большой буквы или маленькой?
Это не имеет значения.

На каком языке заполнять атрибуты Alt и TITLE?
На том языке, на котром сайт. Если ваш сайт на русском языке – заполните атрибуты на русском.

Где обычно заполняются атрибуты Alt и TITLE?
Как правило, это делается с помочью системы управления контентом (CMS). Поэтому, все зависит от возможностей админки.

Какой ALT и TITLE должен быть у логотипа сайта
Исключительно название компании.

Через CMS:
К примеру, в WordPress есть предустановленное поле при загрузке изображения:

Вручную:
Если заполнение атрибутов необходимо выполнить вручную через код, вам нужно добавить в код ссылки:

<іmg srс=»Путь к картинке»>

Атрибуты:
alt=”Альтернативное описание” title=”Дополнительная информация”

Атрибуты alt и title для картинок оптимизация изображений приносит трафик

Атрибуты alt и title для картинок оптимизация изображений приносит трафик

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

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

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

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

Как заполнить атрибут alt, заголовок и описание картинок

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

Чтобы оптимизировать картинку на вашем блоге, зайдите в консоль сайта и перейдите в «Медиафайлы», затем нажмите на картинку, которую решили оптимизировать, перед вами откроется изображение и с правой стороны нужно заполнить поля:

  • атрибут alt;
  • заголовок;
  • описание.

Подпись заполнять не обязательно, иначе в тексте это описание будет видно всем вашим читателям.

В атрибуте alt нужно написать краткое описание того, что изображено на картинке, например, к картинке с окном я напишу «Установка окна».

Атрибуты alt, заголовок и описание к картинке

А теперь заголовок: здесь нужно прописать название латинскими буквами. Чтобы правильно это сделать, открываем любой поисковик и в строку вводим «Транслитерация онлайн», открываем вот этот транслит переводчик.

Поисковик Яндекс

Войдя в него, с левой стороны в меню выбираем подпункт «Транслитерация для поисковиков Яндекс и Google». Затем, в окошко «Русский текст для перевода» вставляем наш текст (атрибут alt) и ниже нажимаем «перевести». Копируем перевод и в консоли сайта вставляем в поле «заголовок».

Транслитерация для поисковиков Яндекс и Google

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

В последствии, при публикации статей, лучше сразу прописывать все эти атрибуты при добавлении картинок на сайт.

Как правильно прописать атрибуты для изображения записи (тизер).

Изображение записи оптимизируем следующим образом:

1. При публикации статьи, когда вы уже внесли текст и задали рубрику для новой статьи, нажмите «Сохранить», затем копируете ссылку будущей статьи (это будет название изображения записи).

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

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

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

3. Возвращаемся к статье и с правой стороны нажимаем на «Установить изображение записи».

4 Закачиваем картинку и начинаем прописывать в атрибуте alt и описании (полное название статьи) русскими буквами.

атрибут alt и описание к тизеру

5. Заголовок у нас уже готов и поэтому останется без изменений.

4. Внизу нажимаем «Установить изображение записи».

Как задать атрибут title у изображений в консоли wordpress

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

Открыть изображение для редактирования

Чтобы прописать атрибут title, нажимаем на карандаш, перед нами откроются «Сведения об изображении». Но здесь все атрибуты у нас заполнены, поэтому переходим в «Дополнительные настройки», вот тут то нам и нужно прописать title, затем не забываем обновить изменения.

Прописать title к картинке

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

Атрибуты alt и title в картинке

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

Главное помнить, что при добавлении изображения, нужно в строках alt и title прописать ключевое слово.

Но не нужно писать много, достаточно будет 1-2 ключевых слов.

Теперь вы знаете, как прописать атрибуты alt и title у изображений.

Также будет полезно прочитать статью о том, как уменьшить вес картинки без потери качества. До новых встреч!

0 0 голоса
Рейтинг статьи

аниме дьявольские возлюбленные 3 сезон 1

великий уравнитель трейлер русский

ostwind смотреть

Ссылка на основную публикацию