Angular та SEO: як їх налаштувати
Розробники системи Google неодноразово заявляли, що пошукові роботи підтримують парсинг SPA-проектів. Але за фактом існуючі механізми відрізняються незначною кількістю ресурсів та можливостей. Таким чином, Ви, сподіваючись на якісну індексацію, часто не отримуєте бажаного.
Пошукові боти при вивченні проектів можуть зовсім не дочекатися відповіді від певних скриптів, внаслідок чого можуть постраждати позиції в органіці. Щоб уникнути проблем, вам необхідно вживати заходів, у чому допоможе правильне налаштування фреймворку Angular Search Engine Optimization.
Про це я сьогодні й розповім.
Содержание статьи
Що таке Angular
Angular – це JS-фреймворк з відкритим вихідним кодом для складання клієнтських програм. Розробку анонсували у 2010 р. інженери компанії Google.
Основним завданням Angular вважається створення SPA-проектів (Single Page Application) та додатків з єдиною сторінкою в межах браузера. Ключовий параметр – використання у ролі основної мови програмування TypeScript. Однак написання програм можливе і на Dart, JavaScript. Незалежно від варіанта, Оптимізація Angular під Search Engine покращує взаємодію користувачів та розробників з певним ресурсом.
Слова розробників Google:
«Часи змінилися. Не рекомендуємо сьогодні забороняти сканування Googlebot файлів JavaScript або CSS. Ми відображаємо та розуміємо веб-сторінки, як і браузери».
Але якщо звернутися до інформації самої компанії Google, то з 2018 року я не спостерігаю нічого оптимістичного, оскільки немає тематичних досліджень, документації. Також немає конкретних відомостей, як Google виконує сканування та індексацію різних фреймворків.
Prerender – робота і для чого це підходить
Prerender є рішенням, що дозволяє пошуковим роботам бачити певний ресурс у такому вигляді, яким сайт постає перед вами при відкритті в будь-якому браузері.
Він підходить у таких випадках:
- для статичних сторінок;
- при постійних, практично незмінних (або змінних повільно) відомостях;
- для створення сторінок при тривалому отриманні даних від сервера.
Prerender не підходить при таких ситуаціях:
- достовірність інформації важлива, проте дані швидко змінюються;
- обсяг відомостей не дає змоги побудувати вірну статистику.
«Крім того, до останнього пункту додам, що не підходить Prerender і за надто тривалого процесу побудови статистики».
Особливості реалізації Universal
Щоб вирішити проблему з індексацією, Angular Universal під SEO здійснює рендеринг на серверній стороні. Т. е. конкретна сторінка створюється на «бекенд-сервері», який написаний на Node.Js, .NET або ін. У результаті браузер користувача отримає сторінку зі звичайними характеристиками і наявністю на ній звичних елементів:
- підзаголовків;
- мета-тегів;
- контенту.
Такий підхід вважається ідеальним, оскільки пошукові краулери відрізняються гарною підготовленістю до індексації статичних сторінок. Для SEO в Google, Angular можна розробляти звичну програму, а Universal подбає про рендеринг на сервері.
Незважаючи на реалізацію Universal на базі .Net Core, використовувати небажано, тому що:
- у будь-якому випадку застосовується рендеринг через NodeJS;
- занадто повільна робота;
- мало прикладів використання.
До речі, для DOM на сервері застосовується domino на базі Mozilla’s dom.js. Це дозволяє виключати багато помилок.
Як опрацювати SEO в Angular
Перевірити відображення сторінок Google ботом
При використанні Angular, у SEO ніяких складнощів для перевірки відображення сторінок проекту ботом не виникає. Для цього вам потрібно перейти Google Search Console, вибрати проект і запустити “Перевірка URL” на сторінці, вибраних для індексації. Консоль покаже інформацію про можливість або неможливість отримання доступу до пошукових механізмів.
Подібний підхід допоможе зрозуміти, яким з областей ви повинні приділити увагу в роботі з SEO.
Попередній рендеринг
У цьому випадку немає нічого складного. Поясню: відображення JavaScript відбувається у вашому браузері, зберігається статичний HTML та повертається боту. Подібне рішення ідеально поєднується з простими програмами, які ніяк не залежать від сервера. Це дає відмінний результат у SEO при цьому простий у налаштуванні.
Попередній рендеринг відрізняється простим налаштуванням, але в той же час показує хороші результати. Тому він вважається відповідною альтернативою робочому процесу на стороні сервера.
Rendering на стороні сервера
Тут застосовуватиметься SSR за допомогою Angular Universal.
Тобто, якщо говорити по-простому, Angular Universal виконується на серверній стороні, генерує статичні сторінки і запускає їх у браузері, тому при здійсненні запиту контент відобразиться в DOM для відвідувача.
DOM – це об’єктна модель документа, яку браузер створює в пам’яті комп’ютера на основі HTML-коду, отриманого ним від сервера.
Скажу прямо: така технологія сприяє збільшенню навантаження на сервер. У той самий час підвищується продуктивність при повільному з’єднанні чи використанні малопотужних пристроїв. У цьому випадку завантаження початкової сторінки відбувається швидше на відміну від безпосереднього відображення клієнтів.
Оптимізація самого Ангуляра
Для оптимізації ресурсів на Angular під SEO дотримуйтесь наступної інструкції:
- Попередньо складіть список сторінок на вашому ресурсі та зробіть sitemap.xml. Пильну увагу вам потрібно приділити найважливішим підрозділам проекту, що вимагають швидкої індексації (для них потрібно встановити високий <priority>. І так, звичайно, Google заявляє, що не враховує пріоритети, але на великих ресурсах в першу чергу індексуються сторінки з високим <priority> Збіг?Не думаю?
- Встановіть Prerender (позитивно вплине на SEO-параметри сайту, у тому числі швидкість завантаження, індексування).
- Використовуйте Google Search Console для перевірки індексації сторінок.
- Зробіть правильне налаштування відстеження аналітики. Наприклад, Google Analytics часто погано справляється зі своїми обов’язками при перегляді SPA-ресурсів. Я рекомендую використовувати та запускати Angulartics.
- Також проводьте регулярне сканування проекту SEO-краулерами: ScreamingFrog , JetOctopus і т.п. Вони покажуть непомічені помилки.
Висновки
Як Ви могли переконатись самі, SPA-проекти можна просувати в пошукових системах, хоча завдання і складне. Наприклад:
- за допомогою Ангуляра, для SEO здійснюєте рендеринг на стороні сервера (а такий підхід дозволяє уникнути проблем з неякісною індексацією);
- функція «Prendering» сприяє прискоренню часу рендерингу, що в результаті збільшує швидкість завантаження контенту ресурсу.
Я і команда Solarweb вважаємо, що Angular Universal дає можливість створити зручний для відвідувача проект, причому турбуватися, як його сприйме пошукова система, не потрібно.