Текстовые ссылки vs картинки-кнопки: что лучше для SEO

Кнопка может быть текстом в <a> или картинкой, обёрнутой в <a>. Визуально результат одинаков, кликабельность одинакова. Для пользователя разницы нет. Для поисковика — есть, и довольно существенная.

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

Что Google и Яндекс получают из ссылки

Когда поисковик видит ссылку <a href="/page-b">...</a>, он извлекает несколько сигналов:

Куда ведёт — URL назначения
Анкор-текст — то, что находится между открывающим и закрывающим тегом
Контекст вокруг ссылки — текст параграфа, заголовок секции
Атрибуты — rel, target, title

Анкор-текст — самый сильный из этих сигналов о теме страницы назначения. Если на страницу B ведут 50 ссылок с анкором «купить диван-кровать», поисковик с высокой уверенностью считает, что страница B — про покупку диванов-кроватей.

Текстовая ссылка

<a href="/sofa/">Купить диван-кровать</a>

Анкор-текст здесь — буквально слова «Купить диван-кровать». Чёткий сигнал. Хорошо для SEO.

Плюсы:

Прямая передача семантики
Доступность для screen readers (читают как «ссылка: купить диван-кровать»)
Лёгкость стилизации через CSS
Минимум HTML

Минусы:

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

Картинка-кнопка

<a href="/sofa/">
  <img src="/img/cta-sofa.jpg" alt="Купить диван-кровать">
</a>

Анкор-текст здесь — пусто. Поисковик заменяет анкор на содержимое alt атрибута картинки. Если alt пустой — для SEO ссылка слабая.

Плюсы:

Графически выразительно
Хорошо для брендового CTA с логотипом
Если требуется конкретный визуал — иногда единственное решение

Минусы:

Слабее семантический сигнал (alt вместо настоящего анкора)
Нагружает страницу (загрузка картинки)
Менее доступно (alt может быть пропущен в зависимости от настроек screen reader)
Сложнее адаптировать под разные языки и устройства

Гибрид: текст + картинка внутри одной ссылки

<a href="/sofa/">
  <img src="/img/icon-sofa.svg" alt="">
  <span>Купить диван-кровать</span>
</a>

Это лучшая практика для кнопок с иконкой. Картинка имеет пустой alt (это декоративная иконка, screen reader пропускает). Текст внутри <span> идёт как настоящий анкор.

Этот формат собирает все плюсы:

Чёткий анкор-текст для поисковика
Визуальная иконка для пользователя
Корректная работа screen readers

Используйте этот паттерн везде где нужна кнопка с иконкой.

Правила для картиночных CTA

Если уж используете картинку как ссылку:

1. Всегда заполняйте alt

alt для картинки-ссылки = то что увидел бы пользователь как текст кнопки. Без alt — слив SEO-сигнала и accessibility-катастрофа.

<!-- Плохо -->
<a href="/promo/"><img src="/img/promo.jpg"></a>

<!-- Хорошо -->
<a href="/promo/"><img src="/img/promo.jpg" alt="Скидка 30% на угловые диваны"></a>

2. Не делайте слишком длинный alt

Anchor-замена через alt не должна превращаться в килобайт текста. 5-10 слов — оптимум.

3. Не используйте картинки для важных кнопок

«Купить», «Добавить в корзину», «Записаться» — это критичные конверсионные действия. Текстовые кнопки лучше:

Универсальнее (легче поменять текст или язык)
Быстрее (не нужно загружать картинку)
Доступнее (всегда читаются screen reader'ом)

4. SVG-иконки внутри ссылки — это не картинка-ссылка

<a href="/sofa/">
  <svg>...</svg>
  Купить диван-кровать
</a>

Тут анкор-текст «Купить диван-кровать», SVG — декоративная иконка. Хорошее решение.

Особый случай: логотип

Логотип в шапке — почти всегда картинка, обёрнутая в ссылку на главную. Здесь стандарт другой:

<a href="/" aria-label="Главная страница Bcorrections">
  <img src="/logo.svg" alt="Bcorrections — SEO в эпоху AI">
</a>

Или с SVG-логотипом:

<a href="/" aria-label="Главная страница Bcorrections">
  <svg role="img" aria-label="Bcorrections">...</svg>
</a>

Здесь aria-label дополнительно описывает назначение ссылки для screen reader. Это уже не SEO-фактор, а accessibility — но Google это считает.

Когда картинка-ссылка оправдана

Логотипы (стандартная практика)
Баннеры рекламных кампаний (но рассмотрите вариант с текстовой кнопкой поверх картинки в CSS)
Превью видео или подкастов (где картинка — это thumbnail)
Карточки товаров в каталоге (где основное действие — клик на карточку целиком)

Резюме

Текстовые ссылки сильнее для SEO благодаря прямому анкор-тексту. Картинки-ссылки используйте только когда визуал действительно важен — и обязательно с осмысленным alt. Лучший паттерн — гибрид: иконка + текст внутри одной ссылки, где иконка декоративная (пустой alt), а текст несёт семантику.

Хотите аудит CTA и кнопок вашего сайта на SEO и accessibility? Напишите нам.