Руководство › Часть IV. Страницы сайта › 18. privacy.html

18. `privacy.html` — политика конфиденциальности

Юридическая страница. По скелету — как у эталона: partials, SSI-инклюды, кнопка «Наверх», два скрипта. Внутри — минимальный набор элементов: h2, два абзаца .text-block и выноска .highlight-box.

Что нового в техническом плане

Два технических наблюдения. Первое: страница не содержит <meta name="robots" content="noindex"> — в отличие от 404.html, где этот тег есть. Второе: внутри выноски один абзац без strong — в отличие от about.html и offer.html, где внутри .highlight-box всегда была выделенная метка.

Уникальные мета

privacy.html — уникальные мета

<title>Политика конфиденциальности – Ефимов Андрей Михайлович</title>
<meta name="description" content="Политика обработки персональных данных в соответствии с 152-ФЗ." />

<meta property="og:title" content="Политика конфиденциальности – Ефимов Андрей Михайлович" />
<meta property="og:description" content="Политика обработки персональных данных в соответствии с 152-ФЗ." />
<meta property="og:url" content="https://secserpr.ru/privacy.html" />

Технические детали:

title и og:title совпадают полностью.
description и og:description тоже совпадают.
og:url — https://secserpr.ru/privacy.html.

Чего нет: meta robots

На этой странице отсутствует тег <meta name="robots" content="noindex">.

Сравнение с 404.html

privacy.html                         404.html
------------                         ---------
meta robots: НЕТ                     meta robots: noindex

страница индексируется              страница НЕ индексируется
поисковиками                         поисковиками

Технически: обе страницы «служебные», но правила у них разные. 404.html закрыта от индексации — иначе поисковики добавляли бы в базу тысячи копий страницы ошибки. privacy.html открыта для индексации — это полноценная страница с юридической информацией.

Внимание: это не «ошибка забыть noindex»

Отсутствие noindex на privacy.html — осознанное решение. Страница политики должна быть доступна поисковикам: пользователь может искать «политика обработки данных secserpr» и найти её из выдачи. Если закрыть noindex, страница «выпадет» из поиска, но ссылка в футере останется рабочей.

Скелет страницы

Между header и footer — одна секция. Внутри — четыре элемента: заголовок, два абзаца, выноска.

privacy.html — скелет

<body>
<div class="container">

  <header class="header">
    SSI: header.html
    SSI: nav.html
  </header>

  <section>
    h2 Политика конфиденциальности (152-ФЗ)
    p.text-block (абзац 1)
    p.text-block (абзац 2)
    div.highlight-box
      p
  </section>

  SSI: footer.html

</div>

button#scrollToTopBtn
script.js
scroll-top.js
</body>

Разметка секции целиком

Компактная структура — самый короткий «содержательный» блок сайта после 404.html.

privacy.html — секция

<section>
  <h2>Политика конфиденциальности (152-ФЗ)</h2>

  <p class="text-block">
    Настоящий сайт носит информационный характер. Мы не собираем,
    не обрабатываем и не храним персональные данные...
  </p>

  <p class="text-block">
    Для заключения договора и взаимодействия с исполнителем
    предоставление персональных данных осуществляется
    на добровольной основе...
  </p>

  <div class="highlight-box">
    <p>Если у вас есть вопросы по обработке данных,
    свяжитесь со мной по указанным контактам.</p>
  </div>
</section>

Идём по элементам.

Заголовок `h2`

h2 без класса. Стили из правила для тега — синяя полоса слева, отступы. Внутри — «(152-ФЗ)» в скобках, обычный текст, не отдельный тег.

Два абзаца `.text-block`

Два <p class="text-block"> подряд. Класс даёт красную строку и выравнивание по ширине — «книжный» вид. Тот же приём, что на about.html, но там абзац был один.

Обратите внимание: внутри абзацев нет тегов strong. На about.html первый абзац начинался с <strong>Один эксперт — целый департамент.</strong>. Здесь — чистый текст без выделений. Стиль юридического документа: ровный, без акцентов.

Выноска `.highlight-box`

privacy.html — выноска

<div class="highlight-box">
  <p>Если у вас есть вопросы по обработке данных,
  свяжитесь со мной по указанным контактам.</p>
</div>

Тот же компонент, что на about.html и в разделе 2 offer.html. Стили из Секции 3 style.css: светлый фон #f0f6fc, синяя полоса слева, скруглённые правые углы.

Технические отличия от других использований .highlight-box:

Три выноски на сайте

about.html            offer.html             privacy.html
----------            ----------             ------------
<div class="highlight-box">  <div class="highlight-box">  <div class="highlight-box">
  <p><strong>Ключевое     <p><strong>Ключевая       <p>Если у вас есть
  преимущество:</strong>     особенность:</strong>        вопросы по
  Я не нанимаю...           Вы получаете не             обработке данных...
                            набор...

strong в начале            strong в начале            БЕЗ strong

На about.html и offer.html выноска открывается меткой через strong — «Ключевое преимущество:», «Ключевая особенность:». На privacy.html — просто абзац без выделения. Это потому, что здесь выноска не смысловой акцент, а инструкция: куда обратиться с вопросами.

Сравнение по классам

Все страницы сайта по классам

                          index  serv  about  proj  offer  cont  priv
------------------------  -----  ----  -----  ----  -----  ----  ----
секций                        3     1      2     1      1     1     1
.grid-2                       -     +      -     -      -     -     -
.grid-3                       -     -      -     +      +     -     -
.grid-4                       -     -      +     -      -     -     -
.card                         -     +      +     +      +     -     -
.card .badge                  -     -      +     -      -     -     -
.contacts-*                   -     -      -     -      -     +     -
.price-*                      -     -      -     -      +     -     -
.legal-note                   -     -      -     -      +     -     -
.highlight-box                -     -      +     -      +     -     +
.cta-block                    +     +      -     -      +     +     -
.section-subtitle             +     -      +     -      +     -     -
.hero-title / .hero-lead      +     -      -     -      -     -     -
.text-block                   +     +      +     +      +     -     +
meta robots="noindex"         -     -      -     -      -     -     -

Что видно из таблицы:

По числу секций — privacy.html в одной группе с services, projects, offer, contacts. Одна секция — как у большинства.
Без .cta-block — в отличие от services, contacts, offer. Причина: юридическая страница не призывает к действию. Единственная страница с .highlight-box и без .cta-block.
Без .section-subtitle — только h2, без подзаголовков. Потому что разделов внутри секции нет.
С .text-block — второй раз в одном абзаце... точнее, здесь два абзаца, единственная страница с двумя подряд.

Итог

Скелет — как у эталона: partials, SSI-инклюды, кнопка «Наверх», два скрипта.
Уникальные мета — пять строк. description и og:description совпадают.
meta robots отсутствует — страница индексируется. В отличие от 404.html, где noindex стоит.
Одна секция: h2 + два абзаца .text-block + выноска .highlight-box.
Новых классов на странице нет — используются уже описанные в style.css.
Внутри абзацев нет strong — юридический стиль без акцентов.
Внутри выноски нет strong — единственный из трёх .highlight-box на сайте без выделенной метки.
Нет .cta-block, нет .section-subtitle. Компактно и по делу.

Следующий раздел — 404.html. Единственная страница сайта с meta robots="noindex", единственная — с заголовком .hero-title вне главной, и единственная, где в одном месте собраны четыре ссылки на разделы сайта.

18. privacy.html — политика конфиденциальности