Что такое пагинация и как ее сделать на страницах сайта
Пагинация — это необходимость для каждого большого сайта. Сколько статей или карточек товара может быть на крупном веб-ресурсе? Десятки, сотни, тысячи… Ориентироваться в таком количестве страниц пользователю очень трудно. И тут без пагинации не обойтись.
Однако есть и третий «участник» процесса — поисковые системы. Как они реагируют на использование пагинации и что делать, чтобы сайт не терял своих позиций в поисковиках. Ответы и варианты действий ищите ниже.
Что такое пагинация
Чтобы понять, что такое пагинация, достаточно представить, как выглядели бумажные книги до появления современного варианта с возможностью перелистывать страницы. Свиток, на котором был написан текст, нужно было долго разматывать, чтобы найти нужную информацию. Без пагинации так же выглядят и длинные веб-страницы.
Пагинацией называется разделение большого массива данных, имеющихся на сайте, на отдельные страницы для удобства использования.
Существуют следующие виды пагинации:
Ни один из этих типов не имеет особых преимуществ перед другими. Какой применить на своём сайте — дело вкуса веб-мастера.
Модуль е-коммерс
Зачем нужна пагинация
На сайте она решает несколько задач:
Иными словами, пагинация позволяет находить нужную информацию на сайте быстро и с комфортом. Поэтому пользователям веб-ресурсов этот механизм нравится.
Как сделать пагинацию
Чтобы выполнить настройку пагинации самостоятельно, потребуются определённые навыки. Чаще всего веб-мастера сталкиваются с необходимостью сделать её на языке PHP. Перед началом работы важно точно узнать, какое количество элементов (статей, карточек товара и т. п.) представлено в системе и во сколько страниц пагинации они будут объединяться.
При настройке этого механизма используются параметры:
Для каждой страницы необходимо написать свой код. Он будет зависеть от того, где она находится — в начале, середине или конце списка.
Для первой страницы код будет выглядеть следующим образом:
На каждую пагинационную страницу посередине нужно вставить:
На последней, соответственно, будет код:
Другой вариант — использовать специальный скрипт. Например, для этой цели подойдёт simplePagination. Его необходимо скачать и установить на сайт. Предварительно на последнем потребуется подключить фрэймворк jQuery.
Пагинация страниц в WordPress
К счастью, чтобы настроить пагинацию, необязательно осваивать работу с кодом. Например, в WordPress эта задача решена по умолчанию. Если вы не выполняете никаких настроек, в нижней части каждой страницы появляются ссылки Next post (Следующий пост) и Previous Post (Предыдущий пост). Это тоже своеобразная пагинация, но можно представить её и в другом виде.
Для этого понадобится специальный плагин. Чтобы их найти, достаточно воспользоваться поиском WordPress.
Несколько примеров плагинов для WordPress:
Прежде, чем устанавливать плагин, проверьте возможности вашей темы WordPress. Возможно она уже предусматривает пагинацию и эту опцию остаётся только настроить.
Настройка пагинации
Пагинация представляет собой простой список страниц, однако в её настройке немало тонкостей. Их важно соблюдать, чтобы сайт был удобен для пользователей.
При настройке обратите внимание на следующие моменты:
Особенности настройки пагинации WordPress
Прежде, чем активировать и настраивать нужный плагин, требуется выполнить настройки самой системы. Здесь нужно задать сколько постов выводить на одной странице. Для этого:
Настройка конкретного плагина зависит от его особенностей. Важно определить следующие параметры:
Проблемы с пагинацией при SEO
Для посетителя сайта в пагинации можно найти сплошные плюсы. Пользоваться сайтом удобно и быстро. Но поисковые роботы, посещающие веб-ресурс, могут быть иного мнения. И без правильного оформления с индексированием страниц сайта часто возникают проблемы.
Типичные сложности поисковой оптимизации сайтов с пагинацией:
Решение для всех проблем с SEO на сайте в этом случае будет одно — закрыть страницы с пагинацией от индексирования поисковыми роботами. Этого эффекта можно достичь несколькими способами.
Удаление страницы пагинации из индекса с помощью noindex
Весьма эффективный, хотя и достаточно трудоемкий метод. Для его осуществления необходимо использовать тег
Этот тег добавляют на все страницы каталога, исключая первую. Прописать его нужно в раздел вручную и именно на это на многостраничном сайте уйдёт много времени. Важно, чтобы ссылка (URL ) первой страницы не повторялась.
Преимущества данного способа:
Недостатки также есть:
“ Смотреть все” и rel=”canonical”
Смысл данного способа в том, что с точки зрения поисковой системы каждая страница пагинации имеет привязку к «Смотреть всё», то есть является второстепенной и не требует индексации.
Rel=”prev”/”next”
Выше уже упоминался способ «Предыдущая публикация» и «Следующая публикация», который по умолчанию используется для WordPress. Однако воспроизвести данное решение можно на любом сайте. Для небольших веб-ресурсов это весьма удобный вариант.
Эти конструкции нужно добавить на каждую страницу. Однако в зависимости от её места в пагинации они будут выглядеть по-разному:
AJAX и прокрутка Javascript
Этот вариант используется преимущественно для интернет-магазинов, виртуальных библиотек и других веб-ресурсов, где счет элементов идёт на сотни. При прокрутке внизу списка появляются новые элементы.
Это может происходить по двум сценариям:
С точки зрения SEO более предпочтительным будет второй вариант с любой формулировкой.
Однако при использовании этого способа часто возникают дубли контента. Это связано с использованием параметров, запрещающих появление новых элементов. В частности, переменные сессии, параметры сортировки, заданное количество элементов на странице.
Выход: использовать совместно ссылки вида r el=”prev”/”next” и rel=”canonical”. Для каждой страницы, которая служит адресом ссылки в другом звене цепочки, создаётся каноническая для перенаправления.
С уточнениями такой метод нужно использовать там, где есть множество страниц с уникальным содержанием, которые необходимо индексировать. Например, если взять товарные карточки несколько брендов кроссовок, ошибкой будет формировать их в единую цепь ссылок с использованием rel=”canonical”, так как в этом случае они не попадут в индекс.
Оптимальным решением будет разделить эти бренды и создать для каждого из них уникальную цепочку ссылок типа r el=”prev”/”next”. Важно также прописать для товаров каждой из них уникальный Title и Description.
Сквозная аналитика
Заключение
Пагинация на многостраничном сайте повышает уровень комфорта его использования и помогает пользователям быстрее найти нужную информацию.
Существует несколько видов пагинации и способов реализации этого механизма на веб-ресурсе. Можно отдать предпочтение как внесению изменений в HTML-код, так и установке специальных плагинов — это не играет особой роли.
Но к вопросу SEO-оптимизаци сайта с пагинацией нужно подойти серьёзно. Какой из четырёх способов предпочесть зависит от приоритетной поисковой системы (Яндекс или Google), количества элементов и многих других параметров. Правильно настроенная пагинация только повысит позиции сайта в поисковой выдаче, но любые ошибки в настройках могут стоить веб-мастеру дополнительных усилий и времени.
Пагинация для SEO: как сделать пагинацию
Пагинация на сайте — это разделение массива данных на несколько частей и вывод их на отдельных страницах. Чаще всего страницы пагинации встречаются в каталогах интернет-магазинов, списках статей или новостей информационных порталов, результатах поиска — словом, везде, где не обойтись без вывода большого количества однотипных элементов (товаров, статей и т. п.).
Постраничная навигация нужна, чтобы:
Казалось бы, ничего сложного, но нет. Одной из самых часто встречаемых технических ошибок на всех новых проектах является игнорирование требований SEO к пагинации, что в свою очередь негативно сказывается на позициях сайта в поиске.
Разберем, что такое страницы пагинации, рассмотрим самые частые примеры и узнаем как сделать пагинацию правильно.
Виды пагинации
Номера страниц
Самая распространенная навигация по страницам — это привычная нумерация с гиперссылками. Она подходит для большинства случаев и понятна пользователям.
Постраничная навигация с номерами используется чаще всего
Здесь важно не забывать о правильном и понятном интерфейсе:
Пагинация Показать еще
Подгрузка новых элементов на текущую страницу по клику на кнопку создает эффект бесконечной прокрутки и усиливает вовлеченность пользователя. Ну а кнопка позволяет управлять этой прокруткой.
Подгружайте достаточное количество товаров – от 30 до 50
Бесконечный скролл
Можно отказаться от кнопки и автоматически подгружать элементы при достижении пользователем определенного положения на странице.
С точки зрения пользователя и реализации на мобильных устройствах — это самый удобный вариант. Не надо ничего кликать, просто листай, пока не устанешь.
Пример бесконечной прокрутки в Pinterest
Бесконечный скролл популярен в соцсетях и информационных порталах, чтобы максимально долго удерживать внимание пользователя, но на товарных сайтах не всегда может быть удобен.
Буквенная навигация
В случае поиска по алфавиту в качестве элементов навигации удобно использовать не цифры, а буквы.
Буквенная пагинация на сайте интернет-магазина
Комбинированная пагинация
Популярный прием для организации навигации по страницам — это объединение нескольких способов. Например, номера страниц удобны в реализации и индексации, а бесконечная прокрутка показывает лучшую конверсию. Эти 2 способа можно использовать вместе:
Показать еще и постраничная нумерация часто используются вместе
Ошибки пагинации
Оптимизация страниц пагинации для интернет-магазинов и других сайтов крайне важна. Почему? Потому что неправильно настроенные страницы приводят к вероятности появления сразу 2х тяжелых «сео-грехов».
Дубликаты страниц/некачественный контент
Дубликаты страниц — весьма распространенная техническая ошибка сайта. Поисковики определяют дубли по браузерным заголовкам title, мета-описаниям description и, иногда, по содержимому страницы.
Пользователям не нужны тысячи копий одинаковых страниц, поэтому, как правило, в поиске остается только одна — не всегда та, что нужно: вместо первой страницы может ранжироваться 51-ая. Кроме того, если на вашем сайте множество дублирующих друг друга страниц, то значит вы — поставщик не очень качественного контента.
Как проверить:
1. Просканировать сайт с помощью Netpeak Spider или Xenu, чтобы обнаружить дубликаты title и description, и изучить список проблемных страниц.
Окно проекта в Netpeak Spider
2. Зайти в панель Яндекс.Вебмастер — Индексирование — Страницы в поиске — Исключенные страницы и проверить те, которым присвоен статус Недостаточно качественная. Если там есть страницы пагинации, то скорее всего дело в дублировании заголовков.
Яндекс.Вебмастер: Исключенные страницы
Проблема индексации товаров
Краулинговый бюджет каждого сайта ограничен, потому что даже поисковики не обладают настолько мощными ресурсами, чтобы сканировать весь интернет каждый день. Вот пример трастового сайта с 44000+ страниц в индексе — средний показатель визитов ботов Google держится на уровне 12500. Если сайт меньше или на него никто не ссылается, то и посещений робота будет меньше.
Скрин графика сканирования из Google Search Console
При неправильно настроенной пагинации робот будет игнорировать большое число страниц листинга каталога, а значит не сможет просканировать размещенные на них товары.
Не рекомендуем полностью закрывать пагинацию от роботов — это только ухудшит ситуацию с индексацией товаров.
Как проверить:
Зайти в панель Яндекс. Вебмастер — Индексирование — Страницы в поиске — Все страницы и скачать список всех страниц из базы поиска Яндекса.
Яндекс.Вебмастер: Страницы в поиске
Отфильтровать строки в таблице по названию URL и проверить сколько карточек товаров попали в индекс. Если их меньше 90% от реально числа, то с индексацией есть существенные проблемы.
Настройка пагинации
Итак, без пагинации не обойтись, это действительно важные страницы сайта. Но как настроить SEO пагинацию правильно?
Адреса страниц пагинации
Адреса могут быть как статическими, так и динамическими.
Пример статического URL:
https://www.site-shop.ru/catalog/page-2/
Пример динамического URL:
https://www.site-shop.ru/catalog?page=2
Формат URLа не имеет решающего значения, его выбор, как правило, зависит от особенностей CMS.
Первая страница — это всегда начальная страница каталога, поэтому https://www.site-shop.ru/catalog/ и https://www.site-shop.ru/catalog/page-1/ будут по сути одной и той же страницей, дубликатами. Важно проследить, чтобы нигде в блоке навигации не формировалось ссылки на первую страницу с параметром. В любом случае обязательно проставьте 301 редирект с https://www.site-shop.ru/catalog/page-1/ на https://www.site-shop.ru/catalog/.
Помните, что нужно суметь обеспечить индексацию страниц навигации — то есть проставить на них ссылки на самом сайте. При выявлении плохой индексации добавьте ссылки также в sitemap.
Индексация пагинации
Есть несколько стратегий по управлению страницами пагинации, но сегодня ни про одну из них нельзя сказать, что она – та самая. Яндекс и Google молчат, вебмастера пробуют и ищут индивидуальный подход. Поэтому разберем все и выделим их особенности.
Ничего не делать
Этот путь всегда имеет место быть. Можно положиться на «умные алгоритмы» и никак не работать с пагинацией, однако результаты в таком случае непредсказуемы.
Закрыть страницы пагинации
Некоторые вебмастера советуют скрывать страницы пагинации, чтобы роботы не тратили время на обход неранжируемых страниц. Сделать это можно:
Почему не стоит выбирать такой подход, мы уже разобрали выше: этот метод приносит проблемы с индексацией товаров и их ранжированием в поиске. Но потенциально он может пригодиться тем сайтам, в поисковом индексе которых содержится огромное число страниц пагинации: для того, чтобы хоть как-то уменьшить их количество.
Страницы с мета noindex не будут проиндексированы роботом
Здесь же стоит добавить и про второе значение атрибута content — follow/nofollow. Значение nofollow означает инструкцию для робота не выполнять переход по ссылкам на странице. Внутренние ссылки не стоит помечать nofollow в любом случае. Хорошо, если робот проигнорирует эти инструкции, но таким способом можно и прекратить сканирование, и нарушить передачу внутреннего веса другим страницам сайта.
Добавить на страницы пагинации rel=»canonical» со ссылкой на первую страницу
Несколько лет canonical-пагинация считалась оптимальной в Яндексе. Надо добавить тег с атрибутом rel=»canonical», указав первую страницу в качестве канонической. Например,
Яндекс утверждает, что его робот проходит по ссылкам на неканонических страницах
В качестве преимущества данного подхода можно выделить:
Однако Яндекс не так давно пересмотрел концепцию поиска и теперь неканонические страницы попадают в индекс по усмотрению робота. Поэтому если мы используем такой метод, делаем SEO для страниц пагинации.
Добавить на страницы пагинации rel=»canonical» со ссылкой на страницу со всеми товарами
Алгоритмы Google считают single-page content (чем больше товаров на странице, тем лучше) оптимальным выбором. Соответственно, если уж мы делаем какую-то страницу канонической для пагинации, то это должна быть страница со всеми товарами.
Например, мы создаем страницу с параметром page-all и устанавливаем ссылку на нее типа Смотреть все на других страницах каталога. Также прописываем canonical для страниц пагинации, где канонический адрес это страница page-all.
Появляется новая страница на сайте со всеми товарами
Здесь есть сразу несколько подводных камней:
Как вариант данного метода выступает решение назначить страницей со всеми товарами первую страницу каталога, но от этого пострадает и ее скорость загрузки, а следовательно поведенческие факторы.
Официальные рекомендации Google по работе с пагинацией были удалены в 2019 году и больше не публиковались. Возможно, это стоит рассматривать как намек, что поисковик сам разберется в пагинации, как бы вы ее не реализовали. Главная задача — обеспечить индексацию ссылок на страницах пагинации.
Добавить на страницы пагинации rel=»canonical» со ссылкой на самих себя
И, наконец, еще один вариант использования canonical – установить для каждой страницы пагинации в качестве канонической саму себя.
Этот подход распространен в англоязычном SEO
По сути этот метод похож на не делать ничего, но тут мы избегаем рисков дублирования среди страниц пагинации.
Использовать атрибуты next и prev
До марта 2019, когда ведущий аналитик и специалист по качеству поиска Google Джон Мюллер написал свой твит, эти теги также широко рекомендовались к использованию. Разметка prev-next указывает связь между страницами пагинации.
Для первой страницы мы указываем следующую за ней:
Для второй уже обозначаем и предыдущую страницу:
Для последней N-страницы указывается уже только предшествующая:
Последовательная перелинковка страниц пагинации
Но, как оказалось, Google уже несколько лет не использует эту разметку для сбора сигналов с группы страниц пагинации. И на поиске это никак не отразилось.
SEO пагинация
Самая большая неприятность, которую создают страницы пагинации, это дублирование друг друга. Как следствие, сложность с выбором релевантной страницы, трудности в ранжировании.
Как настроить страницы пагинации, чтобы избежать данной проблемы:
Уникализируем title
Надо прописать собственные маски для title страниц пагинации, чтобы не возникало повторов с заголовком основной страницы и между собой.
Например, первая (основная) страница раздела:
Страница пагинации #2:
Короткий вариант более удобен и поместится на вкладке целиком.
Уникализируем description
Мета-описание description в том числе помогает поисковикам понять содержимое страницы. Если несколько страниц будут содержать одинаковое описание, то это как бы все про одно и то же. А если таких страниц много, то получается, что на нашем сайте мало информационной ценности. Поэтому все страницы, которые видит и обходит поисковик, должны иметь собственный уникальный description.
Уникализировать содержимое мета-тега можно опять же с помощью переменной “Страница #”.
Например, первая (основная) страница раздела:
Страница пагинации #2:
Не допускаем повторов текста
Оптимизированный текст должен быть размещен только на первой странице раздела и не повторяться на страницах пагинации.
Использование пагинации в продвижении
Еще одна возможность применить страницы пагинации в SEO — использовать их в качестве посадочных для запросов близких по смыслу, но «не садящихся» на одну страницу.
Например, у вас магазин детской мебели и вы не имеете возможности разбить в каталоге колыбели и кроватки, они выводятся вперемешку в одном разделе. Тогда первую страницу раздела оптимизируем под более частотную группу «детские кроватки», а вторую — под «колыбель». Title, description и текст должны быть настроены отдельно для каждой страницы.
Пример пагинации: чек-лист
На практике конкретное решение по пагинации обуславливается, прежде всего, техническими возможностями и системой управления. Но какой бы способ не был реализован на вашем сайте, обязательно сверьтесь с нашим чек-листом.
✔️ Каждая страница пагинации, начиная со второй, должна иметь собственный URL, динамический(/catalog/?page=2) или статический (/catalog/page2/). Выбор определяется оптимальностью технического решения.
✔️ Страницы пагинации, для которых не хватает товаров, например page=100000000, должны отдавать 404.
✔️ Первая страница в строке пагинации должна вести на основной урл, а не на page=1.
✔️ Страница пагинации #1 (/catalog/?page=1) должна возвращать код ответа сервера не 200, а 301 на основную страницу раздела (/catalog/).
✔️ Title каждой страницы пагинации отличается от title первой страницы и образуется по маске [Заголовок раздела — страница #], если не решено иное.
✔️ Description страниц пагинации формируется по маске с использованием переменных «Название раздела» и «Страница #».
✔️ Заголовок h1 на страницах пагинации не имеет критического значения. В зависимости от конкретной ситуации он может повторять заголовок на основной странице раздела или образовываться по маске «Страница # Название раздела».
✔️ Если в разделе есть текстовый контент, размещенный до или после листинга, то его можно выводить на страницах пагинации только в том случае, если он содержит важную информацию для пользователя — например, условия покупки или доставки.
✔️ При открытии какой-либо карточки товаров с любого места любой страницы пагинации при дальнейшем браузерном переходе Назад к каталогу пользователь должен вернуться именно к тому месту и к тем условиям выборки, из которых был совершен переход по ссылке.
✔️ Если присутствует функционал сортировки по цене, названию и т. д., отсортированная выборка должна сохранять порядок элементов при переключении страниц.
✔️ Если присутствует возможность сортировки выборки по цене, названию и т. д., она должна работать на всех страницах пагинации. При этом, если пользователь на момент сортировки находился не на первой странице, его должно перенести на первую с добавлением в урл параметров, соответствующим выбранным условиям сортировки.
Чем хорош сайт на Тильде? И почему не надо лезть в дорогостоящие решения
Не часто приходится замечать решения предложенные на платформе Tilda, а зря. Почему так? Что такое вообще Tilda и для кого она?
Сразу отметим, что данный материал ни в коем случае не является рекламным, а представляет из себя анализ Тильды, как решение для бизнеса.
По факту в более чем 50% случаев от всех задач бизнеса в медиа пространстве, ваш сайт не нуждается в том, чтобы он был разработан кодом. Не обязательно ставить такие условия где необходимо будет привлекать верстальщика или программиста. В таких проектах обычно нуждается средний или крупный бизнес, так как к тому времени у компании сформировалось представление и сложные многоуровневые задачи, которые решаются только таким же сложными решениями.
Tilda в свою очередь тоже не является панацеей и не возведена в абсолютное значение, можно пользоваться другими решениями похожими на Тильду.
Что чаще всего приходится слышать про Тильду?
Во-вторых, скорее всего меня могут закидать тухлыми помидорами, но серьезная компания не будет стараться «выгрызать» серьезный сайт за условные 20.000 рублей. Тут 2 пути: или компания не такая серьезная, или же у директора нет понимания, что такое сайт и для чего он нужен.
2. «Не, Тильда не подойдет, у нее слишком урезанный функционал…»
Да, вы правы, Тильда имеет большое количество ограничений, но как правило если вы обращаетесь к профессионалам то выбор данного решения будет не случайным.
Отсюда вы сразу сможете понять профессионализм человека с которым обсуждаете будущий сайт еще на этапе брифинга. И насторожиться в случае если вам не задали ни одного вопроса относящегося к вашим пожеланиям, но почему-то сразу назвали тильду.
Тогда скорее всего вы общаетесь с командой, которая работает только на этой платформе или же с непрофессионалом.
Теперь, когда мы прониклись всей серьезностью данного решения. Сформулируем реальную ситуацию и ряд задач с которыми пришлось столкнуться заказчикам.
Рассмотрим параллельно 2 ситуации, которые могут показаться разными, но по факту объединены одним и тем же.
1. Заказчик не имеет серьезного бюджета, но ему срочно необходим небольшой сайт для мероприятия, которое стартует уже в конце недели.
2. Заказчик имеет серьезный бюджет, но у него отсутствуют амбициозные задачи и в целом планы на будущий сайт. Сроки не превышают 14 дней, но для простоты понимания давайте приведем также к 7 дням.
Задача
По факту перед нами стоит задача, как сделать симпатичный MVP-проект, в срок не превышающий 7 дней.
«Да, давайте здесь не будем заострять внимание и формировать представление, что вся web-разработка такая же быстрая и не затратная. В данной ситуации разбираются частные случаи, чтобы показать, что даже казалось бы в безвыходной ситуации есть решение»
День 1. Подбор референсов и обсуждение проекта
Для экономии времени и ресурсов приступаем к аналитике, но акцентируем внимание только на самых важных моментах, а именно:
какова будет общая концепция продукта;
какие есть конкуренты и что они из себя представляют;
Что нравится целевой аудитории;
что из референсов может лучше всего подойти.
Конец дня ознаменовывается обсуждением выбранных решений с заказчиками. На каждый из этапов тратим примерно по 2 часа.
День 2. Прототипирование
День 3-4. Дизайн
На данном этапе делаем акцент, выделяя под него 2 суток. Так как он является самым основным в рамках работы на Тильде. Определяемся с 3 наиболее интересными и продуманными работами в данной нише, предварительно все это согласовав с заказчиками. Первый день занимает подбор и поиск будущих элементов сайта, а именно:
иные визуальные элементы, которые нельзя отнести к чему-то конкретному, но от этого они не становятся менее важными
Все должно быть объединено общей идей, сочетаться между собой, что также отсылает нас к проработке первичной логики по которой уже идет дальнейший отбор элементов. На чем первый день удачно заканчивается. Собрав бэкграунд элементов, вспоминаем о тех исходных работах, которые мы взяли, как ориентир. После чего объединяем удачные идеи этих сайтов с теми элементами, что мы нашли, находясь в свободном плавании на ресурсах для дизайнеров.
День 5. Верстка
День 6. Подключение домена
День 7. Видео инструкции и обучение заказчика
Для этого записываем видеоинструкции:
как добавлять контент;
Как редактировать текст и менять изображения;
Как пользоваться панелью администратора
Где они уже самостоятельно сможет все настроить, повторяя шаги из видео.
Вывод
самозанятые или у вас небольшой стартап, когда нет уверенности в бизнес-модели;
Экономия на более чем половине команды разработчиков, отсекая программиста и верстальщика. Используя при этом 2-3 пары рук квалифицированных специалистов, позволяет получить продукт за весьма скромный бюджет, досягаемый для многих, кто развивает свое дело.
