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)


    Как работает 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 в телеграмме

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 6

      0
      Для разработки универсального/изоморфного иметь функцию для универсальной/изоморфной предзагрузки данных (см. реализацию next/nuxt). Как этот вопрос решается в angular-universal?
        0
        динамическая реализация на базе node — это и есть по сути изоморфное приложение, если я правильно понял о чем вы пишите, а предзагрузка данных на стороне сервера осуществляется с помощью TransferState и TransferHttpCacheModule — точнее синхронизация между сервером и клиентом, чтобы не делать запрос повторно. Как пример: ssr.angular.su/back — ожидает выполнение запроса на получение данных с установленной паузой в 3 секунды.
          0
          Изоморфное приложение — это приложение, которое использует на сервере и клиенте один и тот же код. С точки зрения серверного рендеринга universal — это изоморфное приложение. С точки зрения полноценной бизнес сущности — зависит на чем у Вас `backend`.
          0
          на некоторых хостингах пререндеринг включается чекбоксом в настройках)
          www.netlify.com/docs/prerendering
            0
            там есть тонкости, особенно для сложных проектов.
              0
              верю. сейчас как раз тестирую как будет гуглобот текст парсить
              пока никак(

          Only users with full accounts can post comments. Log in, please.