Opencart alt image: Alt and Title for product image

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

Наличие атрибута alt — один из факторов ранжирования сайта. Он наряду с другими инструментами делает сайт удобнее для пользователей и влияет на попадание картинок с сайта в Яндекс.Картинки и Google Images. Для его заполнения есть несколько правил, о них и расскажем.

Что такое alt

Чтобы добавить изображение на страницу, в HTML-коде используют тег <img>. У этого тега есть дополнительный параметр, «атрибут», — alt. Он помогает добавить к картинке текстовое описание. 

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

Изображение не открылось, и мы видим на его месте текстовое описание

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

  • Alt делает сайт удобнее для пользователей. Благодаря ему даже без картинок посетитель сможет примерно понять, что изображено.
  • Наличие alt — один из факторов ранжирования страницы. Поисковые роботы Яндекса и Гугла учитывают его во время анализа страницы.
  • Картинки с прописанным alt могут попасть в Яндекс.Картинки и Google Images, их увидят потенциальные клиенты и попадут на сайт: 

Изображения в Яндекс.Картинках по коммерческому запросу

Когда <alt> не нужен

  • На декоративной картинке для оформления страницы:

Эта картинка используется только для оформления, так что ее можно не размечать, nic.ru

  • На иконках:

Иконки несут декоративный характер, nic.ru

  • На аватаре:

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

Правила заполнения alt

Атрибут заполняется внутри тега <img> в HTML-коде страницы:

<img src=»https://storage.nic.ru/ru/images/png/1.competitor-analysis-1.png» alt=»Поиск конкурентов через Вордстат» />

img — тег для вставки изображения;

src — ссылка на него;

alt — текстовое описание.

Есть несколько правил, по которым нужно прописывать атрибут alt.

1. <alt> должен описывать содержание картинки.

Нет

alt=»Животное»

Да

alt=»Черно-белый чихуа-хуа в вязаной шапке»

2. Не больше пяти слов и до 125 символов.

Нет

alt=»Щенок чихуа-хуа с карими глазами и бежевой шерсткой задумчиво смотрит вдаль»

Да

alt=»Бежевый щенок чихуа-хуа»

3. По возможности должен упоминаться ключевой запрос (без спама).

Нет

alt=»Купить щенка чихуа-хуа в Москве»

Да

alt=»Чихуа-хуа 3 месяца»

4. Не дублируйте в alt другие заголовки на странице.

Нет

title=»Бежевые щенки чихуа-хуа в наличии»

alt=»Бежевые щенки чихуа-хуа в наличии»

Да

title=»Бежевые щенки чихуа-хуа в наличии»

alt=»Бежевый щенок с карими глазами»

5. Учитывайте, на какой странице размещена картинка — информационной или коммерческой.

Информационный запрос

alt=»Щенок чихуа-хуа в корзинке»

Коммерческий

alt=»Желтая корзинка Dogsy для собаки»

Частые ошибки

1. Отсутствие атрибута. Внешне на картинку это не повлияет, но она не попадет в поиск.

<img src=»https://Ссылка на картинку.ru» alt=»» />

2. Отсутствие описания изображения. Не стоит писать просто «Картинка» или «Изображение», это и так очевидно и не принесет пользы:

<img src=»https://Ссылка на картинку.ru» alt=»Картинка-1″ />

3. Переспам. Это может быть воспринято как спам и негативно повлиять на позиции сайта.

<img src=»https://Ссылка на картинку.ru» alt=»Купить в Москве бесплатно и без смс» />

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

1. Через браузер. Запретите в его настройках отображение картинок:

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

2. Через панель разработчика. Выделите изображение → Исследовать элемент. В коде должно появиться img и alt:

Главное об alt

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

Перейти ко всем материалам блога

👉 Custom Title и Alt для картинок (изображений image) в ссылках и теге img

Grek 23 февраля, 2022 Opencart , Opencart Модули 1.5.х , Opencart Модули 2.х , Opencart Модули 3.x , Модули Opencart 0 Comments 321 просмотров

Зачем это нужно?
Атрибуты ALT и TITLE тега IMG

Многие вебмастера не в полной мере применяют атрибуты ALT и TITLE, а то и вовсе игнорируют.
Хотя использование атрибутов title и alt для поисковой оптимизации — это простой способ поднять позиции сайта в поисковых системах.
Внимание
Немного сведений об индексации картинок.
Google индексирует картинки, которые находятся в атрибуте src
Яндекс src и data-src (вот такой он Яндекс)
Практически ВСЕ шаблоны для превью используют уменьшенные изображения, а оригинальные находятся в окружающем теге <a>
1. Это увеличивает вложенность dom и количество элементов
2. Смотрите выше — какие картинки индексируются
Подумайте — стоит ли использовать технологию lazyload, которая подразумевает отсутствие атрибута src

Но для товарных позиций интерес представляет использование и усиление изображений атрибутом alt
Что должно быть в атрибуте
Старайтесь не использовать полное название товара. Разбавляйте каким либо текстом
Красная чашка на столе
Красная чашка под столом
Красная чашка для чая и кофе

Теперь  поговорим об Custom image title alt и  Как это работает.

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

  2. В настройках модуля вы задаете шаблон атрибута
    Купить [name] в [store], что автоматически превратится в Купить название товара в название магазина
    Здесь приведен только пример заполнения, а не рекомендлванное — проявите свою фантазию.

  3. Для уникализации атрибутов, в случае не заполненных свойств для
    атрибутов можно использовать универсальное свойства — шаблон для номера
    фото в списке
    фото [N], которое будет представлено в виде названия товара Фото 1, Название товара Фото 2

HTML тег img применяют для отображения на страницах сайта изображений (картинок).  При необходимости, картинке можно сделать гиперссылки, заключив тег img в контейнер <a>.  (Не кажется это вам банальным?)
Атрибут alt передает описание изображения для браузеров при отключенной графике (или же при отсутствии на сервере)
и будет показано его текстовое содержание. (кто-нибудь сейчас отключает графику?)
Не забывайте, что атрибут alt является обязательным для тэга img (согласно рекомендациям W3C).

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

Отвлекитесь от чтения текста. Вам это и так хорошо известно о полезности атрибутов alt
Зачем использовать ручное, а не автоматическое заполнение? А чтоб красиво, чтоб по падежам попадало.

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

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

Проверено и работает на дефолтном шаблоне
Для шаблонов, работающих не на базе дефолтного, требуется адаптация

Под некоторые  шаблоны адаптация платная.

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

Хочется сказать про установку модуля Custom Image Alt Title и не только его

Забудьте о копировании. Используйте штатные средства
Дополнения -> Установка дополнений
Дополнения -> Менеджер расширений -> Обновить

Это не сложно. Это архипросто, тем более что архив специально для этого подготовлен

OpenCart 1.5.6, OpenCart 2.1, OpenCart 2.3, OpenCart 3.0, OCStore 1.5.5.1.2, OCStore 2.1, OCStore 2.3, OCStore 3.0, Opencart.pro 2.1, Opencart.pro 2.3

Купить у Автора

CustomImageTitleAlt (74.4 KiB)

Редактирование тегов изображений ALT на opencart

Icyjewels

  • #1