React-приложение и SEO: как я решил проблему индексации практически бесплатно

React-приложение и SEO: как я решил проблему индексации практически бесплатно

Сейчас у меня в активной разработке проект The Signal — это платформа с редакторскими новостями для снижения тревожности (как минимум у меня). Ниша «новости» сложная и высококонкурентная, поэтому тут критически важно, чтобы сайт хорошо индексировался поисковиками.

Но The Signal - это React-SPA (Single Page Application). Проблема SPA в том, что поисковые роботы (особенно Яндекс) плохо переваривают динамический JS-контент. Им подавай готовый HTML, иначе в поиск страница может просто не попасть или попадет криво.

Поднимать полноценный SSR (Server-Side Rendering) было долго, поэтому я нашел хак: индексировать статику на субдомене. То есть основное приложение живет своей жизнью, а статьи публикуются на дополнительный сайт-витрину, который уже легко съедается Google и Yandex.

Как сделать это за копейки
Я использую Yandex Cloud S3 (за хранение HTML и трафик поисковиков там набегают сущие рубли), но подойдет любой провайдер. Инструкция:

1) Создаем бакет и называем его как наш новый субдомен: у меня это digest.the-signal.ru.

2) В настройках бакета включаем «Веб-сайт хостинг».

3) Идем туда, где заводили домен, и создаем CNAME-запись: направляем digest.the-signal.ru на digest.the-signal.ru.website.yandexcloud.net.

4) Возвращаемся в Yandex Cloud, идем в Certificate Manager и добавляем бесплатный сертификат Let's Encrypt.

5) Подтверждаем права на домен. Для этого нужно положить специальный файл-ключ от Let's Encrypt в скрытую папку .well-known/acme-challenge/ в нашем бакете. Так сервис по урлу проверит, что домен ваш. Подробнее о том, как вообще работает валидация и подключение SSL (на примере Nginx), я писал в своей статье.

6) Переходим в настройки бакета -> Безопасность -> HTTPS и выбираем созданный сертификат.

7) Любыми мыслимыми и немыслимыми способами (руками, скриптами, CI/CD) закидываем сгенерированные HTML-странички в бакет.

8) Не забываем добавить sitemap.xml и robots.txt для поисковиков.

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

А вы как решаете индексацию для SPA? Накручиваете SSR, используете платные пререндеры или есть свои хаки? Делитесь в комментах 👇