Что положить на сервер рядом с index.html: полный список для боевого лендинга

Вы сверстали страницу и загрузили файл index.html на хостинг — сайт открывается, всё работает. Поздравляем.

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

Всё это решается не переписыванием кода, а правильным набором файлов рядом с основной страницей. Давайте разберём, что именно должно лежать на сервере — и почему каждый элемент этого списка важен.

1. Основные файлы

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

Точки входа

index.html — сердце проекта. Единственный файл, который браузер ищет по умолчанию.
style.css — ваши стили. Всегда выносите их отдельно. Это позволяет браузеру кэшировать дизайн, ускоряя повторную загрузку страницы.
script.js — даже если вы не планируете сложную анимацию, этот файл понадобится для обработки форм, эффектов или масок для ввода телефона.

Директории

Профессиональная структура выглядит так:

/css/ — для основных стилей и сторонних библиотек.
/js/ — для логики и плагинов.
/img/ — для всей графики.
/fonts/ — для шрифтов.

2. SEO и индексация

Вы можете запустить лендинг и без этих файлов, но поисковики вам спасибо не скажут.

robots.txt — простейший текстовый файл, который говорит роботам: «Смотри сюда, а сюда не ходи».
sitemap.xml — рекомендация для будущих расширений сайта.

Пример для корня сайта:


/robots.txt
/sitemap.xml

3. Фавиконка

Забыли про фавиконку? В 2026 году одного файла favicon.ico мало. Сайт должен выглядеть солидно и на вкладке Chrome, и на главном экране iPhone и Android.

Вам нужен «пакет» из трех-четырёх файлов:

favicon.ico — классика для старых браузеров.
favicon.png — стандарт.
favicon.svg — современный, идеально чёткий на любом разрешении.
apple-touch-icon.png — иконка, которая появится, если пользователь сохранит ваш сайт на экран смартфона.


<link rel="icon" type="image/png" href="/favicon.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

4. Open Graph для расшаривания

Если вы скинете ссылку на лендинг в ВК, Telegram или WhatsApp, и там появится просто «голый» текст без картинки — это провал. Доверие к такой ссылке будет низким.

Чтобы ссылка превратилась в красивую карточку, вам нужно:

Прописать метатеги Open Graph в <head> вашего HTML.
Положить в папку /img/ файл og-image.jpg.


<meta property="og:image" content="https://ваш-сайт.ru/img/og-image.jpg">
и 
<meta name="twitter:image" content="https://ваш-сайт.ru/img/og-image.jpg">

5. Файл .htaccess

Если ваш сервер работает на Apache, файл .htaccess — это ваш пульт управления.

Вот минимальный набор директив для сайта:

Редирект с HTTP на HTTPS: чтобы пользователи всегда были в безопасности.
Редирект с WWW на без WWW (и наоборот): чтобы избежать дублирования контента для поисковых систем.
Редирект на страницу 404 ошибки: чтобы перенаправить пользователя на собственную страницу /404.html вместо стандартного сообщения об ошибке.

Пример редиректа в .htaccess:


# Редирект с http на https
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# Редирект с www на без www
RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ https://%1/$1 [L,R=301]

# Обработчики ошибок
ErrorDocument 404 /404.html

6. Обработка форм и ошибок

Форма заявки

Лендинг создаётся ради заявок. Если у вас есть форма обратной связи, одного HTML мало — нужен «почтальон».

send.php — небольшой скрипт, который принимает данные из формы и отправляет их вам на почту или в Telegram.

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

Страница 404 ошибки

404.html — если пользователь опечатается в адресе, он не должен видеть стандартную «страшную» ошибку сервера. Сделайте свою страницу ошибки 404 с кнопкой «Вернуться на главную». Это сохраняет лояльность.

7. Опционально

Если вы собираете данные или используете аналитику, нужны отдельные документы:

Политика конфиденциальности — какие данные собираете и как используете.
Пользовательское соглашение — правила работы сайта и ответственность.
Политика cookies — уведомление об использовании cookies.


/privacy.html
/agreement.html
/cookies.html

Итоговый чек-лист

Вот как должен выглядеть ваш проект перед загрузкой на хостинг:

Категория	Файлы и папки	Зачем это нужно?
Основа	`index.html`, `/css/`, `/js/`	Контент, дизайн и интерактив.
Контент	`/img/`, `/fonts/`	Оптимизированная графика и локально размещённые шрифты для быстрой загрузки.
SEO	`robots.txt`, `sitemap.xml`	Чтобы Google и Яндекс вас любили.
Брендинг	`favicon.svg`, `apple-touch-icon.png`	Чтобы сайт выглядел профессионально везде.
Маркетинг	`og-image.jpg` (в папке /img/)	Для красивых ссылок в соцсетях.
Сервер	`.htaccess`, `404.html`	Перенаправления, избежание дублей, ПФ.
Заявки	`send.php`	Чтобы форма не была просто картинкой.
Документы	`privacy.html`, `agreement.html`, `cookies.html`	Соответствие требованиям рекламы и законодательства.