Почему фронтенд влияет на поисковый трафик
Типичная история в Ташкенте: студия или фрилансер собирает красивый сайт на React или Vue, владелец запускает рекламу в Instagram и Telegram, а в Google страницы не появляются. Контент есть, дизайн хороший, но робот получает почти пустой HTML и либо откладывает обработку, либо понимает страницу не полностью.
Исправлять такое после релиза дороже, чем учесть заранее: приходится менять схему рендеринга, адреса и шаблоны. Поэтому SEO-требования лучше обсудить до начала вёрстки, а не после неё.
SEO оптимизация фронтенд: рендеринг и исходный HTML
Главный вопрос для сайтов на современных фреймворках: лежит ли контент в исходном HTML или появляется только после выполнения JavaScript. Google умеет рендерить скрипты, но делает это с задержкой и не всегда полностью. Другие поисковики, боты соцсетей и ИИ-помощники справляются заметно хуже.
Для страниц, которые должны попадать в поиск, выбирайте один из надёжных вариантов:
- серверный рендеринг (SSR): HTML собирается на сервере при каждом запросе
- статическая генерация (SSG): страницы готовятся заранее при сборке
- гибридные режимы Next.js и Nuxt: для каждого типа страниц свой подход
Ссылки, адреса и коды ответа
Переходы между страницами должны быть настоящими ссылками с атрибутом href. Если меню работает на клике по div, робот дальше главной не пройдёт. То же с пагинацией: кнопка «Показать ещё» удобна покупателю, но каталогу нужны ещё и ссылки на отдельные страницы списка, иначе товары в глубине останутся незамеченными.
Адреса делайте понятными, латиницей, без лишних параметров и с единым форматом слеша на конце. Одна страница — один адрес. Несуществующая страница должна отвечать кодом 404, а не показывать пустой шаблон с кодом 200: это частая беда одностраничных приложений. Редиректы настраивайте на сервере.
Мета-теги и языковые версии
Для каждой страницы нужны свои title, description и canonical, при необходимости meta robots, а также теги Open Graph: именно они формируют превью, когда ссылку отправляют в Telegram. Значения должны приходить в HTML с сервера, а не подставляться скриптом после загрузки. В одностраничных приложениях теги нужно обновлять и при смене маршрута — об этом регулярно забывают.
Если сайт на русском и узбекском, версии должны жить на разных адресах, например /ru/ и /uz/, с тегами hreflang и обычными ссылками в переключателе языка. Язык, который выбирается только по cookie или настройкам браузера, оставляет роботу одну версию вместо двух.
Изображения и скорость на мобильных
Многие клиенты заходят с телефона, нередко при нестабильном мобильном интернете, поэтому скорость здесь не формальность. За три показателя Core Web Vitals фронтенд отвечает в значительной степени:
- LCP: главный элемент первого экрана, обычно баннер, грузите рано и без отложенной загрузки
- INP: сокращайте объём JavaScript и длинные задачи, сторонние скрипты подключайте позже
- CLS: резервируйте место под изображения, баннеры и шрифты через width и height
- img с содержательным alt, srcset для разных экранов, современные форматы и сжатие
- lazy-загрузка только для картинок ниже первого экрана
- отказ от тяжёлых библиотек ради мелких эффектов
Микроразметка и чек-лист перед запуском
Выводите JSON-LD из шаблонов на сервере: Organization на главной, BreadcrumbList на внутренних страницах, Product в карточках товара, Article в блоге. Данные берите из тех же источников, что и видимый контент, иначе разметка разойдётся с тем, что видит человек. Перед релизом проверьте:
- контент виден в исходном коде страницы без выполнения скриптов
- у каждого шаблона уникальные title, description и H1
- ссылки настоящие, коды ответа корректны, 404 существует
- robots.txt и sitemap.xml генерируются и не закрывают сайт
- от тестовой версии не остался noindex
- Core Web Vitals на мобильных в лабораторном тесте в порядке
- микроразметка проходит валидацию
Как договориться с SEO-специалистом
Запросите технические требования до начала вёрстки: список шаблонов, поля для мета-тегов, формат адресов, требования к разметке. Покажите тестовую версию до запуска, чтобы специалист прогнал её краулером. Такой порядок экономит время и бюджет на переделках.
Команда markdev занимается SEO-оптимизацией сайтов в Узбекистане и может помочь составить такие требования или проверить сборку перед релизом. Если ваш сайт сделан на JavaScript-фреймворке и вы не уверены, что его видит поиск, опишите задачу — разберём, что менять в первую очередь.
Частые вопросы
Нужен ли SSR для каждого сайта на React или Vue?
Для страниц, которые должны находиться в поиске, — да, SSR или статическая генерация надёжнее. Личные кабинеты и админки можно оставить на клиентском рендеринге.
Как быстро проверить, видит ли робот контент?
Откройте исходный код страницы и проверьте, есть ли там заголовки и текст. Если там только пустой контейнер и подключённые скрипты, контент строится в браузере, и страница под риском.
Что такое мягкая 404?
Это ситуация, когда несуществующая страница показывает текст «не найдено», но сервер отвечает кодом 200. Поисковик может счесть такие адреса обычными страницами и засорить ими индекс.
Кто отвечает за SEO: разработчик или маркетолог?
Стратегию и контент ведёт SEO-специалист, а техническую основу — разработчик. Лучше всего, когда требования согласованы до начала разработки.
Разберём вашу задачу бесплатно
Оставьте контакт — за 15 минут созвона покажем, где теряются заявки и что сделать в первую очередь.