Методичка · заказные сайты под ключ
Сайт под ключ: от идеи до запуска
Пошаговый чек-лист и мини-курс для тех, кто делает коммерческий сайт: от брифа и стратегии до трафика, юридического контура и типичных граблей. Каждый этап можно открыть и разобрать подробно. Без воды, по делу.
Как пользоваться курсом
Отмечайте пунктыКликните по строке — галочка встанет, а прогресс сохранится в браузере и синхронизируется со страницами этапов.
Разбирайте этапыПод каждым этапом — кнопка «Разобрать подробно»: зачем, как пошагово, пример, грабли и инструменты.
Не понятен термин?Внизу есть «Словарь» — все сокращения расшифрованы простыми словами.
Для кого: для тех, кто заказывает, делает или запускает свой первый коммерческий сайт. Программистом быть не нужно — важно ничего не пропустить. На технических этапах вы — постановщик задачи: команды и код берёт на себя ИИ или подрядчик, а ваше дело — понимать, что должно получиться.
Бриф и стратегия
До единой строчки кода. Здесь решается, на что вообще будет работать сайт.
Разобраться и собрать
- Бизнес клиента.Что продаёт, кому, средний чек, маржа, география.
- Главное целевое действие.Заявка / звонок / оплата — всё на сайте работает на него.
- Семантика по группам.Брендовые / узкие коммерческие / широкие конкурентные: разные сроки выхода в топ и разные страницы.
- Конкуренты в выдаче.Что у них в топе по целевым запросам: объём текста, блоки, чего не хватает.
- Позиционирование и тон.Например: премиум, тёмно-синий с золотом, личный бренд вместо безликого агентства.
- Сырьё от клиента.Реальные фото/видео «с производства», цены, отзывы, частые вопросы. Живой контент бьёт стоковый всегда.
Структура сайта
Карта страниц и логика связей — каркас, на который сядет всё остальное.
Спроектировать
- Карта страниц.Главная + посадочная под каждую услугу + хабовые страницы под крупные запросы + «О нас» + контакты.
- Одна страница = один интент.Не дублировать смысл двух страниц — каннибализация просаживает обе.
- ЧПУ-адреса.Латиница, по ключу (
/tesla-shou.html,/detskiy-prazdnik.html). - Перелинковка.Страницы услуг ссылаются друг на друга и на хаб; хлебные крошки на подстраницах.
- Состав каждой страницы.H1 с ключом, оффер, выгоды, программа/состав услуги, цены, FAQ, отзывы, призыв + форма.
Контент
Тексты и медиа решают и конверсию, и SEO. Объём — по топу выдачи, без воды.
Наполнить
- H1 — один на страницу.С главным ключом и гео.
- Объём коммерческой страницы.Ориентир 600–900 слов (по топу): «что входит», «для каких случаев», «где проводим», «от чего зависит цена».
- FAQ-блок 5–8 вопросов.Каждый вопрос ловит свой длинный запрос.
- Страница «О нас» — не отписка.Личность, история, цифры (лет на рынке, проектов). Это E-E-A-T и доверие.
- Публиковать цены (хотя бы «от»).Без цен растут отказы.
- Реальные фото и видео, никакого стока.Видео живых эмоций — сильнейший конверсионный элемент.
- Закрепить первоисточник.Сразу после публикации — переобход URL + «обход по счётчикам Метрики» в Вебмастере: скорость индексации защищает авторство. (Раздел «Оригинальные тексты» Яндекс закрыл в 2020-м.)
Дизайн и конверсия
Каждый экран ведёт к заявке. Мобильный — в приоритете.
Заложить в макет
- Первый экран.Оффер + выгода + кнопка действия, видны без скролла на мобильном.
- Мобильная версия — приоритет.70–80% трафика с телефонов. Проверять на реальном устройстве, не только в DevTools.
- Многошаговая форма / квиз.Вместо «простыни» полей — выше конверсия.
- Несколько каналов связи.Кликабельный телефон и форма — в первую очередь. Из мессенджеров — российские (MAX, VK Мессенджер); Telegram как дополнительный. WhatsApp в РФ — только через VPN, не делайте основным.
- Плавающая панель / sticky-CTA.На мобильном связь всегда под рукой.
- Элементы доверия.Отзывы, цифры, фото «как это происходит», поэтапность («от заявки до результата — 4 шага»).
- Честный дедлайн/дефицит в оффере.«Календарь на месяц заполняется» — если это правда.
- Декор не ломает клики.Частицы/анимации — только
pointer-events:noneи с проверкой на слабых телефонах.
Вёрстка и техническая база
Семантика, скорость и вес медиа. Здесь закладывается производительность.
Собрать правильно
- Семантический HTML.header / main / section / footer, иерархия заголовков H1→H2→H3.
- Шрифты — self-hosted.woff2, отдельные subsets cyrillic/latin, не Google Fonts: быстрее и стабильнее в РФ.
- Изображения.WebP (или ещё легче — AVIF), 60–120 КБ на фото,
loading="lazy", обязательноwidth/height— иначе скачет вёрстка (плохой CLS). - Видео — пережать через ffmpeg.Минус звук
-an, денойзhqdn3d, CRF 28–30,+faststart. Хиро — до 3–6 МБ; видео в контенте —preload="none"+ постер + controls. - Хиро-видео не грузить на мобильных.Постер вместо него, видео подставлять JS-ом только на десктопе.
- Иконки.favicon (16/32), apple-touch-icon, icon-512, site.webmanifest.
- Формы.Валидация, понятное сообщение об успехе, доставка в надёжный основной канал (почта/CRM) + дубль в мессенджер. Мессенджер единственным каналом не делать — риск потерять заявки.
- Чистка деплоя.Убрать неиспользуемые файлы и старые версии видео: занимают место и могут попасть в индекс по прямой ссылке.
Домен, хостинг, инфраструктура
Сайт переезжает в интернет: адрес, место, защищённое соединение и выбор платформы.
Развернуть инфраструктуру
- Домен в зоне .ru.Короткий и читаемый. Доверие у российских пользователей и поиска.
- Хостинг под задачу.Для статики — простой и быстрый; для CMS — с PHP и базой. Площадка в РФ-юрисдикции для стабильности.
- SSL-сертификат (HTTPS).«Замочек» в адресе. Бесплатно через Let’s Encrypt. Без него браузер пишет «Не защищено».
- Почта на домене.
info@вашсайт.ru— доверие и меньше спама, чем с бесплатного ящика. - Осознанный выбор платформы.Не конструктор по умолчанию: для скорости и SEO лучше кастомная статика (реально собрать с ИИ, напр. в Claude дизайне). CMS — если нужны частые правки силами клиента.
- Резервные копии (бэкапы).Автокопия сайта и базы, хранить отдельно от хостинга.
- Доступы под контролем.2FA на домен, хостинг и почту; не раздавать рут-доступ.
SEO-техника (on-page)
Чтобы поисковик понял каждую страницу. Делается один раз при сборке.
На каждой странице
- Уникальный
<title>.Ключ + гео + бренд, ~50–60 символов. - Уникальный
meta description.С выгодой и цифрами (это CTR в выдаче): «10 лет, 4000+ проектов, перезвоним за 30 минут». rel="canonical".Чтобы похожие страницы не считались дублями.- Open Graph.og:title, og:description, og:image (картинка существует и в .jpg!), og:url.
Микроразметка Schema.org (JSON-LD)
LocalBusinessна главной.Адрес, телефон, гео, часы работы.Service/OfferCatalog.С ценами.FAQPage.На страницах с FAQ.BreadcrumbList.На подстраницах.VideoObject.На страницах с видео (имя, описание, постер, длительность) — даёт видео-сниппет в выдаче.aggregateRating— только с реальными отзывами.На внешних площадках. Фейковый рейтинг наказуем.
Служебные файлы
robots.txt.Доступ открыт, ссылка на sitemap.sitemap.xml.Все страницы и актуальныеlastmod— обновлять при каждом изменении страниц!.htaccess.301 http→https, www→без www, HSTS, X-Content-Type-Options, X-Frame-Options, Referrer-Policy, кэширование статики (год для картинок/шрифтов).
Аналитика и сервисы поисковиков
Без счётчиков и целей реклама — деньги вслепую. Ставится до запуска трафика.
Подключить и настроить
- Яндекс Метрика.Счётчик + вебвизор + карта кликов.
- Цели в Метрике.Отправка формы (
lead_submit), открытие формы, клик по телефону, клики по мессенджерам. - Яндекс Вебмастер.Добавить сайт, подтвердить права (DNS-запись — самый чистый способ), подать sitemap.
- Google Search Console.То же самое. Но учтите: Google Ads в РФ недоступен — Google остаётся только органическим каналом.
- Переобход после правок.В Вебмастере по изменённым URL — после запуска и крупных правок.
- UTM-метки на все внешние ссылки.Соцсети, Авито, рассылки — иначе не понять, что приносит заявки.
- Коллтрекинг при масштабировании.Подменные номера, чтобы атрибутировать звонки.
Юридический контур
Для коммерческого сайта в РФ. Закладывается в смету проекта сразу.
Оформить
- Договор-оферта на сайте.Для физлиц: оферта + оплата = акцепт. Внутри: предмет, бронь/предоплата, переносы/отмены, ответственность, форс-мажор, требования к заказчику.
- Политика обработки ПДн + согласие.Чекбокс согласия у форм (152-ФЗ).
- Реквизиты ИП/ООО в подвале.Обязательный элемент доверия и закона.
- Онлайн-касса (54-ФЗ).Приём денег от физлиц: для выездных/онлайн-услуг — облачная касса + оплата по ссылке/QR СБП, чек уходит автоматически. Переводы «на карту» — нарушение.
- С юрлицами — другой комплект.Счёт → оплата на р/с → акт (касса не нужна). Подготовить договор, счёт, акт.
- Уведомление в Роскомнадзор об обработке ПДн.Любой сайт с формой = оператор ПДн. С 30.05.2025 за неподачу — штраф 100–300 тыс. ₽ для ИП/юрлиц. Чекбокса с политикой недостаточно — нужно подать уведомление в РКН.
- Защита базы заявок от утечек.С 30.05.2025 за утечку ПДн — до 15 млн ₽ (повторно — до 3% выручки), уведомить РКН за 24 часа. Не хранить базу где попало; доступы — под контролем.
Запуск
Финальная проверка боем перед тем, как открыть сайт миру.
Проверить и выкатить
- Скорость.PageSpeed / Метрика, цель — быстрый первый экран на мобильном.
- Боевые отправки форм.Проверить все формы и цели Метрики реальными заявками.
- Редиректы и карточка.301, https, отображение og-карточки (поделиться ссылкой в мессенджер).
- Залить и заявить.Подать sitemap, запросить переобход.
- Индексация через неделю.
site:доменв Яндексе и Google, диагностика в Вебмастере («Ошибок нет»).
Трафик и рост
Сайт начинает работать после запуска: площадки, реклама, экономика, контент.
Разгонять
- Яндекс Бизнес / Карты + 2ГИС.Полная карточка (категория, услуги, цены, фото), реальные отзывы — в локальных нишах обгоняет органику.
- Каталоги и справочники ниши.Упоминания + ссылки.
- Яндекс Директ.Старт с Поиска, узкие коммерческие ключи, жёсткие минус-слова (отсечь омонимы бренда!), точное гео, стратегия «оплата за конверсии», тестовый бюджет, через 2–3 недели — чистка по стоимости лида.
- Ретаргетинг в РСЯ.На аудитории Метрики (был на сайте / открыл форму, но не отправил).
- Юнит-экономика до рекламы.CPC ÷ конверсия сайта = цена заявки; ÷ конверсия в продажу = цена клиента; сравнить с прибылью. Не сходится — чинить конверсию, не лить бюджет.
- Контентный план.Дожимать тонкие страницы до 600+ слов, по одной в неделю, с самых маржинальных запросов.
- Ежемесячный аудит.Позиции, Вебмастер (ошибки/рекомендации), вебвизор (где стопорятся), обновление lastmod при правках.
- Маркировка рекламы (erid/ОРД).Директ маркирует сам, но посевы у блогеров и платные размещения — ваша ответственность: регистрация в ОРД и пометка «Реклама» + erid. Плюс с 2025 — сбор 3% с доходов от интернет-рекламы.
!Грабли, на которые уже наступали
Дорого выученные уроки. Держать перед глазами на каждом запуске — это не задачи, а предупреждения.
Тяжёлые автоплей-видео на первом экранеУбивают мобильную загрузку и поведенческие. Сжимать всегда, на мобильных — постер.
Дубли страниц под один интентКаннибализируют друг друга — разводить по смыслу.
Аудио в фоновом видеоМёртвый вес в мегабайтах — всегда -an.
og:image в .webpМожет не подхватиться мессенджерами — держать .jpg.
Забытые старые файлы в деплоеЧистить перед заливкой.
«Топ-1 за неделю» не бываетБренд — сразу, узкие ключи — 1–2 мес, конкурентные — 3–6+ мес. Озвучивать честные сроки сразу.
Фейковые рейтинги в SchemaРиск санкций. Сначала реальные отзывы.
Реклама без целей в МетрикеДеньги в никуда. Цели — до первого рубля бюджета.
Sitemap с устаревшим lastmodПосле правок поисковик не спешит переобходить.
Приём оплат от физлиц без кассыШтраф до 30% от каждого расчёта. Закладывать кассу в смету сразу.
ИИ в работе над сайтом
Сегодня сайт можно не просто «ускорить» нейросетью, а собрать целиком — от макета до кода — и потом отдать ИИ на аудит. Эта методичка и сайт, для которого она написана, собраны именно так — в Claude дизайне. ИИ помогает на каждом из 11 этапов: внутри уроков ищите пометку «ИИ на этом этапе».
Весь сайт — в ИИ
Не только тексты: макет, вёрстка, код, формы и анимации собираются в Claude дизайне в одиночку, без команды разработчиков. Полноценный коммерческий сайт — реально.
Аудит и оптимизация
Готовый сайт отдают ИИ на проверку: он находит ошибки, узкие места по скорости и SEO, спорные мета-теги и битые ссылки — и предлагает правки. Этот курс правился ровно так.
Помощь на каждом этапе
От брифа и семантики до микроразметки и контент-плана — ИИ снимает рутину на всех этапах. В каждом уроке отмечено, чем именно он помогает.
Тексты: черновик ИИ, доводка руками
ИИ быстро даёт структуру и черновик. Но факты, цены и кейсы — ваши, а финальная вычитка обязательна: текст без правки рискует попасть под фильтр малополезного контента.
FAQ из реальных вопросов
Дайте ИИ настоящие вопросы клиентов — он соберёт чёткие ответы, которые ловят живые длинные запросы. Не выдумывать вопросы за клиента.
«Нулевые клики» растут
ИИ-ответы в выдаче забирают часть переходов — тем важнее карточки в Яндекс Бизнес/Картах и заявки прямо оттуда.
Принципы важнее чек-листа
Цель важнее красоты
Каждый элемент работает на заявку. Красиво — это средство, а не цель.
Сначала спросить, потом делать
Хороший бриф экономит недели. Не уверен — уточняй, а не угадывай.
Мобильный — главный
Проверяй каждую правку на телефоне. Там сидит большинство клиентов.
Честные сроки и цифры
Никаких «топ за неделю» и фейковых рейтингов. Доверие дороже.
Запуск — это старт, не финиш
Сайт начинает работать после запуска: отзывы, контент, аналитика, рост.
Считать экономику
Реклама — только когда сходится юнит-экономика. Иначе сначала чинить конверсию.
Словарь: термины простыми словами
Если в чек-листе встретилось незнакомое слово — расшифровка здесь, без занудства.
Открыть словарьтермины
- Лид / заявка
- Обращение потенциального клиента: отправленная форма, звонок, сообщение в мессенджер.
- Конверсия
- Доля посетителей, оставивших заявку. Зашло 100, написали 3 — конверсия 3%.
- Оффер
- Суть предложения и главная выгода — то, что цепляет на первом экране.
- CTA
- Призыв к действию: кнопка «Оставить заявку», «Рассчитать», «Позвонить».
- Семантика / ядро
- Список реальных запросов, по которым клиенты ищут услугу в поиске.
- Интент
- Что человек на самом деле хочет, вводя запрос. Одна страница — один интент.
- Лендинг / посадочная
- Страница под одну услугу или один запрос, заточенная на заявку.
- Хаб
- Страница-сборник: коротко обо всём + ссылки на узкие подстраницы.
- ЧПУ
- «Человекопонятный» адрес:
/tesla-shouвместо/page?id=12. - H1, H2, H3
- Уровни заголовков на странице. H1 — главный, он один на страницу.
- Title / Description
- Заголовок и описание страницы, которые видно в результатах поиска.
- Canonical
- Пометка «вот главная версия страницы», чтобы похожие не считались дублями.
- Микроразметка (Schema)
- Спец-код, по которому поиск показывает звёзды, цены и вопросы прямо в выдаче.
- Sitemap / robots.txt
- Карта сайта и инструкция для поисковых роботов: что и где индексировать.
- WebP
- Современный формат картинок: то же качество, но в разы меньше вес.
- CLS
- «Прыжки» вёрстки при загрузке. Чем их меньше — тем выше оценка сайта.
- Self-hosted
- Файлы (например, шрифты) лежат на своём сервере, а не грузятся со стороны.
- E-E-A-T
- Как поиск оценивает качество: опыт, экспертность, авторитет, доверие.
- Метрика / Вебмастер
- Бесплатные сервисы Яндекса: аналитика посетителей и контроль индексации.
- РСЯ
- Рекламная сеть Яндекса — объявления на сайтах-партнёрах.
- СБП
- Система быстрых платежей — оплата по QR-коду или ссылке.
- Коллтрекинг
- Технология, которая показывает, с какой рекламы пришёл звонок.
- Юнит-экономика
- Расчёт: сколько стоит привести клиента и сколько он приносит. Должно сходиться.
- SSL / HTTPS
- Защищённое соединение, «замочек» в адресе. Без него браузер пишет «Не защищено».
- Core Web Vitals
- Метрики качества страницы: скорость первого экрана (LCP), отзывчивость (INP), стабильность вёрстки (CLS).
- AVIF
- Формат картинок ещё легче WebP, с уже массовой поддержкой в браузерах.
- Оператор ПДн
- Любой, кто собирает персональные данные — даже имя и телефон из формы. Обязан подать уведомление в Роскомнадзор.
- ОРД / erid
- Оператор рекламных данных и метка-идентификатор
eridдля маркировки платной интернет-рекламы. - Бэкап
- Резервная копия сайта и базы, чтобы восстановиться после сбоя или ошибки.
- MAX / VK Мессенджер
- Российские мессенджеры — приоритетные каналы связи на сайте (стабильнее, чем заблокированные).
Забрали методичку? Идём дальше
Разборы, шаблоны и чек-листы — каждую неделю
Подписывайтесь, чтобы не пропустить новые материалы о том, как делать сайты, которые приносят заявки. Без воды — только то, что работает на практике.
* Instagram принадлежит Meta, признанной экстремистской и запрещённой в РФ. Основные точки входа лучше делать в Telegram и VK.