Перевести сайт на AngularJS и не потерять в органике. Как?

Как сделать «быстро, модно, молодёжно» и не погубить поисковую оптимизацию на сайте. Рассказывает Роман Леонов из агентства Peklo Studio.

Поэтому, казалось бы, сделать из сайта SPA (Single Page Application) с помощью фреймворков AngularJS, React или чего-нибудь подобного — идеальное решение для обеих сторон.

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

Но не всё так просто. Нужно учитывать, что:

А в условиях высокой конкуренции в органической выдаче, когда сайт занимает топовые позиции — даже простые изменения вёрстки, дизайна и текста иногда вносить реально очково.

Причина в том, что в SPA-сайтах весь контент страниц и вёрстка (HTML и CSS-стили) загружаются асинхронно, DOM-модель изменяется на лету. И по сути, в исходном коде страницы мы не видим практически ничего, кроме установленных скриптов в <head>, набора тегов и ссылок на JS-файлы. Например:

Сквозная аналитика с нуля до мастера!

Cossa рекомендует: онлайн-курс по внедрению сквозной аналитики. В программе:

  • 7 учебных модулей, более 200 часов
  • Преподаватели — практикующие эксперты по веб-аналитике
  • Финальная работа — кейс реального клиента
  • Диплом
  • Возможность стажировки и трудоустройства
Узнать больше >>
Реклама

В итоге из-за этого начнутся проблемы с поисковой индексацией.

  1. Google может перестать видеть контент сайта полностью, либо частями, а это сразу ослабит позиции страниц в выдаче.
  2. В случае когда весь контент и вёрстка подтягивается через JS-файлы, инструмент в Search Console «Fetch as Googlebot» даже может показывать, что он видит страницу точно так же, как и пользователь. Но при этом мы за последние полгода на 4 проектах убеждались, что процесс краулинга и индексации происходит медленнее, чем на обычных сайтах, где весь контент и вёрстка доступны сразу в исходном коде.
  3. Есть мнение, что краулер Google в скором времени будет рендерить все страницы так, как это делают современные браузеры, но наша статистика говорит, что это не срабатывает всегда и пока надеяться на это рано.

Поэтому всё это дело надо поливать правильным SEO-шным соусом — тогда точно будет win-win, все будут горды проделанной работой, бизнес-показатели будут расти и все будут довольны.

Так наши коллеги из Crediton.kz, лидеры рынка Казахстана по выдаче онлайн-займов, и решили сделать. На их примере раскроем несколько важных нюансов, которые вам обязательно пригодятся, если планируете запускать SPA-сайт.

Поехали!

Нюансы в SEO для SPA-сайтов на AngularJS, React и другом

  1. В случае с AngularJS рекомендуем использовать версию от 4.0 и выше.
  2. Рекомендуем использовать server side rendering, который даёт статику для поисковых роботов — таким образом, контент и вёрстка страниц будет уже доступна в исходном коде браузера.

    Вкратце, SSR — это такой процесс, в котором веб-сервер, анализируя User Agent клиента, понимает, что это поисковый краулер, и рендерит весь контент перед отдачей сам, не полагаясь на браузер. Так краулер получает именно тот результирующий HTML, который видит юзер в SPA.

    Пара статей на техническом языке на эту тему: первая на русском языке и вторая на английском.

    Готовый пример правильной настройки рендеринга: credtion.kz.

  3. В процессе работы над SSR, обязательно используйте инструмент «Посмотреть как Googlebot».

  4. Также актуален стандартный набор требований по SEO в виде прописанных индивидуально для каждой страницы Title, Metadata, сгенерированного Sitemap.xml, SSL-сертификата и так далее. Ознакомьтесь с полным чеклистом для SEO 2018.
  5. Рекомендуем закладывать в разработку админку для оперативного изменения контента страниц, а также тайтлов, метаданных и Open Graph текстов.
  6. Обязательно используйте для каждой страницы отдельные URL-адреса. В контексте SPA эта штука называется url routing, когда при изменении стейтов страницы меняется URL в адресной строке браузера, но вся страница не перегружается. В первую очередь это нужно, чтобы отдельные страницы индексировались, а также это важно для корректной работы Google Analytics, чтобы можно было отслеживать UX, фиксировать события и конверсии в процессе использования вашего продукта.

Настройка Google Analytics для SPA-сайтов

  1. Настраивайте Google Analytics обязательно через Google Tag Manager.
    Специфика работы SPA в том, что страница загружается только один раз, а затем в процессе использования происходит подгрузка. И поэтому без дополнительных настроек скрипт Google Analytics загрузится 1 раз и сработает только 1 pageview. В итоге статистика будет кривой и недостоверной. Ссылка на адекватный мануал по настройке Google Analytics через GTM.
  2. Для достоверности установите в браузер Google Tag Assistant, который позволит проверить работу Google Analytics после всех настроек и проверить, правильно ли регистрируются pageviews.

  3. Для всех страниц, которые должны индексироваться в поиске и участвуют в UX (которые нужно фиксировать и отслеживать), обязательно создавайте отдельные URL-адреса.

    Ужасный пример: https://site.kz/order/ в случае если в процессе прохождения нескольких этапов заказа URL будет неизменным. В том числе и на финальной странице.

    Хороший пример: https://site.kz/order/finished — данная страница будет являться целевой. Удобно для отслеживания.

  4. Для всех кнопок в вёрстке, которыми будут пользоваться ваши клиенты, особенно важные пути вроде процесса регистрации и покупки, задавайте уникальные значения классов (class). Тогда маркетинг сможет отслеживать события и конверсии в Google Analytics и видеть реальную картину, как клиенты используют ваш продукт.

    Ужасный пример: class="orange_button" — таких кнопок на сайте может быть миллион, и одну конкретную отслеживать не получится.

    Хороший пример: class="get_credit_mainpage" — тогда можно будет узнавать, сколько человек, с каких источников трафика и как часто нажимают на данную кнопку и проходят дальше. Это важно.

Как безопасно перейти на SPA, не потерять в органике и стать ещё круче?

Распишем этапы обновления сайта на примере crediton.kz, которые можно применить для других проектов.

  1. Подготовка новой версии сайта на субдомене new.crediton.kz и закрытие от индексации с помощью «Disallow: /» в robots.txt для данного субдомена.
  2. Многочисленные аудиты по перечисленным выше нюансам и доработки. А также сбор обратной связи от клиентов, которым предоставили возможность использовать новую версию сайта.
  3. В итоге устранение ошибок и доработка новой версии сайта после тестирований.
  4. Настройка Google Analytics по всей воронке продаж для каждого этапа через GTM.
  5. Перенос new.crediton.kz на основной домен c использованием 301 редиректов + возможность пользователям перейти на старую версию old.crediton.kz.
  6. Отключение старой версии сайта в пользу новой более эффективной.

Результаты

Над проектом работали:

Подведу итоги.

Использовать SPA-сайты круто, но главное — делать это аккуратно, не торопиться и тщательно всё проверять и настраивать. Скорость и удобство сайта будут радовать пользователей, вас и поисковые системы.

Мнение редакции может не совпадать с мнением автора. Ваши статьи присылайте нам на 42@cossa.ru. А наши требования к ним — вот тут.