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

Работа с постраничной навигацией входит в список обязательных действий, осуществляемых SEO-специалистом. Однако стоит помнить фундаментальное правило поисковой оптимизации: страница должна быть релевантна ключевому запросу. Не нужно создавать бесчисленное множество дублей с идентичными заголовками (тег title и meta description). Для решения подобных проблем на помощь оптимизаторам приходит постраничная пагинация. О том, какой она должна быть в идеале, ходит много споров; этот вопрос поднимается практически на любом SEO-форуме или конференции. Попробуем разобраться в ситуации и внести ясность в эту проблему.

До конца февраля единоразовая скидка на продвижение сайта - 10%

Что такое пагинация и ее разновидности

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

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

• Прямая (универсальная) пагинация с порядковой нумерацией (1-2-3). Это перечень номеров страниц.Чаще всего также добавляют кнопки “далее/назад” с обеих сторон ссылок на страницы.
• Диапазон выбора с указанием позиции в листинге (1-10, 20-59).
• Обратного типа (“новое”, 100-21, 20-1).

Конечно, никто не запрещает применять более креативные идеи, например:

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

Типы пагинации

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

Обратите внимание: отдельно взятая страница в подобных случаях имеет собственный URL:

• http://www.нашсайт.com/some_article-1.html;
• http://www.нашсайт.com/some_article-2.html;
• http://www.нашсайт.com/some_article-3.html.

Пагинация галерей. У каждого изображения есть отдельная уникальная страница, что позволяет задавать имена картинок (входит в понятие оптимизации визуального контента). Подобная реализация удобна для библиотек, фотобанков.

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

Листинг комментариев на блогах, тем, размещенных на форумах. При пагинации такого типа возникает одна сложность: контент, который сегодня находится на первой странице, завтра переместится на вторую, так как его место займут новые материалы. Чтобы не путаться, рекомендуется реализовать листинг по датам. Такие ссылки всегда будут вести на один и тот же контент, поскольку они будут содержать в своем адресе время публикации записи. В подобной ситуации можно использовать годы, месяцы, дни. При этом пагинация будет начинаться с главной, а далее – с максимальной цифры в URL-адресе:

Бесконечная прокрутка (infinite scroll). Данный тип пагинации является самым «продвинутым» среди современных способов разбиения на страницы. Реализовывается при помощи специального скрипта, который к текущей странице добавляет содержание следующей при прокрутке мышкой вниз.

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

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

Пагинация для SEO: миф или реальность?

Действительно ли навигация страниц сайта полезна для SEO-продвижения? Смоделируем стандартную ситуацию, встречающуюся на большинстве проектов. На веб-ресурсе есть 60 страниц. Чтобы поисковому роботу добраться хотя бы до середины (в этом случае – страницы под номером 30), ему необходимо углубиться на несколько уровней, отыскать товар либо пост, перейти на следующий уровень. Конечно, бот обойдет и эту, и другие страницы, однако сроки индексации будут падать с последующим уровнем.

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

Достойно реализовать и настроить листинг несложно, достаточно следовать некоторым рекомендациям.

Метод 1. Использование noindex для удаления пейджинга из индекса поисковых систем.

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

После проверьте на отсутствие дублей URL 1-й страницы. Помните: на главную, к примеру “мой сайт.com/catalog”, нужно настроить “redirect 301” cо страниц “мой сайт.com/catalog/page=1”.

Такой метод прост и удобен в исполнении, но следует учитывать, что он исключает контент страниц из индекса. В случае большого количества товаров/статей/услуг время на их индексацию увеличивается (если не используется карта сайта).

Метод 2. «Показывать всё» и rel=“canonical” (основан на рекомендациях Google).

Суть способа – создание страницы «Все», которая выводит полное содержание (товары/страницы) из представленного каталога. На последующих страницах необходимо проставить на основное содержание. Обязательным условием страницы «Все» является ее быстрая загрузка: при наличии сотни страниц это может быть затруднительно. Положительным моментом станет индексация полного содержимого, минусом – на некоторых CMS-системах реализация весьма сложная.

Метод 3. Применение Rel=“prev”/“next”.

Подразумевает создание цепочки страниц, начиная с самой первой и до последней.

Сложность! Атрибут – (возможно использование относительных, абсолютных URL) размещается единственным на 1-й странице.

На вторую нужно будет поместить предыдущую, следующую:

Следует помнить, что Yandex не учитывает подобные атрибуты, а Google считает их вспомогательными, но не директивами.

Метод 4. AJAX, Javascript.

Для того чтобы отображать новые записи, подгружать товары из листинга или выводить все комментарии, при этом не используя традиционную постраничную навигацию, можно обратиться к Ajax-запросам. Они отрабатывают, когда страничка проматывается вниз. Основным плюсом такого метода является динамический доступ ко всему содержимому.

Ajax-подгрузка контента во время прокрутки страниц: этапы реализации

HTML-документ с двумя обязательными блоками:

• статическая страница с фиксированной шириной, высотой и свойством overflow:auto (чтобы прокручивать контент);
• блок-контейнер внутри основной страницы. Его ширина меньше, чем родительского объекта, а высота будет зависеть от самого содержания. Именно в этом блоке происходит загрузка данных из сервера.

Реализация scroll-события и отправление Ajax-запроса на сервер.

Фрагменты кода для JavaScript-события:

//запуск функции при прокрутке

$(«.text»).on(«scroll», scrolling);
function scrolling(){

//считывание текущей высоты контейнера
var currentHeight = $(this).children(«.wrapper»).height();

//проверка достижения конца прокрутки
if($(this).scrollTop() >= (currentHeight — $(this).height()-100)){

/*отключение вызова функции прокрутки во избежание неоднократного вызова функции */
$(this).unbind(«scroll»);

//функция, реализующая следующие два этапа
loader();}}

//количество подгружаемых записей из БД
var count = 20;
//начиная с
var begin = 0;
function loader(){

// «теневой» запрос к серверу
$.ajax({
type:»POST»,
url:»./get.php»,
data:{

//передача параметров
count: count,
begin: begin*count
},
success:onAjaxSuccess
});
function onAjaxSuccess(data){

//добавление полученных данных
//в конец контейнера
$(«.wrapper»).append(data);

//возвращение вызова функции при прокрутке
$(«.text»).on(«scroll», scrolling);
}
//увеличение точки отсчета записей
begin++;
}

Использование PHP, MySQL.

Посредством SQL и оператора LIMIT контент получают из БД, то есть выводят определенное число записей, хранящихся в разных блоках. Следующие действия – обращение в файле php к БД, демонстрация результата. В таком случае понадобится скрипт:

// указание параметров для подключения к MySQL
$host=’localhost’; // имя хоста
$database=’lazyloader’; // имя базы данных
$user=’root’; // имя пользователя
$pass=»; // пароль пользователя

// подключение к MySQL
$db = mysql_connect($host, $user, $pass)
or die(«Не могу соединиться с MySQL!»);
mysql_select_db($database)
or die(«Не могу подключиться к базе данных!»);

//получение количества и позиции
$begin = ($_POST[«begin»])?$_POST[«begin»]:0;
$count = ($_POST[«count»])?$_POST[«count»]:12;

//формирование запроса к БД
$query = «SELECT * FROM база данных WHERE type=’тип’ LIMIT «.$begin.»,».$count.»»;

//выполнение запроса и получение результата
$result = mysql_query($query);

//формирование вывода данных, полученных из базы
while($row = mysql_fetch_array($result, MYSQL_ASSOC)){
echo «Английское название: «.$row[«name_en»].»»;
echo «Русское название: «.$row[«name_ru»].»»;

После этого следует проверить работоспособность.

Заключение

Неправильное использование пагинации ведет к возникновению ряда проблем для сайта. Некоторые из них:

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

Возникновение дублированного контента. Подобная ситуация получается при использовании страницы «Смотреть все» и одновременном разделении на отдельные. При этом rel= »noffollow» для разбиения страниц не используется.

Чаще всего лучшим решением станет применение двух методов: атрибута rel=”next/prev” (понятен для Google) и мета-тега robots=”noindex,follow” (подходит для Google, Яндекс). Это – “золотая середина” в работе с оптимизацией пагинации.

Любой движок можно накачать согласно собственным стандартам.

Материалы статьи подготовлены на основе практики применения на двух сайтах. В статье описаны ряд фрагментов «тюнинг-решений» для популярного движка интернет-магазина osCommerce (v/2.3), основная часть которых разрабатывалась по принципу экстремального программирования — в условиях лимитированных сроков и сразу «начисто». В связи с этим, указанные программные решения не претендуют на единственно возможные и правильные для исполнения описанных задач.

Статья может быть полезна разработчикам (описывается схема действий — где искать, что править и по какому принципу), однако не подойдет для новичков (практически исключены детальные «рецепты» — нужно владеть php и иметь некоторые знания по JS).

Статья может оказаться полезной для владельцев сайтов в качестве обзора требований и возможностей по накачке своего интернет-магазина для получения дополнительного конкурентного преимущества.

В публикации представлены темы:

• Тюнинг УРЛов
• Кейворды
• Маркировка текста — прикрутка визуального редактора
• Нанесение лого на картинки (подгрузка картинок в визуальный редактор)
• Автоуменьшение (авторесайз) картинок товаров и насение лого
• Создание описаний категорий
• Создание тегов (меток) товаров

Это некоторый фрагмент тюнинг-решений, которые были актуальны для меня в первую очередь. Для каждого отдельного интернет-проекта могут выделяться индивидуальные требования. Пишите — если будет время, можно подумать вместе.

Признаться, меня порадовала новая версия osCommerce. В отличие от популярной v 2.2, для которой, кстати, доступны большинство расширений (раньше я их юзала), — базовая комплектация получилась более осмысленной.

Как полагается, начало — с осмотра готовых решений (модулей/плагинов). Так уж повелось, что я довольно щепетильно отношусь к SEO-компоненте сайтов, поэтому для меня имело значение оптимизация системы под поисковики.

Тюнинг УРЛов

Для этой цели я взяла модуль Ultimate_SEO_URLSv22d_11 —>

В инсталле (install.html из архива) подробно объясняется, что куда прикручивать, какие файлы изменять и какие sql-запросы отправлять.

Кейворды

Кейворды (meta keywords) отсутствовали. Сейчас поисковикам они не так въелись, как раньше, но, в любом случае, их лучше иметь, чем не иметь. Не ошибусь, если скажу, что большинство людей не любят дополнительных мелочей, осложняющих и без того рутинный процесс, поэтому я решила сделать образование кейвордов сразу автоматическим — скажем, использовать заголовок. Но чтобы в кейвордах не было лишних слов, я использовала константу — список ведущих ключевиков. В osCommerce, для этого мы будем работать в двух областях.

Includes/modules/headers_tags/

— директория, в которой подключен инклюдинг для вывода в шапке страниц (ht_category_title.php — напр., для категорий; ht_products_title.php — для товаров).
Это была первая область.

Вторая область: файл шаблона — класс osc_template.php, находящийся в папке классов

Includes/classes/

Основная аналогия, по которой нужно редактировать — строки, связанные с формированием title (если вы немного умеете читать чужой код, вы сразу поймете что дописывать и по какому шаблону). Я не буду подробно останавливаться на этом фрагменте. Дополнительную ф-цию, которую можно использовать для сопоставления слов из отдельного заголовка с перечнем главных ключевиков —
ф-ция strpos(). Она определит нужные слова, и их уже можно устанавливать для внесения в шапку. По типичной схеме можно организовать Description.

Позже, на офф сайте появился специальный плагин для генерации мета-тегов Easy Meta Tags for 2.3X . Сама не пробовала, но для желающих иметь кейворды, может пригодиться.

Маркировка текста — прикручиваем визуальный редактор

Качаем Ckeditor for OsCommerce 2.3 , в «README» получаем инструкции. На странице товара теперь мы можем видеть визуальный редактор.

Мне нравятся эти ребята (разработчики CKeditor). Была приятно удивлена, что нашла именно этот продукт в качестве WYSIWYG-редактора для osCommerce 2.3. Кроме того, что он предоставляет приятный интерфейс и удобные средства форматирования текста (ul, ol, strong, h1-h6 и т.д.), по опыту, я знала, что у него есть расширение для картинок.

Раньше не доводилось прикручивать загрузку картинок, но здесь решилась. Продукт — CKfinder . По привычке, я перекачала файлы на сервер, но тест он прошел не сразу — не сразу сообразила, что в файле конфига нужно редактировать строку (правда, обширно помеченную комментариями) для безопасности системы.

Function CheckAuthentication(){ // WARNING: DO NOT simply return "true". By doing so, you are allowing // "anyone" to upload and list the files in your server. You must implement // some kind of session validation here. Even something very simple as... // return isset($_SESSION["IsAuthorized"]) && $_SESSION["IsAuthorized"]; // ... where $_SESSION["IsAuthorized"] is set to "true" as soon as the // user logs in your system. To be able to use session variables don"t // forget to add session_start() at the top of this file. return false;}

В этой функции нужно возвращать «true», а не «false». Вы можете
определить настройки авторизованности доступа и вернуть «True», а
только в противном случае (а не во всех) — «False».

После процедуры проверки на «истинность», тест прошел успешно. Однако для интеграции понадобится покопаться в файлах админки.

Файл 1 . «Шапочный файл» (includes/template_top.php) для подключения js-скриптов в HEADER.
Ищем в файле первые подключаемые js-скрипты и вставляем в их общую кучу: