Совершенная 404-ая страница - Разработка - Webmascon

WEBMASCON - журнал для веб-мастеров обновление: 2004.12.25
» Разработка

# Совершенная 404-ая страница

The Perfect 404
автор: 2004.01.16 Ян Ллойд (Ian Lloyd) и A List Apart
перевод: 2004.02.05 Максим Россомахин и Александр Качанов

Упс… Что-то не так. Вы в растерянности - ваша ли это ошибка или во всём виноват веб-сайт? Что же вам делать-то?

Добро пожаловать в мир ошибки 404. Вы запросили страницу, набрав в адресной строке URL или же кликнув по "мёртвой" ссылке - и вуаля! - вы в самом сердце виртуального "нигде". Веб-сайт, заботящийся о пользователях, протянет вам руку помощи, в то время как другие сайты не сделают ничего, понадеявшись на встроенные в броузеры механизмы сообщения об ошибках. Но мы-то можем поступить лучше, не правда ли?

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

- Creating a Custom 404 Error Page (4 Guys From Rolla)
- Creating Custom Error Messages in Apache (4WebHelp)

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

Для начала нам необходимо проверить наиболее распространенный причины, по которым люди оказываются на странице "404".

- неправильно набран URL (или устаревшая закладка)
- ссылка на поисковом сервере устарела
- внутренняя ссылка на вашем сайте сломана по недосмотру веб-мастера

Всё это различные проявления одного и того же, но для каждого из этих случаев необходимо своё особое "лекарство" - сообщение на странице "404" должно быть своим для каждой ошибки. Есть несколько трюков, которые вы можете использовать во всех случаях, но мой самый первый совет предельно прост…

### Не ищите виноватого!

Во что бы то ни стало сообщите пользователю, что что-то не так, но ни в коем случае не выговаривайте ему, даже если вы точно знаете, что это именно его ошибка! Обороты типа "вероятно", "скорее всего" и т.п. тут будут весьма кстати. Не портите впечатление от вашего сайта у вашего посетителя, ведь все еще можно исправить.

### 404-ая страница должна иметь...

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

- Ссылка на карту сайта (если карта у вас есть) и ссылка на главную страницу сайта. Это самый простой способ помощи пользователям. Он не требует написания хитроумных скриптов.
- Блок поиска. Если у вас на сайте есть функция поиска, добавьте поле поиска на вашу 404-ую страницу. Если поиска нет, и у вас на сайте страница 404 появляется слишком часто, постарайтесь эту функцию как-нибудь раздобыть.
- Сугубо минималистичный внешний вид. Избегайте помещать на "404-ю" всю стандартную навигацию вашего сайта. Избегайте обилия отвлекающих деталей. Кроме того, полный комплект навигации на 404-ой странице требует дополнительных затрат на поддержку ее актуальности. Если на 404-ой странице навигации не будет, о ее обновлении можно не заботиться, а значит ваши посетители не столкнутся с ситуацией, когда ссылки навигации на 404-й странице сами приводят к 404-ой странице. Это я так иронизирую!

Не используйте профессиональный жаргон. В смысле, мы тут говорим о 404-х страницах, верно? Мы ведь среди своих. Но вот шестидесятилетней Дорис, попавшей на "мёртвую ссылку" в результате поиска на сайте о вязании, будет невдомёк, что это за 404-ая ошибка такая. Если уж вам так хочется использовать фразу "Ошибка 404" - делайте это незаметно, поместите её в подвале страницы как примечание для тех, кто понимает этот причудливый язык Сети.

Теперь давайте посмотрим, как можно заставить 404-ю страницу поработать на вас, а не против вас.

### Сделаем все по-умному

Тут я должен отметить, что вам потребуются знания JavaScript (возможно, вы не имеете прав на исполнение серверных скриптов - это зависит от настроек вашего сервера). Поэтому не забывайте про тег <noscript>, внутри которого должно находиться сообщение для пользователей, которые отключили поддержку JavaScript в своём броузере. Если же вы можете использовать серверные скрипты (что в данном случае предпочтительно - проблемы с совместимостью и настройками броузеров отпадают сами собой), то приспособьте предложенный код под ваши нужды.

Во-первых, вам нужно будет задать несколько переменных:

    var strReferrer=document.referrer.toLowerCase();
    var blnSearchReferral = false;
    var blnInsiteReferral = false;
    var str="";
    var strSite = "";

Итак, что мы будем с ними делать?

#### Неверно набранный URL

Неверно набранный URL (или же устаревшая закладка) не будут иметь referrer, так что ваш код для этого случая должен быть чем-то вроде этого:

ВНИМАНИЕ! Символ "»" означает в данном случае лишь перенос строки так, чтобы она могла быть показана на этой странице - вам не надо использовать этот символ в своём коде.

    if (strReferrer.length==0)
      {
      str+='We think you will find one of the following »
        links useful:<\/p>';
      str+='<a href="\/home.php"><img src="/images/ »
        home.gif" alt="Home Page" width="100" height="30" »
        \/> <\/a>';
      str+='<a href="\/site-map.php"><img src="/images/ »
        site-map.gif" alt="Site Map" width="100" height= »
        "30" \/><\/a>';
      str+='<hr \/>';
      str+='<p><strong>You may not be able to find the »
        page you were after because of:<\/strong><\/p>';
      str+='<ol type="a">';
      str+=' <li>An <strong>out-of-date bookmark\/favorite »
        <\/strong><\/li>';
      str+=' <li>A search engine that has an <strong>out- »
        of-date listing for us</strong><\/li>';
      str+=' <li>A <strong>mis-typed address</strong><\/li>';
      str+='<\/ol>';
      document.write(str);
    	}

#### Устаревшая ссылка на поисковике

Если значение referrer присутствует, мы можем поискать в нем URL поискового сервера (разумеется здесь вы можете дать простор своей фантазии). После этого мы можем разобрать параметры поиска, найти список ключевых слов, которые посетитель вводил на поисковом сервере и предложить ему страницу, подходящую по нашему мнению под его запрос.

    if (strReferrer.length!=0)
      {
      if ((strReferrer.indexOf(".looksmart.co")>0)||
      (strReferrer.indexOf(".ifind.freeserve")>0)||
      (strReferrer.indexOf(".ask.co")>0)||
      (strReferrer.indexOf("google.co")>0)||
      (strReferrer.indexOf("altavista.co")>0)||
      (strReferrer.indexOf("msn.co")>0)||
      (strReferrer.indexOf("yahoo.co")>0))
      {
      blnSearchReferral=true;
      //get site domain — split at the first forward-slash
      var arrSite=strReferrer.split("/");
      // now find search parameters
      var arrParams=strReferrer.split("?");
      var strSearchTerms = arrParams[1];
      arrParams=strSearchTerms.split("&");

      strSite=arrSite[2];
      var sQryStr="";

      //define what search terms are in use by the »
      different engines
      var arrQueryStrings = new Array();
      arrQueryStrings[0]="q=";  //google, altavista, msn
      arrQueryStrings[1]="p=";  //yahoo
      arrQueryStrings[2]="ask=";  //ask jeeves
      arrQueryStrings[3]="key=";  //looksmart

      for (i=0;i<arrParams.length;i++)
      //loop through all the parameters in the referring »
      page’s URL
        {
        for (q=0;q<arrQueryStrings.length;q++)
        {
        sQryStr = arrQueryStrings[q];
        if (arrParams[i].indexOf(sQryStr)==0)
          {//we’ve found a search term!
          strSearchTerms = arrParams[i];
          strSearchTerms = strSearchTerms.split(sQryStr);
          strSearchTerms = strSearchTerms[1];
          strSearchTerms = strSearchTerms.replace("+", " ");
          }
        }
        }
      //Tell the visitor what site is at fault, what the
      //search terms were
      document.write ("<p>You did a search on <strong> »
        <a href='" + strReferrer + "' target='_blank'>" + »
        strSite + "<\/a> <\/strong> for \"<strong>"»
        + strSearchTerms + "<\/strong>\". However, »
        their index appears to be out of date.<\/p> »
        <h2>All is not lost!<\/h2><p>We think that the »
        following page(s)on our site will be able to help »
        you:<\/p>");

В код можно добавить несколько строк, чтобы перехватывать какие-то особые ключевые слова, для которых у вас точно есть какие-то материалы на сайте. Например, у вас есть хорошие материалы по ключевым словам "электроника" или "аксессуары", но вы недавно переместили страницы в другой каталог сайта - обидно было бы потерять всех, кто придет к вам на сайт с Google по этим ключевым словам?

    if (
      (strSearchTerms.indexOf("widgets")>=0)||
      (strSearchTerms.indexOf("electronics")>=0)
      )
        {
        document.write("<a href='\/cool-widgets.htm'>Our »
        excellent widgets page<\/a><br \/>");
        }
      }
      }

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

#### Битая ссылка на сайте

Мы позаботились о посетителях, пришедших по битым ссылкам с поисковых серверов. Теперь давайте позаботимся о ссылках не с поисковых серверов (или с тех поисковых серверов, о которых вы не знаете). В код надо добавить еще несколько условий:

    if (!blnSearchReferral) {
       strSite = strReferrer;
       strSite = strSite.split("/");
       strSite = strSite[2];
       document.write("<p>You were incorrectly referred to »
        this page by: <strong><a href='" + strReferrer + " »
        'target='_blank'>" + strSite + "</a></strong> »
        <br />We suggest you try one of the links below: »
        </p>");
    }

... и этими ссылками будут ссылка на карту сайта и ссылка на главную страницу сайта, о которых мы говорили в начале.

#### А что, если проблема в вашем сайте?

Вы не можете взять и написать на вашей 404-ой странице " На сайте, с которого вы пришли, неверная ссылка", когда неверный referrer - это ваш собственный сайт. В таком случае было бы нелишне изменить формулировку и признать свою вину.

    blnInsiteReferral =((strReferrer.indexOf("http:// »
      www.mysite.co.uk")>=0)||
        (strReferrer.indexOf("http://www.myothersite.com") »
        >=0))
      if (blnInsiteReferral)
        {
        document.write("<p>This one’s down to us! Please »
          accept our apologies for this — we’ll see to it »
          that the developer responsible for this broken »
          link is given 20 lashes (but only after he or »
          she has fixed this problem).<\/p>");
        }

### Решение проблемы

Итак, мы сумели найти путь из мрачных недр 404-ой ошибки. Но исправили ли мы сами ошибки? Нет. Тем не менее, у вас есть несколько вариантов действий, так как мы уже знаем, какая страница запрашивалась и какая страница сделала ошибочную ссылку (если конечно она была). Мы можем занести эту информацию в базу данных, либо автоматически либо с помощью кнопки "сообщите о сломанной ссылке администратору", которую можно поместить на 404-ой странице. Второй способ уменьшит уровень "шума", так как посетители обычно нажимают такие кнопки только в случае очень важной сломанной ссылки. Дальше вы уже сами решайте, как вы будете распоряжаться накопленной информацией.

### Что еще почитать

Посмотрите, как данные советы работают в реальной жизни. Вот примеры с сайтов Accessify и A List Apart:

- Скопируйте данную ссылку в адресную строку броузера, чтобы сымитировать случай с устаревшей закладкой: http://www.accessify.com/err.asp
- А вот вариант со сломанной ссылкой
- Имитация ссылки из результатов поиска на Google [тут задействована промежуточная страница]

Выкачайте пример 404-й страницы с кодом, описанным в статье, и измените его по своему усмотрению.

Ян Ллойд

Ян Ллойд (Ian Lloyd) руководит сайтом Accessify.com, который посвящен вопросам удобства работы с Web. Он активный участник проекта Web Standards Project.

Обсудить (6)

Ссылки по теме

- Эта статья на английском языке | англ.
- Другие статьи с сайта A List Apart | англ.
- Правила написания сообщений об ошибках | рус.

« назад к списку статей

#### Указатель категорий

- Информационная архитектура (9)
- (X)HTML (14)
- Юзабилити (28)
- Якоб Нильсен (46)
- CSS (29)
- Навигация (15)
- Графика (4)
- A List Apart (16)
- Дизайн (15)
- Инструменты (9)
- Цвет (8)
- Бизнес (19)
- Менеджмент проектов (11)
- Тестирование (10)
- Программирование (9)
- Реклама и продвижение (13)
- Технологии (10)
- Проектирование (7)
- Поддержка (3)
- Текст и контент (10)
- Книги (2)
- Мысли вслух (4)
- Flash (6)

#### Самые популярные статьи Нильсена:

- 10 главных ошибок веб-дизайна 2002 года
- Flash на 99% неприемлем
- Размер шрифта пусть выбирают сами пользователи
- Чем ссылка глубже - тем она лучше
- Берегите почтовый ящик вашего пользователя
- Как читают web-пользователи?
- все статьи Нильсена »

Рекомендую
Якоб Нильсен Веб-дизайн. Книга Якоба Нильсена на http://www.ozon.ru/?context=detail&id=126954&partner=webmascon на http://www.books.ru/shop/books/7107?partner=webmascon

Рекомендую

Якоб Нильсен
Дизайн Web-страниц.
Анализ удобства
и простоты использования
50 узлов
на http://www.ozon.ru/?context=detail&id=1150834&partner=webmascon
на http://www.books.ru/shop/books/29243?partner=webmascon

что такое система Орфус?
подробнее
Удобный хостинг $6/мес.
- Поддержка PHP/Perl
- 500MB места на диске
- 15GB трафик в месяц
- Тестовые аккаунты
- Статистика
- MySQL база данных
- Панель управления
- SSH/FTP доступ
- 24x7x365 поддержка на русском
- Регистрация доменов
- Бесплатные поддомены.
- 100+ PHP скриптов
http://www.a1-hoster.com/