fbpx
Контакты
Соц. сети
Находим бизнесам
клиентов в интернете
+38 (099) 788-89-64

Звонок бесплатный

Angular и SEO: как их настроить

user logo
5 мин. чтения
71

Разработчики систем Google и Яндекс неоднократно заявляли, что поисковые роботы поддерживают парсинг SPA-проектов. Но по факту существующие механизмы отличаются незначительным количеством ресурсов и возможностей. Т. е. вы, надеясь на качественную индексацию, часто не получаете желаемого.

Поисковые боты при изучении проектов могут и вовсе не дождаться ответа от определенных скриптов, в результате чего могут пострадать позиции в органике. Во избежание проблем вам необходимо принимать меры, в чем поможет правильная настройка фреймворка Angular Search Engine Optimization.

Об этом я сегодня и расскажу.

Что такое Angular

Angular – это JS-фреймворк с открытым исходным кодом для сборки клиентских приложений. Разработку анонсировали в 2010 г. инженеры компании Google.

Основной задачей Angular считается создание SPA-проектов (Single Page Application) и приложений с единственной страницей в пределах браузера. Ключевой параметр – использование в роли основного языка программирования TypeScript. Однако написание приложений возможно и на Dart, JavaScript. Независимо от варианта, Оптимизация Angular под Search Engine улучшает взаимодействие пользователей и разработчиков с определенным ресурсом.

Слова разработчиков Google:

«Времена поменялись. Не рекомендуем запрещать сегодня сканирование Googlebot файлов JavaScript либо CSS. Мы отображаем и понимаем веб-страницы, как и браузеры».

Поддержка Angular поисковыми системами

Но если обратиться к информации самой компании Google, то с 2018 года я не наблюдаю ничего оптимистичного, поскольку не имеется тематических исследований, документации. Также нет конкретных сведений, каким способом Google выполняет сканирование и индексацию разных фреймворков.

Prerender – работа и для чего это подходит

Prerender представляет собой решение, позволяющее поисковым роботам видеть определенный ресурс в таком виде, каким сайт предстает перед вами при открытии в любом браузере.

Он подходит в следующих случаях:

  1. для статичных страниц;
  2. при постоянных, практически неизменяемых (либо меняющихся медленно) сведениях;
  3. для создания страниц при длительном получении данных от сервера.

Prerender не подходит при таких ситуациях:

  • достоверность информации важна, однако данные быстро изменяются;
  • объем сведений не дает возможности построить верную статистику.

«Кроме того, к последнему пункту добавлю, что не подходит Prerender и при слишком длительном процессе построения статистики».

Особенности реализации Universal

Чтобы решить проблему c индексацией, Angular Universal под SEO осуществляет рендеринг на серверной стороне. Т. е. конкретная страница создается на «бекенд-сервере», который написан на Node.Js, .NET либо др. В результате пользовательский браузер получит страницу с обычными характеристиками и наличием на ней привычных элементов:

  1. Подзаголовков.
  2. Мета-тегов.
  3. Контента.

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

Рендеринг на Universal для SEO

Несмотря на реализацию Universal на базе .Net Core, использовать нежелательно, т. к.:

  1. В любом случае применяется рендеринг через NodeJS.
  2. Слишком медленная работа.
  3. Мало примеров использования.

Кстати, для DOM на сервере применяется domino на базе Mozilla’s dom.js. Это позволяет исключать многие ошибки.

Как проработать SEO в Angular

Проверить отображение ваших страниц Google ботом

При использовании Angular, в SEO никаких сложностей для проверки отображения страниц проекта ботом не возникает. Для этого вам нужно перейти в Google Search Console, выбрать проект и запустить «Проверка URL» на странице, выбранных для индексации. Консоль покажет информацию о возможности либо невозможности получения доступа поисковыми механизмами.

Проверка страницы в Google Search Console

Подобный подход поможет понять, каким из областей вы должны уделить внимание в работе по SEO.

Предварительный рендеринг

В данном случае нет ничего сложного. Объясню: отображение JavaScript происходит в вашем браузере, сохраняется статический HTML и возвращается боту. Подобное решение идеально сочетается с простыми приложениями, которые никак не зависят от сервера. Это дает отличный результат в SEO при этом прост в настройке.

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

Rendering на стороне сервера

Здесь будет применяться SSR с использованием Angular Universal.

Рендеринг на стороне сервера

Т. е., если говорить по-простому, Angular Universal выполняется на серверной стороне, генерирует статические страницы и запускает их в браузере, поэтому при осуществлении запроса контент отобразится в DOM для посетителя.

DOM – это объектная модель документа, которую браузер создаёт в памяти компьютера на основании HTML-кода, полученного им от сервера.

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

Оптимизация самого Ангуляра

Для оптимизации ресурсов на Angular под SEO придерживайтесь следующей инструкции:

  • Предварительно составьте перечень страниц на вашем ресурсе и сделайте sitemap.xml. Пристальное внимание вам нужно уделить наиболее важным подразделам проекта, требующих быстрой индексации (для них нужно установить высокий <priority>. И да конечно, Google заявляет что не учитывает приоритеты, но на больших ресурсах в первую очередь индексируются страницы с высоким <priority>. Совпадение? Не думаю 😃.
  • Установите Prerender (положительно повлияет на SEO-параметры сайта, в т. ч. скорость загрузки, индексирование).
  • Используйте Google Search Console для проверки индексации страниц.
Проверка URL в Google Search Console
  • Сделайте верную настройку отслеживания аналитики. Например, тот же Google Analytics часто плохо справляется со своими обязанностями при просмотре SPA-ресурсов. Я рекомендую использовать и запускать Angulartics.
  • Также проводите регулярное сканирование проекта SEO-краулерами: ScreamingFrog, JetOctopus и т.п. Они покажут незамеченные ошибки.

Выводы

Как вы могли убедиться сами, SPA-проекты можно продвигать в поисковых системах, хотя задача и сложная. Например:

  • при помощи Ангуляр, для SEO осуществляете рендеринг на стороне сервера (а такой подход позволяет избежать проблем с некачественной индексацией);
  • функция «Prendering» способствует ускорению времени рендеринга, что в результате увеличивает скорость загрузки контента ресурса.

Я и команда Solarweb считаем, что Angular Universal дает возможность создать удобный для посетителя проект, причем беспокоиться, как его воспримет поисковая система, не нужно.

Комментариев [ 0 ]Оставить свой комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *