Angular и SEO: как их подружить? +5


Несмотря на заявления 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)


Как работает Universal и как его создать читайте тут: https://angular.io/guide/universal


Тонкости:


Реализация Universal есть на базе NodeJS и .Net Core.
Я НЕ советую вам использовать .Net Сore реализацию для Universal так как:


  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 {
      enumerable: 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 на сервере без повторного запрашивания ее в браузере рекомендую использовать:



Пример сборки в Docker с использованием Multi-stage builds:



Потестить:



сообщество universal в телеграмме




К сожалению, не доступен сервер mySQL