Карточка открывается по onClick, но в разметке нет href. Пользователь с обычным браузером переходит, а извлечение ссылок не находит адрес. Разделите действие интерфейса и навигацию: переход на отдельную страницу имеет собственный URL и должен быть представлен доступной ссылкой.
Отделите переход на страницу от действия
Кнопка подходит для действия — открыть панель, отправить форму или изменить состояние. Для перехода используйте ссылку с настоящим href. Клиентский роутер может улучшать переход, сохраняя стандартную семантику.
Google обычно обходит ссылки, представленные элементом a с атрибутом href. Официальная документация.
Карточка статьи имеет отдельный адрес, а кнопка фильтра изменяет текущий интерфейс. Эти элементы могут выглядеть одинаково, но их назначение различается. Начните с классификации поведения, а не с глобальной замены button на a. Для перехода пользователь ожидает открыть новую вкладку, скопировать адрес и вернуться назад. Для действия — выполнить операцию в текущем контексте. Такая семантика полезна доступности и обычному использованию, а наличие явного адреса даёт проверяемый путь обнаружения целевой страницы.
Матрица карточки, фильтра и отправки формы
Учебные сценарии в таблице задают ожидаемое поведение; фактические ответы своего сайта заносите отдельно.
| Сценарий | Отличие | Решение | Проверка |
|---|---|---|---|
| Карточка статьи | Переход на материал | Использовать ссылку | Есть href |
| Открыть фильтр | Локальное действие | Оставить кнопку | Доступное управление |
| Отправить форму | Отправка данных | Оставить submit | Корректное действие |
| Клиентский router | Навигация приложения | Проверить выходной HTML | Настоящая ссылка |
В таблицу включите карточку материала, пункт меню, раскрытие фильтра, отправку формы и скачивание файла. Укажите, есть ли самостоятельный URL и что ожидает пользователь. Для скачивания проверьте реальное назначение, не подставляя #. Для действия формы нужен предусмотренный submit и обработка результата. Для закрытия панели не требуется новая страница. Отрицательные случаи важны: исправление обхода навигации не должно превратить локальное действие в случайный переход или перезагрузку. Таблица помогает разработчику сохранить поведение, меняя только семантику нужных элементов.
Проверьте настоящий href в HTML и DOM
Проверьте разметку карточки и меню, наличие href в DOM и исходном HTML. Попробуйте открыть назначение в новой вкладке и перейти с клавиатуры. Отключение JavaScript используйте как дополнительную диагностику, учитывая архитектуру сайта.
Посмотрите выходную разметку, а не имя React-компонента. Компонент Link может выдавать a с href, а пользовательский NavigationButton — лишь div с обработчиком. Проверьте исходный HTML и итоговый DOM, поскольку ссылки могут появляться после рендера. У элемента должен быть действительный адрес, а не javascript: или пустой фрагмент, если он предназначен для отдельной страницы. Затем откройте этот адрес напрямую. Наличие href не подтверждает работоспособность назначения, поэтому статус и содержание целевой страницы проверяются отдельно.
Учебная новая вкладка и клавиатурный переход
Учебная карточка статьи выглядит как кнопка, а рядом кнопка раскрывает фильтр. Первая получает ссылочную семантику, вторая сохраняет button. Проверка новой вкладки помогает увидеть отличие без сложного аудита.
В учебном интерфейсе попробуйте открыть карточку статьи в новой вкладке через обычное действие браузера, затем перейти к ней с клавиатуры. Скопируйте адрес ссылки и вставьте в новую вкладку без предшествующего состояния приложения. Кнопка фильтра при этом должна раскрывать панель, сохраняя фокус по предусмотренной логике. Дополнительный тест без JavaScript помогает увидеть зависимость, но не заменяет понимание архитектуры клиентского сайта. Для SPA главным подтверждением остаются корректный href, рабочий прямой маршрут и доступное поведение перехода.
Сохраните визуальный стиль через корректную семантику
Замените навигационный обработчик доступной ссылкой либо корректным компонентом роутера, который выдаёт ссылку. Визуальное оформление кнопки можно сохранить CSS; действия формы оставьте настоящими кнопками.
Сохраните оформление карточки через CSS, используя ссылку для навигации. Если внутри карточки есть другие действия, проверьте допустимую структуру и отсутствие вложенных интерактивных конфликтов. Не оборачивайте всю область ссылкой так, чтобы кнопка добавления в корзину случайно открывала товар вместо действия. Для обычного перехода router-компонент может улучшать загрузку, не уничтожая стандартную семантику. Проверьте focus-visible и понятное доступное имя. Исправление технического обнаружения должно одновременно оставлять человеку предсказуемый интерфейс, а не добавлять невидимую дублирующую ссылку.
Клиентский router не должен скрывать адрес
Не превращайте все кнопки в ссылки: отправка формы и раскрытие фильтра не являются отдельной страницей. Приёмка должна проверять назначение каждого элемента, а не название тега само по себе.
Проверьте, что клиентский обработчик не подменяет href другим маршрутом или не игнорирует модификаторы открытия новой вкладки. Состояние пользователя иногда добавляется через router, поэтому прямой URL должен давать предусмотренный результат без скрытых данных предыдущего экрана. Для пагинации и карточек каталога отдельно проверьте доступные адреса частей списка. Если приложение генерирует ссылки только после действия пользователя, выясните, как нужные страницы обнаруживаются при прямом входе. Нельзя считать кнопку «Показать ещё» доказательством полной навигационной цепочки само по себе.
Приёмка навигации и оставшихся кнопок
После изменения проверьте обычный клик, клавиатуру, новую вкладку, копирование адреса и прямую загрузку назначения. Затем повторите оставшиеся кнопочные действия, которые не должны превратиться в навигацию. Сохраните несколько контрольных элементов из общего компонента, чтобы правка не работала лишь в одном месте. Проверка поискового обнаружения не обещает индексацию каждой цели. Она подтверждает явные доступные переходы. В приёмке укажите, какие элементы классифицированы как ссылки, какие остаются действиями и каким поведением подтверждён результат каждого типа. Для карточки с вложенной кнопкой проверьте, что локальное действие не запускает переход на страницу.
Критерии завершения проверки
Навигационные элементы имеют корректный href, работают с клавиатуры и открываются в новой вкладке. Действия интерфейса продолжают работать как кнопки; прямой URL назначения доступен.
- Карточка статьи: Есть href. Зафиксируйте фактический результат и адрес проверенного сценария.
- Открыть фильтр: Доступное управление. Зафиксируйте фактический результат и адрес проверенного сценария.
- Отправить форму: Корректное действие. Зафиксируйте фактический результат и адрес проверенного сценария.
- Клиентский router: Настоящая ссылка. Зафиксируйте фактический результат и адрес проверенного сценария.
Для смежных вопросов: Как ошибки HTML влияют на SEO и индексацию и SSR vs CSR vs SSG для SEO: что выбрать в 2026 году. Отдельные проверки сайта собраны на странице технического аудита reChecker.