Спор о подходах к отрисовке обычно ведут разработчики, а последствия достаются продвижению. Разбираем разницу простыми словами и то, что из неё следует для поиска.
Коротко
- Для поиска важно, есть ли содержимое в ответе сервера.
- Предварительная сборка — самый предсказуемый вариант.
- Серверная отрисовка подходит для меняющихся данных.
- Клиентская отрисовка добавляет этап и риск.
Три подхода
| Подход | Как работает | Что получает робот |
|---|---|---|
| Предварительная сборка | Страницы собираются заранее | Готовый HTML |
| Серверная отрисовка | Страница собирается на сервере по запросу | Готовый HTML |
| Клиентская отрисовка | Страницу собирает браузер | Каркас, содержимое после отрисовки |
Разница для поиска сводится к последнему столбцу. В первых двух случаях содержимое приходит сразу; в третьем оно появляется только после выполнения скриптов, а это отдельный этап с очередью. Про этапы — в статье про JavaScript-сайты и SEO.
Что такое гидратация
Гидратация — «оживление» готовой разметки на стороне браузера: страница приходит с сервера как HTML, а затем скрипты добавляют к ней интерактивность.
Сервер отдаёт готовую разметку
Робот и человек сразу видят содержимое.
Браузер загружает скрипты
Параллельно с показом страницы.
Скрипты подключают обработчики
Страница становится интерактивной.
Это и есть компромисс, к которому пришли современные подходы: содержимое отдаётся сразу, интерактивность добавляется потом. Для поиска важен первый шаг, для человека — скорость, с которой отработает третий.
Что выбрать под свой сайт
| Тип сайта | Что обычно подходит |
|---|---|
| Блог, справочник, лендинг | Предварительная сборка |
| Каталог с меняющимися ценами | Серверная отрисовка |
| Крупный магазин | Серверная отрисовка с кешированием |
| Личный кабинет, приложение | Клиентская отрисовка — и не нужна в поиске |
| Смешанный сайт | Разные подходы для разных разделов |
Последняя строка — то, что чаще всего и получается на практике. Витрина и каталог отдаются с сервера, личный кабинет работает в браузере: разделы решают разные задачи, и требовать единого подхода ко всему сайту не нужно.
Где теряют при клиентской отрисовке
Типичные потери
- Содержимое появляется только после скриптов
- Мета-теги проставляются скриптом
- Навигация не является ссылками
- Несуществующие адреса отдают код успеха
- Отрисовка откладывается в очереди
Что снимает риск
- Отдавать основное с сервера
- Мета-теги в разметке страницы
- Обычные ссылки с адресами
- Корректные коды ответа
Пятая строка слева — то, что нельзя исправить настройкой. Даже при безупречной реализации отрисовка остаётся отдельным этапом, и содержимое попадает в индекс позже. Для сайта, где важна скорость появления новых страниц, это самостоятельный довод в пользу серверной отрисовки.
Как разговаривать с разработчиком
Не спорьте о названиях технологий
Спрашивайте про результат.
Задайте один вопрос
Есть ли основной текст в ответе сервера.
Попросите показать
Исходный код типовой страницы.
Проверьте сами
Это занимает минуту.
Второй пункт переводит разговор из области предпочтений в область фактов. Ответ на него проверяется за минуту и не зависит от того, какая технология используется. Как проверять — в статье про как робот видит страницу.
Частые вопросы
Чем SSR отличается от SSG?
При предварительной сборке страницы собираются заранее, при серверной отрисовке — на сервере в момент запроса. В обоих случаях робот получает готовый HTML.
Что такое гидратация?
«Оживление» готовой разметки в браузере: страница приходит с сервера как HTML, а затем скрипты добавляют к ней интерактивность.
Плоха ли клиентская отрисовка для SEO?
Она добавляет отдельный этап — отрисовку, которая происходит в очереди. Содержимое попадает в индекс позже, и появляется набор типичных ошибок, которых нет при серверной отрисовке.
Как быстро понять, что используется на сайте?
Посмотреть исходный код типовой страницы: есть ли в нём основной текст. Это проверяется за минуту и не зависит от названия технологии.
Продвинем сайт в поиске
Соберём семантику, доведём структуру и текст до уровня топа и будем вести проект до заявок.
Обсудить SEO-продвижение
