Карточка открывается через обработчик нажатия onClick, но в разметке нет адреса ссылки — href. Пользователь с обычным браузером переходит, а извлечение ссылок не находит адрес. У карточки есть отдельный URL. Выведите его обычной ссылкой, чтобы человек мог скопировать адрес или открыть материал в новой вкладке.
Ссылка открывает страницу, кнопка выполняет действие
Google обычно обходит ссылки, представленные элементом a с атрибутом href. Официальная документация.
Карточка статьи имеет отдельный адрес, а кнопка фильтра изменяет текущий интерфейс. Эти элементы могут выглядеть одинаково, но их назначение различается. Начните с классификации поведения, а не с глобальной замены button на a. Для перехода пользователь ожидает открыть новую вкладку, скопировать адрес и вернуться назад. Для действия — выполнить операцию в текущем контексте. Ссылка сохраняет эти привычные действия браузера и позволяет поисковику обнаружить адрес. Кнопку оставьте для раскрытия фильтра или отправки формы.
Что оставить кнопкой
| Элемент интерфейса | Что происходит при клике | Как оформить переход | Как проверить ссылку |
|---|---|---|---|
| Карточка статьи | Переход на материал | Использовать ссылку | Есть href |
| Открыть фильтр | Локальное действие | Оставить кнопку | Доступное управление |
| Отправить форму | Отправка данных | Оставить submit | Корректное действие |
| Клиентский router | Навигация приложения | Проверить выходной HTML | Настоящая ссылка |
Проверьте выходную разметку
Посмотрите выходную разметку, а не имя React-компонента. Компонент Link может выдавать a с href, а пользовательский NavigationButton — лишь div с обработчиком. Проверьте исходный HTML и итоговый DOM, поскольку ссылки могут появляться после рендера. У элемента должен быть действительный адрес, а не javascript: или пустой фрагмент, если он предназначен для отдельной страницы. Затем откройте этот адрес напрямую. Наличие href не подтверждает работоспособность назначения, поэтому статус и содержание целевой страницы проверяются отдельно.
<a class="card" href="/articles/example/">Читать статью</a>
<button type="button" aria-expanded="false">Открыть фильтр</button>Оформление card можно оставить прежним. У перехода есть самостоятельный URL; фильтр выполняет локальное действие. Если используется компонент роутера, в готовом DOM он должен вывести a с правильным href.
Откройте карточку в новой вкладке
Попробуйте открыть карточку статьи в новой вкладке через обычное действие браузера, затем перейти к ней с клавиатуры. Скопируйте адрес ссылки и вставьте в новую вкладку без предшествующего состояния приложения. Кнопка фильтра при этом должна раскрывать панель, сохраняя фокус по предусмотренной логике. Дополнительный тест без JavaScript помогает увидеть зависимость, но не заменяет понимание архитектуры клиентского сайта. У клиентского приложения проверьте href, прямое открытие URL и управление с клавиатуры. Сайт может использовать JavaScript, сохраняя обычные возможности ссылки.
Сохраните оформление без вложенных кнопок
Сохраните оформление карточки через CSS, используя ссылку для навигации. Если внутри карточки есть другие действия, проверьте допустимую структуру и отсутствие вложенных интерактивных конфликтов. Не оборачивайте всю область ссылкой так, чтобы кнопка добавления в корзину случайно открывала товар вместо действия. Компонент роутера может ускорять переход, если в готовом HTML остаётся обычная ссылка. Проверьте focus-visible и понятное доступное имя. Не добавляйте невидимую ссылку рядом с кликабельной кнопкой. Сделайте ссылкой сам переход, сохранив понятный текст и видимый фокус.
Проверьте переход и оставшееся действие
Карточка открывается обычным кликом, Enter и в новой вкладке. Скопированный адрес работает напрямую без предыдущего экрана. Кнопка фильтра всё ещё раскрывает панель и не отправляет пользователя на другую страницу.
Читайте также: Как ошибки HTML влияют на SEO и индексацию и SSR vs CSR vs SSG для SEO: что выбрать в 2026 году. Проверки сайта доступны на странице технического аудита reChecker.