Руководство › Часть IV. Страницы сайта › 12. Клонирование

12. Клонирование страницы

Мы разобрали index.html. Теперь — как из него получается любая другая страница. Принцип один: копируем эталон, меняем уникальные места, оставляем общее.

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

Что меняется, что остаётся

Разложим на три категории.

Что меняется при клонировании

title
meta description
meta og:title
meta og:description
meta og:url
содержимое между header и футером

Что остаётся неизменным

DOCTYPE html
html lang="ru"
meta charset, meta viewport
SSI-инклюд head-links.html
весь блок header
SSI-инклюд footer.html
button id="scrollToTopBtn"
подключение script.js, scroll-top.js

Чего в странице нет вообще

шапки сайта (приходит из partials)
меню (приходит из partials)
футера и реквизитов (из partials)
стилей и фавикона (из partials)
class="active" в ссылках (ставит JS)

Чем меньше меняется — тем меньше шансов ошибиться. У нас меняется только шесть элементов на всю страницу.

Пошаговый процесс

Разберём на примере: делаем services.html.

Шаг 1. Копия эталона

Открываем index.html, сохраняем как services.html. Не переписываем с нуля — берём копию. Все SSI-инклюды, подключение скриптов, кнопка «Наверх» — уже на месте.

Правило: копия, а не «с нуля»

Чем больше общего мы «изобретаем заново», тем больше шансов забыть деталь. Скопировали — оставили общее как есть, поменяли уникальное. Это самый быстрый и безопасный путь.

Шаг 2. Меняем SEO-мета

Находим в head пять строк и меняем их на «услуговые»:

Было (index.html)

<title>Цифровая безопасность – Ефимов Андрей Михайлович</title>
<meta name="description" content="Комплексный аудит, оцифровка регламентов." />
<meta property="og:title" content="Цифровая безопасность" />
<meta property="og:description" content="Комплексный аудит." />
<meta property="og:url" content="https://secserpr.ru/index.html" />

Стало (services.html)

<title>Услуги по безопасности – Ефимов Андрей Михайлович</title>
<meta name="description" content="Экономическая безопасность, 115-ФЗ, СБ, GR." />
<meta property="og:title" content="Услуги по безопасности" />
<meta property="og:description" content="Экономическая безопасность, 115-ФЗ." />
<meta property="og:url" content="https://secserpr.ru/services.html" />

Пять строк. Меняем все пять: и обычные, и og-версии, и og:url. Если забыть og:url — в соцсетях превью будет ссылаться на главную.

Шаг 3. Меняем содержимое между шапкой и футером

Находим блок между закрывающим header и SSI-инклюдом футера. Это три секции на главной. Удаляем их целиком — вставляем своё.

Структура — было

header
  ...главный экран, проблемы, CTA...

footer (SSI)

Структура — стало

header
  section
    h2 Услуги
    p ...
    div class="grid-2"
      div class="card" ...
    div class="cta-block" ...

footer (SSI)

Всё. Остальное не трогаем.

Шаг 4. Проверяем активную ссылку

Тут ничего делать не нужно. Активная ссылка ставится автоматически JavaScript-модулем из script.js. Он смотрит на текущий URL страницы — /services.html — и подсвечивает соответствующую ссылку в меню.

Пример: проверяем, что сработало

Открыли https://secserpr.ru/services.html. В меню сама собой подсветилась зелёной линией ссылка «Услуги». В коде HTML класса active при этом нет — он добавлен JavaScript уже в браузере.

Шаг 5. Добавляем страницу в sitemap.xml

Если страница новая — нужно добавить её в карту сайта. Открываем sitemap.xml и вставляем новый блок:

sitemap.xml

<url>
  <loc>https://secserpr.ru/services.html</loc>
  <lastmod>2026-09-12</lastmod>
  <changefreq>monthly</changefreq>
  <priority>0.9</priority>
</url>

Зачем: поисковые роботы читают sitemap.xml и понимают, какие страницы есть на сайте. Без записи страницу тоже найдут (через ссылки в меню), но медленнее.

Шаг 6. Проверяем страницу

Открываем новую страницу в браузере, нажимаем Ctrl+F5. Проверяем:

Шапка, лого, меню, футер — на месте.
В меню подсвечена правильная ссылка.
Заголовок вкладки — новый.
Содержимое — новое.
Кнопка «Наверх» работает.
На мобильном — бургер работает.

Полный чек-лист клонирования

Чек-лист

[  ] 1. Копия index.html - новая-страница.html
[  ] 2. Заменить title
[  ] 3. Заменить meta description
[  ] 4. Заменить og:title
[  ] 5. Заменить og:description
[  ] 6. Заменить og:url
[  ] 7. Заменить содержимое между header и footer
[  ] 8. Проверить в браузере
[  ] 9. Проверить активную ссылку
[  ] 10. Добавить страницу в sitemap.xml

Что НЕ нужно делать

Есть вещи, которые при клонировании делать не надо. Если их сделать — можно что-то сломать.

Не переписывать header руками. Он собран из двух SSI-инклюдов.
Не прописывать class="active" вручную в ссылках меню. Это делает JavaScript.
Не копировать footer.html в саму страницу. Только SSI.
Не менять пути к /style.css, /script.js. Они абсолютные.
Не забывать про og:url. Самая частая ошибка.

Итог

Клонирование безопасно благодаря SSI: в файле остаётся мало уникального.
Меняются шесть вещей: title, description, три og-тега, содержимое.
Активная ссылка ставится автоматически через JavaScript.
Не забываем про og:url — частая ошибка.
Не забываем добавлять страницу в sitemap.xml.
Чек-лист из 10 пунктов — гарантия, что не забудем ничего важного.

Следующий раздел — services.html. Разберём конкретно эту страницу и её структуру.