Автор: Джон Линкольн (John Lincoln), директор агентства интернет-маркетинга Ignite Visibility, преподаватель digital-маркетинга в Калифорнийском университете в Сан-Диего, США. Если вы используйте Angular в работе своего сайта, то когда дело доходит до SEO, вам приходится сталкиваться с дополнительными проблемами. К счастью, Angular Universal позволяет достаточно легко их решить. При этом стоит иметь в виду, что «легко» – это относительный термин в данном случае. Работа с Angular Universal требует определённых технических знаний и навыков. Вам почти наверняка придётся привлекать к этому процессу команду разработчиков. Но когда вы закончите работу, то ваш сайт будет предоставлять оптимизированные страницы, которые поисковые системы смогут легко находить и индексировать. В этом руководстве мы разберёмся, что представляет собой Angular Universal и почему о нём важно знать оптимизаторам. Проблемы с SEO Angular – это фантастический фрейморк для создания модульных, удобных для пользователей веб-приложений. Однако его использование влечёт за собой проблемы с SEO. Это связано с двумя причинами. Во-первых, для доставки контента Angular в значительной мере опирается на скрипты, в результате чего некоторые поисковые роботы «не видят» тот контент, который видят пользователи. В качестве примера взгляните на страницу с документацией по Angular Universal. Она отображается при помощи Angular. По мере прокрутки страницы вниз вы видите довольно много контента. И предполагаете, что весь он индексируется. Однако это не обязательно так. Кликните правой кнопкой мыши и выберите пункт «Просмотр кода страницы» в контекстном меню – вы увидите 100 строчек исходного кода. Но там не будет того контента, который вы видели, когда просматривали страницу в обычном режиме. Это, если вкратце, и есть проблема с Angular. Пользователи будут видеть контент, тогда как поисковые роботы – исходный код, в котором контента нет! Есть и ещё одна проблема с SEO: скорость. Приложения на Angular часто имеют низкую скорость загрузки. Некоторые сайты в течение нескольких секунд, пока не загрузится главная страница, будут отображать пустой экран. А это может привести к уходу пользователей, которые не готовы терпеть такого рода задержки. Кроме того, скорость загрузки является фактором ранжирования в мобильном поиске, поэтому позиции сайта могут пострадать, если он загружается слишком медленно на мобильных устройствах. Но Google говорит… Google утверждает, что его поисковые роботы могут индексировать управляемые скриптами сайты. Есть много фактов, подтверждающих эти заявления, но это не значит, что вы сможете избежать лишней работы при оптимизации Angular-сайта. Для начала, Google – это не единственная поисковая система в мире. Если вы хотите, чтобы ваше приложение на Angular ранжировалось в Bing или DuckDuckGo, то вам потребуется предпринять ряд шагов для того, чтобы это произошло. Далее, это может быть ситуация, когда Google может индексировать некоторые сайты на Angular, но не ваши. Не все Angular-приложения создаются одинаковыми. Ваше как раз может быть исключением для алгоритма Google. В нашем опыте сайты, которые переходили с HTML на Angular в большинстве случаев теряли огромное количество трафика из поисковых систем, который затем приходилось восстанавливать. Возможные решения К счастью, есть способы сделать ваш сайт на Angular более дружественным к SEO. Один из популярных вариантов решения этой проблемы - динамический рендеринг. Это когда вы используете такой инструмент, как Puppeteer, чтобы сгенерировать HTML-файлы, которые будет легче потреблять веб-краулерам. Затем вам потребуется настроить свой сервер таким образом, чтобы поисковые роботы направлялись на предварительно обработанные страницы, а пользователи просматривали Angular-приложение в обычном режиме. Это достойное решение, но оно по-прежнему не решает проблему скорости. Для этого вы, возможно, захотите использовать Angular Universal. Что такое Angular Universal? Angular Universal - это модуль Angular, который запускает ваше приложение на сервере, а не в браузере. И это важное различие. Обычно приложения на базе Angular являются клиентскими. Для поисковых роботов проблема состоит в том, что они не всегда «обрабатывают» код на стороне клиента, как это делают браузеры, когда предоставляют пользователю веб-страницу. Вот почему вы видели несоответствие между контентом страницы с документацией по Angular Universal и её исходным кодом. Angular Universal управляет рендерингом на стороне сервера (SSR). Он обрабатывает содержимое HTML и CSS, показываемое пользователю, заранее – до того, как он его увидит. Это означает, что пользователь будет загружать статическую HTML-страницу вместо выполнения кода на стороне клиента. В результате страница будет загружаться быстрее. Кроме того, поскольку это статический HTML, поисковые роботы смогут индексировать контент. В итоге выиграют все. Почему это важно Если вы работаете в сфере интернет-маркетинга, то прекрасно знаете, что борьба в этом пространстве ведётся, по большей части, за представленность в интернете. Вот почему вы привлекаете инфлюенсеров, публикуете обновления в социальных медиа и оптимизируете свой сайт для поисковых систем. Проще говоря: ваш сайт не будет ранжироваться, если он не может быть проиндексирован. Если ваш сайт работает на базе Angular, то вам нужно предпринять дополнительные шаги, чтобы его содержимое появлялось в поисковых системах. Вот почему нам нужен Angular Universal. Недостатком, конечно, является тот факт, что его внедрение будет стоить денег. Для выполнения этой задачи потребуется нанять квалифицированных программистов, чтобы они добавили SSR на сайт. Однако это те расходы, которые со временем окупятся, если ваш сайт будет хорошо ранжироваться по ключевым словам, связанным с вашей нишей. Как внедрить Angular Universal Если вы относитесь к той категории людей, которые хотят всё делать сами, или просто хотите сэкономить на разработке, то вы можете создать server-side приложение самостоятельно. Прежде, чем заняться этим, нужно получить хотя бы базовые знания об Angular, работе с интерфейсом командной строки (CLI), TypeSrcipt и веб-серверах. В противном случае, вы рискуете не справиться. Чтобы внедрить Angular Universal, нужно выполнить следующие шаги: - Инсталлируйте зависимости;
- Обновите приложение Angular;
- Используйте CLI для создания пакета Universal;
- Настройте сервер для запуска пакета Universal;
- Запустите приложение на сервере.
Рассмотрим каждый из этих шагов подробнее. 1. Инсталлируйте зависимости Если у вас имеется опыт работы с Angular, то вы уже знаете о Node.js. Это среда выполнения, которая компилирует код TypeScript в приложение JavaScript. Node.js поставляется с менеджером пакетов, называемым Node Package Manager или, если коротко, npm. Вы будете использовать его для инсталляции зависимостей. Откройте командную строку и выполните следующий код: npm install –save @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader Дайте ему несколько (или много) минут, чтобы всё установить. 2. Обновите Angular-приложение Далее вам нужно будет подготовить своё приложение Angular к внедрению Universal. Этот процесс будет включать четыре шага: - Добавьте поддержку Universal. Откройте корневой модуль (обычно AppModule) и добавьте идентификатор приложения в импорт BrowserModule. Вы сможете сделать это в разделе «Imports» чуть ниже @NgModule.
- Создайте корневой модуль сервера. Далее вам нужно будет создать новый модуль с именем AppServerModule. Убедитесь, что он импортирует ServerModule из зависимости платформа-сервер, которую вы добавили на предыдущем шаге.
- Создайте основной файл. Вам понадобится основной файл для вашего пакета Universal. Создайте его в корне (в папке src) и экспортируйте класс AppServerModule из этого файла.
- Создайте файл конфигурации. Класс AppServerModule нуждается в файле конфигурации. Создайте его в формате JSON. Это должно выглядеть примерно так:
3. Создайте новую цель сборки Ваш исходный каталог Angular должен включать файл с именем angular.json. Вам необходимо обновить этот файл в разделе «architect». Это будет выглядеть примерно так: "architect": { "build": { … } "server": { "builder": "@angular-devkit/build-angular:server", "options": { "outputPath": "dist/my-project-server", "main": "src/main.server.ts", "tsConfig": "src/tsconfig.server.json" } } } Обратите внимание на атрибут «builder», который находится на четвёртой строчке. Значение после двоеточия («server») – это имя сервера. Вы можете изменить его, если захотите назвать его по-другому. Теперь вы можете создать своё приложение. Если вы сохранили сервер с именем «server», то просто перейдите в командную строку и введите следующее: ng run my-project:server В результате вы увидите примерно следующее: Date: 2018-12-12T12:42:09.601Z Hash: 1caced0e9434007fd7ac Time: 4122ms chunk {0} main.js (main) 9.49 kB [entry] [rendered] chunk {1} styles.css (styles) 0 bytes [entry] [rendered] 4. Настройте сервер На этом этапе вам нужно настроить сервер Universal для запуска пакета. Это то, как вы будете сериализовывать приложение и возвращать его в браузер. Для этого создайте новый файл с именем server.ts. В этом файле вы определите свой движок приложения. Детали этого кода немного выходят за рамки данного руководства, но вы всегда можете заглянуть в примеры в документации по Angular Universal. 5. Запустите приложение на сервере Теперь вы можете, наконец, запустить приложение на сервере. Для этого настройте веб-пакет, который обрабатывает файл server.ts, созданный на предыдущем шаге. Назовите файл конфигурации webpack.server.config.js. Ещё раз просмотрите документацию по Angular Universal, чтобы определить точный вид кода в файле. Возможно, вам придётся адаптировать этот код к вашему собственному соглашению об именах. Когда вы закончите работу с файлом, в папке dist у вас будет две папки: браузер и сервер. Чтобы выполнить серверный код, просто введите в командной строке следующее: node dist/server.js Вместо заключения Хотя Angular позволяет разработчикам быстро создавать высококачественные приложения, он не всегда работает хорошо с точки зрения поисковых роботов и SEO. К счастью, Angular Universal способен предварительно рендерить страницы Angular-приложения и выдавать статичный HTML, что позволяет краулерам находить их и индексировать, а также ускоряет загрузку. Мы всегда рекомендуем своим клиентам иметь базу в HTML-формате, а Angular использовать для показа других элементов на странице. Мы советуем придерживаться такого подхода для всего, что связано с JavaScript, ещё с 2010 года. Что касается Angular Universal, то это решение работает по тому же принципу. Будьте осторожны, внедряя изменения в свои ресурсы – особенно что касается JavaScript и Angular. А перед запуском всегда отдавайте сайт на проверку надёжной SEO-компании. | 
Комментариев нет:
Отправить комментарий