Lav bedre 404 fejl-sider

Du ved sikkert allerede, at du kan lave dine egne 404-fejlsider til at erstatte browserens standard. Måden, du gør det på er såmænd bare, at du laver en specifik fejlside og kalder f.eks. 404.php

I din .htaccess-fil på din Apache-server skal du blot skrive:


ErrorDocument 404 /404.php

eller


ErrorDocument 404 http://www.v4d5.net/404.php

Bemærk, at der er en lille forskel på de to løsninger selvom brugeren vil se det samme.

Ved løsning nr. 2 (med den absolutte sti-struktur - altså http....) vil serveren re-directe brugeren. Det betyder at brugeren ikke får en 404 page not found-fejlmeddelelse (men derimod en 200 OK-meddelelse). Og det vil en søgemaskine så heller ikke gøre – og vil så ikke opdage, at siden ikke findes. Det kan jo være uhensigtsmæssigt.

Derfor er den første løsning (den med den relative sti-struktur) at foretrække, da den vil give søgemaskinen en 404-fejlmeddelse, og søgemaskinen kan så gøre med den, hvad den vil.

Hvad indeholder en god 404-side

Én ting, man ikke skal gøre på sin 404-side er at fortælle brugeren, at han er dum, når han ikke kan indtaste den rigtige URL.
I stedet bør man selv tage skraldet og skrive "Vi beklager....[indsæt selv undskyldning]".

Her er et par ting, du kan overveje at placere på din 404-side er:

En søgefunktion
Links til de mest populære sider på din hjemmeside
Et link til dit sitemap
Mulighed for at skrive til webmasteren (enten mail-adresse eller endnu bedre en formular)
Et rigtigt godt tilbud (det har vi tidligere brugt med succes på Kondomaten)

Det er ikke min skyld

Sandsynligvis er det ikke din skyld, at brugeren er endt, hvor han er. Måske er der nogen, der linker til dig med et galt link. Dét du kan gøre, er at sende dig selv en mail, hver gang det sker. Det kan gøres super-nemt med lidt PHP. Her er et eksempel til fri afbenyttelse:

<?
if (isset($_SERVER["HTTP_REFERER"])) {
	$henvisning = $_SERVER["HTTP_REFERER"];
	mail("webmaster@dinside.dk","Galt link","Der er et galt link placeret på ".$henvisning);
}
?>

Så vil du få en mail med det dårlige link. Nu kan du kontakte webmasteren på den pågældende side og be' dem rette linket eller du kan lave en 301 redirect på din egen side. I hvert fald kan du få løst problemet.

Track din hjemmelavede 404 side med Google Analytics

Du kan naturligvis også tracke din side med Google Analytics og ad den vej se, hvor dine besøgende kommer fra (hvis du ikke vil benytte løsningen ovenfor). Måden du gør det på, afhænger af, om du har den nye eller gamle tracking kode. Se her, om du har den nye eller gamle tracking kode.

Har du den gamle tracking kode, skal du tilføje denne linje til din tracking kode:

urchinTracker("/404.php?page=" + _udl.pathname + _udl.search);

så det kommer til at se således ud:

<script type="text/javascript"
src="http://www.google-analytics.com/urchin.js">
</script>
<script type="text/javascript">
_uacct = "xxxxx-x";
urchinTracker("/404.php?page=" + _udl.pathname + _udl.search);
</script>

Har du den nye tracking kode, skal du tilføje denne linje

pageTracker._trackPageview("/404.php?page=" + document.location.pathname + document.location.search + "&from=" + document.referrer);

til din side (hvis du har kaldt siden 404.php vel at mærke). så det kommer til at se sådan ud:

Giv søgebotterne besked på at holde sig væk

Jeg gider egentlig ikke have min 404-side indexeret af søgemaskinerne, så jeg inkluderer den i min robots.txt-fil (Hvis du vil vide mere om robots.txt, så kan du læse en glimrende gennemgang af robots.txt-filen her) For at fjerne din side, skal din robots.txt indeholde følgende:


User-agent: *
Disallow: /404.php

Du kan også bare vælge at indsætte denne linje i headeren på din 404-side:

<meta name="robots" content="noindex">

Fanden ta' Microsoft

Ingen regler, guidelines eller lignende uden at man skal tage specielt hensyn til Microsoft – og det gælder selvfølgelig også din 404-side.

Microsoft har med deres browser Internet Explorer valgt, at hvis din 404 fejl-side er under 512 bytes i størrelse (uden grafik), ja så viser Internet Explorer sin egen fejl-side. Så sørg for at lave din side større end 512 bytes (det betyder rigeligt med tekst).

Det er vist den eneste forhindring Microsoft har lagt i vejen for dig i dette scenarie ;-)

That's it - nu er det din tur

Det var så alt, hvad jeg mener er relevant omkring 404-sider. Mener du, at jeg mangler noget så fyr det af i kommentarerne. Har du selv en kreativ 404-side, så smid den i kommentarerne, så andre kan nyde den.

Er du interesseret i at lave den ultra-seje løsning, hvor du tager hensyn til, hvordan brugeren kom ind på din 404-side (altså tastede forkert, broken link eller fra en søgemaskine), så se A List Aparts artikel om den perfekte 404 side (på engelsk).

Det ska' lige siges, at det ikke kun er 404 fejl-sider, du kan lave selv, men det er nok den mest relevante. Her finder du Apaches dokumentation om ErrorDocument (bemærk, det er for Apache 2.0), så kan du selv lege videre

Nu er det din tur. Her er et par eksempler på kreative 404-sider til inspiration.
http://forum.vbulletinsetup.com/blabla/(skal ses - skærmdump er ikke nok)
Check denne her - den er suveræn
404 fejl side

Kommentarer

25 Sep 2008 11:41

Rosenstand
Godt indlæg! Her er min så: http://www.concept-i.dk/404.html

25 Sep 2008 12:39

V4D5
Det er jo et mønster-eksempel på en 404'er, Thomas.

25 Sep 2008 12:45

Rosenstand
Tak - svarer den gamle let rødmende...

25 Sep 2008 12:54

Dennis Aaen
Super lille guide til, hvordan man kan lave sig egen 404 fejl-side som passer til ens design på selve hjemmesiden.

25 Sep 2008 13:24

Pål Heick
404-sider er cool :-) Faldt over en laang liste af flere 404-sider her.

25 Sep 2008 13:25

Pål Heick
ok - urlen gik vist ikke igennem filteret. Prøver igen:
http://www.smashingmagazine.com/2007/08/17/404-error-pages-reloaded/?

25 Sep 2008 13:58

V4D5
Ja - 404-sider er cool. Giver mulighed for lidt kreativitet. Smashing Magazine leverer nogle super-artikler. Masser af lækre eksempler at lade sig inspirere af der. Og velkommen til, Pål.

@Dennis - tak ;-)

25 Sep 2008 15:11

Lars Bachmann
God guide du har lavet her.

Her er min fejl side: http://www.larsbachmann.dk/404-fejl.html

25 Sep 2008 15:52

Claus
Dejligt. vil bruge guiden her til at få styr på mine 404 (ved jeg har adskillige sider hvor det ikke er helt på plads)
Tak inspiration fra jer andre til at lave en god og brugbar 404 side.

25 Sep 2008 17:37

V4D5
@Bachmann - du er åbenbart også en mønster-elev i 404-klassen. Præcis som sådan én skal være.

25 Sep 2008 18:05

Søren Hugger Møller
Som de andre vil jeg da også sige "god artikel". Og så lige smide et link ti min fejl side også :P http://spiri.dk/404 - den er nok ikke helt perfekt, men kan være jeg skal prøve at lege lidt med den.

25 Sep 2008 19:11

V4D5
@Søren - den er da suveræn (det hjælper nok også at have et svagt punkt for hr. Homer himself)

25 Sep 2008 20:05

Niels Gamborg
Endnu en super god artikel, vadskaer.

Jeg har også min egen 404, men den er dog temmelig slap i forholdt til alle de andres. Skal nok lige over den igen.

25 Sep 2008 22:44

Søren Sprogø
Top naise artikel!

Bruger man Webmaster Central har man desuden adgang til en lille, elegant Google Søgeboks man let kan implementere på sin 404-page. Se et eksempel her:
http://www.afdeling18.dk/moomoo.aspx

03 Oct 2008 01:38

René Madsen
Rigtig god beskrivelse, giver god inspiration og godt beskrevet.

03 Oct 2008 09:31

V4D5
Tak for det, René - og velkommen her på V4D5.
Nu har du jo læst artiklen, så du må se at komme i gang med at lave en customized 404-side til 2webdesign.dk

14 Oct 2008 16:35

Morten
Hej
Tak for en god artikel. Det første jeg gjorde efter at havde læst denne artikel var at ændre i min .htaccess fil

.... Nej det første jeg gjorde var at få mavekrampe af grin over Lars Bachmanns 404 side

16 Oct 2008 21:06

V4D5
Jamen selv tak da. Er glad for, at mine skriverier kan bruges.

29 Jan 2009 15:37

Jacob W
Rigtig fed artikel Vads :)

Jeg prøvede lige og se hvordan kondomatens 404 så ud, og fandt lige en lille tastefejl:
http://www.kondomaten.dk/bla
"Vi har skiftet design på siden og i den forbindelse, er der nogle sider, er der røget."

Bør nok rettes til:
"der er røget."

Jeg kan se at du mangler nogle linjer i din GA kode. Jeg har dem her:
pageTracker._initData();
pageTracker._trackPageview();

Men dem kan man måske bare slette hvis man ikke bruger dem til noget? Jeg kan se at den sidste af linjerne er den du har "udfyldt" for at tracke din 404.

Desuden har du en linje midt i som jeg ikke har:
(script src="http://www.google-analytics.com/ga.js" type="text/javascript")(/script)

Hvor stammer den fra, for den er ikke med i den oprindelige man får fra GA?

27 Feb 2009 08:35

peterK
Wov for en fed liste. Kan helt sikkert hjælpe mig.

13 May 2010 02:31

Darkrune
Hvordan ved jeg det er den rigtige .htaccess jeg bruger?

29 Sep 2011 15:50

Felix
Hej Vadskær.

Tak for god info og lige et n00b-spørgsmål.
Hvordan skal denne kode:
pageTracker._trackPageview("/404.php?page=" + document.location.pathname + document.location.search + "&from=" + document.referrer);

se ud, hvis man bruger denne form for analytics:
_gaq.push(['_trackPageview']);

På forhånd tak
Felix

16 Feb 2012 23:19

Casper Schneidereit
Så er jeg også med på vognen af alternative 404 sider :-). http://danmark.shopwithsocks.com/404

Har du lyst til at kommentere, er du mere end velkommen

Navn:	*
Email:	* (bliver ikke vist)
Hjemmeside (husk http://):