Досконала 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 (можливо, ви не маєте прав на виконання серверних скриптів - це залежить від налаштувань вашого сервера). Тому не забувайте про тег

По-перше, вам потрібно буде задати кілька змінних:

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: ';

str + = '

/> ';

str + = '

"30" /> ';

str + = '

---

';

str + = '

You may not be able to find the »

page you were after because of: ';

str + = '

';

str + = '

1. An out-of-date bookmark/favorite »

   ';

   str + = '

2. A search engine that has an out-»

   of-date listing for us ';

   str + = '

3. A mis-typed address ';

   str +='';

   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

   // loop through all the parameters in the referring »

   page's URL

   (

   for (q = 0; 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 ( "

   You did a search on »

   "+»

   strSite + " for" "»

   + strSearchTerms + "". However, »

   their index appears to be out of date. »

   All is not lost!

   We think that the »

   following page (s) on our site will be able to help »

   you: ");

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

   if (

   (strSearchTerms.indexOf ( "widgets")> = 0 )||

   (strSearchTerms.indexOf ( "electronics")> = 0)

   )

   (

   document.write ( " Our »

   excellent widgets page
   ");

   )

   )

   )

   Зрозуміло, якщо у вас на сайті є свій пошуковий механізм, ви могли б використовувати ключові слова з referrer і провести пошук автоматично. Однак ручний пошук все-таки краще, так як автоматичний пошук може видати абсолютно не ті сторінки.

   Бита посилання на сайті

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

   if (! blnSearchReferral) (

   strSite = StrReferrer;

   strSite = StrSite.split ("/");

   strSite = StrSite [2];

   document.write ( "

   You were incorrectly referred to »

   this page by:

   'target =' _blank '> " + StrSite + " »

   
   We suggest you try one of the links below: »

   ");

   )

   ... і цими посиланнями будуть посилання на карту сайту та посилання на головну сторінку сайту, про які ми говорили на початку.

   А що, якщо проблема в вашому сайті?

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

   blnInsiteReferral = ((strReferrer.indexOf ( "http://»

   www.mysite.co.uk ")> = 0 )||

   (strReferrer.indexOf ( "http://www.myothersite.com") »

   > = 0))

   if (blnInsiteReferral)

   (

   document.write ( "

   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). ");

   )

   Рішення проблеми

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

   Що ще почитати

   Подивіться, як дані ради працюють у реальному житті. Ось приклади з сайтів Accessify і A List Apart:

   Скопіюйте дану посилання в адресний рядок броузера, щоб зімітувати випадок з застарілої закладкою: http://www.accessify.com/err.asp

   А от варіант зі зламаною посиланням

   Імітація посилання з результатів пошуку на Google [тут задіяна проміжна сторінка]

   викачати приклад 404-ї сторінки з кодом, які описані в статті, і змініть його на свій розсуд.

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

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