Включена универсальная живая демонстрация
Сканирование и рендеринг JavaScript в Google все еще остается неясной проблемой.
Противоречивые утверждения и эксперименты можно найти повсюду в сети.
Так что это значит?
Как разработчику вам НЕОБХОДИМО оптимизировать сайты, созданные с помощью популярных JS-фреймворков для SEO.
Имея это в виду, вот третья часть нашей продолжающейся серии статей о SEO для JavaScript Framework.
В этом руководстве мы создадим серверный SPA для электронной коммерции Angular с использованием Universal.
Вот шаги, которые мы будем использовать для этого:
- Настройка Angular проекта.
- Создание компонентов Angular.
- Включение функции электронной коммерции в нашем SPA.
- Использование Universal, чтобы сделать наше приложение Angular оптимизированным для SEO
Это должно быть весело!
Зачем беспокоиться об Angular SEO? Angular не поддерживается Google?
Angular - это JS-фреймворк с открытым исходным кодом, разработанный инженерами Google в 2010 году.
Замечательно заполнить ваш безголовый стек или любой JAM-стек в этом отношении. Но он по-прежнему имеет общие проблемы SEO, известные фреймворкам JavaScript.
Одностраничные приложения JS добавляют контент на страницы динамически с помощью JavaScript. Это не оптимально для SEO: поисковые роботы, скорее всего, не будут запускать JS-код, поэтому не обнаружат фактическое содержание страницы.
По состоянию на 2018 год ходят слухи, что Google может сканировать и отображать страницы, заполненные JavaScript, таким образом, читая их, как это делают современные браузеры. Хотя сами по себе цитаты гиганта не столь оптимистичны:
"Времена изменились. Сегодня, если вы не запрещаете роботу Googlebot сканировать ваши файлы JavaScript или CSS, мы, как правило, можем обрабатывать и понимать ваши веб-страницы, как современные браузеры ».
"Иногда во время рендеринга что-то идет не так, что может отрицательно сказаться на результатах поиска по вашему сайту".
«Иногда JavaScript может быть слишком сложным или непонятным для выполнения, и в этом случае мы не можем полностью и точно отобразить страницу».
В то время как Google изо всех сил пытается обработать ваш JS, он ВСЕГДА превосходит все другие поисковые или социальные сканеры (Facebook, Twitter, LinkedIn). Таким образом, оптимизация рендеринга вашего приложения принесет пользу и вашим действиям на этих каналах!
Слишком много неиндексированного содержимого JavaScript, чтобы оставлять его на столе.
Как справиться с проблемами Angular SEO
Чтобы ваш веб-сайт на Angular занимал первое место в результатах поиска, вам нужно будет поработать.
→ Просмотреть как Google
Если у вас уже есть общедоступное приложение Angular, перейдите в Консоль поиска Google и запустите Fetch as Google на страницах, которые необходимо проиндексировать. Он расскажет, к чему роботы Google могут получить доступ, а что нет.
Это даст вам представление о том, в каких областях требуется работа по SEO.
Способы сделать это на самом деле не отличаются от того, что мы уже видели с Vue или React, но инструменты отличаются.
→ Предварительная обработка
Это довольно просто. JavaScript отображается в браузере; статический HTML сохраняется и возвращается сканерам. Это решение отлично подходит для простых приложений, которые не полагаются на какой-либо сервер. Его проще настроить, чем рендеринг на стороне сервера, тем не менее, с отличными результатами SEO.
Для предварительного рендеринга Angular я предлагаю заглянуть на Prerender.io.
→ Рендеринг на стороне сервера
Вот что я здесь сделаю.
Я воспользуюсь SSR с помощью Angular Universal.
Проще говоря, это запустит Angular на бэкэнде, так что при выполнении запроса контент будет отображаться в DOM для пользователя.
Хотя этот метод увеличивает нагрузку на сервер, он может улучшить производительность на более медленных устройствах / соединениях, поскольку первая страница будет загружаться быстрее, чем если бы клиенту приходилось отображать саму страницу.
Мы исследовали эти два метода в этом видеоуроке по Vue.js. Это содержимое также применимо к Angular!
Означает ли использование этих методов, что вы внезапно окажетесь на вершине поисковой выдачи? Ну, может быть. Скорее всего? Неа. Есть много других соображений по SEO: отличный мобильный UX, соединение HTTPS, карта сайта, отличный контент, обратные ссылки и т. Д. В заключении Этот пост перечисляет пару советов по SEO!
Техническое руководство: пример Angular SEO-дружественного SPA с Universal
Предварительные условия
- Базовое понимание одностраничных приложений (SPA)
- Базовые знания Машинопись [необязательно]
- Аккаунт Snipcart (навсегда бесплатно в тестовом режиме)
Настройка среды разработки
Установите Angular CLI глобально, используя следующую команду:
Я использую sass в своем проекте. Если вы решите сделать это, но он еще не установлен, что ж:
1. Настройка структуры проекта с помощью Angular CLI.
Создайте свой проект с помощью Angular CLI.
Заметили, как я добавил в команду аргумент стиля и маршрутизации?
Таким образом, routing и scss будут вставлены прямо в ваш проект, что намного проще, чем пытаться добавить их позже.
Как только это будет сделано, перейдите в каталог проекта и обслуживайте свой проект.
Теперь проект должен быть виден локально по адресу: http://localhost:4200/
2. Создание первого компонента Angular.
Как и многие современные интерфейсные библиотеки или фреймворки, Angular использует компонентную систему.
В Angular каждый компонент, кроме основного приложения, представляет собой каталог, расположенный в src/app/, содержащий три файла: файл TypeScript, файл стиля и файл HTML.
Поскольку эта демонстрация представляет собой простой магазин электронной коммерции, я буду использовать два компонента. Компонент products будет содержать список и ссылку на страницу каждого продукта. Компонент product отобразит всю подробную информацию о продукте.
Используйте встроенную команду Angular CLI для создания новых компонентов:
2.1 Мокинг списка товаров
Перед редактированием компонентов вам необходимо создать структуру данных для продуктов.
Создайте файл product.ts прямо в папке src/app/ и придайте ему все необходимые свойства.
Также создайте mocked-product.ts в том же месте. Этот файл импортирует класс Product и экспортирует массив Product.
Таким образом, вы сможете импортировать список продуктов в любой компонент.
3. Размещение продуктов приложения.
Хорошо, продукт успешно издевался! Теперь давайте разместим наши продукты на главной странице. Для этого откройте products.component.ts и добавьте:
Как видите, каждый компонент Angular импортирует класс Component из базовой библиотеки Angular. @Component({}) - это функция-декоратор, которая отмечает класс как компонент Angular и предоставляет большую часть его метаданных.
Значение пары ключей selector - это тег XML, который можно включать в шаблоны для визуализации этого компонента.
Сделайте это сейчас, удалив все, что сгенерировано в шаблоне основного приложения (app.component.html), и добавьте соответствующий тег:
Когда это будет сделано, если вы посетите веб-сайт, вас должны встретить:
Теперь давайте изменим файл products.component.html, чтобы перечислить продукты, используя директиву Angular Repeater *ngFor и ручки ({{ }}) для привязки данных из вашего класса к шаблону.
4. Добавление маршрутизации в приложение Angular.
Давайте превратим этот магазин в одностраничное приложение, используя встроенную маршрутизацию Angular.
Поскольку вы добавили аргумент --routing при создании проекта, вы можете перейти непосредственно к app-routing.module.ts и преобразовать его в следующий код:
Этот модуль импортирует компоненты products и product и создает массив маршрутов, связывающих каждый путь с компонентом.
Как видите, я добавил :id заполнитель, который можно будет извлечь в product компоненте для отображения нужного продукта.
Также важно инициализировать маршрутизатор, добавив RouterModule.forRoot(route) в импорт модуля.
Как только это будет сделано, вы можете заменить тег компонента в шаблоне приложения (app.component.html) на тег <router-outlet>:
Тег router-outlet отобразит представление для соответствующего пути, указанного в массиве routes. В этом случае корневой каталог будет отображать представление для компонента Products.
Теперь вы можете добавить routerLink='relativePath' вместо любого атрибута href='path' в тегах <a>. Например, вы можете обновить products.component.html файл примерно так:
Таким образом, каждый элемент в нашем списке отправит пользователя в представление с компонентом product.
5. Создание компонента product
Теперь давайте создадим компонент сведений о продукте. В его файле TypeScript product.component.ts добавьте следующий код:
Выше я импортировал ActivatedRoute и Location из Angular. Это позволит вам получить productId из URL-адреса и получить текущий путь прямо в конструкторе.
Мы также импортировали наш массив имитированных продуктов, получили текущий продукт, используя идентификатор из маршрута, используя find(), и снабдили URL префиксом источника запросов сервера.
Теперь давайте обновим шаблон компонента (product.component.html) для отображения необходимой информации и создадим кнопку покупки, совместимую с определением продукта Snipcart.
Обратите внимание, как я не использовал фигурные скобки для привязки данных в атрибутах HTML?
Для свойств можно использовать только фигурные скобки, но не атрибуты. Следовательно, вы должны использовать синтаксис привязки атрибутов Angular, как показано в приведенном выше коде.
6. Интеграция функций корзины покупок.
Теперь давайте интегрируем Snipcart, добавив необходимые скрипты с нашим ключом API в index.html файл, в котором размещено наше основное приложение.
Таким образом, он сможет взаимодействовать со всеми вашими представлениями.
В живой демонстрации я также отредактировал несколько шаблонов, чтобы облегчить стилизацию каждого компонента.
Я оставлю эту часть на ваше усмотрение, поскольку она не является основной целью руководства.
7. Использование Angular Universal для SEO
Наконец, давайте сделаем наше приложение оптимизированным для SEO с помощью SSR.
В этой демонстрации я буду использовать сервер Node.js Express. Имейте в виду, что Angular Universal можно добавить на любой сервер, если он может взаимодействовать с функцией Angular renderModuleFactory, но конфигурация, скорее всего, будет отличаться от той, что продемонстрирована в этом посте.
7.1 Установка Angular Universal
Для начала давайте добавим необходимые инструменты в вашу среду разработки:
7.2 Редактирование клиентского приложения
Теперь, когда у нас есть все необходимые инструменты, давайте отредактируем код на стороне клиента, чтобы разрешить переход между страницей, отображаемой на стороне сервера, и приложением на стороне клиента. В app.module.ts замените импорт BrowserModule в декораторе @NgModule() следующим кодом:
Поскольку приложение встроено в код на стороне сервера и код на стороне клиента, вам потребуется два пути вывода. Начнем с указания пути вывода для браузера. Для этого отредактируйте outputPath в angular.json.
7.3 Настройка сервера
Теперь, когда вы внесли необходимые изменения в клиент, давайте отредактируем код для сервера.
Создайте app.server.module.ts в каталоге src/app.
Создайте файл main.server.ts в каталоге src/, который экспортирует AppServerModule, который будет действовать как точка входа на ваш сервер.
Кроме того, создайте файл server.ts в корневом каталоге вашего приложения. Этот файл содержит код Экспресс-сервера. Он будет прослушивать входящий запрос, обслуживать запрошенный ресурс и отображать HTML-страницы, вызывая renderModuleFactory (завернутый ngExpressEngine).
Теперь, когда вы настроили сервер, вам нужно добавить и обновить файлы конфигурации. Создайте файл tsconfig.server.json в каталоге src.
Создайте файл webpack.server.config.js в корневом каталоге приложения с помощью следующего кода:
Теперь обновите конфигурацию Angular CLI и установите выходной путь сборки сервера, добавив следующий код в angular.json:
Наконец, добавьте команды сборки и обслуживания в раздел сценариев package.json.
Таким образом вы сможете сохранить ng serve для обычного рендеринга на стороне клиента и использовать npm run build:ssr && npm run serve:ssr для рендеринга на стороне сервера с Universal.
7.4 Сборка и запуск приложения
Теперь, когда все настроено, все готово! Соберите приложение и запустите сервер.
Репозиторий GitHub и живая демонстрация
См. Репозиторий GitHub здесь
Смотрите живую демонстрацию здесь
Заключительные мысли
В общем, создание этой демонстрации с помощью Angular было приятным занятием. Создать проект и понять общую идею и концепции Angular оказалось проще, чем я думал - я впервые использовал этот фреймворк! Я могу определенно увидеть, как этот подход может быть полезен для большой команды.
Однако включить Universal в мой проект оказалось труднее, чем я ожидал; очень легко потеряться во всех файлах конфигурации!
На создание этой демонстрации, включая начальное чтение и исправление ошибок, у меня ушло чуть меньше двух дней. Документация Angular была полной, и ей было легко следовать, поскольку каждый фрагмент кода был подробно объяснен.
Если бы я хотел продвинуть этот пример дальше, я мог бы получить продукты из API, а не имитировать их в приложении, и использовать службы и внедрение зависимостей, как описано в официальной документации, чтобы имитировать более реальный сценарий.
Надеюсь, это поможет вам правильно понять SEO в Angular! :)
Есть вопросы? Не стесняйтесь оставлять комментарии, чтобы поделиться с нами своими мыслями, отзывами и вопросами. Если вам понравился этот пост, найдите секунду, чтобы 👏 или поделиться в Твиттере!
Первоначально опубликовано в блоге Snipcart и в нашем информационном бюллетене.
