Angular и SEO: как их настроить
Разработчики системы 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. Мы отображаем и понимаем веб-страницы, как и браузеры».
Но если обратиться к информации самой компании Google, то с 2018 года я не наблюдаю ничего оптимистичного, поскольку не имеется тематических исследований, документации. Также нет конкретных сведений, каким способом Google выполняет сканирование и индексацию разных фреймворков.
Prerender – работа и для чего это подходит
Prerender представляет собой решение, позволяющее поисковым роботам видеть определенный ресурс в таком виде, каким сайт предстает перед вами при открытии в любом браузере.
Он подходит в следующих случаях:
- для статичных страниц;
- при постоянных, практически неизменяемых (либо меняющихся медленно) сведениях;
- для создания страниц при длительном получении данных от сервера.
Prerender не подходит при таких ситуациях:
- достоверность информации важна, однако данные быстро изменяются;
- объем сведений не дает возможности построить верную статистику.
«Кроме того, к последнему пункту добавлю, что не подходит Prerender и при слишком длительном процессе построения статистики».
Особенности реализации Universal
Чтобы решить проблему c индексацией, Angular Universal под SEO осуществляет рендеринг на серверной стороне. Т. е. конкретная страница создается на «бекенд-сервере», который написан на Node.Js, .NET либо др. В результате пользовательский браузер получит страницу с обычными характеристиками и наличием на ней привычных элементов:
- Подзаголовков.
- Мета-тегов.
- Контента.
Такой подход считается идеальным, поскольку поисковые краулеры отличаются хорошей подготовленностью к индексации статических страниц. Для SEO в Google, Angular можно разрабатывать привычное приложение, а Universal позаботится о рендеринге на сервере.
Несмотря на реализацию Universal на базе .Net Core, использовать нежелательно, т. к.:
- В любом случае применяется рендеринг через NodeJS.
- Слишком медленная работа.
- Мало примеров использования.
Кстати, для DOM на сервере применяется domino на базе Mozilla’s dom.js. Это позволяет исключать многие ошибки.
Как проработать SEO в Angular
Проверить отображение ваших страниц Google ботом
При использовании Angular, в SEO никаких сложностей для проверки отображения страниц проекта ботом не возникает. Для этого вам нужно перейти в Google Search Console, выбрать проект и запустить «Проверка URL» на странице, выбранных для индексации. Консоль покажет информацию о возможности либо невозможности получения доступа поисковыми механизмами.
Подобный подход поможет понять, каким из областей вы должны уделить внимание в работе по 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 для проверки индексации страниц.
- Сделайте верную настройку отслеживания аналитики. Например, тот же Google Analytics часто плохо справляется со своими обязанностями при просмотре SPA-ресурсов. Я рекомендую использовать и запускать Angulartics.
- Также проводите регулярное сканирование проекта SEO-краулерами: ScreamingFrog, JetOctopus и т.п. Они покажут незамеченные ошибки.
Выводы
Как вы могли убедиться сами, SPA-проекты можно продвигать в поисковых системах, хотя задача и сложная. Например:
- при помощи Ангуляр, для SEO осуществляете рендеринг на стороне сервера (а такой подход позволяет избежать проблем с некачественной индексацией);
- функция «Prendering» способствует ускорению времени рендеринга, что в результате увеличивает скорость загрузки контента ресурса.
Я и команда Solarweb считаем, что Angular Universal дает возможность создать удобный для посетителя проект, причем беспокоиться, как его воспримет поисковая система, не нужно.