Progressive Web App (PWA) — это сайт, который ведёт себя как нативное приложение: устанавливается на главный экран, работает офлайн, шлёт push-уведомления, но при этом остаётся обычной веб-страницей по URL. С точки зрения SEO именно последнее и важно: PWA индексируется как сайт, и все классические правила технического SEO продолжают действовать. Этот материал — для разработчиков и SEO-специалистов, которые хотят, чтобы приложение не только удобно работало у пользователя, но и собирало органический трафик из Яндекса и Google.
Что такое PWA с точки зрения поисковика
PWA держится на трёх технологиях: HTTPS (обязательное условие), Service Worker (фоновый скрипт для кэширования и офлайн-режима) и Web App Manifest (JSON-файл с метаданными приложения — имя, иконки, цвета, стартовый URL). Для поискового робота PWA — это набор страниц с уникальными URL, которые он краулит и индексирует обычным образом.
Ключевой момент: PWA сам по себе не даёт буста в ранжировании. Поисковики не выводят «приложения» выше «сайтов». PWA влияет на позиции косвенно — через скорость, мобильную пригодность и поведенческие факторы. Если PWA построен на пустом client-side рендеринге без серверной отдачи HTML, он легко теряет индексацию — и тогда технология мешает, а не помогает.
Рендеринг: главная развилка SEO для PWA
PWA почти всегда строится на JavaScript-фреймворке (React, Vue, Angular). Способ отдачи контента определяет, увидит ли робот ваши страницы.
| Тип рендеринга | Что получает робот | Риск для индексации | Когда применять |
|---|---|---|---|
| CSR (client-side) | Пустой HTML + JS-бандл | Высокий: Яндекс рендерит JS ограниченно | Закрытые разделы, личный кабинет |
| SSR (server-side) | Готовый HTML с сервера | Низкий | Коммерция, контент-проекты |
| SSG (статика) | Заранее собранный HTML | Минимальный | Блог, документация, лендинги |
| Dynamic rendering | Готовый HTML ботам, JS людям | Средний (костыль) | Временное решение под legacy |
Google рендерит JavaScript, но с задержкой и не гарантированно. Яндекс к JS-рендерингу относится осторожнее: критичный контент и метатеги должны приходить в исходном HTML. Поэтому для индексируемых разделов PWA рабочий выбор — SSR или SSG. Подробнее о механике разобрано в материалах рендеринг JavaScript и SEO и SPA и SEO.
Web App Manifest и его связь с SEO
Манифест напрямую на ранжирование не влияет, но обеспечивает «устанавливаемость» и корректное поведение на мобильных — а это часть пользовательского опыта, который Яндекс и Google оценивают. Минимально рабочий manifest.json:
{
"name": "Гранитные памятники — Chrome Media",
"short_name": "Памятники",
"start_url": "/?utm_source=pwa",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#1a1a1a",
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" }
]
}
Важная деталь: start_url лучше помечать UTM-меткой — так в Яндекс.Метрике и аналитике видно заходы именно из установленного приложения. Иконки 192×192 и 512×512 обязательны для критерия установки.
Service Worker: кэш, который может сломать индексацию
Service Worker — мощный инструмент, но и источник самых неприятных SEO-ошибок. Он перехватывает запросы и может отдавать роботу закэшированную или устаревшую версию страницы.
⚠️ РИСК — типичные ошибки Service Worker:
- Кэширование старого HTML с устаревшими метатегами. Робот видит Title и Description прошлой версии. Решение — стратегия
network-firstдля HTML-документов,cache-firstоставляйте для статики (картинки, шрифты, CSS). - Отдача офлайн-заглушки роботу. Если SW при сбое сети возвращает страницу-заглушку, краулер может проиндексировать её вместо контента. Заглушку нужно закрывать от индексации.
- Невалидируемый кэш. Без версионирования кэша пользователи и роботы застревают на старой сборке. Используйте хэши в именах файлов и очистку старых кэшей в событии
activate. - Блокировка важных ресурсов в robots.txt. Если закрыть JS/CSS, нужные для рендеринга, робот не соберёт страницу. JS и CSS, влияющие на отрисовку, должны быть открыты.
Service Worker не заменяет серверную отдачу HTML и не индексируется поисковиком сам по себе — это исполняемый скрипт, а не контент.
Core Web Vitals и поведенческие факторы
Главный SEO-аргумент в пользу PWA — производительность. Закэшированные ресурсы и предзагрузка дают быстрый повторный визит, что улучшает метрики Core Web Vitals. Целевые нормативы остаются прежними:
| Метрика | Норма | Что измеряет |
|---|---|---|
| LCP | < 2,5 с | Отрисовка крупного контента |
| INP | < 200 мс | Отзывчивость на действия |
| CLS | < 0,1 | Стабильность вёрстки |
Быстрая загрузка и плавность снижают отказы и увеличивают глубину просмотра — а поведенческие факторы Яндекс учитывает прямо (алгоритмы оценки удовлетворённости, на которых строятся YATI и «Королёв»). Целевой показатель отказов: для лендинга < 30%, для статьи блога < 50%. Тяжёлый JS-бандл при первой загрузке, наоборот, бьёт по LCP и INP — поэтому код-сплиттинг и lazy-loading тут не опция, а необходимость.
Чек-лист технического SEO для PWA
- Каждая значимая страница доступна по уникальному индексируемому URL (не по
#-якорю). - Контент и метатеги (Title 50–65 символов, Description 140–160) приходят в исходном HTML.
- Настроены canonical, чтобы исключить дубли страниц.
- Внедрена мобильная адаптивность — PWA индексируется по mobile-first.
- robots.txt не блокирует JS/CSS, нужные для рендеринга; sitemap.xml актуален.
- Service Worker использует
network-firstдля HTML. - Добавлена разметка Schema.org (JSON-LD) — Organization, Product, BreadcrumbList.
- Внутренние ссылки оформлены через
<a href>, а не через JS-обработчики клика.
Мини-пример: коммерческий PWA
На проекте интернет-витрины (React) каталог отдавался чистым CSR: робот Яндекса получал пустой <div id="root">, и карточки товаров в индекс не попадали. Решение свелось к трём шагам: перевод каталога и карточек на SSR (готовый HTML с сервера), настройка Service Worker по схеме network-first для документов и открытие в robots.txt ранее закрытой папки со скриптами. После этого страницы каталога начали индексироваться, а метатеги стали отдаваться корректно. Никаких «волшебных» цифр роста тут не обещаем — задача была именно вернуть страницы в индекс, что и было достигнуто.
FAQ
PWA повышает позиции в выдаче само по себе?
Нет. Прямого фактора ранжирования «является ли сайт PWA» не существует. Влияние косвенное — через скорость, мобильную пригодность и поведенческие факторы.
Можно ли делать PWA на чистом client-side рендеринге?
Для индексируемых страниц — нежелательно, особенно под Яндекс. Контент и метатеги должны приходить в HTML. CSR допустим для закрытых разделов (личный кабинет, корзина).
Индексируется ли Service Worker и manifest.json?
Нет, это служебные файлы. Робот их использует для оценки устанавливаемости и поведения, но в поиск они не попадают как контент.
Нужен ли отдельный sitemap для PWA?
Нет, sitemap.xml общий для сайта. Главное — чтобы в нём были реальные индексируемые URL страниц, а не якоря с #.
Чем PWA отличается от AMP для SEO?
AMP — это упрощённый формат страниц с ограничениями, а PWA — полноценное приложение. Это разные технологии; в большинстве коммерческих проектов выбор сегодня в пользу быстрой обычной верстки или PWA, а не AMP.
Как проверить, видит ли робот контент PWA?
Через инструмент проверки URL в Google Search Console и переобход страниц в Яндекс.Вебмастере — они показывают, что именно получил краулер после рендеринга.
Материал подготовлен экспертами Chrome Media — агентства технического SEO и веб-разработки.
Добавить комментарий