SEO для фронтенд-разработчика: что заложить в вёрстку и шаблоны

Фронтенд-разработчик определяет, что именно увидит поисковый робот: какой HTML придёт с сервера, найдутся ли ссылки, как быстро отрисуется страница. Ошибки на этом этапе потом исправлять дороже, чем заложить правильное решение сразу. Этот материал — список того, о чём стоит договориться с SEO-специалистом до начала разработки и проверить перед запуском.

Рендеринг: что приходит в HTML

Главный вопрос для сайтов на React, Vue, Angular и других фреймворках — содержится ли контент в исходном HTML или появляется только после выполнения JavaScript. Google умеет рендерить JavaScript, но делает это с задержкой и не всегда полностью. Другие поисковики и системы ИИ справляются хуже.

Надёжные варианты для страниц, которые должны быть в поиске:

• Серверный рендеринг (SSR) — HTML формируется на сервере для каждого запроса
• Статическая генерация (SSG) — страницы собираются заранее при сборке
• Гибридные режимы фреймворков вроде Next.js и Nuxt

Чисто клиентский рендеринг подходит для личных кабинетов и админок, но не для каталогов, услуг и статей.

Мета-теги в шаблонах

Предусмотрите возможность задавать для каждой страницы свои:

• title и meta description
• canonical
• meta robots
• теги Open Graph для превью в Telegram и соцсетях
• hreflang для языковых версий, если сайт на русском и узбекском

Значения должны приходить в HTML с сервера, а не подставляться скриптом после загрузки.

Ссылки и навигация

Все переходы между страницами — настоящие ссылки с атрибутом href. Роутер фреймворка должен рендерить тег a, а не обрабатывать клики на произвольных элементах. Пагинация каталога — ссылками на отдельные адреса, а не только кнопкой «Показать ещё». Фильтры, которые должны индексироваться, формируют понятные адреса, остальные — не создают новых индексируемых страниц.

Адреса

Человекопонятные адреса латиницей без лишних параметров, единый формат слеша на конце, отсутствие адресов с решёткой для разных страниц. Каждой странице — один адрес. Код ответа 404 для несуществующих страниц, а не пустой шаблон с кодом 200 — частая ошибка одностраничных приложений.

Изображения и медиа

• Тег img с атрибутами alt, width и height
• Адаптивные изображения через srcset под разные экраны
• Современные форматы и сжатие
• Отложенная загрузка ниже первого экрана, но не для главного изображения
• Видео с обложкой и без автозапуска тяжёлых файлов

Скорость и Core Web Vitals

Фронтенд в значительной степени отвечает за все три показателя. LCP зависит от того, как быстро загружается главный элемент первого экрана. INP — от объёма JavaScript и длинных задач в основном потоке. CLS — от того, зарезервировано ли место под изображения, баннеры, шрифты. Разделение кода, отложенная загрузка сторонних скриптов и отказ от тяжёлых библиотек ради мелких эффектов дают наибольший эффект.

Микроразметка

Заложите вывод JSON-LD в шаблоны: Organization на главной, BreadcrumbList на внутренних, Product в карточках, Article в блоге. Данные берутся из тех же источников, что и видимый контент, и выводятся на сервере.

Как договориться с SEO-специалистом

Попросите технические требования до начала вёрстки, а не после неё: список шаблонов, поля для мета-тегов, формат адресов, требования к микроразметке. Покажите тестовую версию до запуска, чтобы специалист прогнал её краулером. Такой порядок экономит недели переделок.

Чек-лист перед запуском

• Контент виден в исходном коде страницы без выполнения скриптов
• Уникальные title, description и H1 на всех шаблонах
• Настоящие ссылки, корректные коды ответов, страница 404
• robots.txt и sitemap.xml генерируются и не закрывают сайт
• Нет noindex, оставшегося от тестовой версии
• Хорошие показатели Core Web Vitals на мобильных в лабораторном тесте
• Микроразметка проходит валидацию