Автор: Джей Ар Рідлі (JR Ridley) - старший фахівець з цифрового маркетингу в Go Fish Digital, США.
Ви напевно стикалися з AngularJS в мережі, навіть якщо не знали про це. Ось лише кілька сайтів, які використовують Angular: Upwork.com, Freelancer.com, Udemy.com, Youtube.com.
Виглядають знайоме? Все тому, що AngularJS захоплює інтернет. Для цього є вагома причина: Angular і інші фреймворки в стилі React створені для поліпшення взаємодії користувачів і розробників з сайтом.
Коротка довідка. AngularJS і ReactJS представляють напрямок в веб-дизайні, що отримало назву «односторінкові додатки» або «SPA» (Single Page Applications). Традиційний сайт завантажує кожну окрему сторінку в міру переміщень користувача. Цей процес включає виклики сервера, завантаження ресурсів і рендеринг сторінки.
SPA виключають більшу частину фонової активності, завантажуючи сайт цілком, коли користувач вперше потрапляє на сторінки. Замість завантаження нової сторінки щоразу, коли користувач клацає на посилання, сайт динамічно оновлює єдину HTML-сторінку в міру того, як він взаємодіє з ресурсом.
Чому цей напрямок веб-дизайну захоплює інтернет? SPA роблять роботу сайту дуже швидкою, дозволяючи користувачам переміщатися по ньому практично миттєво. У розробників в свою чергу є шаблон, який дозволяє їм легко і швидко налаштовувати, тестувати і оптимізувати сторінки. AngularJS і ReactJS використовують просунуті JavaScript-шаблони для рендеринга сайту. В результаті завантаження виробляється практично миттєво. Вся ця робота виконується «за лаштунками», поза полем зору користувача.
На жаль, будь-який, хто намагався займатися SEO-оптимізацією сайтів на Angular або React знає, що їх фонова активність ховається не тільки від користувачів, але і від пошукових роботів. Краулери, такі як Googlebot, в значній мірі покладаються на дані HTML / CSS для рендеринга і інтерпретації вмісту сайту. Коли HTML-контент прихований за скриптами, краулери не отримують контент для індексації і показу в результатах пошуку.
Звичайно, Google стверджує, що він може обробляти JavaScript. Але навіть якщо це і так, сканування створених на базі SPA-фреймворків сайтів для Googlebot і раніше проблематично. Одна з перших труднощів, з якою ми зіткнулися, коли до нас вперше звернувся клієнт з сайтом на Angular, це те, що практично нічого, крім головної сторінки, не з'являлося в пошуковій видачі. Сканування сайту за допомогою Screaming Frog виявило головну сторінку, кілька JavaScript-ресурсів і все.
Ще одна проблема пов'язана з реєстрацією даних Google Analytics. Подумайте ось про що: дані GA збираються шляхом запису переглядів сторінок кожен раз, коли користувач переходить на сторінку. Як ви можете відстежувати статистику сайту, якщо HTML-відповідь, на основі якого реєструється перегляд, відсутній?
На основі роботи з декількома клієнтами з односторінкового додатками ми розробили методику пошукової оптимізації для таких ресурсів. Завдяки використанню цього підходу, SPA-сайти не тільки отримували можливість індексуватися пошуковими системами, а й могли ранжуватися за ключовими словами на першій сторінці.
5-крокова методика SEO-оптимізації для AngularJS
- Складіть список всіх сторінок на сайті
- встановіть Prerender
- Сканер Google для сайтів
- Налаштуйте Google Analytics
- Пересканіруйте сайт
1. Складіть список всіх сторінок на сайті
Цей процес може бути довгим і виснажливим. Для деяких сайтів ця задача буде такою ж легкою, як експорт файлу XML Sitemap. Для інших, особливо тих, у кого сотні і тисячі сторінок, створення такого списку може зайняти години або дні.
Однак цю роботу потрібно зробити. Швидше за все, ви неодноразово будете звертатися до цієї інформації, працюючи над індексацією сайту. Якщо у вас немає списку всіх сторінок, висока ймовірність, що ви ненавмисно залишите якусь частину ресурсу непроіндексованої пошуковими системами.
Щоб полегшити це завдання, можна поділити контент на директорії, а не окремі сторінки. Потім вам потрібно буде включити в підсумковий список ці папки і відзначити, скільки сторінок вони включають. Якщо у вас ecommerce-сайт, вкажіть, скільки товарів міститься в кожній категорії.
Незалежно від того, який підхід ви оберете для якнайшвидшого виконання цього завдання, перш ніж переходити до кроку №2, переконайтеся, що ви склали повний список.
2. Встановіть Prerender
Prerender стане вашим кращим другом під час роботи над SEO для SPA. Prerender - це сервіс, який рендерить ваш сайт в віртуальному браузері, а потім надає статичний HTML-контент веб-краулер. З точки зору SEO, це хороше рішення: користувачі як і раніше отримують швидкий і динамічний досвід взаємодії з SPA, а пошукові роботи можуть ідентифікувати індексований контент для показу в результатах пошуку.
Ціни на Prerender варіюються в залежності від розміру сайту і свіжості кеша, що надається Google. Дрібні сайти (до 250 сторінок) можуть використовувати Prerender безкоштовно. Більшим ресурсам і сайтам, які постійно оновлюються, потрібно буде платити $ 200 + в місяць. Проте, можливість отримати індексований версію свого сайту, яка дозволяє залучати клієнтів через органічний пошук, безцінна.
На цьому етапі вступає в роботу список, який ви склали на першому кроці. Виділивши пріоритетні розділи сайту, які повинні бути надані пошуковим системам в першу чергу, ви зможете заощадити і при цьому досягти прогресу в SEO.
3. Сканер Google для сайтів
У Search Console є дуже корисний інструмент під назвою « Сканер Google для сайтів ». Він дозволяє ввести URL-адресу та відтворити процес сканування сторінки роботом Googlebot. При виборі опції «Сканувати» запитується вказаний URL на сайті і відображається відповідь HTTP, включаючи повне завантаження вихідного коду сторінки.
«Отримати і відобразити» повертає відповідь HTTP і також надає скріншот сторінки, як її бачать Googlebot і користувачі.
Сканер Google - це потужний інструмент для сайтів на AngularJS. Навіть з встановленим Prerender ви можете виявити, що пошуковик все ще не повністю відображає ваш сайт або ж опускає його ключові функції, корисні для користувачів. Перевіривши URL за допомогою цього інструменту, ви зрозумієте, як ваш сайт бачать пошукові системи, і які кроки потрібно зробити, щоб поліпшити ранжування за ключовими словами.
Крім того, після виконання запитів «Сканувати» і «Отримати і відобразити» ви зможете запросити індексацію сторінки, що може прискорити появу вашого ресурсу в результатах пошуку.
4. Налаштуйте Google Analytics (або Google Tag Manager)
Як ми згадували вище, SPA-ресурси можуть мати серйозні проблеми з реєстрацією даних Google Analytics, оскільки вони відстежують перегляди сторінок не так, як стандартні сайти. Замість традиційного коду відстеження Google Analytics вам потрібно буде налаштувати Analytics за допомогою альтернативного методу.
Одним з таких методів є плагін Angulartics . Він замінює стандартні події pageview на віртуальний трекінг переглядів сторінок, який відстежує всю навігацію користувача по вашому додатку. Оскільки SPA динамічно завантажують HTML-контент, віртуальні перегляди сторінок реєструються на підставі взаємодій користувача з веб-сайтом. Завдяки цьому, в кінцевому підсумку фіксується ту ж саму поведінку користувача, яке спостерігалося б традиційним способом.
З цією метою також можна використовувати тригери « Зміна в історії »В диспетчері тегів Google і інші новаторські методи. Поки Google Analytics реєструватиме взаємодії користувача, а не звичайні перегляди сторінок, конфігурація Analytics буде достатньою.
5. Пересканіруйте сайт
Пройшовши кроки 1-4, пересканіруйте сайт самостійно, щоб знайти ті помилки, яких не очікував навіть Googlebot. У нашому досвіді однієї з таких помилок було те, що після установки Prerender наші краулери все ще потрапляли в пастку для павуків:
Як ви можете припустити, на даному сайті не було 150 тисяч сторінок. Наші краулери виявили рекурсивний цикл, який продовжував генерувати все довші URL для контенту сайту. Це те, чого ми б не побачили в Google Search Console або Analytics. SPA відомі тим, що викликають незрозумілі проблеми, які ви можете виявити, лише відсканувавши сайт самостійно. Навіть якщо ви будете слідувати наведеним вище кроків і зробіть максимум запобіжних заходів, ви практично гарантовано зіткнетеся з унікальною проблемою, яка може бути діагностована тільки через сканування сайту.
результати
Описана вище методика дозволила нам не тільки отримати проіндексований сайт, але і потрапити на першу сторінку видачі по різним ключовими словами.
На прикладі нижче показані результати за ключовими словами для одного з сайтів наших клієнтів:
Зростання органічної трафіку протягом 7 місяців:
Все це показує, що займатися пошуковою оптимізацією SPA-сайтів непросто, але можливо. Щоб досягти успіху, дотримуйтесь запропонованим вище кроків.
Виглядають знайоме?Чому цей напрямок веб-дизайну захоплює інтернет?
Як ви можете відстежувати статистику сайту, якщо HTML-відповідь, на основі якого реєструється перегляд, відсутній?