Angular і SEO: як їх встановити?

Незважаючи на заяви Google і Яндекс про підтримку пошуковими ботами парсинга сайтів SPA, сподіватися на нормальну індексацію не варто — у пошукових ботів мало ресурсів, ваше застосування повинне максимально швидко відпрацьовувати, інакше, вам або поріжуть рейтинг, або не спарсят сторінку, так само бот може не дочекатися відпрацювання всіх ваших скриптів…
(дослідження Google bot)

Мій маленький проект для дослідження технологій — зміна відвідуваності, після переходу на Server Side Rendering (SSR)

Як налаштувати Angular і готові приклади нижче підкатом.

Пререндер

Пререндер — це генерація статики з нашої SPA-сторінки, яка містить збудований DOM.

Підходить:

1. для статичних сторінок
2. при незмінних або повільно змінюваних даних
3. для побудови сторінок, де доводиться довго отримувати дані від сервера даних (+ пункт 2)
4. коли дані від API не важливі, потрібно побудувати тільки SEO мета теги

Не підходить:

1. актуальність даних важлива і швидко змінюється
2. обсяг даних не дозволяє побудувати статику
3. побудова статики надто довгий для вас

Angular Universal

Angular Universal — це бібліотека для побудови серверного ренеринга Angular додатків, на даний момент Universal — це офіційна частина Angular (https://github.com/angular/universal)

Як працює Універсальний і як його створити читайте тут: https://angular.io/guide/universal

Тонкощі:

Реалізація Universal є на базі NodeJS і .Net Core.
Я НЕ раджу вам використовувати .Net Соге реалізацію для Універсальний так як:

1. усередині ви все одно використовуєте рендеринг через NodeJS
2. він повільніше: https://github.com/angular/universal/issues/654#issuecomment-350037107
3. менше прикладів

Хороші приклади стартерів:

1. https://github.com/qdouble/angular-webpack-starter
2. https://github.com/ng-seed/universal
3. https://github.com/Angular-RU/angular-universal-starter

Для DOM на сервері використовується domino, заснована на mozilla’s dom.js, що дозволяє уникнути помилок виду document is not defined.
Код server.ts для виключення помилок сторонніх бібліотек:

global['window'] = win;
Object.defineProperty(win.document.body.style, 'transform', {
 value: () => {
 return {
 перечіслімого: true,
 configurable: true
};
},
});
global['document'] = win.document;
global['CSS'] = null;

Пререндер в Angular

Для побудови статики потрібно вказати роуты для обробки, наприклад так: static.paths.ts.
Скрипт пререндера пишемо в prerender.ts.
Для побудови пререндера запускаємо:
ng build --prod && ng run universal-demo:server:production && webpack --progress --colors
для складання серверного коду і ангуляра, потім node prerender.js для побудови статики.
Отриману через пререндер статику може віддавати nginx.

Для побудови SSR динамічно ми будемо використовувати server.ts.
Для побудови проекту запускаємо:
ng build --prod && ng run universal-demo:server:production && webpack --progress --colors,
потім node server.js.
Для роботи сервера необхідно наявність node.

Можна використовувати комбінований підхід: пререндер і динамічний SSR, якщо за певними шляхами віддавати заздалегідь пререндеренные сторінки: код сервера

Для авторизації необхідно використовувати cookies — приклад роботи з cookies

Для побудови мета інформації я рекомендую використовувати shared-meta.module, який так само підтримує переклад мета інформації.

Для запитував інформації з API на сервері без повторного запитував її в браузері рекомендую використовувати:

• TransferHttpCacheModule — офіційний модуль interceptor
• ngx-transfer-http розширений service
  Обидва прикладу використовують TransferState для роботи з даними.

Приклад складання в Docker з використанням Multi-stage builds:

• SS
• CSR

Потестить:

• SSR
• CSR

спільнота universal у телеграмі