Пагинация

Происхождение и история термина

Английское pagination существовало до веба. Merriam-Webster связывает его с обозначением последовательности страниц, например в книге, и датирует первое известное употребление в этом значении 1794 годом. Это словарная дата употребления английского слова, а не дата изобретения постраничного интерфейса. ^[7]

В вебе страницы стали частями электронного содержимого, связанными адресами. В публикации Google от 15 сентября 2011 года примерами пагинации служат длинная статья, товарная категория и обсуждение на форуме. Тогда компания предложила обозначать соседние части служебными ссылками rel="next" и rel="prev". Сейчас на этой исторической публикации стоит предупреждение: Google больше не использует их как сигнал индексации. ^[6]

Следующий этап хорошо виден в рекомендации Google от 13 февраля 2014 года: бесконечную ленту предлагалось дополнять последовательностью отдельных страниц. Пользователь мог продолжать прокрутку, а робот — получать доступ к частям по адресам. Таким образом, появление динамической ленты не отменило задачу разбиения содержимого и связи его частей. ^[2]

Суть и механизм

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

URL — адрес ресурса в интернете. Google рекомендует отдельный адрес каждой части, например /archive?page=2, и последовательные переходы через HTML-ссылки. HTML — язык разметки веб-страниц. ^[1] Обычная ссылка записывается элементом a, а атрибут href содержит адрес назначения; Google не может надёжно извлекать адреса из элементов, работающих только через обработчики событий. ^[9]

Для выбранного архива это означает простой вопрос: можно ли добраться от первой части до последней, переходя по адресам? Работающая прокрутка на одном компьютере сама по себе на него не отвечает. В историческом примере Google отдельно проверялось прямое открытие каждой части без прежней истории посещений и файлов cookie. ^[2]

Блок переходов можно поместить в элемент nav. По стандарту HTML он обозначает раздел навигации к другим страницам или частям текущей страницы. Это помогает вспомогательным программам, например экранным дикторам, выделять навигацию. Не каждую группу ссылок требуется оформлять таким элементом. ^[3]

Виды и классификации

Google сопоставляет три способа показа длинного списка. Это классификация интерфейсов, а не уровней качества сайта. ^[1]

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

Как применяется на практике

Российскую практику следует сверять с документацией используемого поиска. Справка Яндекса отдельно отвечает на вопрос о пагинации; инструкция Google не заменяет этот ответ.

Canonical — указание предпочтительного адреса среди одинаковых или очень похожих страниц. Для Google это сигнал, а не безусловная команда. ^[8] В учебном архиве первая и вторая части показывают разные заметки. Одинаковая шапка сайта ещё не означает, что содержимое этих частей дублируется.

Доступность для читателя требует отдельного внимания. В компоненте Bootstrap переходы оформлены списком, навигации задаётся поясняющая метка aria-label, а текущей странице-ссылке — aria-current="page". Эти атрибуты передают назначение и состояние элементов вспомогательным технологиям. ^[4] Bootstrap здесь — конкретный пример реализации; установить эту библиотеку ради пагинации не требуется.

Как измерить или проверить

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

Сначала зафиксируем исходный перечень заметок и порядок сортировки. Затем откроем первую страницу и последовательно пройдём все переходы, записывая адрес каждой части и идентификаторы заметок. Идентификатор — постоянное обозначение записи, позволяющее отличить её от другой даже при одинаковых заголовках.

Общая сумма должна составить 95 карточек. Но представим, что последняя заметка пропала, а предпоследняя показана дважды. Сумма останется прежней; уникальных идентификаторов будет только 94. Сопоставление с исходным перечнем обнаружит одну потерянную заметку и одно лишнее вхождение другой. Так проверяется именно полнота архива, а не только его размер.

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

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

Завершим проверку клавиатурой: доступны ли переходы, понятна ли текущая страница, не срабатывает ли недоступная команда. Документация Bootstrap предупреждает, что одного визуального состояния отключённой ссылки недостаточно для управления с клавиатуры. ^[4]

Ошибки, ограничения и спорные вопросы

Номер после # — фрагмент адреса, а не подходящая замена отдельному URL страницы для Google: поисковик игнорирует такие фрагменты. ^[1] Например, в учебном проекте переход с /archive#1 на /archive#2 нельзя считать достаточным доказательством обнаружения второй части.

Другая ошибка — воспринимать разметку примера как готовые рабочие адреса. В документации Bootstrap ссылки используют href="#"; на настоящем архиве им нужны адреса частей списка. ^{[4, 9]}

Проверка выше отвечает на вопрос о доступности всех записей в выбранном состоянии архива. Она не проверяет, включил ли поисковик каждую страницу в свою базу и показывает ли её по нужному запросу. Формулировка Яндекса о возможности индексации не обещает результат для конкретного сайта. ^[5]

Частые вопросы

Связанные термины

• skanirovanie
• indeksatsiya
• kanonicheskiy-adres
• vnutrennyaya-perelinkovka
• karta-sayta
• kraulingovyy-byudzhet