Сначала даю пояснения для неопытных и малоопытных владельцев (администраторов) пользоваптелей сайта:
— во-первых, вот как выглядит та самая 404 ошибка на конкретном сайте, который я разработал и запустил в Интернет (смотри выше).
А теперь — по существу темы:
— Ошибка 404 (или HTTP 404 Not Found) — это стандартный код ответа HTTP, который означает, что сервер не может найти запрошенный ресурс (веб-страницу или файл) по указанному адресу. Эта ошибка возникает, когда вы вводите неправильный URL, переходите по неработающей ссылке или когда владелец сайта удалил или переместил страницу.
Что означает ошибка 404?
Запрос отправлен, но страница веб-сайта не найдена.
Ваш браузер успешно связался с сервером, но сервер не обнаружил на нём запрашиваемый файл или страницу.
Причины возникновения ошибки 404 :
Неверно введенный URL: Вы могли допустить опечатку в адресной строке браузера, наиболее частая технологическая ошибка Администратора веб-сайта.
Неработающая ссылка: Вы перешли по ссылке на сайте, которая ведёт на несуществующую страницу, — если Администратор веб-сайта не владеет специальными знаниями разметки и вёрстки, — необходимо за помощью обратиться в Веб-разработчику.
Страница удалена или перемещена: Владелец сайта мог удалить контент или перенести его на новый адрес, в этом случае надо не найденную страницу (файл) опубликовать заново.
Часто страницы «пропадают» и, вмессто желаемого контента на экране компьютера мы видим сообщение HTTP 404 Not Found (Ошибка 404) после чистки (оптимизации) базы данных: при выполнении этой операции надо быть особенно осторожным, перед выполнением указанной работы сделать резервные копии, проверить на локальном хостинге, убедиться, что сайт в копиях функционирует и, только после сохранения копий, с примененем специальных инструментов или визуально по коду, еси сайт не большой, — найти и устранить ошибку.

Что делать, если вы видите ошибку 404 на вашем сайте?

Проверьте URL, например: https://yeswebsite.ru/content25
Убедитесь, что адрес в строке браузера написан правильно, без ошибок.
Обновите страницу.
Иногда ошибка может быть временной, попробуйте обновить страницу с помощью кнопки обновления браузера или клавиши F5.
Используйте поиск по сайту.
Если вы знаете, на каком сайте произошла ошибка, воспользуйтесь встроенным поиском сайта, чтобы найти нужную информацию.
Вернитесь на Главную страницу сайта.
Если предыдущие шаги не помогли, можно попробовать перейти на главную страницу сайта и начать поиск оттуда либо ввести поиск в командной строке вашего Броузера.
Чем это полезно знать?
Для пользователя веб-сайта — понять, что проблема не в интернете или сервере, а именно в ссылке/странице.
Для владельца веб-сайта — сигнал, что стоит сделать «страницу 404» с подсказками: поиск по сайту, меню, шутливый текст. Это существенно снижает раздражение посетителей.
О том, как сделать «страницу 404» я расскажу ниже, в статье для продвинутых пользователей (администраторов) веб-сайта и, даже, напишу для вас сначала простой Код на HTML & CSS для красивого «шутливого» оформления Страницы вашего веб-сайта в случае 404 ошибки.

«404

Страница не найдена

Похоже, вы зашли не туда 🙃 Возможно, ссылка устарела или в адресе есть опечатка. На главную Блог | Каталог | Контакты

Особенности вышеприведенного шаблона 404 ошибки:
Большой заголовок 404, — для ясности.
Подзаголовок и пояснение для пользователя.
Встроенная форма поиска (get_search_form() автоматически использует стандартную форму, например, в WordPress, Друпал и других СМС.
Кнопка для возврата на Главную страницу вашего веб-сайта.
Блок с дополнительными ссылками (можете подставить свои — «Каталог», «Блог», «Контакты») и не забудьте правильно прописать URL для каждой ссылки…
Адаптивный дизайн: всё центрируется и смотрится аккуратно на мобильных машинах.

А вот, внизу, я записал для вас обещанный код для страницы вашего сайта, например, если он запущен на самой популярной СМС WordPress:

<?php get_header(); ?>
<main class="site-404">
  <style>
    body .site-404 {
      text-align: center;
      padding: 60px 20px;
      font-family: "Segoe UI", Arial, sans-serif;
      color: #333;
    }
    .site-404 h1 {
      font-size: 120px;
      margin: 0;
      color: #e74c3c;
      animation: pulse 2s infinite;
    }
    .site-404 h2 {
      font-size: 28px;
      margin: 10px 0 20px;
    }
    .site-404 p {
      font-size: 18px;
      margin: 20px auto;
      max-width: 500px;
      color: #555;
      animation: fadeIn 2s ease-in;
    }
    .site-404 .btn-home {
      display: inline-block;
      padding: 14px 28px;
      background: #3498db;
      color: #fff;
      text-decoration: none;
      border-radius: 8px;
      font-size: 18px;
      margin-top: 30px;
      transition: background 0.3s, transform 0.3s;
    }
    .site-404 .btn-home:hover {
      background: #2980b9;
      transform: translateY(-3px);
    }
    .site-404 nav {
      margin-top: 40px;
      font-size: 16px;
      animation: fadeInUp 1.5s ease-out;
    }
    .site-404 nav a {
      margin: 0 10px;
      color: #3498db;
      text-decoration: none;
      transition: color 0.3s;
    }
    .site-404 nav a:hover {
      color: #1d6fa5;
    }
    .site-404 .illustration {
      max-width: 200px;
      margin: 0 auto 30px;
      animation: float 4s ease-in-out infinite;
    }
    /* Анимации */
    @keyframes pulse {
      0% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.05); opacity: 0.85; }
      100% { transform: scale(1); opacity: 1; }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    /* Адаптив */
    @media (max-width: 600px) {
      .site-404 h1 { font-size: 80px; }
      .site-404 h2 { font-size: 22px; }
      .site-404 p { font-size: 16px; }
      .site-404 .illustration { max-width: 150px; }
    }
  </style>
  <!-- SVG-иллюстрация пчёлки -->
  <div class="illustration">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
      <circle cx="32" cy="32" r="30" fill="#f1c40f" stroke="#333" stroke-width="3"/>
      <ellipse cx="32" cy="32" rx="20" ry="28" fill="#f39c12" stroke="#333" stroke-width="2"/>
      <line x1="12" y1="20" x2="52" y2="20" stroke="#333" stroke-width="4"/>
      <line x1="12" y1="32" x2="52" y2="32" stroke="#333" stroke-width="4"/>
      <line x1="12" y1="44" x2="52" y2="44" stroke="#333" stroke-width="4"/>
      <circle cx="20" cy="26" r="4" fill="#333"/>
      <circle cx="44" cy="26" r="4" fill="#333"/>
      <path d="M22 50 q10 8 20 0" fill="none" stroke="#333" stroke-width="3" stroke-linecap="round"/>
    </svg>
  </div>

  <h1>404</h1>
  <h2>Страница не найдена</h2>
  <p>
    Упс! Похоже, такой страницы у нас нет 🙃<br>
    Попробуйте поискать или вернитесь на главную.
  </p>
  <!-- Поиск -->
  <div style="margin: 30px auto; max-width: 400px;">
    <?php get_search_form(); ?>
  </div>
  <!-- Кнопка "на Главную страницу" -->
  <a href="<?php echo home_url(); ?>" class="btn-home">На главную</a>
  <!-- Дополнительные ссылки -->
  <nav>
    <a href="<?php echo home_url('/blog'); ?>">Блог</a> |
    <a href="<?php echo home_url('/catalog'); ?>">Каталог</a> |
    <a href="<?php echo home_url('/contact'); ?>">Контакты</a>
  </nav>
</main>
<?php get_footer(); ?>

Копируйте и вставляйте этот Код для оформлени страницы 404 ошибки на ваш веб-сайт через Редактор.

По моему я доходчиво объяснил вам — что такое 404 ошибка на сайте и как красиво оформить страницу этой ошибки на вашем сайте?

Если кто знает и умеет больше, делитесь в ваших комментариях ниже…
Веб-разработчик E&A