Как подружить сайты на JavaScript с SEO: SSR, SSG, ISG - что это вообще такое?

Статья в первую очередь под Google, но также подойдет и для Яндекса, и для Bing

Ранее в статье “Почему Google не видит контент вашего сайта и как это исправить?” мы писали о проблемах доступности контента для Google. Теперь стоит разобрать как же продвигать в поиске сайты на JavaScript-фреймворках React, Angular, Vue, Svelte (и подобных) и не страдать 🙂.

Короткий ответ: для продвижения сайтов на JS-фреймворках (например, SPA сайтов) используйте рендеринг на сервере, генерацию статического сайта и их варианты. Без этого никак. А чтобы разобраться что это такое, как работает в самых общих чертах и как составить грамотное ТЗ на SSR / SSG - читайте нашу статью.

Основная проблема в том, что при запросе страницы большая часть кода подгружается при помощи JavaScript уже после отправки HTML документа. Соответственно поисковые боты могут получить пустую страницу без контента, блоков с навигацией, витрины с товарами и т.п.

Будет ли подобная страница успешно ранжироваться или даже просто индексироваться? Скорее всего нет.

Но не все так однозначно, ведь алгоритмы и боты Google и Яндекс вроде бы умеют скачивать и обрабатывать JavaScript. Однако на практике они делают это весьма не надежно даже для небольших сайтов. Поэтому если вам нужны результаты по SEO, то не стоит рассчитывать на рендеринг JS на стороне серверов поисковых систем.

Есть несколько вариантов:

Для продвижения в поисковых системах сайтов на JS-фреймворках есть ряд решении и все они связаны с термином “рендеринг”.

Рендеринг в нашем случае - процесс генерации HTML страницы. Дополнительно дадим определение термину “фреймворк” - это готовая модель с набором инструментов, которая ускоряет разработку сайта.

Рендеринг страницы на стороне сервера или Server Side Rendering (SSR) генерирует на сервере готовый HTML файл со всеми блоками, текстами, ссылками, микроразметкой и т.п. Поисковому боту остается только запросить url, дождаться генерации HTML и скачать документ.

Есть еще различные виды (ре)гидратации. В результате поисковый бот получает HTML документ с необходимым минимумом контента, а дополнительный функционал для пользователя подгружается в браузере.

Пререндеринг / статический рендеринг / статическая генерация - Static Site Generation (SSG) при котором HTML файлы заранее генерируются на сервере и хранятся там же. Поисковому боту не надо даже ждать генерации HTML поскольку можно настроить их кеширование - просто приходи и качай готовые файлы.

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

Поэтапная (инкрементная) генерация Incremental Static Generation (ISG) - это вариант статического рендеринга, позволяющий оперативно обновлять контент сайта без пересборки всего сайта.

Динамическая отрисовка - способ при котором поисковым ботам отдается отрендеренная копия страницы, а пользователю - сайт в исходном виде с JS. То есть для ботов настроен SSR или SSG, а для пользователей - скриптовый сайт SPA / PWA.

Разумеется, возможны и комбинированные варианты рендеринга внутри одного сайта. Пример:

Рендеринг страницы на стороне сервера (Server Side Rendering) - подходит для всех видов сайтов, но в первую очередь для больших и динамичных проектов. Этот вид рендеринга существенно повышает нагрузку на сервер, т.к. JavaScript при запросе каждой страницы выполняется не в браузере пользователя, а на сервере.

Статический рендеринг (Static Site Generation) - подходит для небольших сайтов с редко обновляемым контентом. Дело в том, что из-за особенностей технологии нельзя просто взять и добавить новую страницу в статическую копию - необходимо сделать пересборку всего сайта. Тем не менее статический сайт загружается максимально быстро как для ботов , так и для пользователей в браузере. Требования к серверным мощностям - минимальные, можно вообще без собственного аккаунта на сервере.

Поэтапная генерация (Incremental Static Generation) - точно также подходит для небольших сайтов, однако по сравнению со статическим рендерингом позволяет оперативно обновлять контент на сайте без пересборки всего сайта. По скорости загрузки - аналогична статическому рендерингу.

Динамическая отрисовка - в теории также должна хорошо подходить для SEO, как и предыдущие способы. Однако на деле, особенно для больших и развивающихся сайтов, превращается в настоящий ад.

Например, разработка проводит внедрение, оно тестируется, вы его тестируете в инструментах Google и вроде бы все ОК. Однако на практике Googlebot скачивает ее в корявом виде, а через 2 месяца она и вовсе отваливается и вы этого не замечаете, т.к. на клиенте все на месте. В итоги позиции и трафик не растут, а почему - непонятно.

Рендеринг на стороне клиента (Client Side Rendering) - продвигать JS сайт как есть настоятельно не рекомендуется несмотря на заверения Google и Яндекс о том, что они умеют рендерить и индексировать такие страницы.

SEO специалисту необходимо иметь хотя бы общее понимание что такое рендеринг. Далее желательно знать, что для самых популярных фреймворков уже есть фреймворки или технологии для настройки SSR / SSG буквально из коробки.

Что еще требуется от SEO специалиста так это сделать подробное ТЗ, тщательно проверить результаты и не забывать хотя бы раз в месяц мониторить что отдается ботам поисковых систем.

Ниже привожу основные пункты, которые желательно включить в ТЗ на дружелюбный к SEO рендеринг:

1. Обоснование задачи: Контент страниц сайта недоступен для ботов поисковых систем. Следовательно невозможно получить стабильный трафик с поисковых систем на эти страницы.

2. Как воспроизводится проблема: Прикрепляем скриншот и выгруженный код страницы из инструмента https://search.google.com/test/rich-results

3. Что необходимо сделать: Внедрить SSR / SSG или их варианты, но не динамическую отрисовку. Рекомендуется использовать фреймворк (указать фреймоворк), а не кастомное решение.

4. Указать общие требования: Стат копия должна быть доступна для ботов поисковых систем и обновляться после внесения изменений в контент сайта. URL страниц статической копии, контент, навигационные элементы сайта и исходного приложения должны совпадать.

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

6. Перечень элементов, которые обязательно должны быть в статической копии:

Для каждого вида страниц нужен свой перечень.

Обязательно проверьте каждый вид страниц (главная, каталог, статья и т.п.) хотя бы в https://search.google.com/test/rich-results и посмотрите HTML код, который отдается ботам поисковых систем.

О том, как проверять видит ли Google контент вашего сайта, смотрите в предыдущей статье.

После настройки рендеринга на сервере в Яндекс Вебмастере в инструменте "Рендеринг страниц JavaScript (β)" принудительно отключаем рендеринг JS, чтобы поисковый бот не путался. Ссылка на справку по инструменту, но вообще там все интуитивно понятно.

Также на этой странице можно проверить как Яндекс видит контент страницы вашего сайта с JS и без него - инструмент выглядит весьма полезным и юзабельным, за что спасибо команде Михаила Сливинского.

Только если вы продвигаетесь за границей

Просто ждем индексации и вручную отправляем пачки страниц на индексацию через Bing Webmaster Tools. Делать это надо потому что Bing самостоятельно крайне скупо индексирует сайты и с полнотой индексации вашего сайта в Bing наверняка есть проблемы.

Для продвижения в поиске сайтов на JS-фреймворках обязательно настраивать серверный рендеринг. Для этого необходимо не только грамотно составить ТЗ, но и тщательно проверить каждый вид страниц после внедрения. Однако даже на этом работа SEO-специалиста не заканчиваться, ведь каждый месяц необходимо проверять корректность рендеринга и доступность контента для поисковых ботов.

Как видим, SEO процесс для сайтов на JS-фреймворках не прост и требует дополнительных временных затрат. Разумеется, и к квалификации специалиста и его опыту здесь предъявляются повышенные требования.

П.С. Мы надеемся, что информация в статье поможет вам поменьше страдать с JS-сайтами, а то и вовсе продвигать их с удовольствием 🙂.

П.П.С. Обязательно подписывайтесь на мой блог на VC - будут еще статьи по техническому SEO, контенту и линкбилдингу. А также буду рад вам в группе в Телеграм по зарубежному SEO.