Angular и SEO - создание одностраничных веб-приложений Angular 6 для поисковых систем
Это сообщение было впервые опубликовано на CodingTheSmartWay.com.
Angular отлично подходит для создания мощных одностраничных веб-приложений. Однако, как и у всех одностраничных веб-приложений, у SEO есть один недостаток (поисковая оптимизация). Обычно SPA обрабатываются на стороне клиента, и поэтому веб-сканеры поисковых систем не могут видеть полную структуру и содержимое веб-сайтов. При наличии этого ограничения невозможно правильно указать ваш веб-сайт в результатах поиска.
Если вам нравится CodingTheSmartWay, подумайте о поддержке нас через Patreon. С вашей помощью мы сможем чаще выпускать руководства для разработчиков. Большое спасибо! Станьте покровителем!
В следующем руководстве мы рассмотрим самый простой доступный подход, позволяющий избавиться от этого ограничения для вашего приложения Angular 6, используя рендеринг на стороне сервера с Angular Universal.
Для начала давайте сначала настроим новое приложение Angular, выполнив следующие шаги.
Настройка приложения Angular с помощью Angular CLI
Чтобы настроить новое приложение Angular, мы используем Angular CLI. Чтобы установить Angular CLI в вашей системе, используйте диспетчер пакетов Node.js в командной строке следующим образом:
$ npm install -g @angular/cli
После успешной установки Angular CLI можно использовать новую команду ng для настройки нового проекта Angular с нуля:
$ ng new ngseo --routing
С помощью параметра new мы говорим, что должен быть создан новый проект Angular, ngseo - это имя нового проекта, а с помощью параметра - routing мы следим за тем, чтобы в проект была добавлена базовая конфигурация маршрутизации.
После успешной настройки проекта мы можем переключиться во вновь созданную папку проекта:
$ cd ngseo
И запустите веб-сервер разработки, снова используя Angular CLI следующим образом:
$ ng serve -o
Теперь вы должны увидеть в браузере следующий результат:
Как сканеры видят одностраничные веб-приложения
Теперь, когда у нас есть работающее приложение Angular, давайте посмотрим, как сканеры поисковых систем видят наш веб-сайт. Мы производим хорошее впечатление, когда используем инструмент командной строки curl для доступа к нашему сайту:
$ curl localhost:4200
Возвращаемый результат должен выглядеть примерно так:
Здесь вы можете видеть, что основное содержимое веб-сайта не является частью этого HTML-документа. Вместо этого вы найдете элемент-заполнитель ‹app-root› внутри основного раздела. Это очень похоже на то, что Angular вставляет содержимое веб-сайта при выполнении кода JavaScript стороны. Однако сканер не может увидеть это содержимое, потому что код JavaScript не выполняется.
Angular Universal для рендеринга на стороне сервера
Так что же может быть решением этой проблемы? Да, это рендеринг на стороне сервера (SSR). Когда выполняется рендеринг на стороне сервера, код JavaScript приложения Angular уже выполняется на сервере, и полная структура HTML и контент также будут доступны для веб-сканеров.
Технология, обеспечивающая рендеринг на стороне сервера для приложений Angular, называется Angular Universal. Angular Universal генерирует статические страницы приложений на сервере с помощью процесса, называемого рендерингом на стороне сервера.
Подробное описание того, как использовать Angular Universal, доступно по адресу https://angular.io/guide/universal. Однако есть другой подход, который упрощает добавление Angular Universal: использование пакета @ ng-toolkit / universal.
Добавление Angular Universal с помощью @ ng-toolkit / universal, чтобы сделать ваше приложение Angular дружественным к поисковой системе
Пакет @ ng-toolkit / universal добавляется в наш проект с помощью команды ng еще раз следующим образом:
$ ng add @ng-toolkit/universal
После добавления пакета откройте package.json и убедитесь, что пакет webpack-cli указан в разделе зависимостей как минимум с версией 3.1:
"webpack-cli": "^3.1.0"
Если это не так, измените эту запись соответствующим образом и выполните следующую команду:
$ npm install
Затем вместо ng serve -o вы запускаете:
$ npm run build:prod
а также
$ npm run server
Сервер запущен на localhost: 8080, и если вы открываете этот URL-адрес в браузере, вы снова сможете увидеть веб-сайт приложения angular по умолчанию.
Попробуем снова получить доступ к сайту через curl:
$ curl localhost:8080
Результат должен выглядеть так, как на следующем снимке экрана:
На этот раз включено полное содержание HTML-сайта. Причина в том, что сторона HTML была обработана как часть процесса сборки (на стороне сервера) и теперь доступна без необходимости выполнять код JavaScript на стороне клиента. Таким образом, сканер поисковой системы может находить содержимое на стороне и может убедиться, что оно правильно добавлено в результаты поиска.
Заключение
По умолчанию Angular использует рендеринг на стороне клиента, что является проблемой, когда ваш веб-сайт должен быть указан в результатах поиска. Решение состоит в том, чтобы отобразить приложение на стороне сервера и сгенерировать окончательные элементы HTML, которые сканеры поисковых систем могут легко интерпретировать.
Рендеринг на стороне сервера для приложений Angular может быть достигнут с помощью Angular Universal. Добавить Angular Universal в существующее приложение Angular очень просто с помощью пакета @ ng-toolkit / universal.
Это сообщение было впервые опубликовано на CodingTheSmartWay.com.
# 1 Angular 6 - Полное руководство
Осваивайте Angular (Angular 2+, включая Angular 6) и создавайте потрясающие, реактивные веб-приложения с преемником Angular.js
Go To Course…
Отказ от ответственности: это сообщение содержит партнерские ссылки. Это означает, что если вы нажмете на одну из ссылок на продукт, я получу небольшую комиссию. Это поможет поддержать этот блог!
