Оптимизация AngularJS приложений для поисковых систем

Быстрый ответ

Для улучшения "видимости" вашего AngularJS приложения для поисковых систем, рекомендуется использоваться рендеринг на стороне сервера (server-side rendering, SSR) с помощью Angular Universal. SSR позволяет представить поисковым ботам уже готовый HTML, что избавляет их от необходимости обрабатывать клиентский JavaScript. Настоим SSR следующим образом:

npm install @nguniversal/express-engine --save
app.engine('html', ngExpressEngine({ bootstrap: ServerAppModule }));

Используя SSR, можно значительно повысить поисковую видимость и индексирование вашего приложения, что станет значительным улучшением SEO.

Совместимость приложений AngularJS с поисковыми системами

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

Реализация «чистых» URL в Angular

Любому приложению AngularJS необходимы «чистые» URL. Избегайте использования URL с хешем (#), активировав режим HTML5 через html5Mode в $locationProvider.

$locationProvider.html5Mode(true);

Подробнее об этом расскажет наш спикер на видео

Создание карты сайта и использование статусных кодов

Карты сайта помогают поисковым системам легче индексировать ваш сайт. Также важно правильно использовать HTTP статус-коды для обработки ошибок и перенаправлений.

Предварительная отрисовка динамического контента

Для обеспечения видимости динамического контента, управляемого {{}}, предоставьте его предварительную отрисовку. Этот процесс можно автоматизировать с помощью сервисов, таких как Prerender.io или Brombone.

Настройка SEO-конфигураций

Настраивайте мета-теги <meta name="fragment" content="!"> и структурируйте данные при помощи разметки, чтобы улучшить качество отображения на сайтах и усилить SEO. Проверить эти настройки можно с помощью инструментов, таких как Google Schema Markup Testing Tool.

Визуализация

Представьте, как поисковый робот 🕷️ исследует ваш сайт 🌐:

Сад AngularJS (🌐): [🌼, 🌼, 🌼 (🌱?)]

Маленький искатель 🕷️ в поисках видимого контента. Но AngularJS скрыл семена (🌱)!

| Исходное состояние AngularJS       | 🕷️ Находит                |
|-----------------------------------|----------------------------|
| AngularJS без оптимизации         | Мало 🌼, много скрытых 🌱! |

| AngularJS оптимизированный для SEO | 🕷️ Находит                      |
|------------------------------------|---------------------------------|
| AngularJS SEO-оптимизированный     | Яркий, цветущий сад 🌼, без скрытых 🌱 |

Рендеринг на стороне сервера (SSR), предварительная отрисовка и другие SEO-методики могут преобразовать заросший участок в прекрасный, цветущий сад!

SEO-подходы для приложений Angular

HTML5 PushState вместо URL с хешем

Используйте HTML5 PushState вместо URL со знаком #! для взаимодействия с поисковыми системами. Учитывайте, что Google больше не акцентирует внимание на _escaped_fragment_.

Bing и другие поисковые системы

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

Применение мета-тегов и структурированных данных

Включите соответствующие мета-теги и используйте структурированные данные, с применением словаря schema.org, для улучшения представления вашего контента в поисковой выдаче.

Аналитика и мониторинг

Используйте аналитические инструменты, например, Google Webmaster Tools, для отслеживания отрисовки сайта, выявления SEO-ошибок, а также для анализа поисковых запросов.

Полезные материалы

1. Основы SEO для JavaScript | Google Search Central – рекомендации Google по оптимизации сайтов на JavaScript, включая приложения AngularJS.
2. Руководство по Angular Universal – полное руководство по рендерингу на стороне сервера, критически важному для SEO.
3. Веб-рендеринг | web.dev – практики Google в области рендеринга современных веб-приложений.
4. Руководство Bing Webmaster Tools – советы Bing по улучшению представления вашего сайта в поиске.
5. О завершении поддержки индексации AJAX | Google Search Central Blog – информация о сворачивании поддержки индексации AJAX Google и распространенные ошибки.
6. Создание SEO-оптимизированных одностраничных приложений с Angular – советы по созданию одностраничных приложений, оптимизированных для поисковых систем.
7. Инструмент для тестирования разметки схемы | Google Search Central – инструмент от Google для проверки структурированных данных в результатах поиска.