SEO в Angular без рендеринга на стороне сервера

SEO в Angular без рендеринга на стороне сервера

От автора: знаете ли вы, что Google Search поддерживает сканирование JavaScript с мая 2019 года? Это означает, что рендеринг на стороне сервера больше не единственный способ улучшить SEO.

Введение: Angular и SEO

Классическая проблема одностраничных приложений и поисковых систем

Одностраничные приложения (SPA) имеют только одну главную страницу, index.html, которая получает обновления DOM с помощью JavaScript.

До недавнего времени у поисковых систем были проблемы с запуском таких приложений. У всех современных JavaScript-фреймворков был серьезный недостаток с точки зрения SEO.

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

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

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

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

Текущее состояние поиска Google

Google Dev Summit 2020 дал разработчикам много полезных советов. Я нашел вдохновение для этой статьи в этом видео, где адвокат разработчиков Google Мартин Сплитт проливает свет на эту тему. В итоге:

Может ли Google обнаруживать изменения в приложениях Javascript?

Разработчикам основных javascript-фреймворков, таких как Angular, React или Vue, не стоит беспокоиться. С мая 2019 года Google Search поддерживает Javascript.

Полезны ли заголовок и мета-описание для SEO?

… Они могут косвенно повлиять на SEO через показатель кликабельности

Руководство по внедрению

Встроенные инструменты Angular: DOCUMENT, Meta & Title

Мы можем получить доступ к DOCUMENT для редактирования его Title и Meta с помощью инструментов, предоставленных в @angular/common и @angular/platform-browser.

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

Пример использования: статические метаданные

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

Поскольку эти свойства связаны с определенным маршрутом, мы будем использовать Router для отправки информации компоненту. Angular Routes позволяет отправлять любые статические данные, используя данные свойства.

Добавление метаданных к существующему маршруту

SEO в Angular без рендеринга на стороне сервера

Чтобы все было понятно, создайте один файл для хранения всех статических метаданных вашего сайта

После определения некоторого мета статического раздела мы добавляем его в маршрутизатор.

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

Затем мы можем обновить мета, когда компоненты инициализируются:

Пример использования: метаданные динамического содержимого

Но… что происходит, когда метаданные поступают из элемента внутри HttpResponse? Когда дело доходит до динамического контента, следует учитывать две вещи: навигацию по параметрам и асинхронные данные.

Динамический контент в навигации по параметрам

Когда мы переходим от одной статьи к другой, используя маршрут с такими параметрами, как articles/:id, компонент не создается повторно. Он просто обновляет и повторно отображает контент.

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

Использование резолвера для предварительной выборки асинхронных данных

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

Это можно сделать с помощью Angular resolver. Мы делаем HTTP-запрос и ждем ответа, прежде чем запускать навигацию.

Добавление резольвера в маршрутизатор

Обновление компонента

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

Как всегда, спасибо за внимание.

Автор: Fer Ayguavives

Источник: medium.com

Редакция: Команда webformyself.

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

ReactJS: основы

Изучите основы ReactJS и создайте ваше первое приложение на ReactJS

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.