Angular Universal: что нужно знать для SEO

Изучите пять шагов, чтобы Angular хорошо играл с поисковыми роботами и проиндексировал ваш сайт.

Если вы используете Angular для поддержки своего веб-сайта, вам придется преодолеть дополнительные препятствия, когда речь заходит о SEO. К счастью, Angular Universal позволяет легко перепрыгнуть через него.

Имейте в виду, что «легкий» здесь относительный термин. Там довольно много технического волшебства.

Вам почти наверняка понадобится задействовать команду разработчиков.

Но как только готовый продукт будет доставлен, ваш сайт будет обслуживать оптимизированные страницы, которые поисковые системы смогут легко найти и проиндексировать.

В этом руководстве я объясню Angular Universal и почему это важно для маркетологов.

Проблема SEO

Angular — это фантастическая платформа для создания модульных, удобных для пользователя веб-приложений. К сожалению, это немного враждебно по отношению к SEO.

Это по двум причинам.

Во-первых, Angular в значительной степени опирается на сценарии для доставки контента. В результате некоторые поисковые роботы не «видят» контент, который видит пользователь.

Взгляните на документацию Angular Universal . Неудивительно, что эта страница отображается с помощью Angular.

Когда вы прокрутите вниз, вы увидите довольно много контента. Вы думаете, что все это индексируется.

Не обязательно. Щелкните правой кнопкой мыши на странице и выберите «View source source» в появившемся контекстном меню.

Есть только 100 строк исходного кода. Нигде там вы не увидите контент, который вы видели при обычном просмотре страницы.

Это, в двух словах, проблема с Angular. Посетители увидят контент, а поисковые роботы увидят источник .

И источник не имеет содержания!

Есть еще одна проблема SEO: скорость. Угловые приложения часто не загружаются быстро.

Некоторые сайты будут отображать пустой экран в течение нескольких секунд перед отображением домашней страницы. Это может привести к тому, что посетители будут освобождены под залог, поскольку они становятся нетерпеливыми.

Скорость сайта является фактором ранжирования для мобильных устройств, поэтому ваш рейтинг будет иметь удар, если ваш сайт не загружается быстро на мобильных платформах.

Но Google говорит …

Google утверждает, что его бот может индексировать сайты, управляемые сценариями. Есть много доказательств, подтверждающих это, но это не значит, что вы можете избежать лишних усилий при оптимизации сайта Angular.

Для начала, Google не единственная поисковая система в городе. Если вы хотите, чтобы ваше приложение Angular занимало Bing и DuckDuckGo, вам нужно предпринять шаги, чтобы это произошло.

Далее, это может быть случай, когда Google может индексироватьнекоторые сайты Angular, но не ваши. Не все приложения Angular созданы равными. Ваш может быть исключением из алгоритма индексации Google.

По моему опыту, сайты, которые переходят с HTML на Angular, большую часть времени теряют огромный трафик с поисковых систем. На самом деле, за последний год у меня было три клиента, которым пришлось восстанавливать сайт после падений из-за Angular.

Есть решения

К счастью, есть способы сделать ваш сайт на Angular SEO дружественным.

Одним из наиболее популярных вариантов является использование динамического рендеринга . Именно тогда вы используете такой инструмент, как Puppeteer, для генерации статических файлов HTML, которые веб-сканеры могут более легко использовать.

Затем настройте свой веб-сервер так, чтобы поисковые роботы направлялись на предварительно отрендеренные страницы, пока посетители переходят по обычному приложению Angular.

Это достойное решение, но оно все еще не решает проблему скорости.Для этого вы, вероятно, захотите использовать Angular Universal.

Что такое Angular Universal?

Angular Universal запускает ваше веб-приложение на сервере, а не в браузере.

Это важное различие. Обычно приложения Angular являются клиентскими приложениями.

Проблема для поисковых роботов заключается в том, что они не всегда «обрабатывают» код на стороне клиента, как ваш браузер, когда он обслуживает вас веб-страницу. Вот почему вы увидели несоответствие между страницей документации Angular Universal и ее исходным кодом.

Angular Universal управляет рендерингом на стороне сервера (SSR). Он предварительно отображает содержимое HTML и CSS, показанное пользователю заранее.

Это означает, что пользователь будет загружать статическую HTML-страницу вместо клиентского кода. В результате страница будет загружаться быстрее.

Кроме того, поскольку это статический HTML, поисковые роботы могут индексировать контент.

Все побеждают.

Почему это важно

Если вы увлекаетесь цифровым маркетингом, то вы уже знаете, что большая часть битвы связана с получением информации в Интернете.Вот почему вы обращаетесь к влиятельным лицам, публикуете обновления в социальных сетях и оптимизируете свой сайт для хорошего рейтинга.

Проще говоря: ваш сайт не может получить рейтинг, если он не может быть проиндексирован. Если Angular работает на вашем сайте, вам нужно предпринять дополнительные шаги, чтобы убедиться, что его содержание появляется в поисковых системах.

Вот почему вам нужно угловое универсальное решение.

Недостатком, конечно, является то, что это будет стоить денег. Вам нужно будет нанять квалифицированную команду разработчиков, чтобы добавить SSR на ваш сайт.

Это расходы, которые должны со временем окупиться, если ваш сайт занимает хорошие позиции по ключевым словам поиска, связанным с вашей нишей.

Как запустить приложение Angular на Angular Universal

Если вы любите запачкать свои руки кодом или просто хотите сэкономить на разработке, вы можете развернуть приложение на стороне сервера самостоятельно.

Прежде чем сделать это, лучше всего иметь базовые знания об Angular, интерфейсе командной строки (CLI), TypeScript и веб-серверах. В противном случае вы, вероятно, будете бороться.

Шаги по развертыванию приложения Angular Universal следующие:

  • Установите необходимые зависимости
  • Обновите приложение Angular
  • Используйте CLI для создания универсального пакета
  • Настройте сервер для запуска универсального пакета
  • Запустите приложение на сервере

В этих пяти шагах происходит довольно многое, поэтому я расскажу о каждом из них по очереди в следующих разделах.

Установите зависимости

Если у вас есть опыт работы с Угловым, то вы уже знаете о Node.js . Это среда выполнения, которая переносит код TypeScript в приложение JavaScript.

Node.js поставляется с менеджером пакетов, невообразимо называемым Node Package Manager, или сокращенно npm. Вы будете использовать это для установки зависимостей.

Запустите окно командной строки и запустите следующий код:

npm install –save @ angular / platform-server @ nguniversal / module- map- ngfactory -loader ts-loader

Дайте ему несколько минут (или много моментов), чтобы все установить.

Обновите ваше угловое приложение

Далее вам необходимо подготовить приложение Angular для универсального развертывания. Это включает в себя четыре шага:

  • Добавить универсальную поддержку . Откройте свой корневой модуль (обычно AppModule) и добавьте идентификатор приложения в импорт BrowserModule. Вы сделаете это в разделе «импорт» чуть ниже объявления @NgModule.
  • Создайте корневой модуль сервера. Далее необходимо создать новый модуль с именем AppServerModule. Убедитесь, что он импортирует ServerModule из зависимости платформа-сервер, которую вы добавили на предыдущем шаге.
  • Создайте основной файл . Вам понадобится основной файл для вашего универсального пакета. Создайте его в корне (в папке src) и экспортируйте класс AppServerModule из этого файла.
  • Создайте файл конфигурации . Класс AppServerModule нуждается в файле конфигурации. Создайте его в формате JSON. Это должно выглядеть примерно так:

Создать новую цель сборки

Ваш исходный каталог Angular должен включать файл с именем angular.json. Вам нужно будет обновить этот файл в разделе «архитектор».

Это будет выглядеть примерно так:

«Architect»: { 
 «build»: {…} 
 «server»: { 
   «builder»: «@ angular-devkit / build-angular: server», 
   «options»: { 
     «outputPath»: «dist / my-project-» сервер », 
     « основной »:« src / main.server.ts », 
     « tsConfig »:« src / tsconfig.server.json » 
   } 
 } 
}

Обратите внимание на атрибут «строитель» на четыре строки вниз.Значение после двоеточия («сервер») — это имя сервера. Вы можете обновить его, если хотите назвать его как-нибудь еще.

Теперь вы можете создать свое приложение. Предполагая, что вы сохранили сервер с именем «server», просто перейдите в командную строку и введите следующее:

Запустите my-project: server

Вы должны увидеть вывод, который выглядит примерно так:

Дата: 2018-12-12T12: 42: 09.601Z 
Хеш: 1caced0e9434007fd7ac 
Время: 4122 мс 
чанк {0} main.js (основной) 9,49 кБ [запись] [рендеринг] 
чанк {1} styles.css (стили) 0 байт [запись ] [предоставлено]

Настройте сервер

Далее необходимо настроить универсальный сервер для запуска пакета. Вот как вы будете сериализовывать приложение и возвращать его в браузер.

Чтобы это произошло, создайте новый файл с именем server.ts. В этом файле вы определите свой движок приложения.

Детали этого кода немного выходят за рамки этого руководства. Не стесняйтесь взглянуть на пример в Angular Universal docs .

Запустите приложение на сервере

После всего этого вы, наконец, достигли точки, когда вы можете запустить приложение на сервере.

Для этого настройте веб-пакет, который обрабатывает файл server.ts, созданный на предыдущем шаге.

Назовите файл конфигурации webpack.server.config.js. Еще раз, проверьте документы Angular Universal для точного вида кода, который принадлежит в файле. Возможно, вам придется адаптировать этот код к вашему собственному соглашению об именах.

Как только вы закончите работу с файлом, у вас будет две папки в папке dist: браузер и сервер.

Чтобы запустить код сервера, просто введите в командной строке следующее:

узел dist / server.js

Поздравляем! Теперь вы используете серверный код.

Завершение

Хотя Angular позволяет разработчикам быстро создавать высококачественные приложения, он не всегда хорошо сочетается с роботами поисковых систем.

К счастью, Angular Universal может предварительно визуализировать страницы приложения Angular в виде статического HTML, чтобы их можно было обнаружить и проиндексировать. Они также будут загружаться быстрее.

Я всегда рекомендовал иметь базу HTML и использовать Angular для доставки других элементов на странице. Я делаю эту рекомендацию относительно всего, что связано с JavaScript с 2010 года. Этот процесс в Angular Universal является тем же принципом. Я не могу сказать, что у вас есть много сайтов Разрушенные редукции Angular и JavaScript.Будьте осторожны с вашим и всегда проверяйте его SEO компанией перед запуском.