Тестовый стенд аудита сайта
Тестовый стенд аудита сайта
Ожидается: предупреждение «Внутренние ссылки без анкора» — 30 пустых ссылок, 25 разных адресов, в отчёте первые 20.
В каждом кейсе ниже — одна или несколько пустых внутренних ссылок, которые аудит должен найти: описание, сами ссылки и их исходный код. Адреса у кейсов разные, чтобы в отчёте было видно, какие из них проверка нашла.
Ссылка ведёт на главную, но внутри неё ничего нет: ни текста, ни картинки. Посетитель такую ссылку не увидит и не сможет нажать, а поисковик не поймёт, о чём страница, на которую она ведёт. Обычно так выглядит иконка, которую забыли подключить в шаблоне.
<a href="/#empty"></a>
Внутри ссылки только пробелы и перевод строки. На экране её не видно, а текст для поисковика пустой. Такое получается, когда шаблонизатор подставляет в ссылку переменную, а значение оказалось пустым, но отступы в разметке остались.
<a href="/#whitespace">
</a>
Внутри ссылки остался только HTML-комментарий. Комментарий не виден посетителю и не считается текстом, поэтому для поисковика ссылка пустая. Так бывает, когда содержимое ссылки закомментировали при правке шаблона и забыли убрать саму ссылку.
<a href="/#comment"><!-- иконка удалена --></a>
Адрес ссылки — решётка, то есть та же страница. Для аудита это внутренняя ссылка, и раз в ней ничего нет, она должна попасть в предупреждение. Такие ссылки оставляют под выпадающие меню и кнопки на JavaScript, а содержимое потом теряется.
<a href="#"></a>
Атрибут адреса есть, но он пустой. Браузер считает такую ссылку ссылкой на текущую страницу, значит, она внутренняя. Внутри ссылки тоже ничего нет, поэтому аудит должен её найти и показать в списке пустых внутренних ссылок.
<a href=""></a>
У ссылки нет ни адреса, ни содержимого. Разбор считает такую ссылку ведущей на текущую страницу, поэтому она внутренняя и пустая одновременно. Попутно она должна попасть и в проверку ссылок без адреса — это два разных замечания к одному тегу.
<a></a>
Адрес записан полностью, с протоколом и доменом, но домен тот же, что у страницы. Аудит должен понять, что ссылка внутренняя, и найти, что она пустая. Здесь проверяем, что полная форма адреса не превращает ссылку во внешнюю.
<a href="https://crawler.realtysev.ru/#absolute"></a>
У ссылки есть подпись для экранных читалок в атрибуте aria-label, но видимого содержимого нет. Аудит смотрит на содержимое ссылки, а не на атрибуты, поэтому ссылка считается пустой. Поисковики тоже используют текст ссылки, а не aria-label.
<a href="/#aria-label" aria-label="На главную"></a>
Типичный случай из тикета: баннер, у которого картинка подставлена фоном в стилях, а адрес пустой. Внутри ссылки нет ни текста, ни картинки. Одинаковая разметка повторяется трижды — в отчёте это должна быть одна строка с числом повторов. Адрес у них такой же пустой, как в кейсе 5, поэтому по значению href они сольются с ним.
<a href="" class="promo-banner__link" style="display:inline-block;width:120px;height:24px;background:url(/images/favicons/favicon-16x16.png) no-repeat"></a> <a href="" class="promo-banner__link" style="display:inline-block;width:120px;height:24px;background:url(/images/favicons/favicon-16x16.png) no-repeat"></a> <a href="" class="promo-banner__link" style="display:inline-block;width:120px;height:24px;background:url(/images/favicons/favicon-16x16.png) no-repeat"></a>
Значок соцсети рисуется классом из иконочного шрифта, а подпись есть только во всплывающей подсказке title. Поисковик title у ссылки за текст не считает, поэтому ссылка пустая.
<a href="/#social" class="icon icon-vk" title="ВКонтакте"></a>
Ссылку используют как кнопку открытия меню: у неё есть id и data-атрибуты для скрипта, но нет текста. По id такую ссылку легко найти в вёрстке.
<a href="/#menu-toggle" id="menu-toggle" class="header__burger" data-action="open-menu"></a>
Атрибуты target и rel не влияют на проверку: ссылка всё равно пустая. Проверяем, что лишние атрибуты не мешают найти её по адресу.
<a href="/#target" target="_blank" rel="nofollow noopener"></a>
Логотип-ссылка без текста стоит и в шапке, и в подвале с разными классами. Адрес одинаковый, поэтому в отчёте это одна строка с числом 2, а найти по селектору можно обе.
<a href="/#repeated" class="header__logo"></a> <a href="/#repeated" class="footer__logo"></a>
В коде адрес записан с пробелами по краям. Браузер их отбрасывает, но в отчёте должно быть значение как в коде — иначе селектор его не найдёт.
<a href=" /#spaces "></a>
Адрес содержит двойные кавычки, поэтому атрибут записан в одинарных. Проверяем, что селектор правильно экранирует кавычки.
<a href='/?q="x"#quotes'></a>
Адрес записан относительно текущей папки. Развёрнутый адрес будет полным путём, а в коде — только имя файла; в отчёте должно быть то, что написано в коде.
<a href="absent-links-anchors-internal-text.html"></a>
Адрес написан кириллицей, без кодирования. Развёрнутый адрес закодирован процентами и по коду страницы не ищется, а исходное значение — ищется.
<a href="/каталог/#cyrillic"></a>
Ссылка «наверх» ведёт к якорю на этой же странице. Поисковики отбрасывают часть адреса после решётки, поэтому для них это ссылка на эту же страницу. Аудит на неё предупреждает — текста нет, — а в отчёте она в группе «Ведут на эту же страницу» с пометкой «якорь».
<a href="#top" class="scroll-up"></a>
Ссылка без адреса открывает окно скриптом: у неё есть класс, role и onclick. По значению href она сольётся с кейсом 6, а найти её поможет класс.
<a class="js-open-modal" role="button" onclick="return false"></a>
Пустая ссылка спрятана внутри нескольких блоков с классами, как в реальной вёрстке карточки товара. Селектор по адресу находит её независимо от вложенности.
Ссылка:
<div class="catalog"><div class="product-card"><div class="product-card__image"><a href="/#nested" class="product-card__link"></a></div></div></div>
Семь пустых ссылок с разными адресами. Вместе с кейсами выше на странице становится 25 уникальных адресов, а аудит хранит только первые 20. В отчёт попадут /#extra-1 и /#extra-2, а про остальные пять он скажет строкой «Ещё 5 ссылок с другими адресами не показаны».
<a href="/#extra-1"></a> <a href="/#extra-2"></a> <a href="/#extra-3"></a> <a href="/#extra-4"></a> <a href="/#extra-5"></a> <a href="/#extra-6"></a> <a href="/#extra-7"></a>