Как сделать одностраничный сайт в 2026: секции, якоря, SEO

Одностраничный сайт это сайт из одной страницы: все разделы идут сверху вниз одним полотном, а меню не ведёт на другие адреса, а прокручивает к нужной секции. Формат подходит для услуги, события, портфолио и личной страницы, а собрать его с ИИ реально за вечер. Ниже: чем одностраничник отличается от лендинга и многостраничного сайта, из каких секций он состоит, как устроены якоря и плавная прокрутка, что у одной страницы с поиском, готовый промпт и места публикации.

Одностраничник, лендинг и многостраничный сайт: это разные вещи

Три слова часто используют как синонимы, хотя они описывают разное.

• Одностраничник (one-page) это техническое решение: один файл, один адрес, все секции на одном полотне, навигация по якорям.
• Лендинг это назначение страницы: привести человека к одному действию, чаще к заявке. Лендинг почти всегда одностраничный, но одностраничник не обязан быть продающим: это может быть портфолио, программа мероприятия или резюме.
• Многостраничный сайт это несколько адресов: каждая услуга, статья или товар живёт по своему URL, между ними ведёт обычное меню со ссылками.

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

Из каких секций собирается одна страница

Каркас одностраничника почти всегда один и тот же, меняется наполнение. Порядок секций сверху вниз:

1. Первый экран: кто вы, что предлагаете, одна кнопка действия. Человек должен понять суть, не прокручивая.
2. Для кого и какая задача решается: два-три абзаца или список ситуаций.
3. Что входит: услуги, программа, состав, этапы работы.
4. Доказательства: примеры работ, отзывы, факты о вас, логотипы клиентов.
5. Цены или варианты: даже вилка лучше, чем «цена по запросу».
6. Частые вопросы: снимает возражения, которые иначе уйдут в переписку.
7. Контакты и форма: телефон, мессенджер, короткая форма на два поля.

Рабочее правило: одна секция это одна мысль и одно действие. Если секция объясняет сразу две разные вещи, разделите её на две, иначе человек не запомнит ни одну.

Готовую страницу проверяю так: сворачиваю каждую секцию до одного предложения и читаю получившийся список вслух. Если из него непонятно, что вы предлагаете и что делать дальше, красивый дизайн ситуацию не спасёт.

По теме: Как сделать пост на сайте в 2026: запись, новость и статья

Якорная навигация и плавная прокрутка

Меню одностраничника работает на якорях. Каждой секции задаётся id, а пункт меню ссылается на этот id через решётку.

<nav>
  <a href="#about">О нас</a>
  <a href="#prices">Цены</a>
  <a href="#contacts">Контакты</a>
</nav>

<section id="about">…</section>
<section id="prices">…</section>
<section id="contacts">…</section>

Плавность прокрутки включается одной строкой CSS, а scroll-margin-top не даёт липкой шапке закрыть заголовок секции, к которой вы перешли.

html { scroll-behavior: smooth; }
section { scroll-margin-top: 80px; }

Подсветку активного пункта меню при прокрутке проще всего просить у ИИ отдельно и словами «через IntersectionObserver, без библиотек». Кнопка «наверх», прогресс-полоса и появление блоков при прокрутке собираются так же, приёмы собраны в разборе прокрутки сайта.

Что обычно ломается:

• пустая ссылка href="#" вместо якоря: клик просто выбрасывает наверх страницы;
• нет scroll-margin-top, и на телефоне заголовок секции прячется под липкой шапкой;
• восемь пунктов меню на одной странице: для одностраничника достаточно трёх-пяти;
• адрес вида site.ru/#prices работает как обычная ссылка, её удобно давать в переписке и в рекламе, но многие про это забывают.

Когда одной страницы достаточно, а когда нет

Одной страницы хватает, если у вас одна тема и одно целевое действие:

• одна услуга или один продукт;
• событие: мастер-класс, свадьба, конференция, набор в группу;
• портфолио на 5-10 работ;
• личная страница специалиста с контактами;
• проверка идеи: собрать страницу, привести первый трафик, посмотреть на реакцию.

Отдельные адреса нужны, когда контента становится больше одной темы:

• каталог товаров: карточке нужен свой URL, чтобы её можно было прислать и найти;
• блог и статьи;
• несколько разных услуг, каждую из которых ищут отдельно;
• юридические страницы: политика обработки персональных данных, оферта, реквизиты;
• страница благодарности после отправки формы (без неё сложно считать заявки в аналитике).

Ориентир простой: если раздел имеет собственную тему, по которой вас будут искать, ему нужен отдельный адрес. Как делить контент по страницам, подробно расписано в материале про разделы сайта и его структуру.

Что у одностраничника с поиском

Главное ограничение формата: одна страница это один адрес, один title и одно описание. Значит, она может хорошо отвечать на одну тему, а не на десять сразу.

• Поисковые системы ранжируют страницы, а не секции: десять разных тем на одном полотне размывают страницу, и ни одна тема не раскрыта достаточно.
• У якоря #prices нет отдельного адреса, отдельным результатом в выдаче он не станет.
• Плюс формата: все ссылки на вас и всё поведение посетителей собираются на одном URL, а не размазываются по десятку слабых страниц.
• Разметка JSON-LD ставится одна на страницу: Organization или LocalBusiness плюс FAQPage, если есть блок вопросов.
• Скорость важнее обычного: вся страница грузится целиком, поэтому картинки нужно сжимать и ставить им loading="lazy".

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

По теме: Как сделать шапку сайта в 2026: код, адаптив и промпты

Как собрать одностраничник с ИИ и где его опубликовать

Порядок работы: сначала содержание, потом промпт, потом публикация. Если отдать ИИ задачу без своего текста, он придумает общие фразы, и страница получится пустой.

1. Выпишите секции и по две-три фразы содержания в каждую: что предлагаете, кому, за сколько, чем докажете.
2. Отдайте нейросети промпт ниже, подставив своё. Подойдёт любой чат, который умеет отдавать готовый файл, а если хотите править сайт прямо на компьютере, удобнее десктопные приложения ChatGPT с агентом Codex или Claude Code.
3. Сохраните ответ как index.html и откройте двойным кликом в браузере: страница работает без сервера.
4. Проверьте на телефоне или сузьте окно браузера до 320-375 пикселей: горизонтальной прокрутки быть не должно.
5. Правьте итерациями: одна просьба это одна правка («сделай отступы между секциями больше», «замени цвет кнопок на тёмно-синий»).
6. Опубликуйте страницу и подключите домен.

Готовый промпт, который даёт рабочий одностраничник с якорями:

Собери одностраничный сайт для: [кто вы и что предлагаете].
Один файл index.html, стили внутри тега style, без внешних библиотек и шрифтов.
Секции по порядку и у каждой свой id: hero, about, services, works, prices, faq, contacts.
В шапке липкое меню со ссылками-якорями на эти id, на мобильном меню сворачивается в бургер.
Добавь html { scroll-behavior: smooth } и scroll-margin-top: 80px для секций.
Адаптив от 320 пикселей, основной текст не мельче 16 пикселей, кнопка «Оставить заявку» ведёт на #contacts.
Форма: имя и телефон, кнопка отправки, после отправки показывай сообщение «Заявка отправлена».
Текст возьми только из моего списка ниже, ничего не выдумывай:
[ваш текст по секциям]

Где опубликовать одну страницу:

• Cloudflare Pages: бесплатный тариф даёт 500 сборок в месяц, до 20 000 файлов на сайт и до 25 МиБ на файл (лимиты в документации). Для одной страницы это запас на годы.
• GitHub Pages: опубликованный сайт может весить до 1 ГБ, мягкие лимиты составляют 100 ГБ трафика в месяц и 10 сборок в час (документация GitHub).
• Netlify: бесплатный тариф в 2026 году считается кредитами, их 300 в месяц; ближайший платный тариф Personal стоит 9 $ в месяц.
• Тильда: вариант без кода, страница собирается блоками в редакторе. На бесплатном тарифе доступен один сайт, а свой домен и приём заявок с форм работают только на платных (справка Тильды); тариф Personal стоит 500 ₽ в месяц при оплате за год и 750 ₽ при помесячной оплате.

Частые вопросы

Чем одностраничный сайт отличается от лендинга?

Одностраничник это про устройство сайта (одна страница, навигация якорями), лендинг это про цель (получить заявку). Лендинг обычно делают одностраничным, но одна страница может быть и портфолио, и программой мероприятия, где ничего не продают.

Сколько секций делать?

От пяти до восьми. Меньше пяти обычно означает, что вы не ответили на важные вопросы про цену и доказательства. Больше восьми страница становится длинной, и до контактов добираются единицы.

Можно ли потом превратить одностраничник в обычный сайт?

Да, и это нормальный путь развития. Каждая крупная секция становится отдельной страницей со своим адресом, а на одностраничнике остаётся краткий блок со ссылкой «подробнее». Текст переписывать почти не придётся, меняется только навигация.

Нужны ли домен и хостинг, если страница всего одна?

Хостинг нужен всегда, но для одной страницы подойдёт бесплатный статический (Cloudflare Pages, GitHub Pages). Домен формально не обязателен: адрес вида имя.pages.dev работает. Свой домен стоит подключать, когда страницу показывают клиентам.

Индексируются ли якоря как отдельные страницы?

Нет. Часть адреса после решётки поисковые системы не считают отдельной страницей, поэтому в выдаче будет один результат на весь одностраничник. Если разделу нужна своя строка в поиске, выносите его на отдельный URL.