Как сделать пагинацию на сайте html

Как сделать
Содержание
  1. Красивая пагинация с использованием css
  2. Как сделать пагинацию: актуальные методы
  3. Настройка пагинации
  4. FAQ по пагинации:
  5. Как оформить пагинацию правильно
  6. Постраничная пагинация
  7. Как настроить: вариант 1
  8. Как настроить: вариант 2
  9. Динамическая или бесконечная прокрутка, single page content
  10. Как сделать, чтобы ПС увидела весь контент
  11. Почему это не идеальный вариант
  12. Комбинация решений
  13. Что использовать в итоге
  14. Пагинация для SEO: как сделать пагинацию
  15. Виды пагинации
  16. Номера страниц
  17. Пагинация Показать еще
  18. Бесконечный скролл
  19. Буквенная навигация
  20. Комбинированная пагинация
  21. Ошибки пагинации
  22. Дубликаты страниц/некачественный контент
  23. Проблема индексации товаров
  24. Настройка пагинации
  25. Адреса страниц пагинации
  26. Индексация пагинации
  27. Ничего не делать
  28. Закрыть страницы пагинации
  29. Добавить на страницы пагинации rel=»canonical» со ссылкой на первую страницу
  30. Добавить на страницы пагинации rel=»canonical» со ссылкой на страницу со всеми товарами
  31. Добавить на страницы пагинации rel=»canonical» со ссылкой на самих себя
  32. Использовать атрибуты next и prev
  33. SEO пагинация
  34. Уникализируем title
  35. Уникализируем description
  36. Не допускаем повторов текста
  37. Использование пагинации в продвижении
  38. Пример пагинации: чек-лист

Красивая пагинация с использованием css

Приветствую вас, уважаемые гости и подписчики моего скромного блога zacompom!

Давненько не писал, хотя в статье где рассказывал о поиске по Твиттеру, обещал что скоро напишу. Очень сильно перед вами извеняюсь, но на то у меня были весомые доводы, и сейчас я исправляю досадную промашку.

Итак, готовы? В добрый путь)))

В этом уроке рассмотрим то как украсить нашу пагинацию для поисковой выдачи или еще для чего нибудь. Это можно сделать использую несколько html строчек и CSS. Урок содержит HTML и CSS код для осуществления пагинации как в Flickr, Digg и простая пагинация готовые для использования на вашем сайте.

Типичная структура пагинации

Следующая картинка показывает пример типочной структуры пагинации:

В целом можно выделить четыре основных элемента:

Верстка пагинации как в Flickr:

Пагинация в Flickr выглядит следующим образом:

Html код очень прост, вы можете использовать эту структуру во всех пагинациях которые будете создавать:

Теперь остается переопределить CSS стили элементов (ul,li,a)

Css стили для Flickr пагинации очень просты:

Верстка пагинации как в Digg:

Теперь попробуем создать пагинацию как в Digg которая выглядит так:

С предыдущего примера скопируйте HTML структуру. Вам нужно будет только поменять ID для

    на pagination-digg:

Css код очень похож на предыдущий, как Flickr. Вам надо только изменить некоторые атрибуты, а также изменить #pagination-flickr ID на #pagination-digg, но CSS элементы разбиения на страницы не меняются:

Если вам нравится чистый дизайн без всяких примочек то этот пример покажет как создать очень простую пагинацию которая выглядит так:

HTML структура такая же как и двух предыдущих. Правдо опять надо будет поменять ID для

    теперь на “pagination-clean”:

Css для такого типа пагинации будет:

Вот такой у меня получился урок. Думаю, он вам будет полезен.

На этом я буду с вами прощаться и до скорых встреч!

Источник

Как сделать пагинацию: актуальные методы

В статье:

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

Нет универсального способа оформить список товаров в каталоге интернет-магазина или статей в блоге, но в материале мы разберем разные варианты и ошибки.

Настройка пагинации

Раньше для настройки веб-мастеры использовали теги rel=next и rel=prev. Весной 2019 года оптимизаторы выяснили, что Google и Яндекс их не учитывают.

Позиция Яндекса

«Когда мы оценили сигналы индексации, решили отказаться от rel=prev/next. Исследования показывают, что пользователи любят одностраничный контент. Стремитесь к этому по возможности, но помните, что многостраничность тоже подходит для поиска Google. Изучайте и делайте то, что лучше вашим пользователям!»
Позиция Google в Твиттере

FAQ по пагинации:

Как оформить пагинацию правильно

Разберем популярные способы. Выбирайте тот, который больше подходит вашей ситуации и будет удобнее пользователям.

Постраничная пагинация

Если на сайте много контента — большой массив товаров, много статей, которых становится только больше — используют постраничную пагинацию с нумерацией.

Нумерация страниц в блоге pr-cy.ru/news

Нумерация страниц в каталоге ozon.ru с возможностью перейти на конкретную страницу

Как настроить: вариант 1

Если использовать такую пагинацию, то нужно использовать атрибут canonical. На всех страницах, начиная с первой, нужно прописать тег rel=canonical и в роли главного адреса отмечать самую первую страницу. Это рекомендует Яндекс.

К примеру, есть URL:

И есть другие страницы этого же раздела:

Страницы https://www.site.ru/p/bulki/?page=1 по логике быть не должно, первой считается https://www.site.ru/p/bulki/. Если page=1 генерируется автоматически, то нужно ставить редирект на страницу /.

Для всех этих URL, включая https://www.site.ru/p/bulki/, нужно задать canonical:

Пагинация может затрагивать сортировку и количество товаров. В этом случае нужно прописать на этих страницах rel=canonical, в котором указать страницу раздела без сортировки.

Проверить интернет-магазин, блог и любой другой сайт и найти ошибки, критичные для оптимизации, можно в сервисе Анализ сайта.
Он оценит проект по 70+ тестам, даст подсказки, сравнит с конкурентами и поможет следить за позициями страниц по ключевым словам.
Попробовать

Что если указать canonical только на первой странице?

Атрибут canonical важно поставить на все страницы и указать в нем первую. Если вы поставили canonical только на первую страницу, PR не будет передаваться, а пути сканирования других страниц окажутся закрытыми. Поисковым системам будет сложнее находить контент, чтобы его проиндексировать, образуются страницы-сироты.

Читайте также:  Как правильно сделать отмостку вокруг бани
Что если запретить индексацию остальных страниц?

Важно, чтобы весь контент был доступен поисковым ботам. Некоторые запрещают индексацию страниц тегом noindex, но лучше так не делать — PR перестанет передаваться, страницы не будут ранжироваться. Сотрудники Яндекса не советуют так делать:

Позиция Яндекса о закрытии страниц

Что делать с текстами, чтобы не навредить релевантности?

Если на странице каталога есть какой-то текст, лучше вынести его на главную страницу категории или раздела, чтобы он не повторялся на всех страницах пагинации.

Как настроить: вариант 2

Есть другой вариант: сформировать общую страницу с контентом со всех страниц пагинации и указать ее в rel=canonical. В этом случае продвигаться будет более сильная страница с большим количеством ключей, чем если бы в canonical указали только первую страницу.

В CMS сделать такую пагинацию можно с помощью плагинов.

Что если не делать общую страницу?

Не страшно, если общей страницы со всеми товарами нет. При корректном использовании canonical все страницы пагинации тоже будут индексироваться, как говорит Яндекс:

Есть и другие способы просмотра контента. В своем твите про rel=prev/next Google заявил об исследованиях, которые показывают, что пользователи чуть больше любят одностраничный контент. Ссылок на исследования нет, но если поверить поисковику на слово, вывод контента на одной странице будет хорошим вариантом.

Динамическая или бесконечная прокрутка, single page content

Контент, размещенный на одной странице, можно просматривать целиком с помощью динамической или бесконечной прокрутки. Элементы появляются на странице динамически по скрипту, как только пользователь доскроллит до низа или вдобавок кликнет на кнопку «показать еще».

К примеру, бесконечную ленту используют социальные сети, поисковые системы в выдаче по картинкам.

Получается, пользователи смотрят каталог или список статей в блоге, не покидая страницу. Такие страницы называют single-page content.

Настраивают динамический показ элементов с помощью Ajax-подгрузки в JavaScript или с помощью специальных решений для CMS.

Как сделать, чтобы ПС увидела весь контент

Важно проследить, чтобы поисковый робот видел весь контент страницы. Как это сделать:

Протестировать URL и проверить, доступен ли ботам весь важный контент, можно в Яндекс.Вебмастере и Google Search Console.

Почему это не идеальный вариант

Автоматический показ контента по доскроллу затягивает пользователя и увеличивает время нахождения на сайте. Но не очень удобен в использовании:

Решением обычно становится использование одновременно и динамического появления элементов по кнопке, и нумерации страниц.

Комбинация решений

На сайте akcentr.ru можно кликать на номера страниц или на кнопку «показать еще» для перехода на следующую страницу.

При нажатии на кнопку «Показать еще» в URL отображается следующий номер страницы, на которую перешел посетитель.

Показ товаров на сайте street-beat.ru

Что использовать в итоге

Выберите актуальный способ из предложенных с учетом направления вашего сайта и предпочтений аудитории.

Какой вариант лучше по вашему мнению, какой вы используете в своих проектах?

Источник

Пагинация для 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 на страницах пагинации не имеет критического значения. В зависимости от конкретной ситуации он может повторять заголовок на основной странице раздела или образовываться по маске «Страница # Название раздела».

✔️ Если в разделе есть текстовый контент, размещенный до или после листинга, то его можно выводить на страницах пагинации только в том случае, если он содержит важную информацию для пользователя — например, условия покупки или доставки.

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

✔️ Если присутствует функционал сортировки по цене, названию и т. д., отсортированная выборка должна сохранять порядок элементов при переключении страниц.

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

Источник

Оцените статью
Как сделать своими руками