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

Ян Ллойд (Ian Lloyd)

Добро пожаловать в мир ошибки 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-й страницы с кодом, описанным в статье, и измените его по своему усмотрению.

Список литературы

Для подготовки данной работы были использованы материалы с сайта http://www.webmascon.com/