Еще один способ SEO оптимизации landing page при помощи history.pushState

SEO оптимизация landing pageВсем привет. Ой, какую статью сегодня для вас подготовил! Читал, вникал, собирал информацию несколько дней и сегодня решил написать статью. Речь пойдет о history.pushState и о том, как можно использовать этот функционал в SEO продвижении landing page. Сразу скажу, что возникнут споры, но об этом чуть позже.

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

Суть его заключается в том, чтобы разбить контент на блоки и каждый блок оформлять как отдельную страницу. При этом, у каждого блока получается свой Title, Description, Keywords ну и так далее. Получается, что используя такое разбиение контента, наш landing page приобретает свойства обычного корпоративного сайта.

То есть, при прокрутке страницы у нас меняется URL и мета теги, при всем при том, что все находиться на одной странице. Вот пример сайта: www.collectif-yay.com

Как вам? Меня очень впечатлило, и я начал искать больше информации на эту тему. Находил много статей о том, что это действительно хороший способ оптимизации landing page, но это все сложно реализовать и в Рунете нет ничего подобного еще.

Вот, например, цитата с сайта Seopult, в статье о продвижении одностраничных сайтов:

Важно отметить, что оптимизация одностраничника путем верстки с использованием метода PushState требует высокого мастерства разработчика. Это сложная задача, где нужно грамотно организовать статические страницы и наделить их необходимыми элементами навигации («меню», «внутренняя перелинковка»), чтобы это действительно сработало в плюс, а не в минус для SEO. Такая работа стоит больших денег, и доверить ее нужно только опытному специалисту. Примечательно, что сегодня практически невозможно встретить подобных примеров сайтов в рунете. Мы нашли лишь пару примеров зарубежных сайтов – flowerbeauty.com и collectif-yay.com.

Или вот еще, с другого сайта:

Примечательно, что информация о PushState не нова: Google разрекламировал этот метод более двух лет назад. Но даже сегодня тяжело найти сайты, где PushState грамотно используется с точки зрения SEO. Вероятно, всё дело в относительной сложности. Для реализации проекта понадобятся хорошие SEO-специалист и верстальщик со знанием JavaScript.

Все это немного угнетало. Все писали, как это круто, но никто не рассказывал, как это реализовать. Одноко попытки разобраться все равно продолжались. Так как изучать History API не очень хотелось, ведь многие говорят, что технология сложная, начал искать куски кода и примеры на Stackoverflow и даже что-то получалось, но возникали проблемы. Если получалось добиться того, что при прокрутке действительно меняется url, то при обновлении страницы вываливалась ошибка что страница не найдена и т.п. В общем тестировал как мог и даже начал разочаровываться, что такая интересная статья, о которой так мало есть на русском так и не выйдет на блоге пока не подтяну js и не разберусь с API.

Перепробовал кучу js библиотек и уже хотел спросить в социальных сетях не в курсе ли кто-то из вас как это реализовать, но потом на Github нашел!!! Да еще и от компании русских разработчиков! Счастью моему не было предела.

Итак, давайте разбираться как же реализовать заявленный в начале статьи функционал.

SEO оптимизации landing page при помощи pushState

Итак, первое что нам понадобиться это подключить jquery к проекту. Я обычно использую CDN от Google. Не знаю почему, но кто-то сказал, что так быстрее грузиться и я поверил на слово. Так как в моем случае нет необходимости подключать скрипты в head, то буду добавлять все в конце сайта, перед закрывающимся тегом </body>:

&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;

С этим, ни у кого не должно возникнуть проблем. Теперь, давайте перейдем на Github и скачаем плагин LandingSeo. Подключаем стандартным образом, после jQuery. Я кинул плагин в папку js, поэтому у меня получился следующий путь:

&lt;script src="js/landing-seo.js"&gt;&lt;/script&gt;

После этого, вызываем его следующим образом $.landingSeo(options);, например ниже, в том же файле landing-seo или на странице index.php после подключение вышеописанных скриптов. Где options - это дополнительные возможности. Пока мы не знаем о них, поэтому просто оставьте пустые скобки.

Теперь, нужно создать файл .htaccess (надеюсь все знают, что это такое и зачем он нужен) и прописать в нем следующие строчки:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php [L,QSA]

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

Теперь поговорим о разбиении контента на блоки. Для этого используются data атрибуты. Все очень просто. Смотрите. Чтобы создать title, нужному блоку задаем data-seotitle="", например, так:

&lt;section data-seotitle="О компании"&gt;
//h1
//контент
//...
&lt;/section&gt;

Теперь, для того, чтобы задать url адрес, пропишем атрибут data-seourl="".

&lt;section data-seotitle="О компании" data-seourl="about-company.html"&gt;
//h1
//контент
//...
&lt;/section&gt;

Теперь добавим description. Делается это так: data-seodescription="":

&lt;section data-seotitle="О компании" data-seourl="about-company.html" data-seodescription="Описание страницы «О компании»"&gt;
//h1
//контент
//...
&lt;/section&gt;

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

Скачать исходник

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

$.landingSeo({
 offsetTop: 80,
 onBlockChange: function() {
  console.log("changed");
 },
 yaCounter: "33202733",
 addGoogleAnalytics: true
}); 

Где offsetTop: 80 - отступ сверху, onBlockChange - это их функция, выводящая сообщение в консоль, а yaCounter: "33202733" - это подключение к каждому блоку счетчик яндекс метрики. Вот это интересный момент. Дело в том, что если подключить аналитику как обычно, только в футере, то сбор статистики будет только с главной страницы, на остальных она не получается не подключенной. Это одна из проблем, которую мне не удалось решить самостоятельно, а этот плагин - решает.

Теперь о спорах и возможных проблемах. Смотрите, если у вас блоки достаточно короткие, то может возникнуть проблемы со сбором статистики, а точнее ее анализом. Дело в том, что прокрутка страниц может быть очень высокой, и это, в свою очередь, может негативно сказаться на поведенческих факторах. Нужно стараться делать действительно информативные блоки, чтобы пользователь немного задерживался на них. Но, с другой стороны, если сами представитель google рекомендуют использовать этот метод, значит - все в порядке.

ссылка на демо

Возможно, есть способ и лучше реализовать подобную идею, при помощи того же pushState, но я пока не нашел. Буду рад вашим идеям и способам реализовать такой функционал (возможно) более грамотным способом. Но я пока такого не нашел. Пишите ваше мнение в комментариях?

16 комментариев

  1. Санжар

    Возможностям нет предела ))
    Спасибо за интересную статью Дмитрий.

    1. dimadv7

      Действительно так) Самому было очень интересно)

  2. Илья Михайлович

    Я позаимствую код. Попробую что то интересное сделать. Если получится скину ссылку на результат на codepen

    1. dimadv7

      Привет, было бы здорово) Спасибо.

  3. Андрей

    Пишет ошибку Unexpected token <

    1. Андрей

      вопрос снят, разобрался

  4. Greg

    Привет! Спасибо тебе за то, что рассказываешь разные фишки! Крутая идея, я попробовал, да все работает как ты и написал. Но мне кажется, что это фигня для СЕО. Мы сделали, так сказать, псевдо урлы и метатеги, поскольку страниц то таких нет в действительности. А мы знаем, что гугл любит много страниц реальных, именно поэтому то он лучше относиться к блогам и хуже к одностраничникам. Так вот в у меня вопрос, можно ли как-то эту идею доработать так, чтобы создать 5 страниц реальных типа index.html, nnn1.html, nnn2.html, nnn3.html, nnn4.html и потом все их впихнуть в секции главной страницы index.html. Мне кажется в гугле имели ввиду такую идею. А пока у нас получились только урлы, а не отдельные страницы, ведь если ввести в поиск site. ru / nnn1.html, то откроется index.html, а не секция nnn1.html. :( Что ты думаешь об этом?

    1. dimadv7

      Да, но когда листаешь, меняется title, description и url. Как будто меняется страница. А то, о чем ты говоришь - давно придумано. При помощи ajax менять страницу без перезагрузки. А на меню или на прокрутку вешать это событие - это уже дело техники.

  5. Ирина

    Вообще круть! Я даже и не думала что такое может быть!
    Спасибо!! будем пробовать

  6. kostia

    Красава, тока сам в свой модуль обратного звонка добавь ети фичи, а не ети хештеги,ломающие логику сайта:

            a.attr({
              class: 'sl-overlay--close',
              onclick: "javascript:var a=window.location.href; window.location.href=window.location.href+'#modal-close';history.pushState(null, null, a);"
            }).html('×');
  7. kostia

    =это было закрытие модального окна, без перекидывания на главную страницу;
    = Аналогично и открытие:

    <a class="button" style="border: 2px solid red; padding: 2px; border-radius: 15px;" onclick="javascript:var a=window.location.href; window.location.href=window.location.href+'#sl-overlay-cf';history.pushState(null, null, a);" >Заказать звонок</a>
  8. http://vkusno-pirogi.ru/

    + плюс надо добавить сокрытие , т.к. мне не нужны ети плавающие постоянно штуки... пришлось скрывать так:

    #smartLidBtn{
    display: none;
    } 

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

  9. Мария

    Дмитрий, спасибо, статья супер!
    Скажите, а на WP будет работать?

  10. Никита

    Добрый день. Возникла проблема в работе данного плагина. Установил, все по инструкции, но при прокрутке урлы меняются не на своих законных местах. В моем случае первые три секции отрабатывают как положено, а далее места смены урл как бы съезжают. Так то вроде работает, но как то криво это смотрится все равно. Помогите пожалуйста, понять в чем дело)
    Можно убедиться самому на сайте: helpmyapple56./ru

  11. Семен

    Подскажите, статья ещё актуальна?

    Столкнулся с проблемой, при обновлении выдает ошибку 500

    1. dimadv7

      Семен, здравствуйте, да - актуальна. Вот ссылка на демо, добавил и в статью. Или я не правильно вас понял...

Добавить комментарий