Просування односторінкових сайтів

Односторінкові сайти переживають друге народження. В минулому - це статичні сторінки з простим дизайном і текстовим наповненням. Сьогодні на зміну їм приходять майданчики з інтерактивними елементами, модним дизайном і ефектами. У такому виконанні сайти дуже популярні у користувачів, а сучасні технології веб-розробки дозволяють односторінковий сайт зробити дружніми для SEO.

Інтерактивні сторінки

Класичні лендінги являють собою статичну сторінку з блоком контенту і однією або декількома кнопками Call-to-Action, які може доповнювати також форма реєстрації з полями.

Наприклад:


 

Подібна концепція сайтів сьогодні зустрічається все рідше, оскільки односторінкова архітектура не дозволяє провести якісну пошукову оптимізацію ресурсу. Це робить практично неможливим його просування в ТОП пошукових систем. У переважній кількості випадків такі лендінги використовуються як посадочні сторінки для контекстних та іншого роду рекламних кампаній.

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

Приклад інтерактивного односторінкового сайту

Використання технологій AJAX дозволяє створювати ефекти скролінгу (нескінченний скролінг, паралакс-скролінг), розбивати лендінгову архітектуру на окремі блоки, роблячи сторінку яскравою і динамічною. Так, простий односторінковий сайт перетворюється в захоплюючий додаток (адаптований і для мобільних пристроїв), здатний надовго утримувати увагу користувача.

Прикладів таких модних веб-додатків можна навести чимало: axara.com/en/, mypizzaoven.nl, makeyourmoneymatter.org. Однак з точки зору SEO вони неефективні і можуть працювати максимум як посадочні сторінки. Справа в тому, що технології AJAX, застосовувані тут для подгрузки контенту, ускладнюють його індексацію роботами. Тим не менш, існує методика, яка дозволяє односторінковим сайтам використовувати переваги скриптів і в той же час залишатися доступними для пошукових машин. Давайте розглянемо, як це реалізується.

 

Дружній для SEO

Метод пошукової оптимізації односторінкового сайту на JavaScript запропонував Google. В чому полягають його рекомендації? Якщо коротко, то розбити сторінку на блоки, привласнити кожному блоку URL і заголовок. Це дозволить створити видимість багатосторінкових для робота, в той час як користувач буде просто переглядати сторінку з ефектом скролінгу.

 

1. Угруповання контента по блокам

Необхідно розбити весь контент сторінки на логічні блоки («про компанію», «ціни», «послуги» та інше). Кожен блок повинен містити достатній обсяг корисного контенту: тексти з входженням ключових слів, графіку, заголовок першого рівня H1 (це єдиний допустимий випадок, коли на одній сторінці може використовуватися кілька тегів заголовків першого рівня).

 

2. Структурування URL

Кожному блоку необхідно присвоїти власний URL. Посилання потрібно оптимізувати таким чином, щоб пошукові машини змогли без проблем проіндексувати вміст всієї сторінки, побудованої з використанням технологій AJAX. Для цього існує два рішення:

Використання в URL символу #! (Це вказівка роботу до того, що він звертається за HTML-версією сайту) і розміщення безпосередньо самого HTML-контенту на URL, де символ #! замінюється на вираз? _escaped_fragment_ =. Детальніше про це ви можете прочитати в довідкових документах Яндекса і Google. У цього методу є один недолік: робвід не зможе бачити правильних поведінкових метрик на сторінці, так як технічно контент для роботів і для користувачів відображається по-різному.

Створення структури повних URL (без символу #!) З використанням методу history.pushState. Це дозволяє отримувати більш привабливі посилання на блоки і відмовитися від структури з «решітками». Подивіться на приклад сайту: при скролінгу URL блоків у рядку браузера динамічно змінюються. Метод pushState використовується в роботі соціальних мереж, наприклад новинних стрічок ВКонтакте і Facebook. Варто підкреслити, що цей варіант організації URL кращий з точки зору Google і працює коректно в будь-яких інших пошукових системах.

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

Найбільш часто зустрічається рішення в організації блоків - це розмітка посилання за допомогою хеш-тега #. Не можна сказати, що це невірно, але з точки зору SEO це рішення марне: пошуковий робвід проиндексирует тільки той вміст, який знаходиться в URL до символу #, а те, що за ним - не побачить.

 

3. Заповнення мета-тегів

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

Після того як ваш лендінг буде готовий до SEO-просуванню, можна починати формувати кількість посилань як для звичайного багатосторінкового сайту (посилання, статті) і паралельно залучати цільовий трафік за доступними рекламним каналам. Варто заручитися підтримкою контекстної реклами, SMM і пошукових сервісів, наприклад Яндекс.Довідник.

 

Висновки

Інтерактивний односторінковий сайт - це хороший спосіб привернути до себе увагу цільової аудиторії і вигідно вирізнитися на тлі конкурентів. Але розробка дійсно якісного динамічного ресурсу, дружнього для SEO, - завдання високої складності і великих витрат ресурсів. Тому, перш ніж писати ТЗ для розробника, подумайте: можливо, у вашому випадку статичний багатосторінковий сайт буде найбільш оптимальним рішенням для бізнесу.