19. 404.html — страница ошибки

Последняя страница сайта. По скелету — та же схема, что у предыдущих: partials, SSI-инклюды, кнопка «Наверх», два скрипта. Но у неё три технических особенности, которые больше нигде на сайте не встречаются.

Как открывается страница

404.html — не обычная страница. Пользователь не переходит на неё по ссылке. Она подставляется сервером, когда запрошенный адрес не найден.

Пользователь вводит:
  https://secserpr.ru/nepravilnyj-adres.html

Сервер не находит файл. Срабатывает правило
из .htaccess:

  ErrorDocument 404 /404.html

Сервер отдаёт СОДЕРЖИМОЕ файла /404.html
с кодом ответа 404 (страница не найдена).

Пользователь видит нашу страницу с объяснением
и ссылками. Поисковик получает код 404 —
значит, не индексирует страницу.

Строка ErrorDocument 404 /404.html уже разбиралась в разделе 02. Здесь — обратная сторона: как эта настройка влияет на саму страницу.

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

<title>Страница не найдена – Ефимов Андрей Михайлович</title>
<meta name="description" content="Запрошенная страница не найдена. Вернитесь на главную или свяжитесь со мной." />

<meta property="og:title" content="Страница не найдена – Ефимов Андрей Михайлович" />
<meta property="og:description" content="Запрошенная страница не найдена." />
<meta property="og:url" content="https://secserpr.ru/404.html" />

<meta name="robots" content="noindex" />

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

• title и og:title совпадают.
• description и og:description отличаются: у og-версии отброшено «Вернитесь на главную или свяжитесь со мной». Третье расхождение между обычными и og-мета на сайте (первые два — на about.html и offer.html).
• og:url — https://secserpr.ru/404.html. Технически пользователь никогда не откроет этот URL напрямую (адрес в строке — неправильный, который он ввёл), но тег всё равно ставится для консистентности.
• meta robots="noindex" — единственная страница сайта с этим тегом. Три причины: страница ошибки не несёт контента, может открываться по тысячам URL, поисковики не должны её индексировать.

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

Между header и footer — одна секция. Внутри — заголовок, вводный абзац, CTA-блок, подзаголовок и список ссылок.

<body>
<div class="container">

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

  <section>
    h2.hero-title   "404 — страница не найдена"
    p.text-block.hero-lead
    div.cta-block
      strong
      br
      a.btn (На главную)
    h3.section-subtitle  "Популярные разделы"
    ul
      li × 4 со ссылками
  </section>

  SSI: footer.html

</div>

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

Заголовок .hero-title

<h2 class="hero-title">404 — страница не найдена</h2>

Второе место на сайте, где используется .hero-title. Первое — index.html. Это класс с правилами из Секции 3 style.css:

.hero-title {
  border-left: none;
  padding-left: 0;
  font-size: 2.4rem;
  margin-bottom: 25px;
}

Что это значит технически:

• border-left: none — обнуляет полосу слева, которая по умолчанию есть у h2. Заголовок «404» визуально отличается от других h2 сайта.
• font-size: 2.4rem — почти 38 пикселей. Вдвое крупнее обычного h2 (1.8rem). Цифра «404» должна броситься в глаза.
• padding-left: 0 — заодно убирает отступ, который был бы от полосы.

Вводный абзац .text-block.hero-lead

<p class="text-block hero-lead">
  Возможно, страница была перемещена, удалена или вы
  ошиблись в адресе. Ничего страшного — вернитесь
  на главную или выберите раздел ниже.
</p>

Снова два класса через пробел, как на index.html:

• .text-block — красная строка, выравнивание по ширине.
• .hero-lead — увеличенный размер шрифта (1.2rem против обычного 1.05rem).

Эта пара классов встречается на сайте дважды: на главной и здесь. Больше нигде.

CTA-блок с кнопкой

<div class="cta-block">
  <strong>Куда дальше?</strong><br />
  <a href="/index.html" class="btn" style="margin-top: 15px;">На главную</a>
</div>

Стандартный .cta-block, но с двумя особенностями.

Кнопка внутри CTA

Внутри блока — ссылка с классом .btn. Такой же приём был на index.html, но там кнопка была отдельным элементом после секции-героя. Здесь — внутри CTA-блока.

Инлайн-стиль style="margin-top: 15px;"

<a href="/index.html" class="btn" style="margin-top: 15px;">

Единственный инлайн-стиль на весь сайт. Все остальные стили — в style.css. Здесь — исключение: атрибут style прямо в HTML.

Технически это работает: инлайн-стиль имеет наивысший приоритет и переопределяет любые правила из CSS-файлов. Но у этого решения есть минусы:

• Стиль «размазан» по HTML — сложнее искать.
• Нельзя переопределить медиа-запросом (на мобильном отступ останется 15px).
• Если кнопка когда-нибудь уедет в другое место, стиль придётся копировать руками.

Подзаголовок и список ссылок

<h3 class="section-subtitle" style="margin-top: 35px;">
  Популярные разделы
</h3>
<ul>
  <li><a href="/services.html">Услуги</a> — четыре направления работы.</li>
  <li><a href="/offer.html">Коммерческое предложение</a> — тарифы и этапы.</li>
  <li><a href="/projects.html">Кейсы</a> — примеры из практики.</li>
  <li><a href="/contacts.html">Контакты</a> — телефон и e-mail.</li>
</ul>

Второй инлайн-стиль

<h3 class="section-subtitle" style="margin-top: 35px;">

Ещё один инлайн-стиль. У .section-subtitle по умолчанию margin-bottom: 18px, но нет margin-top — он наследуется от базового h3: margin: 20px 0 10px 0. Нужно было 35 пикселей сверху, чтобы отделить список от CTA-блока выше. Решили инлайном.

Итого на 404.html — два инлайн-стиля. Больше ни на одной странице сайта их нет.

Список ссылок как «мини-карта сайта»

Четыре li, каждый — «ссылка + тире + пояснение»:

<li><a href="/services.html">Услуги</a> — четыре направления работы.</li>
     └─ ссылка ─┘                  └─ тире + текст ─┘

Технически обычный ul из четырёх li. Никаких классов. Но по смыслу — это дублирование навигации: те же разделы есть в меню nav.html. Зачем дублировать? Потому что на 404 пользователь «потерялся». Меню сверху он может не заметить, а список прямо в секции — увидит.

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

Что                                    Значение
------------------------------------   ----------------------------
Открывается по адресу                   ЛЮБОМУ несуществующему
Способ открытия                         ErrorDocument 404 /404.html
HTTP-код ответа                         404 (не 200!)
meta robots                             noindex (единственная)
.hero-title                             Второе место (первое — index)
.text-block.hero-lead                   Второе место (первое — index)
.cta-block                              Есть
Кнопка .btn внутри .cta-block           Есть
.section-subtitle                       Есть
Инлайн-стили                            2 (единственные на сайте)
Список ul с четырьмя ссылками           Есть (единственная такая)
.highlight-box                          Нет
.grid-2 / grid-3 / grid-4               Нет
.card                                   Нет

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

                          ind  serv  abt  prj  off  cnt  prv  404
------------------------  ---  ----  ---  ---  ---  ---  ---  ---
секций                      3     1    2    1    1    1    1    1
.grid-2                     -     +    -    -    -    -    -    -
.grid-3                     -     -    -    +    +    -    -    -
.grid-4                     -     -    +    -    -    -    -    -
.card                       -     +    +    +    +    -    -    -
.contacts-*                 -     -    -    -    -    +    -    -
.price-*                    -     -    -    -    +    -    -    -
.legal-note                 -     -    -    -    +    -    -    -
.highlight-box              -     -    +    -    +    -    +    -
.cta-block                  +     +    -    -    +    +    -    +
.section-subtitle           +     -    +    -    +    -    -    +
.hero-title                 +     -    -    -    -    -    -    +
.hero-lead                  +     -    -    -    -    -    -    +
.text-block                 +     +    +    +    +    -    +    +
meta robots="noindex"       -     -    -    -    -    -    -    +
inline style                -     -    -    -    -    -    -    +

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

• По скелету 404.html ближе всего к services.html: одна секция, h2, .cta-block в конце. Но h2 здесь с классом .hero-title, а не обычный.
• Единственная страница с meta robots и единственная с inline style. Два уникальных признака.
• .hero-title и .hero-lead только на двух страницах: главной и 404. Это «пара героев» сайта.
• Список ul со ссылками на другие страницы — уникален. На главной был список проблем, на «Услугах» — нет, на «Кейсах» — нет. Здесь — навигационный список.

Итог

• Скелет — как у эталона: partials, SSI-инклюды, кнопка «Наверх», два скрипта.
• Открывается не по прямому URL, а через ErrorDocument 404 /404.html в .htaccess.
• HTTP-код 404 сохраняется — критично для поисковиков.
• meta robots="noindex" — единственная страница сайта с этим тегом.
• .hero-title и .hero-lead — второе место после главной.
• Два инлайн-стиля — единственные на весь сайт. Оправданы единичностью.
• .cta-block с кнопкой .btn «На главную» — направляет пользователя обратно.
• Список ul из четырёх ссылок — «мини-карта сайта» внутри страницы. Дублирует меню для «потерявшегося» пользователя.
• Новых классов в style.css нет — все стили уже были описаны.

Все восемь страниц сайта разобраны. Следующий — последний содержательный раздел: 20. SEO и служебное. Разберём robots.txt, sitemap.xml, og-image и код Метрики в footer.html — то, что живёт вне страниц, но обеспечивает видимость сайта в поиске.