SEO при разработке сайта: как создать сайт, который полюбит Яндекс и Google

Почему SEO-фундамент закладывается до первой строчки кода?

Представьте, что вы строите дом. Вы же не начнете класть кирпичи без архитектурного плана и заложенного фундамента? В веб-разработке то же самое. SEO-оптимизация на старте — это и есть тот самый фундамент и план.

Если же SEO-специалист и разработчик работают в связке с самого начала, они сразу создают логичную структуру, быстрый код и правильные технические настройки. Это экономит не только деньги, но и время, которое является критичным фактором в конкурентной борьбе за топ выдачи.

От семантики к архитектуре: проектирование структуры сайта для SEO

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

Семантическое ядро — это список поисковых запросов, по которым пользователи ищут ваши товары или услуги. На основе этих запросов формируются будущие разделы и страницы сайта. Как технический директор, я контролирую, чтобы предложенная структура была логичной, масштабируемой и не создавала технических проблем в будущем.

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

На основе структуры формируются URL-адреса. Они должны быть человекопонятными (ЧПУ) и отражать вложенность страниц.

• Плохо: https://example.com/cat-12/product.php?id=543
• Хорошо: https://example.com/catalog/laptops/gaming-laptops/

Задача разработчика — обеспечить, чтобы CMS или фреймворк позволяли создавать такие адреса.

Техническая оптимизация: чек-лист для разработчика и заказчика

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

robots.txt — это текстовый файл в корне сайта, который дает инструкции поисковым роботам, какие страницы или разделы сайта не нужно сканировать. Это помогает скрыть служебные страницы (админку, корзину, результаты поиска) и избежать попадания в индекс ненужного контента.

Пример robots.txt:

User-agent: *
Disallow: /admin/
Disallow: /cart/
Disallow: /search

User-agent: Yandex
Disallow: /admin/
Disallow: /cart/
Disallow: /search
Host: https://www.example.com

Sitemap: https://www.example.com/sitemap.xml

sitemap.xml — это «карта» вашего сайта для поисковых систем. Она содержит список всех важных страниц, которые вы хотите проиндексировать. Это помогает роботам быстрее находить новый контент и понимать структуру сайта. Большинство современных CMS генерируют этот файл автоматически. Важно убедиться, что он обновляется при добавлении новых страниц. Помните, что один файл sitemap не должен содержать более 50 000 URL и превышать 50 МБ.

Дубли страниц — одна из главных технических проблем. Они могут возникать из-за UTM-меток, параметров сортировки или фильтрации. Чтобы указать поисковой системе, какая из версий страницы является основной (канонической), используется атрибут rel="canonical". Он должен быть размещен в секции `` каждой страницы.

Пример:

<link rel="canonical" href="https://example.com/catalog/laptops/gaming-laptops/" />

Когда пользователь или робот заходит на несуществующую страницу, сервер должен отдавать код ответа 404 Not Found. При этом важно, чтобы пользователю показывалась не стандартная ошибка сервера, а кастомная страница 404. На ней стоит разместить извинение, строку поиска и ссылку на главную страницу. Это улучшает пользовательский опыт и помогает удержать посетителя на сайте.

Если вы меняете URL страницы (например, при смене структуры сайта), необходимо настроить 301 редирект со старого адреса на новый. Это permanent redirect (постоянное перенаправление), который сообщает поисковым системам, что страница навсегда переехала. Это позволяет сохранить накопленный «вес» старой страницы и передать его новой.

On-Page SEO: что учесть при верстке и наполнении

На этапе разработки закладывается «каркас» для будущего контента. Важно, чтобы этот каркас был правильным с точки зрения SEO.

Текст на странице должен быть структурирован с помощью заголовков. Правила просты:

• H1 — главный заголовок, должен быть только один на странице.
• H2-H6 — подзаголовки, используются для создания иерархии и не должны нарушать вложенность (нельзя ставить H3 после H1, пропуская H2).

Для однотипных страниц (карточки товаров, статьи блога) разработчики должны предусмотреть возможность генерации мета-тегов Title и Description по шаблону. Например, для товара: [Название товара] - купить в [Город] по цене [Цена] | [Название магазина]. Это позволяет быстро оптимизировать тысячи страниц.

Когда технический каркас готов, наступает этап его наполнения. Чтобы этот процесс был управляемым и масштабируемым, а контент (статьи, страницы услуг, кейсы) сразу отвечал требованиям E-E-A-T и SEO, существуют специализированные решения. Например, СЕО AI модуль — это self-hosted система, которая разворачивается на вашем сервере и помогает команде выстроить полный pipeline создания контента, от подбора запросов до публикации, сохраняя все данные внутри компании.

Скорость загрузки и Core Web Vitals: как не потерять пользователя

Скорость загрузки — один из ключевых факторов ранжирования Google и важный элемент пользовательского опыта. Google оценивает ее с помощью набора метрик Core Web Vitals.

• LCP (Largest Contentful Paint): Скорость отрисовки самого крупного элемента на видимой части экрана (обычно это баннер или главное изображение). В идеале — до 2.5 секунд.
• INP (Interaction to Next Paint): Скорость реакции интерфейса на действия пользователя (клик по кнопке, открытие меню). Хороший показатель — до 200 миллисекунд.
• CLS (Cumulative Layout Shift): Визуальная стабильность. Метрика отслеживает, не «прыгают» ли элементы на странице во время загрузки. Например, когда вы хотите нажать на кнопку, а в этот момент сверху подгружается баннер, и вы промахиваетесь.

Самый простой способ проверить эти метрики — использовать сервис Google PageSpeed Insights. Просто введите URL вашего сайта, и сервис покажет оценку для мобильной и десктопной версий. Стремитесь к «зеленой зоне» по всем показателям.

Пример отчета с хорошими показателями (зеленая зона):

!Отчет Google PageSpeed Insights с высокими оценками Core Web Vitals в зеленой зоне

Пример отчета с плохими показателями (красная зона):

!Отчет Google PageSpeed Insights с низкими оценками Core Web Vitals в красной зоне

Зеленая зона означает, что ваш сайт быстрый и удобный для пользователей. Красная и желтая зоны — сигнал к тому, что нужны технические доработки: оптимизация изображений, кода, настройка кэширования и другие работы, которые лучше всего закладывать еще на этапе разработки.

Mobile-First: почему мобильная версия сайта стала главной

Уже несколько лет Google для индексации и ранжирования использует в первую очередь мобильную версию сайта. Этот принцип называется Mobile-First Indexing.

Это означает, что робот Googlebot сканирует ваш сайт так, как его видит пользователь на смартфоне. Если какой-то контент или функционал отсутствует в мобильной версии, для Google его не существует.

Из принципа Mobile-First следуют два ключевых требования к разработке:

1. Адаптивная верстка: Сайт должен корректно отображаться на экранах любых размеров.
2. Паритет контента: Весь важный контент (тексты, ссылки, изображения, видео) должен присутствовать как на десктопной, так и на мобильной версии. Нельзя скрывать часть контента на мобильных устройствах с помощью display: none;, так как Google его не увидит и не учтет при ранжировании.

Типичные SEO-ошибки при разработке: опыт технического директора

За свою практику я видел десятки сайтов, которые приходилось «лечить» после запуска. Вот самые частые ошибки, которых можно избежать.

• Использование SPA-фреймворков без рендеринга на стороне сервера (SSR). Сайты на React, Vue или Angular по умолчанию отдают поисковому роботу пустую HTML-страницу. Контент в ней генерируется с помощью JavaScript уже в браузере пользователя. Роботы плохо справляются с таким подходом. Решение — настроить Server-Side Rendering (SSR) или Static Site Generation (SSG).
• Некорректная обработка URL-параметров и создание дублей. Фильтры, сортировки, UTM-метки могут создавать тысячи дублей одной и той же страницы, если разработчик не настроил rel="canonical" или не закрыл такие URL в robots.txt.
• Отсутствие микроразметки. Микроразметкой (например, Schema.org) можно «подсказать» поисковику, где на странице название товара, его цена, рейтинг, автор статьи. Это помогает формировать красивые и информативные сниппеты в выдаче.
• Забытый запрет на индексацию в robots.txt после запуска. Классическая ошибка: на время разработки сайт закрывают от индексации строчкой Disallow: /. А после релиза ее забывают убрать. В итоге сайт месяцами не появляется в поиске.

Финальный чек-лист: как принять сайт у разработчика

Прежде чем подписывать акт выполненных работ, пройдитесь по этому списку. Это минимальный набор проверок, чтобы убедиться, что сайт технически готов к продвижению.

• Проверить файл robots.txt: он существует, доступен и не запрещает индексацию всего сайта.
• Проверить файл sitemap.xml: он существует, доступен, указан в robots.txt и содержит актуальные URL.
• Проверить канонические URL: на ключевых страницах (главная, категории, товары) есть тег rel="canonical" с правильным URL.
• Проверить страницу 404: при вводе несуществующего адреса открывается кастомная страница с кодом ответа 404, а не 200 или 301.
• Проверить редиректы: если был старый сайт, убедитесь, что со старых URL настроены 301 редиректы на новые.
• Проверить скорость загрузки: прогоните главную и несколько типовых страниц через Google PageSpeed Insights. Показатели должны быть хотя бы в «желтой» зоне.
• Проверить мобильную версию: откройте сайт на смартфоне. Весь контент на месте? Все кнопки нажимаются? Нет горизонтальной прокрутки?
• Проверить иерархию заголовков: на странице должен быть только один H1, остальные заголовки (H2, H3) идут по порядку.

Этот чек-лист поможет вам заложить прочный SEO-фундамент. А если вы хотите не только иметь технически исправный сайт, но и наладить системный выпуск контента для него, обсудите внедрение СЕО AI модуля с нашей командой.