Перекласти сайт на AngularJS і не втратити в органіці. Як?
- Нюанси в SEO для SPA-сайтів на AngularJS, React і другом
- Налаштування Google Analytics для SPA-сайтів
- Як безпечно перейти на SPA, не втратити в органіці і стати ще крутіше?
- результати
- Бізнес хоче швидкі сайти з хорошим UX.
- Програмісти втомилися кодіть стандартні сайти на PHP, Django і хочуть використовувати свіжі, сучасні рішення.
- бізнес хоче постійного зростання органічного трафіку (SEO);
- програмісти часто (з особистого досвіду) концентруються на крутому продукті, але не думають про маркетинг і пошукової оптимізації.
- Google може перестати бачити контент сайту повністю, або частинами, а це відразу послабить позиції сторінок у видачі.
- У разі коли весь контент і верстка підтягується через JS-файли, інструмент в Search Console «Fetch as Googlebot» навіть може показувати, що він бачить сторінку точно так же, як і користувач. Але при цьому ми за останні півроку на 4 проектах переконувалися, що процес краулінга і індексації відбувається повільніше, ніж на звичайних сайтах, де весь контент і верстка доступні відразу в вихідному коді.
- Є думка, що краулер Google незабаром буде рендерить всі сторінки так, як це роблять сучасні браузери, але наша статистика говорить, що це не спрацьовує завжди і поки сподіватися на це рано.
- Які нюанси необхідно враховувати для SEO.
- Як правильно потрібно налаштовувати Google Analytics для складних SPA-сайтів, зроблених на AngularJS, React, vue.js.
- На які етапи варто розбити запуск нової версії сайту і як її тестувати, щоб мінімізувати ризик просісти в органічній видачі.
- У випадку з AngularJS рекомендуємо використовувати версію від 4.0 і вище.
- Рекомендуємо використовувати server side rendering, який дає статику для пошукових роботів - таким чином, контент і верстка сторінок буде вже доступна в вихідному коді браузера.
Якщо коротко, SSR - це такий процес, в якому веб-сервер, аналізуючи User Agent клієнта, розуміє, що це пошуковий краулер, і рендерить весь контент перед віддачею сам, не покладаючись на браузер. Так краулер отримує саме той результуючий HTML, який бачить користувач в SPA.Пара статей на технічній мові на цю тему: перша російською мовою і друга англійською .
Готовий приклад правильного налаштування рендеринга: credtion.kz . - В процесі роботи над SSR, обов'язково використовуйте інструмент «Подивитися як Googlebot».
- Також актуальним є стандартний набір вимог по SEO в вигляді прописаних індивідуально для кожної сторінки Title, Metadata, згенерованого Sitemap.xml, SSL-сертифіката і так далі. Ознайомтеся з повним чекліст для SEO 2018 .
- Рекомендуємо закладати в розробку адмінку для оперативного зміни контенту сторінок, а також тайтлів, метаданих та Open Graph текстів.
- Обов'язково використовуйте для кожної сторінки окремі URL-адреси. В контексті SPA ця штука називається url routing, коли при зміні Стейт сторінки змінюється URL в адресному рядку браузера, але вся сторінка не перевантажується. В першу чергу це потрібно, щоб окремі сторінки індексувалися, а також це важливо для коректної роботи Google Analytics, щоб можна було відстежувати UX, фіксувати події та конверсії в процесі використання вашого продукту.
- Налаштуйте Google Analytics обов'язково через Google Tag Manager.
Специфіка роботи SPA в тому, що сторінка завантажується тільки один раз, а потім в процесі використання відбувається подгрузка. І тому без додаткових налаштувань скрипт Google Analytics завантажиться 1 раз і спрацює тільки 1 pageview. У підсумку статистика буде кривої і недостовірною. Посилання на адекватний мануал по настройці Google Analytics через GTM . - Для достовірності встановіть в браузер Google Tag Assistant, який дозволить перевірити роботу Google Analytics після всіх налаштувань і перевірити, чи правильно реєструються pageviews.
- Для всіх сторінок, які повинні індексуватися в пошуку і беруть участь в UX (які потрібно фіксувати і відслідковувати), обов'язково створюйте окремі URL-адреси.
Жахливий приклад: https://site.kz/order/ в разі якщо в процесі проходження декількох етапів замовлення URL буде незмінним. У тому числі і на фінальній сторінці.
Гарний приклад: https://site.kz/order/finished - дана сторінка буде цільовою. Зручно для відстеження. - Для всіх кнопок в верстці, якими будуть користуватися ваші клієнти, особливо важливі шляхи начебто процесу реєстрації та покупки, задавайте унікальні значення класів (class). Тоді маркетинг зможе відстежувати події і конверсії в Google Analytics і бачити реальну картину, як клієнти використовують ваш продукт.
Жахливий приклад: class = "orange_button" - таких кнопок на сайті може бути мільйон, і одну конкретну відстежувати не вийде.
Хороший приклад: class = "get_credit_mainpage" - тоді можна буде дізнаватися, скільки людина, з яких джерел трафіку і як часто натискають на цю кнопку і проходять далі. Це важливо. - Підготовка нової версії сайту на субдомені new.crediton.kz і закриття від індексації за допомогою «Disallow: /» в robots.txt для даного субдомена.
- Численні аудити по перерахованим вище нюансам і доопрацювання. А також збір зворотного зв'язку від клієнтів, яким надали можливість використовувати нову версію сайту.
- В результаті усунення помилок і доопрацювання нової версії сайту після тестувань.
- Налаштування Google Analytics по всій воронці продажів для кожного етапу через GTM.
- Перенесення new.crediton.kz на основний домен c використанням 301 редиректів + можливість користувачам перейти на стару версію old.crediton.kz.
- Відключення старої версії сайту на користь нової більш ефективної.
- Збільшення швидкості завантаження сторінок в 2 рази.
- Відсутність провалів в середніх позиціях видачі.
- Зниження показника відмов на 10%.
- Рахімов Іслам - Digital marketer (CreditOn)
- Волобуєв Євген - Head of marketing department (CreditOn)
- Амрен Бакберген - Senior web developer (CreditOn)
- Федченко Леся - Digital marketer (Peklo)
- Роман Леонов - SEO-jedi (Peklo)
Тому, здавалося б, зробити з сайту SPA (Single Page Application) за допомогою фреймворків AngularJS, React або чого-небудь подібного - ідеальне рішення для обох сторін.
Але не все так просто. Потрібно враховувати, що:
А в умовах високої конкуренції в органічній видачі, коли сайт займає топові позиції - навіть прості зміни верстки, дизайну та тексту іноді вносити реально очок.
Причина в тому, що в SPA-сайтах весь контент сторінок і верстка (HTML і CSS-стилі) завантажуються асинхронно, DOM-модель змінюється на льоту. І по суті, в вихідному коді сторінки ми не бачимо практично нічого, крім встановлених скриптів в <head>, набору тегів і посилань на JS-файли. наприклад:
У підсумку через це почнуться проблеми з пошукової індексацією.
Тому все це діло треба поливати правильним SEO-шним соусом - тоді точно буде win-win, все будуть горді виконаною роботою, бізнес-показники будуть рости і всі будуть задоволені.
Так наші колеги з Crediton.kz, лідери ринку Казахстану з видачі онлайн-позик, і вирішили зробити. На їх прикладі розкриємо декілька важливих нюансів, які вам обов'язково знадобляться, якщо плануєте запускати SPA-сайт.
Поїхали!
Нюанси в SEO для SPA-сайтів на AngularJS, React і другом
Налаштування Google Analytics для SPA-сайтів
Як безпечно перейти на SPA, не втратити в органіці і стати ще крутіше?
Розпишемо етапи оновлення сайту на прикладі crediton.kz, які можна застосувати для інших проектів.
результати
Над проектом працювали:
Підведу підсумки.
Використовувати SPA-сайти круто, але головне - робити це акуратно, не поспішати і ретельно все перевіряти і налаштовувати. Швидкість і зручність сайту будуть радувати користувачів, вас і пошукові системи.
Думка редакції може не збігатися з думкою автора. Ваші статті надсилайте нам на [email protected] . А наші вимоги до них - ось тут .
Наш ассоциированный член www.Bikinika.com.ua. Добро пожаловать в мир азарта и удачи! Новый сайт "Buddy.Bet" готов предоставить вам широкий выбор азартных развлечений.