Одностраничное приложение Angular, оптимизированное для SEO с помощью Rendertron
Одностраничные приложения потрясающие! Они загружаются быстро и дают вам полный контроль над тем, как вы хотите, чтобы ваше приложение запускалось. Они анализируются браузером, и, таким образом, вы контролируете элементы DOM и все это совершенство. Однако SPA сразу не подходят для SEO, потому что им необходимо динамически изменять метатеги и контент с помощью JavaScript, и это изменение обычно не улавливается ботом поисковой системы.
Что касается экземпляра, приложения Angular загружают первый чистый HTML-контент перед тем, как извлечь HTML-контент для страницы, загружаемой с помощью XMLHttpRequest. Поскольку некоторые поисковые боты не могут анализировать JavaScript при сканировании веб-сайта, они каждый раз будут видеть только первый голый контент.
Решение:
Когда пользователь посещает наш веб-сайт, он отображает приложение angular по умолчанию, но когда поисковый бот посещает, мы используем подход серверного рендеринга для рендеринга контента на сервере перед его рендерингом на стороне клиента. Этот подход серверного рендеринга использует Rendertron.
что такое Rendertron?
Rendertron предназначен для того, чтобы ваше прогрессивное веб-приложение (PWA) могло предоставлять правильный контент любому боту, который не обрабатывает или не выполняет JavaScript. Rendertron работает как автономный HTTP-сервер. Rendertron отображает запрошенные страницы с помощью Headless Chrome, автоматически обнаруживая, когда ваш PWA завершил загрузку, и сериализует ответ обратно на исходный запрос. Чтобы использовать Rendertron, ваше приложение настраивает промежуточное программное обеспечение, чтобы определить, следует ли проксировать запрос к Rendertron. Rendertron совместим со всеми технологиями на стороне клиента, включая веб-компоненты.
Шаги по созданию SEO в вашем приложении:
1. Используйте сервис Angular Meta для динамической генерации метатегов для Facebook Open Graph и Twitter Cards.
Помимо сервиса, неплохо было бы жестко закодировать метатеги в качестве запасного варианта по умолчанию. Их содержание обычно должно отражать содержание вашей домашней страницы.
Добавьте следующие теги в ‹head› файла index.html и настройте контент для своего бренда.
2- Мы собираемся обновлять эти метатеги по умолчанию динамически для каждого компонента, загруженного с маршрутизатором. SeoService - это СУХОЕ и удобное место для организации этого кода на Angular.
3. Теперь, когда у нас есть работающий сервис, давайте применим его к компонентам.
4- Теперь нам нужно запустить экземпляр rendertron для рендеринга нашего приложения на сервере.
клонируйте rendertron на свой компьютер и запустите его
git clone https://github.com/GoogleChrome/rendertron.git cd rendertron npm install npm run build
Работает локально
npm run start
Примечание: вам следует развернуть свою версию rendertron на «https://render.example.com», потому что запуск на localhost: 3000 не поможет.
Причина в том, что мы будем использовать https://render.example.com/render в промежуточном программном обеспечении rendertron (которое мы реализуем ниже в файле узла app.js), потому что промежуточному программному обеспечению необходимо знать ваш экземпляр URL-адреса rendertron, чтобы использовать его, если входящие запросы исходят от ботов.
5- Теперь нам нужно запустить приложение angular, используя сервер узла.
- перейдите в корневую папку приложения и запустите эти команды
npm install --save express body-parser morgan body-parser serve-favicon mkdir bin touch bin/www
- Откройте и отредактируйте файл www, затем добавьте эти строки кодов.
Чтобы сервер запускался из bin / www, откройте и отредактируйте package.json, затем замените значение start.
package.json
"scripts": {
"ng": "ng",
"start": "ng build && node ./bin/www",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
- Теперь создайте app.js в корне папки проекта.
- Установите промежуточное ПО rendertron:
npm install rendertron-middleware
Это промежуточное программное обеспечение проверяет заголовок User-Agent входящих запросов и, если он соответствует одному из настраиваемого набора ботов, прокси, которые запрашивают через Rendertron.
- Откройте и отредактируйте app.js, затем добавьте все эти строки кода.
- Чтобы добавить конкретных ботов
- запустите приложение angular, используя сервер узлов:
npm start
Проверьте приложение Prerender Angular:
чтобы проверить, как это работает на некоторых ботах, просто добавьте ссылку на веб-сайт после развертывания на facebook или twitter, вы должны увидеть заголовок, описание и изображение, которые существуют в метаданных для этой страницы
Проверить URL в Rendertron:
https://render.example.com/render/http://www.example.com
Заключение:
мы делаем наше одностраничное приложение Angular оптимизированным для SEO, и в процессе разработки мы можем запускать приложение, используя «ng serve», и когда мы переходим на сервер, просто запускаем наше приложение с помощью «node ./bin/www», чтобы открыть наше приложение с помощью этого node. приложение
Использованная литература:
Https://github.com/GoogleChrome/rendertron
www.modeso.ch - Ваш прибрежный партнер по веб- и мобильной разработке
Мы - молодая швейцарская компания со штаб-квартирой в районе Боденского озера, которая была основана в 2013 году и с тех пор продолжает работу. Modeso специализируется на нестандартных Nearshore -моделях в области веб- и мобильной разработки. Мы поддерживаем компании, от стартапов до крупных предприятий, с высококвалифицированными разработчиками программного обеспечения по разумным ценам.
