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

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

Перевести сайт на AngularJS и не потерять в органике. Как?
  • Бизнес хочет быстрые сайты с хорошим UX.
  • Программисты устали кодить стандартные сайты на PHP, Django и хотят использовать свежие, современные решения.

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

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

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

  • бизнес хочет постоянного роста органического трафика (SEO)
  • программисты часто (из личного опыта) концентрируются на крутом продукте, но не думают о маркетинге и поисковой оптимизации.

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

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

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

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

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

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

  • Какие нюансы необходимо учитывать для SEO.
  • Как правильно нужно настраивать Google Analytics для сложных SPA-сайтов, сделанных на AngularJS, React, vue.js.
  • На какие этапы следует разбить запуск новой версии сайта и как ее тестировать, чтобы минимизировать риск просесть в органической выдаче.
Читайте также:   Google AdWords окончательно перешел на новый бренд Google Ads

Поехали!

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

  1. В случае с AngularJS рекомендуем использовать версию от 4.0 и выше.
  2. Рекомендуем использовать server side rendering, который дает статику для поисковых роботов — таким образом, контент и верстка страниц будет уже доступна в исходном коде браузера. Если коротко, SSR — это такой процесс, в котором веб-сервер, анализируя User Agent клиента, понимает, что это поисковый краулер, и рендерить весь контент перед отдачей сам, не полагаясь на браузер. Так краулер получает именно то результирующий HTML, который видит пользователь в SPA.

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

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

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

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

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

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

  3. Для всех страниц, которые должны индексироваться в поиске и участвуют в UX (которые нужно фиксировать и отслеживать), обязательно & # 39; обязательно создавайте отдельные 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. Многочисленные аудиты по перечисленным выше нюансам и доработки. А также сбор обратной н & # 39; связи от клиентов, которым предоставили возможность использовать новую версию сайта.
  3. В результате устранения ошибок и доработки новой версии сайта после тестирования.
  4. Настройка Google Analytics по всей воронке продаж для каждого этапа через GTM.
  5. Перенос new.crediton.kz на основной домен c использованием 301 редиректов + возможность пользователям перейти на старую версию old.crediton.kz.
  6. Отключение старой версии сайта в пользу новой более эффективной.

Результаты

  • Увеличение скорости загрузки страниц в 2 раза.
  • Отсутствие провалов в средних позициях выдачи.
  • Снижение показателя отказов на 10%.

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

  • Рахимов Ислам — Digital marketer (CreditOn)
  • Волобуев Евгений — Head of marketing department (CreditOn)
  • Амрен Бакберген — Senior web developer (CreditOn)
  • Федченко Леся — Digital marketer (Peklo)
  • Роман Леонов — SEO-jedi (Peklo)

Подведем & # 39; й итоги.

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

Мнение редакции может не совпадать с мнением автора. Ваши статьи присылайте нам на [email protected] . А наши требования к ним — вот здесь .

    ! Function (f, b, e, v, n, t, s) {if (f.fbq) return; n = f.fbq = function () {n.callMethod?

n.callMethod.apply (n, arguments): n.queue.push (arguments)}; if (! f._fbq) f._fbq = n;
n.push = n; n.loaded =! 0; n.version = & # 39; 2.0 & # 39 ;; n.queue = []; t = b.createElement (e) t.async =! 0;
t.src = v; s = b.getElementsByTagName (e) [0]; s.parentNode.insertBefore (t, s)} (window,
document, & # 39; script & # 39 ;, & # 39; https: //connect.facebook.net/en_US/fbevents.js')
fbq (& # 39; init & # 39 ;, & # 39; 428240267341070 & # 39;);
fbq (& # 39; track & # 39 ;, & # 39; PageView & # 39;);

  window.fbAsyncInit = function () {

FB.init ({
appId: & # 39; 1300264160086823 & # 39 ;,
cookie: true,
xfbml: true,
version: & # 39; v2.8 & # 39;
});
FB.AppEvents.logPageView ();
};

(Function (d, s, id) {
var js, fjs = d.getElementsByTagName (s) [0];
if (d.getElementById (id)) {return;}
js = d.createElement (s) js.id = id;
js.src = "http://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10&appId=1300264160086823";
fjs.parentNode.insertBefore (js, fjs)
} (Document, & # 39; script & # 39 ;, & # 39; facebook-jssdk & # 39;))

Читайте также:   Instagram рассказал, как работают его алгоритмы
Опубликовано topinup / Февраль 8, 2018
Рубрики: Новости
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...


Заказ сайта на WordPress

Заполните форму, и наши специалисты свяжутся с вами в ближайшее время для создания сайта на выбранной теме WordPress.

Будьте в курсе последних новостей.

Подписывайтесь на наши страницы в соцсетях и на канал в Telegram.

Заказ бесплатной консультации

Ваше имя (обязательно)

Ваш телефон (обязательно)

Ваш e-mail (обязательно)