Что такое alt и title у изображений и зачем они нужны

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

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

Alt и title — что за атрибуты?

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

Что такое alt и зачем он нужен

Атрибут alt (от alternative text, «альтернативный текст») — это текстовое описание изображения, предназначенное для тех случаев, когда само изображение по какой-либо причине не может быть отображено. Например, если картинка не загрузилась из-за проблем с интернетом или если пользователь просматривает сайт с помощью экранного диктора. Текст из alt выводится вместо изображения и помогает понять, что там должно было быть.

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

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

Пример корректного использования alt в коде:

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

Некорректный пример:

Здесь alt картинки бесполезен: он не сообщает, что именно изображено. Также нельзя оставлять alt пустым без веской причины, если картинка несет смысл. Исключение — если изображение чисто декоративное, тогда alt можно опустить или оставить пустым: alt="", чтобы скринридеры не отвлекали на него внимание.

[vue:start]{"text":"Ваши изображения говорят. Мы помогаем им говорить правильно.","link":"/services/seo/"}[vue:end]

Что такое title и какую роль он играет

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

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

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

Пример использования title в коде:

Здесь title дает уточнение действия: если пользователь наведет курсор на иконку, он поймет, что произойдет при клике.

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

В чем разница?

Хотя alt и title выглядят схожими — оба добавляются в HTML-код и содержат текст, их назначение разное:

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

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

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

Что писать в alt картинки: рекомендации и примеры

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

Общие рекомендации

Краткость. Альтернативный текст не должен быть длинным описанием. Идеальный alt — это 3–10 слов, в которых содержится суть изображения. Длинные фразы воспринимаются хуже, особенно если текст будет озвучивать экранный диктор.

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

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

Какие изображения требуют alt, а какие — нет

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

Нужен

фото товаров, команд, офиса
иллюстрации в статьях и блогах
инфографика, схемы
кнопки и иконки, если они выполняют функцию

Не нужен (alt="")

разделительные линии, узоры
фоновые элементы
иконки, которые дублируются текстом рядом (например, изображение лупы рядом с надписью «Поиск»)

Основные правила написания alt

Не использовать «фото», «картинка», «изображение»
Это очевидно и бесполезно: раз это альт изображения — указывать, что это «фото», не имеет смысла.
Вместо: alt="фото чашки кофе"
лучше: alt="Кружка с черным кофе на деревянном столе"
Вставлять ключевые слова только по смыслу
Если картинка действительно отражает тему запроса — ключ можно использовать, но без насилия над текстом. Пример:
alt="Кожаный рюкзак ручной работы с карманами" — хороший вариант для страницы товара.
alt="Купить рюкзак Москва интернет-магазин скидка" — очевидный keyword stuffing.
Не дублировать текст, расположенный рядом
Если рядом с изображением уже есть подпись, заголовок или абзац с таким же содержанием — повтор не нужен. Альтернативный текст должен дополнять контент, а не повторять его.

Примеры хороших и плохих alt

Иконка:

✘ alt="иконка корзины"

✔ alt="Перейти в корзину"

Если иконка функциональна — alt должен описывать действие.

Инфографика:

✘ alt="инфографика"

✔ alt="Рост посещаемости сайта с января по март 2025 года"

Если на инфографике есть смысл, обязательно его передайте. Для сложной инфографики можно добавить alt, а под ней — подробное текстовое описание.

Кнопка:

✘ alt="кнопка"

✔ alt="Отправить заявку"

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

Фотография товара:

Альт-текст для изображения товаров: alt="Мышь беспроводная Logitech M185 Grey" и alt="Кейс для ноутбука до 15" RIVACASE 5130 Black".

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

Логотип:

✔ alt="Логотип компании «Гринтех»" — на главной странице.

✘ alt="логотип" — слишком абстрактно.

Если логотип служит только фоном или не нужен для озвучивания — можно оставить alt пустым.

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

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

Что важно:

Убедитесь, что при загрузке изображения alt сразу появляется в коде, а не подставляется позже через скрипт.
Если alt заполняется через шаблон, проследите, чтобы подставляемое значение было корректным — не просто название файла или артикул, а осмысленное описание.
В e-commerce-системах (например, на платформе 1С-Битрикс или WooCommerce) alt можно генерировать автоматически на основе названия товара или характеристик — но шаблон надо продумать, чтобы он не выглядел искусственно.

Пример генерации через шаблон:

alt="{{ product.brand }} {{ product.name }} в наличии"

На выходе получится:

alt="Apple iPhone 15 Pro Max в наличии"

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

Как заполнять title: когда он нужен и как писать

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

Где title действительно полезен

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

Иконки без подписи. Если в интерфейсе есть иконки (например, корзина, чат, звонок), и рядом с ними нет текста — можно добавить title, чтобы пользователь не гадал, что именно произойдет при клике.
Кнопки со сжатыми названиями. На баннерах, карточках товаров, плитках с ограниченным пространством можно сократить надпись, а полную версию дать во всплывающем окне.
Баннеры и рекламные блоки. Title позволяет кратко объяснить, куда ведет ссылка, особенно если баннер выполнен как изображение без подписи.
Файлы, вложения, ссылки. Если у файла сжатое или техническое название, в title можно уточнить, что это за документ, не меняя верстку.

Когда title мешает

Несмотря на кажущуюся универсальность, title не всегда уместен. Более того — иногда он портит впечатление от интерфейса.

На мобильных устройствах он не работает. Пользователь не может «навести» палец, поэтому всплывающее окно не появляется. Значит, если информация важная — нельзя рассчитывать только на title.
Повтор текста рядом. Если рядом уже есть текст с тем же смыслом, появление всплывающей подсказки вызывает ощущение дублирования. Это сбивает с толку, особенно если текст и title немного отличаются.

В повторении текста кнопки нет смысла.

Блокировка контента. В некоторых браузерах всплывающее окно перекрывает часть текста или мешает чтению. Особенно это заметно в таблицах и при наведении на мелкие элементы.
Автоматическая генерация без контекста. Если в CMS прописан шаблонный title для всех элементов, он теряет смысл и раздражает — например, «нажмите для подробностей» на каждой кнопке.

Принципы написания хорошего title

Уместность и краткость
Title должен быть лаконичным — не больше одной короткой фразы. Иначе он не читается, всплывает медленно, а у пользователя не остается времени его осмыслить. Хороший title — это 3–8 слов. Пример:
✔ title="Скачать прайс-лист в PDF"
✘ title="Это кнопка, по которой вы можете скачать прайс-лист с актуальными ценами в формате PDF"
Не дублировать alt и соседний текст
Если картинка с подписью уже имеет alt — нет смысла копировать то же самое в title. Лучше дать дополнительную информацию или пропустить title вообще.
Давать подсказку или контекст
В идеале, title подсказывает, что произойдет при клике. Это особенно важно для элементов, поведение которых может быть неочевидным:

Title картинки-баннера на первом экране сайта.

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

Примеры хороших title

Иконка:

✘ title="иконка"

✔ title="Позвонить в техподдержку"

Кнопка:

Баннер:

✘ title="новая коллекция" — повтор изображения.

✔ title="Открыть каталог весна-лето 2025"

Ссылка:

Плитка товара с сокращенным заголовком:

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

Как title используется во внутренней навигации

На сайтах с большим количеством внутренних страниц и функциональных элементов title помогает расшифровывать сокращения и делает интерфейс интуитивнее. Например:

В боковых меню, где разделы названы коротко («SEO», «CRM», «Блог») — можно расшифровать через title:

✔ title="Инструменты для продвижения сайта"

✔ title="Клиентская база и рассылки"

В иконках управления, вроде шестеренки или карандаша — уточнение через title поможет:

✔ title="Настройки профиля"

✔ title="Редактировать описание"

В панели администратора или личном кабинете — если названия опций сокращены или не очевидны.

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

Как alt и title влияют на SEO и поведение пользователя

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

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

Alt и его влияние на SEO

Индексация изображений

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

попасть в поисковую выдачу по картинкам
уточнить тему страницы
повысить шанс на привлечение дополнительного трафика

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

Поведенческие сигналы

Если изображение кликабельно — например, ведет на карточку товара, подробную статью или открывает галерею, то alt может повлиять на то, как часто на него кликают. Четко и понятно написанный alt, особенно если в паре с ним отображается текст при недозагрузке картинки, помогает пользователю понять, что он увидит после клика. Это может:

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

Как title влияет на поведение

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

Вовлечение и навигация

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

Такие детали напрямую влияют на:

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

Время взаимодействия

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

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

Почему стоит заполнять даже на «декоративных» изображениях

Распространенная ошибка — не указывать alt и title у декоративных элементов. Формально, если картинка действительно ни на что не влияет, ее alt можно оставить пустым (alt=""). Однако на практике граница между «декоративной» и «значимой» не всегда очевидна. И даже если изображение не несет смысловой нагрузки, правильно указанный alt может:

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

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

Как автоматизировать работу с alt и title

Если сайт большой, изображений на нем сотни или даже тысячи, ручное заполнение alt и title превращается в утомительный и долгий процесс. Здесь на помощь приходит автоматизация. Современные CMS и сторонние инструменты позволяют существенно упростить работу: от генерации атрибутов по шаблону до массовой проверки и корректировки. Главное — понимать, где автоматизация уместна, а где она может навредить.

Возможности CMS: как платформы помогают с атрибутами

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

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

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

OpenCart, MODX, Joomla и другие системы также поддерживают автоматизацию через модули или простые доработки шаблонов. Главное — использовать механизмы CMS, которые интегрированы в ее структуру, а не прибегать к хаотичному добавлению alt вручную в код.

Полезные плагины и модули

Для WordPress существует множество плагинов, которые автоматически расставляют alt и title. Среди самых удобных:

Image Optimization for SEO — подставляет alt и title на основе названия файла, заголовка страницы или кастомного шаблона. Учитывает, были ли атрибуты заполнены ранее.
Auto Image Attributes From Filename — автоматически извлекает текст из имени файла и подставляет его в alt и title.
Yoast SEO — сам по себе не генерирует alt и title, но может предупреждать о их отсутствии и предлагает рекомендации.

Важно помнить: автоматизация — это не волшебная кнопка. Ее эффективность зависит от правильно настроенных шаблонов.

Когда автоматизировать можно, а когда лучше вручную

Есть ситуации, когда автоматическое заполнение alt и title вполне уместно:

в интернет-магазине, где тысячи товаров с однотипными изображениями (например, «Кроссовки Nike Air Zoom – вид сбоку»)
в блоге, где обложки генерируются из заголовков статей
в галереях, где картинки именуются осмысленно, и можно подтянуть alt из названий файлов

Но бывают случаи, когда автоматизация вредит:

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

Автоматизация экономит время, но не заменяет смысла. Лучше всего работает гибридный подход: сначала — автоматическое заполнение по логичным шаблонам, затем — точечная ручная доработка на ключевых страницах.

Как массово проверить корректность alt и title

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

Screaming Frog SEO Spider — сканирует сайт и выдает список всех изображений, указывает наличие alt и title, длину текста, повторяющиеся значения. Подходит для сайтов до 500 страниц в бесплатной версии.

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

Sitebulb, JetOctopus — также предоставляют отчеты по media SEO и могут анализировать alt-тексты.

С помощью этих инструментов можно увидеть:

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

Это особенно важно перед запуском сайта или крупными обновлениями.

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

Готовы перестать упускать трафик и доверие из-за невидимых мелочей? Мы проведем аудит alt и title на вашем сайте, выявим слабые места и поможем сделать каждое изображение понятным — и для пользователей, и для поисковиков.

Напишите нам в Telegram или WhatsApp — вместе превратим ваши картинки в рабочий инструмент.

Как правильно использовать alt и title для SEO и доступности