Perfektní 404

„Jejda. Něco je špatně. Nejste si jisti – byli jste to vy? Byly to stránky? Co dělat?“ Vítejte do světa chybové stránky 404. Žádali jste stránku – ať už vepsáním URL přímo do adresní řádky prohlížeče nebo kliknutím na zastaralý odkaz a ocitli jste se uprostřed kybernetického prázdna. Uživatelsky přítulné stránky vám podají pomocnou ruku, zatímco většina ostatních jednoduše neudělá nic, spoléhaje se na vestavěnou schopnost prohlížeče vysvětlit uživateli, v čem je problém. Mohli bychom to však udělat lépe, nebo ne?

Nebudu zacházet do podrobností o tom, jak nastavit váš server, aby posílal uživatelsky definovanou stránku 404 – místo toho vás odkáži na následující články:

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

Nicméně, navrhnu vám strategii, jak vytěžit maximum z jinak ztracené věci.

Než začneme, musím prozkoumat nejobvyklejší důvody, pro něž se uživatelé ocitají na chybové stránce 404:

• špatně zapsané URL (nebo zastaralý bookmark)
• zastaralý odkaz z vyhledávače
• chybný interní odkaz, kterého si webmaster nevšiml

Všechny výše uvedené příčiny mají stejný následek, je však potřeba s nimi zacházet mírně odlišně – informace na chybové stránce 404 musí být upraveny pro každý případ zvlášť. Existuje několik triků, které můžete uplatnit vždy, můj první návrh je však jednoduchý…

Neukazujte prstem

Řekněte jim, co je špatně, ale nenapomínejte uživatele, i když víte, že je to jejich chyba! Je dobré použít fráze jako „mohlo se stát“ a „možná“. Nevozte se na návštěvnících svých stránek – problém by se mohl obrátit proti vám.

Nezbytnosti 404

Kromě textu „něco je špatně“ byste měli zajistit, aby vaše chybová stránka obsahovala následující:

• Odkaz na mapu stránek (máte-li ji) a na titulní stránku. Toto je nejsnazší cesta, jak dostat uživatele z problémů. Toto primitivní řešení nevyžaduje žádné inteligentní skriptování.
• Vyhledávací box. Jestliže umožňujete uživatelům vyhledávat ve svých stránkách, přidejte vyhledávací rozhraní i do chybové stránky 404. Pokud ve svých stránkách integrované vyhledávání nemáte a přitom často generujete chybovou stránku 404, měli byste si ho pořídit.
• Minimalistický vzhled. Vyhněte se integraci veškeré standardní navigace. Měli byste se vyvarovat rozptylování uživatele. Mimoto snaha integrovat veškerou možnou navigaci do chybové stránky může vést k neúměrnému nárůstu nároků na údržbu. (Vaše chybová stránka 404 může zaostat ve vývoji za zbytkem stránek, není-li aktualizována automaticky, a poslední věc, kterou můžete chtít, je zastaralá nebo nefunkční navigace v chybové stránce 404. Jaká to ironie!)

Vyvarujte se také používání odborného žargonu. Podívejte se, spolu můžeme mluvit o čtyři sta čtyřce, že? My si rozumíme. Ale šedesátiletá Doris, která narazí na nefunkční odkaz při procházení stránek o pletení, nebude mít ani tušení, co je to chyba 404. Chcete-li použít frázi „Chyba 404“ („Error 404“, „404 Nenalezeno“, „404 Stránka nenalezena“, „404 Soubor nenalezen“, „404 Not found“, „404 Page not found“, „404 File not found“ a podobné), učiňte tak s citem – vložte ji do poznámky v patičce, jako úlitbu těm, kteří rozumí nářečí webu.

A teď se podívejme, jak můžete dosáhnout toho, aby 404 pracovala pro vás a ne proti vám.

Pojďme na to chytře

Zde bych vás chtěl upozornit, že následující řešení vyžaduje jisté množství JavaScriptu (protože v závislosti na nastavení nemusíte být schopni použít skriptování na straně serveru). Ujistěte se tedy, že používáte <noscript>, abyste poskytli příslušnou informaci i lidem, kteří mají skriptování zablokované. Pokud můžete použít skriptování na straně serveru, měli byste ho upřednostnit – žádné problémy s přístupností nebo podporou prohlížečů – takže si upravte následující kód podle potřeby.

Nejprve budete muset definovat několik proměnných:

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

A jak je využijeme?

Chybně zapsané URL

Chybně zapsané URL (nebo zastaralý bookmark) nebude mít žádný referrer, takže váš kód identifikující tento scénář by měl vypadat takto:

if (strReferrer.length==0)
   {
   str+=’Domníváme se, že shledáte užitečným některý z následujících odkazů:<\/p>‘;
   str+='<a href=“\/home.php“><img src=“/images/ home.gif“ alt=“Titulní stránka“ width=“100″ height=“30″ \/> <\/a>‘;
   str+='<a href=“\/site-map.php“><img src=“/images/ site-map.gif“ alt=“Mapa stránek“ width=“100″ height= „30“ \/><\/a>‘;
   str+='<hr \/>‘;
   str+='<p><strong>Možná že nemůžete najít stránku, kterou hledáte, protože:<\/strong><\/p>‘;
   str+='<ol type=“a“>‘;
   str+=‘ <li>máte <strong>zastaralý odkaz či bookmark<\/strong><\/li>‘;
   str+=‘ <li>vyhledávač vám poskytl <strong>zastaralý výpis</strong><\/li>‘;
   str+=‘ <li>jste <strong>špatně zapsal(a) adresu</strong><\/li>‘;
   str+='<\/ol>‘;
   document.write(str);
}

Zastaralý odkaz z vyhledávače

Pokud je referrer definován, můžeme se pokusit o identifikaci specifického vyhledávače (tohle si obvykle můžete zařídit podle své chuti). Potom můžete získat parametry vyhledávání, zjistit shodu s klíčovými slovy, na jejichž sledování se zaměřujete, a nabídnout uživateli stránku, která pravděpodobně bude odpovídat jeho dotazu:

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;
   //ziskani domeny — rozdeleni na prvnim lomitku
   var arrSite=strReferrer.split(„/“);
   // zjisteni parametru hledani
   var arrParams=strReferrer.split(„?“);
   var strSearchTerms = arrParams[1];
   arrParams=strSearchTerms.split(„&“);
   strSite=arrSite[2];
   var sQryStr=““;
   
   //urceni retezcu, ktere pouzivaji ruzne vyhledavace
   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++)
   //prochazeni vsemi parametry odkazujici URL
      {
      for (q=0;q<arrQueryStrings.length;q++)
      {
      sQryStr = arrQueryStrings[q];
      if (arrParams[i].indexOf(sQryStr)==0)
         {//nalezen hledany termin!
         strSearchTerms = arrParams[i];
         strSearchTerms = strSearchTerms.split(sQryStr);
         strSearchTerms = strSearchTerms[1];
         strSearchTerms = strSearchTerms.replace(„+“, “ „);
         }
      }
      }
   //sdelte navstevnikovi na jake strance vznikl problem a co tam hledal
   document.write („<p>Přicházíte z <strong> <a href='“ + strReferrer + „‚ target=’_blank‘>“ + strSite + „<\/a> <\/strong> kvůli \“<strong>“ + strSearchTerms + „<\/strong>\“. Zdá se však, že jejich index je zastaralý.<\/p> <h2>Není vše ztraceno!<\/h2><p>Nabízíme vám následující stránky, které vám mohou být užitečné:<\/p>“);

Nyní můžete přidat několik řádek, jimiž zachytíte klíčové fráze vyhledávání, které nechcete ztratit. Řekněme, že máte dobré výsledky ve vyhledávání slov „electronics“ a „widgets“, ale zrovna jste trochu zamíchali svými stránkami – nebylo by dobré přijít o všechny ty odkazy z Google, že?

   if (
   (strSearchTerms.indexOf(„widgets“)>=0)||
   (strSearchTerms.indexOf(„electronics“)>=0)
   )
      {
      document.write(„<a href=’\/cool-widgets.htm‘>Naše skvělá stránka o \“widgets\“.<\/a><br \/>“);
      }
   }
   }

Máte-li ovšem ve svých stránkách interní vyhledávací systém, můžete použít parametry z odkazujjícícho URL k automatickému generování výsledků vyhledávání, což je lepší než tento „manuální“ proces. I když někdy může být ruční zadávání odkazů na klíčové fráze upřednostňováno (jinak byste také mohli jen přidávat další matoucí odkazy nikam).

Nefunkční (interní) odkaz

Když už jsme se postarali o chybné odkazy z vyhledávačů, musíme se stejně postarat o odkazy, které z vyhledávačů nepocházejí (nebo alespoň ne z těch, na něž si dáváme pozor). Musíme přidat několik dalších podmínek:

if (!blnSearchReferral)
   {
   strSite = strReferrer;
   strSite = strSite.split(„/“);
   strSite = strSite[2];
   document.write(„<p>Byl(a) jste chybně odkázána na tuto stránku z: <strong><a href='“ + strReferrer + “ ‚target=’_blank‘>“ + strSite + „</a></strong> <br />Navrhujeme vám, abyste vyzkoušel(a) jeden z níže uvedených odkazů: </p>“);
   }

…těmi odkazy mám na mysli odkaz na titulní stránku a mapu stránek, jak jsem je zmiňoval výše.

Co když jsou problémem vaše vlastní stránky?

Nemůžete ve své 404 jednoduše prohlásit: „Tyto stránky mají chybný odkaz.“ Zvlášť když je ten odkaz váš vlastní. V takovém případě je na místě změnit jazyk a přiznat svůj díl viny!

blnInsiteReferral =((strReferrer.indexOf(„http://www.mysite.co.uk“)>=0)||
      (strReferrer.indexOf(„http://www.myothersite.com“) >=0))
   if (blnInsiteReferral)
      {
      document.write(„<p>Naše chyba! Prosíme, přijměte naši omluvu – postaráme se, aby vývojář odpovědný za tento chybný odkaz byl potrestán dvaceti ranami bičem (ale až poté, co tento problém odstraní).<\/p>“);
      }

Řešení problému

Takže jsme připravili cestu ven z černé díry chybové stránky 404. Ale vyřešili jsme tím něco? Ne. Máme určité možnosti, známe-li požadovanou stránku a stránku odkazující (pokud měl požadavek referrer). Tyto informace můžeme uložit v databázi, ať už automaticky, nebo manuálně, prostřednictvím tlačítka „oznámit chybný odkaz“ na stránce s chybou 404. S trochou štěstí se tak dozvíte o těch nejdůležitějších chybných odkazech. Od tohoto bodu je řešení už jen na vás.

Související odkazy

Chcete-li vidět popisované machanismy v akci, vyzkoušejte následující příklady z webů Accessify a A List Apart:

• vložte následující odkaz do adresního řádku prohlížeče, uvidíte, co se stane v případě, že nějaký odkaz zastará: http://www.accessify.com/err.asp
• poškozený odkaz
• odkaz zdánlivě vedoucí z vyhledávání na Google [je nutno projít vloženou mezistránkou]

Stáhněte si chybovou stránku 404 popsanou výše (a vylepšete ji podle vlastních potřeb).

Pozn. red.: Přepis v článku uvedeného skriptu do PHP můžete nalézt na fóru SitePoint (stáhnout z Intervalu). Chybovou stránku Intervalu můžete vidět na adrese http://interval.cz/error-404.htm.

Rozšíření pro české vyhledávače

Chcete-li rozšířit skript z tohoto článku o specifické české vyhledávače, stačí si najít ten, o který vám jde, a zadat do něj dotaz. Z URL výsledkové stránky už snadno odvodíte jak jeho doménu, tak i řetězec, označující proměnnou s hledaným výrazem. Výsledek může vypadat například takto:

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))
   (strReferrer.indexOf(„seznam.cz“)>0)||
   (strReferrer.indexOf(„centrum.cz“)>0)||
   (strReferrer.indexOf(„jyxo.cz“)>0)||
   (strReferrer.indexOf(„atlas.cz“)>0))
   (strReferrer.indexOf(„zoohoo.cz“)>0)||
   (strReferrer.indexOf(„tiscali.cz“)>0)||
   (strReferrer.indexOf(„1.cz“)>0)||
   (strReferrer.indexOf(„volny.cz“)>0))
   {
   blnSearchReferral=true;
   //ziskani domeny — rozdeleni na prvnim lomitku
   var arrSite=strReferrer.split(„/“);
   // zjisteni parametru hledani
   var arrParams=strReferrer.split(„?“);
   var strSearchTerms = arrParams[1];
   arrParams=strSearchTerms.split(„&“);
   strSite=arrSite[2];
   var sQryStr=““;
   
   //urceni retezcu, ktere pouzivaji ruzne vyhledavace
   var arrQueryStrings = new Array();
   arrQueryStrings[0]=“q=“; //google, altavista, msn, centrum, atlas, zoohoo, 1.cz
   arrQueryStrings[1]=“p=“; //yahoo
   arrQueryStrings[2]=“ask=“; //ask jeeves
   arrQueryStrings[3]=“key=“; //looksmart
   arrQueryStrings[4]=“w=“; //seznam
   arrQueryStrings[5]=“s=“; //jyxo
   arrQueryStrings[6]=“query=“; //tiscali
   arrQueryStrings[7]=“search=“; //volny
…

Informace o překladu

Původní článek: The Perfect 404 (A List Apart, 16. 1. 2004)
Překlad: Málek, Vilém.
Odborná a jazyková spolupráce: Piper, Eric, Kopp, Ondřej.
Přeloženo se svolením autora a magazínu A List Apart (další překlady).

About translation

Original article: The Perfect 404 (A List Apart, 16. 1. 2004)
Translation: Málek, Vilém.
Language and expert collaboration: Piper, Eric, Kopp, Ondřej.
Language of translation: Czech (for readers from Czech and Slovak republics)
Translated with the permission of A List Apart Magazine and the author (other translations).

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.