The Perfect 404
автор: 2004.01.16 Ян Ллойд (Ian Lloyd) и A List Apart
перевод: 2004.02.05 Максим Россомахин и Александр Качанов
Упс… Что-то не так. Вы в растерянности - ваша ли это ошибка или во всём виноват веб-сайт? Что же вам делать-то?
Добро пожаловать в мир ошибки 404. Вы запросили страницу, набрав в адресной строке URL или же кликнув по "мёртвой" ссылке - и вуаля! - вы в самом сердце виртуального "нигде". Веб-сайт, заботящийся о пользователях, протянет вам руку помощи, в то время как другие сайты не сделают ничего, понадеявшись на встроенные в броузеры механизмы сообщения об ошибках. Но мы-то можем поступить лучше, не правда ли?
Я не буду вдаваться в подробности о том, как вам надо настроить ваш сервер для правильной отдачи страницы о 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 (или же устаревшая закладка) не будут иметь 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:
Выкачайте пример 404-й страницы с кодом, описанным в статье, и измените его по своему усмотрению.
Ян Ллойд
Ян Ллойд (Ian Lloyd) руководит сайтом Accessify.com, который посвящен вопросам удобства работы с Web. Он активный участник проекта Web Standards Project.
« назад к списку статей
Рекомендую |
Якоб Нильсен Веб-дизайн. Книга Якоба Нильсена на www.ozon.ru на www.books.ru на www.bolero.ru |
Рекомендую |
Якоб Нильсен Дизайн Web-страниц. Анализ удобства и простоты использования 50 узлов на www.ozon.ru на www.books.ru |