Улучшаем страницу 404-ой ошибки

Автор оригинала: James Duquenoy
  • Перевод
Если пользователь попадает на стандартную страницу ошибки 404, велика вероятность того, что он покинет веб-сайт и вряд ли вернется. Кастомная страница 404, полезная и привлекательная, способствует дальнейшему пребываниваю на вашем веб-сайте.






Наша цель: улучшить страницу 404!


image

Что не так с страницей 404-ой ошибки по умолчанию?


Ответ прост: все. Страница 404, на которой лишь написано «Страница не найдена», не будет полезной для посетителя; даже ссылка «Вернуться на главную» не поможет.
Отсутствие достойной 404-ой страницы ухудшает впечатление пользователя. Посетители, которые ищут определенную страницу на вашем сайте, но попали на битую ссылку, будут вынуждены вернуться на главную страницу и начать поиск заново. Если они не найдут, что ищут, то тут же покинут веб-сайт. В идеале пользователь никогда не столкнется с подобными ошибками, но 404-ая страница позволяет извиниться перед пользователем и помочь ему найти то, что он ищет. Довольный посетитель вероятнее всего вернется на ваш веб-сайт.
Еще хуже, когда 404-ая страница отсутствует вовсе. У посетителя не будет представления о том, что происходит. Отсутствие такой страницы делает сайт непрофессиональным и заставляет пользователей покинуть его.

image



Пространство для улучшения


Самое важное сделать страницу 404-ой ошибки простой и понятной пользователю. Напишите, что страница, которую ищет посетитель, не существует. Объясните, почему именно она не существует.

Извини, друг. Страница, которую вы запросили, не находится в нашей базе данных. Скорее всего вы попали на битую ссылку или опечатались при вводе URL. – A List Apart 404-ая страница




Совет 1: Придерживайтесь дизайна


Очень важно, чтобы дизайн 404-ой страницы не отличался от остального веб-сайта. Это включает логотип, навигацию, цветовую схему и т.д.

image



Совет 2: Максимальная польза


Страница 404-ой ошибки должна быть предельно полезной для пользователя. Чтобы достичь желаемого эффекта, можно применить следующие элементы:
  • Поисковая форма
  • Ссылка на главную страницу
  • Список самых популярных страниц
  • Ссылка на карту сайта
  • Кнопка сообщения о битой ссылке


image




Совет 3: Будьте дружелюбными и понятными



Не думайте, что все знают, что такое 404-ая ошибка. Вас нужно объяснить, в чем проблема, в дружелюбной манере. Лучше сказать так: «Упс! Мы не можем найти страницу, которую вы ищете.», чем так: «404-ая ошибка. Страница не найдена».

image




Совет 4: Минималистичный дизайн тоже сработает


Если вы владете крупным веб-сайтом, например, как Google, с множеством страниц разного содержания, то страница 404 с картой сайта, популярными страницами или поисковой формой не поможет пользователю.

image




Совет 5: Будьте проще


404-ая страница может быть простой и даже смешной. Если ваша страница является таковой, то она бесспорно задержит посетителей на вашем сайте. Возможно даже, что они будут скидывать эту страницу своим друзьям. Именно это и произошло с 404-ой страницей GitHub:

image

image

На сайте nosh.com вообще размещено видео:



image




Результаты поиска


Ваша страница 404-ой ошибки может быть эффективной и отлично смотреться, но очевидно, что она не должна появляться в результатах поиска. Это можно осуществить двумя способами:

  • Убедитесь, что веб сервер возвращает правильный статус 404 HTTP, тогда поисковики будут игнорировать эту страницу.
  • Добавьте страницу 404 в файл robots.txt.

Просто добавьте URL любого файла в robots.txt и загрузите на сервер:
Disallow: /404.html





Используем страницу 404-ой ошибки


Чтобы использовать собственную страницу 404-ой ошибки, нужно создать файл .htaccess и добавить в него следующую строчку:
ErrorDocument 404 /error/404-error.html




Заключение


Теперь мы знаем, что вместо скучных и бесполезных страниц 404-ой ошибки, нужно потратить время на создание собственной информативной страницы, увидев которую, посетителям не захочется покидать веб-сайт.

PS Все замечания по поводу перевода, орфографии и т.п. с удовольствием приму в личку. Спасибо!
Поделиться публикацией
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 25

    +8
    Можно сделать что-нибудь необычное и с претензией на вирусность.
      +12
      Терпеть не могу, когда на странице без спроса начинает играть музыка.
        +13
        Я придерживаюсь мнения, что ни одна страница ни на одном сайте не должна выглядеть так:
        0
        Настоящая страница 404 должна у посетителя вызывать желание поскорее уйти оттудова и поскорей забыть это место… :)
          +1
          Сразу вопрос, как в ExpressJS (Node.JS) сделать свои 404 страницы. app.get('*' не помогает, ибо по этому роуту проходит вся статика, а это все, что написано в официальной документации.
            0
            Можно с помощью node-boilerplate, вот пример github.com/robrighter/node-boilerplate/blob/master/templates/app/server.js
              0
              Уточню. Сначала подключаете статику, потом подключаете раутер а в самом конце ловите 404.

                0
                // Error handling
                app.error(function(err, req, res, next){
                    console.log(err);
                    if (err instanceof NotFound) {
                        res.render('errors/404', {
                            title : 'Not Found',
                            layout: 'login/layout',
                            status: 404
                        });
                    } else {
                        res.render('errors/500', {
                            title : 'The Server Encountered an Error',
                            layout: 'login/layout',
                            error: err,
                            status: 500
                        });
                    }
                });
                
                function NotFound(msg) {
                    this.name = 'NotFound';
                    Error.call(this, msg);
                    Error.captureStackTrace(this, arguments.callee);
                }
                

                в конце всех роутов:
                app.all('*', function(req, res){
                    throw new NotFound('URL: ' + req.url);
                });
                
                  0
                  Может я что-то не так делаю, но у меня не работает в таком случае статика.
                  Node v0.6.17
                  Express v2.5.8

                  app.configure(function(){
                    app.set('views', __dirname + '/views');
                    app.set('view engine', 'jade');
                    app.use(express.cookieParser());
                    app.use(express.bodyParser());
                    //app.use(express.methodOverride());
                    app.use(express.static('/www/r/node/public'));
                    app.use(app.router);
                  });
                  
                  app.error(function(err, req, res, next){
                      console.log(err);
                      if (err instanceof NotFound) {
                          res.render('404', {
                              title : 'Not Found',
                  			layout: false,
                              status: 404
                          });
                      } else {
                          res.render('500', {
                              title : 'The Server Encountered an Error',
                  			layout: false,
                              error: err,
                              status: 500
                          });
                      }
                  });
                  
                  function NotFound(msg) {
                      this.name = 'NotFound';
                      Error.call(this, msg);
                      Error.captureStackTrace(this, arguments.callee);
                  }
                  
                  app.get('/', routes.index);
                  
                  // 404
                  app.all('*', function(req, res){
                      throw new NotFound('URL: ' + req.url);
                  });
                  
                0
                Мы у себя сделали набор страниц подобного рода:
                snk-games.ru/502.html
                snk-games.ru/404.html
                snk-games.ru/403.html
                  0
                  «Кажется, что-то отвалилось». Это хорошо. Попробую сделать у себя.
                  +3
                  Ага, а можно еще: «Извините, но ни ваша страница, ни страница 404 ошибки не найдена.»
                    +1
                    Сто миллиардов раз эта тема поднималась. По-моему, Лебедев её уже давно закрыл.
                      +1
                      По-моему на этой странице
                      image
                      больше полезной информации, чем на этой
                      image

                      Страница 404, на которой лишь написано «Страница не найдена», не будет полезной для посетителя; даже ссылка «Вернуться на главную» не поможет.

                        +6
                        Главное, что на ней бесполезной информации тоже гораздо больше.
                          0
                          Только вторая часть, имхо.
                          +2
                          Вы хоть раз полностью прочитали все, что написано на первом скриншоте? Не забывайте программист и пользователи сайта видят его по разному — программисту лучше вывести trace, а пользователю просто сказать — у нас что-то сломалось.
                            +1
                            Да, прочитал.
                            Там написано и то, и другое.
                          0
                          может не в тему, но мужики явно отжигают на последней странице 404=)
                            0
                            По-моему, еще стоит добавить, что нужно стремится чтобы на сайте количество подобных 404 страниц было минимальным, если такое возможно конечно. А то бывает вот, попадаешь — а там 404 еще и с надписью «страницы такой-то тут нет, но где-то у нас она тут может и есть, вот еще раз поиском воспользуйтесь» :))
                              0
                              Думал это перевод с yoast.com, а оказалось просто набор картинок с забавными зверушками. Так что я просто оставлю это здесь
                              tigors.net/custom-error-404-page/
                                0
                                И статья похоже (http://habrahabr.ru/post/142038/) и комменты к ней те же…
                                  0
                                  autorambler.ru/404 хорошая страница у авто-рамблера. Жаль, не сделали многопользовательские гоночки…
                                    0
                                    Подскажите плз как на IIS6 настроить 404 ошибку?
                                      –1
                                      мы вот тут тоже настроили 404 ошибку. Без претензий на вирусность, но вроде симпатично)

                                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                      Самое читаемое