Улучшите SEO в Angular с Rendertron

Краткое содержание

1. Введение
2. Что такое Angular 5 Progressive Web App?
3. Оптимизация для поисковых систем
4. Что такое Render Tron и как он работает с Angular 5?
5. Как использовать Render Tron с Angular 5 и Firebase Cloud Functions
6. Развертывание собственной версии Render Tron
7. Создание облачной функции Firebase
8. Оптимизация Angular приложения для SEO
9. Пример использования Angular и Render Tron с базой данных Firebase
10. Заключение

Введение

Сегодня я собираюсь показать вам нечто, что еще никогда не делалось. Я собираюсь взять Angular 5 Progressive Web App и сделать его на 100% оптимизированным для поисковых систем, таких как Googlebot и Bing BOTS. Я собираюсь сделать все ваши роуты читаемыми для ботов социальных медиа, сделать его полностью совместимым с AngularFire или любым другим асинхронным источником данных, и мы сделаем это все без использования Angular Universal. Мы собираемся сделать это с помощью новой библиотеки от команды Google Chrome, называемой Render Tron. Если вы не знакомы с безголовым Chrome или Render Tron, я рекомендую посмотреть выступление Сэма Ли на Polymer Summit 2017. Это действительно поразительно. Если вам когда-либо приходилось сталкиваться с клиентским JavaScript и фреймворками поисковой оптимизации, то то, что я собираюсь вам показать сегодня, это то, как использовать этот инструмент с Angular 5 и Firebase Cloud Functions, и вы будете очень удивлены, насколько легко его реализовать с существующим Angular приложением. У меня есть полноценная рабочая демонстрация, развернутая на Firebase Hosting, которую вы можете протестировать и проверить, и я также поделюсь всем исходным кодом на angularfirebase.com. Если вы здесь впервые, обязательно подпишитесь, и если вы хотите продолжать получать этот контент бесплатно и регулярно, рассмотрите возможность стать премиальным подписчиком.

Angular 5 Progressive Web App

Angular 5 Progressive Web App (PWA) - это веб-приложение, разработанное с использованием Angular 5, которое может работать в офлайн-режиме и имеет прогрессивные возможности, такие как установка на рабочий стол и уведомления. PWA - это новое поколение веб-приложений, которые обеспечивают высокую производительность и удобство использования, особенно на мобильных устройствах. Однако, поскольку PWA основаны на клиентском JavaScript, они могут быть сложны для поисковых систем в процессе индексации и ранжирования страниц. Обычно клиентский JavaScript не исполняется ботами поисковых систем, что может привести к проблемам с SEO. В следующих разделах я покажу вам, как оптимизировать Angular 5 PWA для поисковых систем с использованием новой библиотеки Render Tron.

Оптимизация для поисковых систем

Одним из ключевых аспектов успешного веб-сайта является его видимость для поисковых систем, таких как Google и Bing. Чтобы ваш сайт был хорошо индексирован и ранжирован поисковыми системами, необходимо уделить внимание оптимизации его контента и структуры. Ниже я расскажу о некоторых основных моментах, которые следует учитывать при оптимизации Angular 5 PWA.

Использование ключевых слов в заголовках страниц

Заголовки страниц являются важной частью SEO, поэтому рекомендуется использовать ключевые слова в заголовках H1, H2, H3 и т. д. на вашем сайте. Это поможет поисковым системам понять, о чем речь на вашей странице и релевантна ли она для определенных запросов пользователей.

Оптимизация мета-тегов

Мета-теги также важны для SEO, поскольку они предоставляют информацию о вашей странице поисковым системам. В Angular 5 PWA вы можете использовать Angular Meta сервис для динамического добавления мета-тегов к каждой странице. Например, вы можете добавить мета-теги для описания страницы, ключевых слов и другой релевантной информации, чтобы улучшить ее видимость в поисковых системах.

Оптимизация URL-адресов страниц

URL-адреса страниц также играют важную роль в SEO, поэтому рекомендуется создавать человекочитаемые URL-адреса с использованием ключевых слов и фраз, отражающих содержание страницы. В Angular 5 PWA вы можете использовать Angular Router, чтобы настроить URL-адреса ваших страниц и добавить ключевые слова в них. Например, вместо использования URL-адреса "/page1?id=123", вы можете использовать URL-адрес "/page1/my-keyword".

Создание уникального контента

Уникальный контент является одним из самых важных факторов для SEO. Поисковые системы предпочитают страницы, которые содержат информацию, отличную от других страниц. Поэтому рекомендуется создавать уникальный и информативный контент для каждой страницы вашего Angular 5 PWA. Вы можете добавить ключевые слова и фразы, связанные с вашей тематикой, чтобы повысить ее релевантность для определенных запросов пользователей.

Использование семантической разметки

Семантическая разметка помогает поисковым системам понять структуру и содержание вашей страницы. В Angular 5 PWA вы можете использовать семантические элементы HTML5, такие как