React-приложение и SEO: как я решил проблему индексации практически бесплатно
Сейчас у меня в активной разработке проект The Signal — это платформа с редакторскими новостями для снижения тревожности (как минимум у меня). Ниша «новости» сложная и высококонкурентная, поэтому тут критически важно, чтобы сайт хорошо индексировался поисковиками.
Но The Signal - это React-SPA (Single Page Application). Проблема SPA в том, что поисковые роботы (особенно Яндекс) плохо переваривают динамический JS-контент. Им подавай готовый HTML, иначе в поиск страница может просто не попасть или попадет криво.
Поднимать полноценный SSR (Server-Side Rendering) было долго, поэтому я нашел хак: индексировать статику на субдомене. То есть основное приложение живет своей жизнью, а статьи публикуются на дополнительный сайт-витрину, который уже легко съедается Google и Yandex.
Как сделать это за копейки
Я использую Yandex Cloud S3 (за хранение HTML и трафик поисковиков там набегают сущие рубли), но подойдет любой провайдер. Инструкция:
Создаем бакет и называем его как наш новый субдомен: у меня это digest.the-signal.ru.
В настройках бакета включаем «Веб-сайт хостинг».
Идем туда, где заводили домен, и создаем CNAME-запись: направляем digest.the-signal.ru на digest.the-signal.ru.website.yandexcloud.net.
Возвращаемся в Yandex Cloud, идем в Certificate Manager и добавляем бесплатный сертификат Let's Encrypt.
Подтверждаем права на домен. Для этого нужно положить специальный файл-ключ от Let's Encrypt в скрытую папку .well-known/acme-challenge/ в нашем бакете. Так сервис по урлу проверит, что домен ваш. Подробнее о том, как вообще работает валидация и подключение SSL (на примере Nginx), я писал в своей статье на Хабре.
Переходим в настройки бакета -> Безопасность -> HTTPS и выбираем созданный сертификат.
Любыми мыслимыми и немыслимыми способами (руками, скриптами, CI/CD) закидываем сгенерированные HTML-странички в бакет.
Не забываем добавить sitemap.xml и robots.txt для поисковиков.
Кстати, этот механизм оказался настолько удобным, что мой сервис по созданию визиток и автопостингу Cooler я тоже перевел на эти рельсы. Теперь все странички пользователей отлично индексируются.
А вы как решаете индексацию для SPA? Накручиваете SSR, используете платные пререндеры или есть свои хаки? Делитесь в комментах 👇
