
Сайт на чистом HTML-коде собирается за выходные, а потом полгода мстит владельцу за каждую сэкономленную минуту: меняете телефон в подвале — и правите его руками на сорока страницах, забываете про одну, и клиент звонит в никуда. Статика прощает многое, но не прощает беспорядка на старте. Ниже — порядок работ от подготовки контента до публикации и список вещей, которые движок сделал бы сам, а здесь придётся настраивать вручную.
Что нужно сделать до первой строчки кода
Главная ошибка при статике — сесть за редактор раньше, чем на руках есть структура и тексты. В CMS страницу можно добавить в любой момент через админку, и это почти ничего не стоит. В статике каждая новая страница — это новый файл, новые ссылки в меню, новая строка в карте сайта и правка навигации во всех остальных файлах. Чем позже вы придумываете страницу, тем дороже она обходится.
До кода на столе должны лежать четыре вещи: перечень страниц, готовые тексты, актуальные цены и контакты, а также оформленные домен с хостингом. Без них вёрстка превращается в бесконечную переделку под «а давайте ещё вот это добавим».
Список страниц под спрос, а не под фантазию
Структура статического сайта закладывается один раз и меняется болезненно, поэтому её собирают от поискового спроса, а не от вдохновения. Порядок простой: выписать все услуги или группы товаров, для каждой найти, как их ищут люди, объединить близкие формулировки в одну страницу и развести те, что явно отличаются по смыслу.
Практический ориентир: одна страница закрывает одну потребность. «Ремонт стиральных машин» и «ремонт стиральных машин на дому» — почти наверняка одна страница. «Ремонт стиральных машин» и «ремонт холодильников» — точно две. Если сомневаетесь, посмотрите выдачу по обоим запросам: когда там стоят одни и те же сайты с одними и теми же страницами, поисковик считает потребность общей.
Минимальный набор для небольшого коммерческого сайта выглядит так:
- главная — кто вы, что делаете, для кого, чем отличаетесь;
- по странице на каждую услугу или категорию;
- цены или прайс — отдельной страницей, если цифр много;
- о компании с фактами: год начала работы, команда, лицензии, оборудование;
- контакты с адресом, телефоном, картой и реквизитами;
- примеры работ или кейсы;
- политика конфиденциальности и согласие на обработку данных — без них форму на сайте держать нельзя.
Каждая строка этого списка — будущий файл. Пока список не утверждён, папку с проектом лучше не создавать.
Тексты, цены и контакты собирают заранее
Верстать по рыбе «Lorem ipsum» на статике особенно вредно: макет подгоняется под объём, а потом реальный текст в него не влезает и всё едет. Соберите тексты в обычном документе, по одному разделу на страницу, с заголовками первого и второго уровня — эта разметка потом один в один ляжет в HTML.
Отдельно зафиксируйте то, что меняется чаще всего: телефон, адрес, часы работы, реквизиты, цены. На статике эти данные размазаны по всем файлам, и без единого списка вы гарантированно оставите где-нибудь старый номер. Заведите файл вроде data.txt в корне проекта и держите там эталонные значения.
Домен и хостинг: что нужно статике
Статическому сайту не нужны ни база данных, ни PHP — только место, откуда отдаются файлы. Отсюда широкий выбор: обычный виртуальный хостинг, объектное хранилище с раздачей по HTTP, бесплатные площадки для страниц из репозитория. Но у каждого варианта свои ограничения, и их лучше проверить до покупки.
| Вариант размещения | Плюсы | Что проверить до оплаты |
|---|---|---|
| Виртуальный хостинг | Есть .htaccess, можно PHP-обработчик формы, привычная панель | Поддержка HTTP/2, бесплатный сертификат, доступ по FTP или SSH |
| Хостинг страниц из репозитория | Бесплатно, автодеплой из коммита, сертификат из коробки | Как задать редиректы и заголовки, можно ли свой домен |
| Объектное хранилище с CDN | Быстрая отдача, выдерживает нагрузку | Настройка 404, редиректов, кеша, стоимость трафика |
| Свой сервер | Полный контроль над nginx, любые правила | Кто будет обновлять систему и продлевать сертификат |
Домен берите на себя или на компанию, а не на подрядчика — это отдельная частая беда, всплывающая через два года. Сразу включите автопродление и привяжите к домену почту на своём же адресе: info@вашдомен вместо бесплатного ящика заметно повышает доверие в формах и в выдаче.
Структура файлов и адресов: где потом будет больно
Два подхода к именованию: плоские файлы в корне (uslugi-remont.html) и папки с индексным файлом (/uslugi/remont/index.html). Разница кажется косметической ровно до момента, когда сайт вырастает.
Плоские имена дают адреса вида site.ru/uslugi-remont.html. Они работают, но расширение .html в адресе выдаёт технологию, мешает будущему переезду на движок и плохо смотрится в рекламных объявлениях. Папки дают адреса вида site.ru/uslugi/remont/ — такие же, как у любого нормального сайта на CMS. Переехать с них на движок можно вообще без единого редиректа.
site/
├── index.html
├── uslugi/
│ ├── index.html
│ └── remont/
│ └── index.html
├── kontakty/
│ └── index.html
├── css/
│ └── style.css
├── js/
│ └── main.js
├── img/
├── robots.txt
└── sitemap.xml
Правила, которые экономят месяцы: только строчные латинские буквы, слова через дефис, никаких подчёркиваний и транслита вперемешку с английским, никаких пробелов и русских букв в именах файлов. Вложенность не глубже трёх уровней — иначе адреса становятся нечитаемыми, а относительные пути в вёрстке превращаются в цепочки из точек.
Отдельно решите вопрос слеша в конце. Адрес с папкой должен заканчиваться слешем: /uslugi/, а не /uslugi. Оба варианта отдают одну и ту же страницу, а для поисковика это два разных адреса и потенциальный дубль. Лечится редиректом на уровне сервера — об этом ниже.
Базовый каркас страницы
Каждый файл начинается с одинакового блока служебных тегов. В движке его формирует шаблон, здесь придётся следить самому.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ремонт стиральных машин на дому в Твери — выезд за 2 часа</title>
<meta name="description" content="Ремонт стиральных машин на дому в Твери: диагностика бесплатно, гарантия 12 месяцев, выезд мастера в день обращения.">
<link rel="canonical" href="https://site.ru/uslugi/remont/">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
...
</body>
</html>
Что здесь критично. Доктайп в одну строку — без него браузер уходит в режим совместимости и вёрстка ведёт себя непредсказуемо. Кодировка utf-8 первой строкой в head, иначе русский текст покажется кракозябрами. Атрибут lang="ru" — подсказка браузеру и поисковику о языке страницы. Тег viewport — без него мобильный браузер отрисует десктопную версию, уменьшенную до нечитаемости, и никакая адаптивность не сработает.
Заголовок title и описание description уникальны на каждой странице. Скопированный с главной title на всех страницах — самая частая техническая ошибка самодельных сайтов. Держите title в пределах 60 знаков, description — до 160, и включайте в оба главный запрос страницы плюс выгоду или город.
Подробнее об этом — в статье «HTML теги для сайта».
Фавикон удобнее всего делать в SVG с запасным PNG для старых браузеров. Положите его в корень и пропишите в каждом файле.
Разметка заголовков и семантика
Заголовок h1 на странице ровно один, и он про содержимое страницы, а не про название компании. Дальше идут h2 для разделов и h3 для подразделов — без перескоков через уровень. Логотип в шапке заголовком не оформляют: это ссылка с картинкой.
Каркас страницы стройте на семантических тегах — header, nav, main, article, section, aside, footer. Пользы от них две: понятная структура для программ чтения с экрана и заметно более читаемый код, когда через год вы вернётесь к правкам. Тег main на странице один.
Каждой картинке — атрибут alt с описанием того, что на ней. Пустой alt допустим только для декоративных элементов. Каждой ссылке — понятный текст: «смотреть цены на ремонт», а не «подробнее» двадцать раз подряд.
Повторяющиеся блоки без движка
Помогу с продвижением: вывести сайт в топ Яндекса — вывожу сайты в топ Яндекса белыми методами.
Вот главная боль статики. Шапка, меню и подвал одинаковы на всех страницах, но физически лежат в каждом файле. Добавили пункт меню — правьте все файлы. Есть четыре способа не сойти с ума, от простого к серьёзному.
Первый — серверные включения. Если хостинг поддерживает SSI, повторяющийся кусок выносится в отдельный файл и подключается одной строкой. Требуется включить обработку в конфигурации сервера.
<!--#include virtual="/parts/header.html" -->
Второй — минимальный PHP. Файлы получают расширение .php, шапка подключается через include. Формально сайт перестаёт быть чистой статикой, но остаётся таким же простым.
<?php include $_SERVER['DOCUMENT_ROOT'].'/parts/header.php'; ?>
Третий — сборщик на своей машине. Вы пишете исходники с включениями, сборщик склеивает их в готовые HTML-файлы, на сервер уезжает чистая статика. Подходят простые препроцессоры HTML или связка шаблонизатора с задачами сборки.
Четвёртый — генератор статических сайтов. Это разумный вариант, если страниц больше десятка. Вы описываете шаблон один раз, контент пишете в размеченных текстовых файлах, генератор собирает готовые страницы, карту сайта и списки. Порог входа выше, но правка меню занимает одну минуту вместо часа.
Совсем без инструментов остаётся вариант «скопировать и заменить во всех файлах» через поиск-замену в редакторе кода. Работает на пяти страницах, разваливается на пятнадцати.
Стили и скорость
У статики есть врождённое преимущество в скорости, и его легко потерять. Правила простые.
- Один файл стилей на весь сайт вместо десятка. Браузер закеширует его после первой страницы, и остальные откроются мгновенно.
- Стили подключаются в
head, скрипты — перед закрывающимbodyили с атрибутомdefer. - Никаких тяжёлых библиотек ради одного слайдера. Современный CSS умеет и сетки, и плавную прокрутку, и аккордеон через
details. - Шрифты — не больше двух начертаний, с
font-display: swap, чтобы текст показывался до загрузки шрифта. - Готовые файлы минифицируйте: пробелы и комментарии в CSS дают лишние килобайты.
- Включите на сервере сжатие gzip или brotli и заголовки кеширования для статики — это одна настройка, а эффект больше, чем от недели оптимизации кода.
Изображения: половина веса страницы
Картинки почти всегда дают основной вес. Три шага, которые нужно сделать руками, потому что плагина, который сделает это за вас, здесь нет.
Первый — привести к нужному размеру. Фотография с телефона шириной 4000 пикселей в блоке шириной 600 пикселей — это мегабайты впустую. Уменьшайте до реального размера отображения, максимум с двукратным запасом для экранов высокой плотности.
Второй — сжать и перевести в современный формат. WebP даёт примерно вдвое меньший вес при том же качестве, AVIF — ещё меньше. Подстраховаться можно через тег picture.
<picture>
<source srcset="/img/master.avif" type="image/avif">
<source srcset="/img/master.webp" type="image/webp">
<img src="/img/master.jpg" alt="Мастер ремонтирует стиральную машину"
width="600" height="400" loading="lazy">
</picture>
Третий — отложенная загрузка и явные размеры. Атрибут loading="lazy" откладывает картинки за пределами экрана, а width и height резервируют место, чтобы страница не прыгала при загрузке. Первое изображение на экране лениво грузить не нужно — ему, наоборот, полезен fetchpriority="high".

Мобильная версия: не опция, а обязательство
Поисковики оценивают сайт по мобильной версии, и больше половины визитов малого бизнеса приходит с телефонов. Адаптивность на статике делается так же, как везде: viewport в шапке, гибкие сетки на flex или grid, относительные единицы, медиазапросы для перестройки блоков.
Тему разбирал отдельно: «Создание сайта на WordPress».
Проверять нужно на реальном телефоне, а не только в режиме эмуляции браузера. Что смотреть:
- нет горизонтальной прокрутки — самый частый дефект, обычно из-за широкой таблицы или картинки без
max-width: 100%; - текст читается без масштабирования, основной кегль от 16 пикселей;
- кнопки и ссылки не меньше 44 пикселей по высоте, между ними есть зазор;
- телефон оформлен ссылкой
tel:и звонит по нажатию; - формы вызывают правильную клавиатуру:
type="tel"для телефона,type="email"для почты; - меню открывается и закрывается, не перекрывая контент навсегда;
- широкие таблицы обёрнуты в блок с горизонтальной прокруткой.
Техническая обвязка: что движок дал бы сам
Вот список того, что в любой CMS появляется автоматически или в два клика, а на статике делается руками. Пропустить любой пункт — значит потерять часть поискового трафика.
| Элемент | В CMS | На статике |
|---|---|---|
| Карта сайта sitemap.xml | Плагин генерирует и обновляет сам | Пишете руками или генерируете скриптом при каждой правке |
| robots.txt | Создаётся из коробки | Кладёте в корень сами |
| Канонический адрес | Проставляется шаблоном | Прописываете в каждом файле |
| Страница 404 | Есть в теме | Верстаете и подключаете через конфиг сервера |
| Редиректы 301 | Плагин с интерфейсом | Правила в .htaccess или nginx |
| ЧПУ-адреса | Настройка в админке | Задаются структурой папок |
| Микроразметка | Плагин или тема | JSON-LD вставляете вручную |
| Обработка форм | Готовый модуль | Сторонний сервис или свой скрипт |
| Открытые графы для соцсетей | Плагин | Теги og в каждом файле |
| Резервные копии | Панель хостинга или плагин | Репозиторий и ручные архивы |
Разберём то, что чаще всего забывают.
robots.txt кладётся в корень и в минимальном виде состоит из трёх строк:
User-agent: *
Allow: /
Sitemap: https://site.ru/sitemap.xml
sitemap.xml перечисляет все страницы с адресами и датами изменения. На двадцати страницах его реально вести руками, дальше нужен скрипт, который обходит папку и собирает файл. Не забывайте обновлять карту при добавлении страницы — иначе новая страница попадёт в индекс с задержкой.
Канонический адрес нужен, чтобы поисковик не считал /uslugi/, /uslugi/index.html и /uslugi тремя разными страницами. Прописывайте link rel="canonical" с полным адресом в каждом файле.
Страница 404 должна отдавать корректный код ответа, а не редиректить на главную. На Apache подключается одной строкой в .htaccess. Сделайте на ней меню и ссылку на главную, чтобы посетитель не ушёл.
Редиректы и https — минимальный набор правил, закрывающий склейку зеркал и дубли:
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]
RewriteCond %{HTTP_HOST} ^www\.site\.ru$ [NC]
RewriteRule ^(.*)$ https://site.ru/$1 [R=301,L]
ErrorDocument 404 /404.html
Сертификат берите бесплатный от Let’s Encrypt — он есть в панели почти любого хостинга. Проверьте, что автопродление включено: просроченный сертификат закрывает сайт предупреждением браузера.
Микроразметка организации и хлебных крошек
Разметка помогает поисковику понять, кто вы, и подтягивает в выдачу адрес, телефон и рейтинг. На статике удобнее всего формат JSON-LD — это отдельный блок скрипта, который не трогает вёрстку. Блок организации ставится один раз на главной, хлебные крошки — на каждой внутренней странице.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "Мастерская Ремонт+",
"telephone": "+7 900 000-00-00",
"url": "https://site.ru/",
"address": {
"@type": "PostalAddress",
"addressLocality": "Тверь",
"streetAddress": "ул. Советская, 10"
}
}
</script>
Хлебные крошки размечаются типом BreadcrumbList и дублируются видимой цепочкой ссылок в вёрстке. Готовую разметку прогоняйте через валидаторы структурированных данных — ошибка в одной запятой отключает весь блок.
Формы на статике: куда падают заявки
Если нужна помощь по теме — создание сайтов.
HTML умеет нарисовать форму, но не умеет её отправить: нужен код на стороне сервера. Вариантов четыре, и выбор зависит от того, что позволяет хостинг.
| Решение | Как работает | Плюсы | Минусы |
|---|---|---|---|
| Сторонний сервис форм | Атрибут action указывает на адрес сервиса, письма приходят на почту | Настройка за 10 минут, не нужен PHP | Лимиты на бесплатном тарифе, данные уходят третьей стороне |
| Свой PHP-обработчик | Скрипт на хостинге принимает данные и шлёт письмо | Полный контроль, нет лимитов | Нужен хостинг с PHP, надо самому защищать от спама |
| Бессерверная функция | Форма шлёт запрос в облачную функцию | Работает на любом статичном хостинге | Требует навыков, зависимость от платформы |
| Отправка в мессенджер | Скрипт передаёт заявку боту в мессенджере | Уведомление мгновенно на телефон | Нет истории в удобном виде, ключ бота надо прятать |
Что бы вы ни выбрали, обязательны четыре вещи. Первая — защита от спама: скрытое поле-ловушка, которое человек не заполняет, а робот заполняет, плюс капча при потоке мусора. Вторая — чекбокс согласия на обработку персональных данных со ссылкой на политику, без него форма нарушает закон. Третья — страница или сообщение «спасибо» после отправки, иначе посетитель отправит заявку трижды. Четвёртая — дублирование заявок минимум в два места: почта плюс мессенджер, потому что письма теряются в спаме.
Простейшая ловушка для роботов выглядит так: поле скрыто стилями, а обработчик отбрасывает запрос, если оно не пустое.
Смежный материал по теме — «Исправить ошибки в html коде».
<input type="text" name="website" tabindex="-1" autocomplete="off"
style="position:absolute;left:-9999px">
И проверьте отправку с реального телефона на реальную почту до запуска. Форма, которая молча ничего не делает, — самая дорогая ошибка на сайте.
Аналитика и цели
Счётчик ставится вставкой кода в каждый файл — ещё один аргумент за шаблонизатор или генератор. Код Метрики размещают в head или перед закрывающим body, код аналитики — по инструкции сервиса. Обязательно включите вебвизор и карту кликов: на статике других источников данных о поведении у вас нет.
Дальше настраиваются цели, иначе счётчик покажет только визиты. Без движка удобнее всего вешать отправку цели прямо на события формы и кнопок:
document.querySelector('#zayavka').addEventListener('submit', function () {
if (typeof ym === 'function') {
ym(00000000, 'reachGoal', 'form_send');
}
});
document.querySelectorAll('a[href^="tel:"]').forEach(function (el) {
el.addEventListener('click', function () {
if (typeof ym === 'function') {
ym(00000000, 'reachGoal', 'phone_click');
}
});
});
Минимальный набор целей для коммерческого сайта: отправка формы, клик по телефону, клик по мессенджеру, переход на страницу «спасибо». Проверьте каждую в отчёте по целям через полчаса после установки — считается только то, что вы видели своими глазами.
Заодно подтвердите права на сайт в панелях вебмастеров и загрузите туда карту сайта. Именно оттуда придут первые сигналы об ошибках индексации.
Публикация и обновление
Самый простой путь — залить файлы по FTP через файловый менеджер. Он же самый опасный: файлы легко перезаписать не той версией, а истории изменений нет. Как только правок становится больше пары в месяц, переходите на репозиторий.
Рабочая схема выглядит так: исходники лежат в git, каждая правка — отдельный коммит с понятным описанием, отправка в удалённый репозиторий автоматически выкладывает файлы на сервер. Настройка занимает вечер и окупается первым же откатом неудачной правки.
| Этап | Что сделать | Чем проверить |
|---|---|---|
| Подготовка | Список страниц, тексты, цены, контакты | Каждой странице соответствует свой текст и запрос |
| Структура | Папки, имена файлов, схема адресов | Все адреса строчными, через дефис, со слешем в конце |
| Каркас | Доктайп, кодировка, viewport, уникальные title и description | Валидатор HTML, ручной обход всех файлов |
| Шаблоны | Шапка, меню, подвал вынесены в общие части | Правка телефона в одном месте меняет весь сайт |
| Скорость | Сжатые картинки, один CSS, отложенные скрипты | Тест скорости, вкладка «Сеть» в браузере |
| Мобильная версия | Медиазапросы, размеры кнопок | Реальный телефон, тест на удобство для мобильных |
| Обвязка | robots, sitemap, canonical, 404, редиректы, https | Проверка кодов ответа, панель вебмастера |
| Формы | Обработчик, ловушка от спама, согласие, «спасибо» | Тестовая заявка с телефона на рабочую почту |
| Аналитика | Счётчик на всех страницах, цели на форму и телефон | Отчёт по целям в реальном времени |
| Публикация | Заливка, проверка живого сайта, резервная копия | Обход всех адресов вручную после выкладки |
Резервные копии делайте до каждой заметной правки. Для статики это просто архив папки с датой в имени — тридцать секунд работы, которые однажды спасут вечер.
Когда страниц станет много
Статика комфортна примерно до тридцати страниц. Дальше начинается арифметика: добавление раздела в меню требует пересборки всех файлов, карта сайта устаревает, а типовые страницы вроде карточек услуг плодятся копированием.
Признаки, что пора переезжать: правка сквозного блока занимает больше десяти минут; вы боитесь трогать сайт, чтобы ничего не сломать; нужны новости или блог с лентой и рубриками; за контент отвечает человек, который не умеет верстать.
Куда переезжать — два пути. Первый: на генератор статических сайтов, если устраивает скорость и не нужна админка. Второй: на полноценную CMS, если контент будут вести люди без технических навыков.
Главное правило переезда — сохранить адреса. Если структура сразу была сделана папками, новые адреса совпадут со старыми и трогать ничего не придётся. Если адреса всё-таки меняются, порядок такой: выгрузить список всех текущих адресов, составить таблицу соответствия «старый адрес — новый адрес», прописать постраничные 301-редиректы, проверить каждый переход кодом ответа, отправить обновлённую карту сайта в панели вебмастеров и месяц следить за отчётом об ошибках сканирования. Массовый редирект всего подряд на главную — верный способ потерять позиции.
Чек-лист перед запуском
| Пункт | Что именно проверить | Готово |
|---|---|---|
| Уникальные title | Ни один заголовок не повторяется на двух страницах | |
| Описания | description заполнен на всех страницах, до 160 знаков | |
| Один h1 | На каждой странице ровно один заголовок первого уровня | |
| Атрибуты alt | Все смысловые картинки описаны | |
| Битые ссылки | Ни одна внутренняя ссылка не ведёт в 404 | |
| https | Сертификат работает, весь http уходит редиректом | |
| Зеркала | Версия с www склеена с основной | |
| Страница 404 | Отдаёт код 404, имеет меню и ссылку на главную | |
| robots и sitemap | Лежат в корне, карта содержит все страницы | |
| Канонические адреса | Прописаны, ведут на самих себя | |
| Формы | Тестовая заявка дошла, согласие и «спасибо» на месте | |
| Счётчики | Стоят на всех страницах, цели срабатывают | |
| Мобильная версия | Нет горизонтальной прокрутки, кнопки нажимаются пальцем | |
| Скорость | Картинки сжаты, стили и скрипты минифицированы | |
| Контакты | Телефон, адрес и почта одинаковы на всех страницах | |
| Резервная копия | Архив сайта сохранён отдельно от хостинга |
Частые вопросы
Обязательно ли расширение .html в адресе? Нет. Если раскладывать страницы по папкам с файлом index.html внутри, адреса будут вида /uslugi/remont/ — без расширения и без разницы с сайтом на движке. Это же упростит будущий переезд.
Можно ли обойтись вообще без JavaScript? Почти да. Меню, аккордеоны и модальные окна собираются на чистом CSS, а отправку формы берёт на себя сервис или серверный скрипт. Скрипты понадобятся для счётчиков и отправки целей — это несколько строк, а не библиотека.
Как поисковики относятся к статическим сайтам? Так же, как к любым другим: их интересует содержимое, скорость и удобство, а не технология. Статика даже в плюсе по скорости. Проседает она только там, где владелец забыл сделать руками карту сайта, канонические адреса или страницу 404.
Что делать, если нужно быстро поменять цену на всех страницах? Если блоки вынесены в общие части через включения или генератор — правите один файл. Если нет, остаётся поиск с заменой по всей папке в редакторе кода. Второй вариант работает, но перед ним обязательно сделайте копию.
Нужен ли блог на статическом сайте? Полезен, но именно блог быстрее всего выводит статику из зоны комфорта: лента, рубрики, теги и постраничная навигация вручную не поддерживаются. Если планируете писать регулярно, сразу берите генератор статических сайтов или движок.
О границе между оптимизацией и нарушением:
Коротко
- Структуру, тексты, цены и контакты готовят до вёрстки — на статике поздняя правка структуры стоит дороже всего.
- Раскладывайте страницы по папкам с
index.html: получите нормальные адреса и безболезненный переезд в будущем. - Сквозные блоки выносите в общие части через включения, сборщик или генератор, иначе правка меню превратится в ручной обход всех файлов.
- Всё, что CMS делает сама — sitemap, robots, canonical, 404, редиректы, микроразметку, — здесь настраивается руками и пропускать эти пункты нельзя.
- До запуска обязательны рабочая форма с уведомлением, счётчик с целями, проверка на реальном телефоне и резервная копия.
Проверить сайт перед запуском помогу на SEO-консультации.
Увеличьте позиции и продажи вашего сайта
Профессиональное SEO-продвижение с гарантией результата. Выберите подходящую услугу:
Остались вопросы по продвижению?
Меня зовут Анатолий Кузнецов, я SEO-оптимизатор с 20-летним стажем. Разберу ваш сайт, отвечу на вопросы и подскажу, что улучшить для роста позиций в Яндексе и Google.
Связаться со мной →
Комментарии
Сергей
Сделал восемь страниц плоскими файлами с расширением html. Теперь читаю про папки и понимаю, что зря. Насколько больно это переделывать сейчас?
Анатолий Кузнецов автор
На восьми страницах это работа на пару часов, дальше будет только дороже. Разложите файлы по папкам, поправьте внутренние ссылки и обязательно пропишите постраничные 301-редиректы со старых адресов на новые. Если сайт уже в индексе, не забудьте обновить карту сайта и канонические адреса. Через неделю проверьте в панели вебмастера, что старые адреса отдают 301, а не 404.
Марина
Спасибо за пункт про ловушку от спама. Поставила скрытое поле, и поток мусорных заявок почти прекратился без всякой капчи.
Дмитрий
Хостинг у меня без PHP, страницы отдаются из хранилища. Как в такой ситуации сделать 301-редиректы и страницу 404?
Анатолий Кузнецов автор
В объектных хранилищах обычно есть настройка документа ошибки и правил перенаправления в свойствах бакета или в CDN перед ним. Посмотрите раздел с настройками веб-сайта у провайдера, там задаётся индексный файл и файл ошибки. Если правил редиректов нет вовсе, придётся ставить перед хранилищем прокси или переезжать на хостинг, где .htaccess доступен. Держать сайт без возможности сделать 301 рискованно: любой переезд адресов обернётся потерей позиций.
Игорь
Подтверждаю про viewport. Забыл этот тег на трёх страницах, месяц не мог понять, почему именно они плохо себя ведут на телефоне.
Ольга
Правильно ли я поняла, что канонический адрес нужно писать даже когда никаких дублей нет? Кажется лишней работой на каждой странице.
Анатолий Кузнецов автор
Дубли появляются сами, без вашего участия: адрес со слешем и без, с index.html на конце, с рекламными метками в параметрах. Канонический адрес заранее говорит поисковику, какая версия основная, и снимает вопрос. Это одна строка в шапке, а при шаблонизаторе она вообще подставляется автоматически. Пишите полный адрес с протоколом и доменом, относительный тут не годится.
Алексей
Перешёл со сборщика на генератор статических сайтов после пятнадцатой страницы. Правка меню теперь минута вместо получаса, жалею только что не сделал сразу.
Наталья
Форму отправляю через сторонний сервис. Заявки приходят, но в аналитике целей ноль. Что я могла упустить?
Анатолий Кузнецов автор
Скорее всего, сервис уводит посетителя на свою страницу подтверждения, и цель на вашем сайте просто не успевает сработать. Настройте в сервисе возврат на вашу страницу «спасибо» и вешайте цель на её просмотр. Либо отправляйте форму без перезагрузки и вызывайте цель в момент успешного ответа. И проверьте, что счётчик стоит на самой странице с формой, а не только на главной.
Владимир
Совет про файл с эталонными контактами в корне проекта простой, но рабочий. У меня три года по сайту гулял старый номер офиса.
Екатерина
Картинки сжала в WebP, вес упал вдвое, а вот тест скорости всё равно ругается на сдвиг макета. С чем это связано?
Анатолий Кузнецов автор
Сдвиг макета обычно возникает, когда у картинок не заданы атрибуты width и height. Браузер не знает высоту блока и рисует контент, а после загрузки изображения всё подпрыгивает. Пропишите реальные размеры каждому изображению и добавьте шрифтам font-display со значением swap. Ещё частая причина — блоки, которые подгружаются скриптом и раздвигают страницу уже после отрисовки.
Павел
Держу карту сайта руками на двенадцати страницах, обновляю раз в месяц. Пока никаких проблем, скрипт даже не понадобился.
Юлия
Планирую блог на статике. По чек-листу вижу, что это спорная идея, но очень не хочется ставить движок ради десяти статей в год.
Роман
Заливал по FTP, пока однажды не перезаписал свежую версию старой папкой. Настроил выкладку из репозитория за вечер, теперь любой откат делается одной командой.