Клиент опечатался в ссылке и прислал скрин серой «404: NOT_FOUND» – стыдно кидать такой сайт дальше. Кажется, что своя 404 = только .htaccess, Nginx и настройки «для программистов», и страшно что-то сломать. За вечер в Cursor вы соберёте 404.html в стиле лендинга, проверите двойным кликом и выложите через Vercel Drop: результат – кривой URL показывает кнопку «На главную», а не чужую заглушку.
Своя страница ошибки 404 – обычный файл 404.html рядом с index.html: понятный текст, большая кнопка на главную и 3–4 ссылки на услуги или контакты. На Vercel и GitHub Pages достаточно положить файл в корень – без vercel.json и серверной магии. Правило .cursor/rules/404.mdc с alwaysApply: true не даёт Agentу утащить React и npm. Проверка успеха: открыть /test-404-xyz и увидеть свою вёрстку, а не серый экран.
История Игоря типична: лендинг на Vercel Drop, ссылка ушла в WhatsApp, клиент прислал скрин чужой ошибки. Он полез гуглить ErrorDocument, испугался «сломать сервер» и отложил. На практике сервер не трогают: платформа сама подхватывает 404.html из корня. По Яндекс Вордстат на июль 2026 запрос «страница 404» – около 2576 показов в месяц.
Яндекс и Google расходятся в советах по дизайну заглушки. Новичку важнее не делать soft 404 (текст ошибки при статусе 200) и не гонять всех авто-редиректом на главную. На статике Vercel проще доверить статус платформе: в community на GitHub из-за лишнего vercel.json часто получают 200 вместо настоящей 404.
Поймите задачу: что посетитель должен увидеть за 5 секунд
Боль простая: человек попал не туда и готов закрыть вкладку. Хорошая 404 за 3–5 секунд объясняет, что страницы нет, и даёт выход. Не делайте холодный «Error Not Found» без кнопок – это усиливает ощущение поломки.
- короткий заголовок на русском («Такой страницы нет» или «Кажется, ссылка устарела»);
- одно-два предложения, почему так бывает;
- большая кнопка «На главную»;
- 3–4 ссылки на услуги, цены, отзывы или контакты;
- по желанию кнопка в Telegram или WhatsApp.
Копируйте шапку, цвета и футер с index.html. Избегайте таймера «через 5 секунд уйдёте на главную» – человек не успевает кликнуть нужный раздел.
| Критерий | Серая 404 хостинга | Свой 404.html | Авто-редирект на главную |
|---|---|---|---|
| Понятно ли, что случилось | Нет, пугает | Да, за 5 секунд | Нет, «прыжок» без объяснения |
| Куда кликнуть дальше | Никуда | Главная + разделы + мессенджер | Только главная |
| Нужен серверный конфиг | Это дефолт хостинга | Нет на Vercel/GitHub Pages | Часто да, и ломает SEO |
| Риск soft 404 | Низкий | Низкий, если не трогать routes | Высокий / вред для поиска |
Итоговый вердикт: Для лендинга на статике берите свой 404.html с кнопкой и ссылками. Серую заглушку не оставляйте «на потом»; авто-редирект всех ошибок на главную не используйте.
Зафиксируйте правило 404.mdc, чтобы Cursor не утащил React
Типичная ошибка после лендинга: попросить «сделай красивую 404», и Agent притащит Next.js, not-found.tsx и package.json. Решение – project rule в формате .mdc (обычный .md Cursor игнорирует).
Откройте папку с index.html. Если лендинга ещё нет – сначала соберите простой index, потом 404. Создайте .cursor/rules/404.mdc с alwaysApply: true.
Текст правила 404.mdc:
—
description: Custom 404 page – one static HTML file only
alwaysApply: true
—
Создавай только один файл 404.html в корне проекта.
Стили – как у index.html (Tailwind CDN или тот же CSS). Скопируй шапку, футер и цвета с index.html.
Запрещено: npm, React, Next.js, not-found.tsx, package.json, терминал, vercel.json с ручными routes.
Контент: человеческий заголовок на русском, короткое объяснение, большая кнопка «На главную», 3–4 ссылки на разделы, опционально Telegram/WhatsApp. Адаптив под телефон.
Правило сначала, промпт потом. Tailwind CDN – одна строка в head, без установки программ.
Соберите 404.html фразами в Agent, не руками в коде
Откройте Agent (Ctrl+I / Cmd+I) и дайте задачу на русском. Не копируйте чужой HTML с галерей – попросите повторить стиль index.html.
Промпт для Agent:
Сделай 404.html в стиле моего index.html. Заголовок человеческий (не Error Not Found), короткое объяснение, большая кнопка «На главную», 3–4 ссылки на услуги/цены/контакты, кнопка в Telegram или WhatsApp. Адаптив под телефон. Один HTML-файл. Без npm, React и package.json.
- Шаг 1: В корне есть index.html и правило 404.mdc с alwaysApply: true.
- Шаг 2: Вставьте промпт в Agent и дождитесь 404.html (имя строго lowercase).
- Шаг 3: Откройте файл двойным кликом и проверьте текст, кнопку и ссылки.
- Шаг 4: Правьте фразами: «крупнее кнопка», «добавь ссылку на отзывы» – не теги вручную.
- Шаг 5: Сузьте окно до ширины телефона: текст читается, кнопки кликаются.
- Шаг 6: Рядом лежат index.html и 404.html – без package.json.
- Шаг 7: Перетащите папку на vercel.com/drop, Deploy, скопируйте https-URL.
- Шаг 8: Откройте https://ваш-домен/test-404-xyz – ваша страница, не серая заглушка.
Схема workflow:
Папка с index.html → правило 404.mdc → промпт в Agent → 404.html → двойной клик → Vercel Drop → проверка /test-404-xyz
Например, если Agent создал not-found.tsx – остановите его, напомните правило и попросите удалить лишнее. В реальном проекте после чёткого 404.mdc обычно остаётся один HTML.
Не сломайте поиск: soft 404 и авто-редирект
Soft 404 – страница выглядит как «не найдено», но сервер отвечает кодом 200. Поиск путается. Google Search Central: кастомная 404 должна отдавать настоящий статус 404.
Что делать новичку:
- не настраивайте вручную vercel.json с хитрыми routes;
- не делайте мгновенный редирект всех битых URL на главную;
- положите 404.html в корень и дайте Vercel отдать его сам.
Часто ломается усложнение: в discussion vercel/vercel #5006 люди получали 200 вместо 404 из-за continue: true в routes. Для статики достаточно файла в корне. ErrorDocument на Apache – после переезда с Drop, не в первый вечер.
Опубликуйте папку через Vercel Drop и проверьте кривой URL
Vercel Drop – публикация без Git и CLI: перетащили папку, получили ссылку. После Deploy откройте /test-404-xyz и проверьте, что платформа отдала ваш файл.
Чеклист «работает / не работает»:
- видна ваша вёрстка, а не серый экран Vercel;
- кнопка «На главную» ведёт на index;
- ссылки на услуги и контакты открываются;
- на телефоне ничего не обрезано;
- нет таймера авто-редиректа.
Альтернатива – GitHub Pages с тем же 404.html в корне. Drop для старта проще. Если лендинг сырой: лендинг в Cursor без кода, страница услуг, позже robots.txt и sitemap.
Как понять, что всё получилось, и что делать дальше
Критерий успеха: в корне 404.html в стиле index.html; файл открывается двойным кликом; после Drop /test-404-xyz показывает вашу страницу с кнопкой «На главную» и рабочими ссылками; на телефоне всё кликается. Получите рабочий результат без серверного конфига – сможете отправить клиенту ссылку без стыда за серую заглушку.
- Пройдите чеклист на телефоне и на компьютере.
- Подгоните тон текстов под бренд – одной фразой в Agent.
- Добавьте в 404 ссылку на главный оффер (запись, прайс, портфолио).
- Выберите следующий шаг: услуги, отзывы или robots/sitemap – когда 404 уже живёт.
- Если хотите связать сайт и сценарии без кода глубже – курс Make.com и вайбкодинга; разборы в Telegram «Ковчег».
Материал проверен: Артур Хорошев (CEO Maya AI, курс Make.com и вайбкодинга).
Опора на источники: Vercel KB Custom 404 (2026-06-29), Vercel Drop docs, GitHub Docs (Pages 404), Google Search Central (HTTP/soft 404), Cursor Docs (Rules .mdc); community 200 vs 404 – vercel/vercel #5006; Wordstat «страница 404» 2576 – 2026-07-09.
Частые вопросы
Как сделать страницу 404 без настройки сервера?
Соберите один 404.html в корне через Cursor Agent, положите рядом с index.html и выложите папку на Vercel Drop или GitHub Pages. Платформы сами показывают 404.html на несуществующих URL. Не начинайте с .htaccess, если сайт статический.
Сделать 404 страницу в Cursor – с чего начать?
Откройте папку с лендингом, создайте .cursor/rules/404.mdc с alwaysApply: true (один HTML, без npm/React), затем дайте Agentу промпт «сделай 404.html в стиле index.html с кнопкой На главную». Проверьте двойным кликом и публикуйте через Drop.
Почему страница 404 появляется у посетителя?
Обычно это опечатка в ссылке, старый URL из переписки, удалённый раздел или битая кнопка в меню. Ваша задача – не пугать серым экраном, а за 5 секунд дать выход на главную и важные разделы.
Нужна ли кнопка «На главную» на странице ошибки 404?
Да, это обязательный минимум. Добавьте ещё 3–4 ссылки на услуги, цены или контакты и по желанию кнопку в мессенджер. Без выхода человек чаще закрывает вкладку.
Чем soft 404 отличается от настоящей ошибки?
Настоящая 404 говорит: страницы нет. Soft 404 показывает текст «не найдено», но отвечает статусом 200 – это путает индексацию. На Vercel для статики не усложняйте routes: положите 404.html и не подменяйте ошибку редиректом на главную.
Что делать, если хостинг просит ErrorDocument?
Это подсказка Apache, какой файл показать при ошибке. На Vercel Drop в первый вечер она не нужна. На классическом хостинге укажите путь к вашему 404.html – сам файл уже готов.
Как проверить страницу 404 после публикации?
Откройте адрес вида https://ваш-сайт/test-404-xyz. Должна открыться ваша вёрстка с кнопкой «На главную». Затем кликните ссылки разделов и повторите проверку в узком окне телефона.
