Letar du efter de bästa exemplen på design av 404 error page?
Rätt 404 page kommer att hålla besökarna kvar på din site längre och uppmuntra dem att konvertera. Genom att skapa en engagerande, hjälpsam och underhållande 404 page kan du ge besökarna en bra upplevelse, även när de ser ett error.
I den här artikeln delar vi några av de bästa designerna för 404 error page.
Varför du måste optimera din 404-design
Ett 404 error inträffar när servern inte kan nå den page som någon försöker besöka. Istället för att visa en tom vy, visar servern en 404 page istället.
De flesta templates för WordPress levereras med en grundläggande 404 template, men dessa designer är vanligtvis grundläggande och enkla.
De visar inte heller något content från din website, till exempel populära posts som besökaren kanske vill läsa, eller din sites navigation menu.
Om du visar besökarna en tråkig, ohjälpsam 404 page är det mer troligt att de lämnar din website, vilket ökar din avvisningsfrekvens och skadar din sökmotorsoptimering i WordPress.
Helst vill du minska antalet 404 error på din website genom att redirecta användarna till liknande content.
Det är dock inte möjligt att alltid göra det. Ibland kan ett 404 error uppstå på grund av en felstavad URL eller link.
Med det i åtanke är det smart att skapa en customize 404 page som har yours eget varumärke och content. Du kan också hjälpa besökarna att hitta det de letar efter genom att lägga till sökfält, menyer, links och annat användbart content.
Det enklaste sättet att skapa en customize 404-design är genom att använda SeedProd plugin. Det är den mest populära drag and drop landing page builder, så du kan skapa en custom 404-sida utan att skriva någon kod.
SeedProd har också massor av professionellt utformade 404 templates som hjälper dig att skapa en beautiful error page, snabbt.
När du har installerat SeedProd är det en bra idé att vända dig till dina konkurrenter för inspiration. Med detta i åtanke har vi samlat de bästa designerna för 404 error pages för dig att klura på.
1. DFY
Många websites använder timers för att skapa en känsla av brådska och få fler konverteringar med hjälp av FOMO. DFY tog dock det ovanliga beslutet att add to en nedräkningstimer till sin 404 page.
Denna timer räknar ner sekunderna tills besökaren automatiskt redirectas till den customize home page. Genom att skapa en limit gör DFY omedelbart sin 404 page mer engagerande och pressar besökarna att fatta ett beslut innan tiden rinner ut. Det är också ett ovanligt designval, så det kommer garanterat att fånga besökarens uppmärksamhet.
404-sidans meddelanden add to denna känsla av brådska, vilket gör detta till en mycket dramatisk och övertygande page design.
För mer information om hur du använder tidsgränser på din site, vänligen se vår guide om hur du lägger till ett widget för nedräkningstimer i Wordpress.
2. OptinMonster
OptinMonster är ett av de bästa tilläggen för att genomföra email för WordPress som används av över 1,2 miljoner websites. Det har allt du behöver för att förvandla besökare till prenumeranter och customers.
Inte överraskande använder OptinMonster sin 404 page som ett lead-generationsverktyg med en iögonfallande animation och clear call-to-action.
Ännu bättre är att deras pitch är relaterad till besökarens situation.
När någon landar på en 404 page finns det en stor chans att de ger upp och överger your website, eftersom de inte kan hitta det de letar efter.
OptinMonsters pitch spelar in i detta genom att fråga: ”Visste du att över 70% av besökarna som överger din website aldrig kommer tillbaka?
Eftersom besökaren redan tänker på att överge en website är det mer troligt att de agerar på denna statistik. Call-to-action erbjuder sedan besökarna en gratis e-bok som lovar att konvertera övergivna website-besökare till prenumeranter.
Om du klickar på knappen ”Download Now” öppnas en popup där personen kan skriva in sin email address och få sin gratis download.
Som vi kan se använder OptinMonster 404 error till sin fördel genom att skapa en pitch som känns väldigt relevant och aktuell.
Om du vill använda din egen 404 page för leadgenerering, kan du samla email addresses med SeedProds Giveaway, Contact Form eller Optin Form block.
3. Kualo
Många websites använder gamification för att bygga kundlojalitet och få folk att komma tillbaka.
Kualo har tagit detta ett steg längre och spelifierat sin 404 page.
Istället för att hjälpa besökarna att hitta tillbaka till Kualos huvudwebbplats utmanar 404 page dem till ett Space Invaders-spel.
Detta förvandlar ett frustrerande error message till en rolig överraskning. Ännu bättre är att Kualo ger dig ett incitament att fortsätta spela när dina liv är slut.
Popupen erbjuder Players en rabatt på webbhotell om de hanterar att få över 1000 poäng. Det här är ett perfekt exempel på en 404 page som får besökarna att stanna kvar längre på din website och som adderar värde till användarupplevelsen.
4. Resenär
TripAdvisors 404 page är rolig och funktionell, och inleds med ett skämt som är specifikt för resebranschen.
När någon landar på din 404-sida kan de vara frustrerade över sin upplevelse. Humor kan vara ett bra sätt att återengagera dessa människor.
Ännu bättre är att skämten alltid knyter an till TripAdvisors varumärke.
Varumärkesbyggande är en av de största fördelarna med att ersätta WordPress 404-sida med en custom design, och TripAdvisors page visar att varumärkesbyggande inte bara är customizers logotyper och images. Orden på din 404 page är lika viktiga som grafiken.
404 page lyfter också fram alla de viktigaste area på TripAdvisor website, vilket hjälper visitorerna att hitta det de letar efter.
Eftersom navigation är så viktigt, rekommenderar vi att du tittar på SeedProd’s Nav Menu block. Det låter dig bygga alla typer av menyer direkt i page editor. Detta gör det enkelt att add to användbara menyer till din WordPress website.
5. Brett Terpstra
Vid första anblicken kan Brett Terpstras 404 page se enkel ut, men den verkliga kraften ligger i dess lista över föreslagna posts.
Brett Terpstras 404 page visar en lista med posts som innehåller keywords relaterade till den länk som besökaren försökte komma åt när de fick 404 error.
Det är ett enkelt trick som adderar mycket till upplevelsen för besökaren.
Dynamiskt content kan göra din site mer användbar, engagerande och tilltalande, så det är vettigt att utöka detta till din 404 page.
Om du vill veta mer om riktat content, vänligen se vår guide om hur du visar anpassat innehåll för olika användare i WordPress.
6. Constant Contact
Constant Contact är en annan 404 page som använder humor för att vinna över frustrerade besökare. Providern av email-tjänster använder ett informellt språk för att tilltala sin målgrupp, samtidigt som de ger besökarna en användarvänlig väg tillbaka till homepage.
Om du rullar ner på sidan hittar du länkar till några andra viktiga områden på Constant Contact-webbplatsen.
Men det vi verkligen gillar är den korta hover-animationen som spelas upp varje gång du för musen över ett av de blå blocken.
Animering kan göra en page mer engagerande, och de många hover-effekterna och animeringarna skapar ett berättande element när besökaren rör sig runt på 404-sidan.
Det finns några olika sätt att animera din 404 page, inklusive att markera och rotera din text med hjälp av SeedProd Animated Headline block.
SeedProd kommer också med över 40 entréanimationer som du kan add to alla block, inklusive images, text, knappar, videoklipp och mer.
För mer information, vänligen se vår guide om hur du lägger till CSS-animationer i WordPress.
7. IMDb
De flesta människor kommer att stöta på din 404 page när de letar efter något helt annat. Eftersom 404 error är oväntat är det viktigt att försäkra besökarna om att de fortfarande är på din site genom att upprätthålla varumärkeskännedom.
IMDb gör detta på ett mycket subtilt och lättsamt sätt genom att visa ett berömt citat från en film eller ett TV-program.
De innehåller också en link för att lära sig mer om TV-serien eller filmen som de citerar.
På så sätt förstärker IMDb:s 404 page deras varumärke samtidigt som den ger besökarna ett roligt sätt att utforska deras content.
Attvisa slumpmässiga citat på din 404 page kan vara roligt och engagerande. Det är dock fortfarande en bra idé att tillhandahålla länkar till webbplatsens viktigaste content, bara ifall besökaren inte är intresserad av den slumpmässigt valda länken.
Det är precis vad IMDb gör, genom att lägga till en länk till deras homepage.
8. SteveMadden
Steve Madden försöker vända ett error-meddelande till försäljning genom att visa sina bästsäljande produkter på 404 page.
Ännu bättre är att de har add to filter, så att customers kan browsing de olika produkterna direkt från 404 page.
Om du run en onlinebutik kan du enkelt visa dina mest populära produkter genom att lägga till blocket Bästsäljande produkter på din 404 page.
SeedProd har också WooCommerce block som du kan använda för att visa produkter som är till salu, högst upp rankade produkter, senaste produkter och mer.
När du utformar din egen 404 page är det en bra idé att använda samma header och footer som resten av din website. På så sätt förstärker du ditt varumärke och hindrar besökarna från att undra om de är på rätt plats.
Detta är exakt vad vi ser med Steve Maddens 404 page, men vi gillar viss hur mycket content de hanterar för att få plats i dessa två små areas.
Headern och footern hjälper besökarna att hoppa direkt till alla delar av Steve Maddens store, eller till och med webbplatser från tredje part som företagets Twitter- och Facebook pages.
De ger även tillgång till interaktiva areas, inklusive en smart produktsökningsbar.
9. Lägenhetsterapi
Denna 404 design från Apartment Therapy fångar omedelbart besökarens uppmärksamhet med en stor hero image.
Apartment Therapy använder också detta utrymme för att förstärka sin varumärkesidentitet genom att visa ett snyggt foto av ett kök tillsammans med ett skämt om washi-tejp.
Om du vill add to en hero image till din design, så har SeedProd massor av färdiga hero sections. Dessa är samlingar av images, calls-to-action och till och med enkla formulär för insamling av leads som du kan add to din 404 design med ett click på en knapp.
Det finns till och med en section som skulle passa perfekt på Apartment Therapy website.
10. Skrikande groda
I likhet med några av de andra 404 pages på den här listan använder Screaming Frog humor för att försöka engagera besökarna.
Men till skillnad från de andra företagen på den här listan skapar Screaming Frog ett verktyg som hjälper webbplatsägare att hitta och fixa trasiga länkar. Deras 404 page slösar ingen tid på att påpeka ironin i att Screaming Frog website har en trasig URL.
Genom att skämta med sig själva levererar Screaming Frog en minnesvärd 404 page som inte tar sig själv på för stort allvar.
Den animerade bakgrunden hjälper också den här 404-designen att sticka ut från mängden.
Videoklipp och animationer är ett bra sätt att göra din 404 page mer engagerande. De kan dock add to 404 sidans hämtar tider.
Följ därför våra tips för att snabba upp WordPress prestanda, särskilt om du använder många stora eller högupplösta videoklipp i din 404-design.
Du bör heller aldrig uppladda videoklipp direkt till WordPress, eftersom det kan ha stor inverkan på din sites prestanda.
Istället rekommenderar vi att du uppladdar filen till ett webbhotell för videoklipp och sedan embedar filen på din site.
Detaljerade instruktioner finns vänligen i vår guide om hur du enkelt embedar videoklipp i WordPress.
11. MonsterInsights
MonsterInsights är det bästa WordPress-tillägget för Google Analytics. Det allow you att enkelt installera Google Analytics i WordPress och visar användbara rapporter i WordPress dashpanelen.
MonsterInsights är ett bra exempel på en branded page. Så snart som visitorerna kommer till 404 page kommer de att se en unik grafik baserad på MonsterInsights logga.
Det här är ett roligt sätt att låta besökarna veta att de fortfarande är på MonsterInsights website, även om de har följt en bruten länk.
Den här page förklarar också vad ett 404 error är och föreslår några saker som besökaren kan göra för att fixa felet. Att hjälpa människor att själva lösa 404 error kan förbättra upplevelsen för besökaren, så det är en bra idé att inkludera denna information på din egen 404 page.
Även om du uppmuntrar visitorerna att fixa problemet själva är det fortfarande viktigt att add links till det viktigaste innehållet på din site.
MonsterInsights 404-sida ger människor några alternativ genom att inkludera länkar till supportsidan, MonsterInsights kunskapsbas, prissättningssidan och mer.
12. MAD
MAD har skapat en enkel men mycket interaktiv page genom att använda toggles för att skapa ett 404 error message. You can remove this message by turning all the toggles off, or even create your own message by activating the toggles.
Det är en mycket enkel men trevlig upplevelse som är utformad för att få mycket interaktion från besökarna. Det är också en mycket unik 404 page som visitorerna kommer att minnas och kanske till och med dela med sig av till andra på social media.
Denna slående design bevisar att du kan bygga en minnesvärd och underhållande 404 page från en enkel idé.
13. Sydväst
Southwests 404 page försöker hjälpa besökare att komma tillbaka på track genom att förklara vad en 404 är och varför de kan se error. De föreslår även några möjliga fixar, vilket kan vara till hjälp om din målgrupp inte är särskilt bekant med 404 error.
Där denna design verkligen sticker ut är hur många links den hanterar för att visa på ett snyggt och organiserat sätt.
If you scroll to the bottom of the screen, then you will notice social media links, contact information, a link to join their email list, and many other URLs, all arranged in clear and user-friendly categories.
404-sidan i Southwest är ett bra exempel på hur mycket information du kan packa in på en page utan att överväldiga besökaren.
Här är rätt layout nyckeln, och Southwest gör ett bra jobb med att använda kategorier, listor och olika sektioner för att skapa en 404 page som är informationsfylld men ändå användarvänlig.
Om du vill kopiera Southwests layout är det enkelt att displayed WordPress widgets i columns. Vissa WordPress-teman kommer till och med med flera widget-klara areas i footern som standard.
14. Polo Garcia
Ett annat sätt att göra designen av din 404 page unik är att använda en animerad GIF eller en bakgrund med videoklipp i full vy.
Designern Polo Garcias website är ett bra exempel på det. Den använder en GIF i full vy av en ekorre på vatten. Detta skapar en visuellt engagerande och uppslukande upplevelse, även för en error page.
Denna taktik kan genomföra besökarens uppmärksamhet och göra dem mindre frustrerade över att landa på en icke befintlig page.
15. Dribbling
En av de bästa metoderna för att förbättra din 404 page är att rekommendera resurser eller lägga till ett search-formulär för att hålla användarna kvar på din website. Det är bra alltihop, men det finns utrymme för att tänja på gränserna för en verkligt unik upplevelse.
Ta Dribbble’s 404 page, till exempel. Istället för en statisk lista har de skapat ett interaktivt element där själva 404 error-meddelandet fylls med images som matchar ett specifikt färgschema.
Användarna kan sedan clicka på dessa interaktiva images för att utforska dem vidare. Detta add to ett lager av interaktivitet som ej ej endast håller användarna engagerade utan även förstärker Dribbble’s fokus på visuellt content.
Vanliga frågor om design av 404 Error Page
Nu när vi har gått igenom de bästa exemplen på design av 404-sidor, låt oss titta på några vanliga frågor om den här error-sidan.
Påverkar 404 pages sökmotorsoptimering?
Även om 404 error i sig inte direkt skadar din sökmotorsoptimering kan de indirekt påverka den genom att göra användarna frustrerade och få dem att lämna din site snabbt. En väldesignad 404 page kan faktiskt hjälpa din sökmotorsoptimering genom att erbjuda användbara resurser och hålla besökarna engagerade.
Hur ska en 404 page gilla att se ut?
Nyckeln till en 404 page är att vara clear och hjälpsam. Inkludera ett vänligt message som förklarar att sidan inte kan hittas, tillsammans med förslag för att komma tillbaka på track. Det kan vara links till din homepage, populärt content eller en site search bar.
Hur gör du en cool 404 page?
Du kan använda en page builder som SeedProd för att enkelt skapa en snygg 404-sida. Det har redan massor av 404 page templates som du kan använda så att du inte behöver börja från scratch.
En annan page builder du kan prova är Thrive Theme Builder, som också är lätt att använda för att designa en 404-sida.
Har 404 pages footers?
Footers är ej obligatoriska för 404 pages. Men genom att inkludera en grundläggande footer med viktiga länkar som din kontaktinformation eller Sitemap kan du upprätthålla en känsla av konsekvens och erbjuda ytterligare sätt för användare att navigera på din site.
Vi hoppas att den här artikeln har hjälpt dig att hitta de bästa exemplen på design av 404 error page. Du kanske också vill kontrollera vår guide om hur man spårar besökare på webbplatsen, eller se vår jämförelse av de bästa tjänsterna för e-postmarknadsföring för att göra potentiella leads till betalande customers.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Moinuddin Waheed
404 error is a very common error and having an optimized and beautiful 404 is a must for keeping the visitors interest continued.
Seeing some the most interesting 404 error page, it feels like having those creativity and out of the box approach at my own 404 page.
utilising seedprod to make awesome 404 error page for my websites.
Jiří Vaněk
People’s creativity is amazing. I was particularly captivated by Pixar’s 404 page, and I let myself be a bit inspired by it for my website too. I believe it’s very important to make the 404 page somewhat humorous to lighten the frustration for a user who encounters content they weren’t looking for. It brings a smile, eases emotions, and might even draw them towards exploring more content on the website.
Damian
Instead of configuring a 404 error page, I prefered set up a full sitemap page, better for our visitors.
Nure
Just awesome i like it
thanks to share
PatREllery
Here’s a cool one: http://www.bookofzeus.com/404/
Bhavesh
@PatREllery Its really cool one…..
Bruce
Thanks for this informative information. I like:
9. Catswhocode
17. Retard Zone
Dennis
Nice one!
My favourite is #6 CSS
Thanks for sharing.
penthius
After reading this I too decided to give it a go.
It’s my first 404 , it will get better with practice I am sure ;
http://ghostwhisperer.me/404
Zach Hornsby
After reading this article, I created one.
http://netjelly.com/404
Editorial Staff
It looks great
Administratör
Viidar
How about this one? (in Norwegian, but you´ll get the picture):
http://www.powertech.no/404
Text: ”Ups, Mari, has been down in the server-room again…” (mari works in the finance-department )
Michelle
these are really great, thanks for sharing
Dave
This page also pretty good, and very funny…
[Link Removed because the site did not use WordPress]
Editorial Staff
Except your site is not using WordPress for that 404 page.
Administratör
Niche Website Builder
Very creative indeed! Of course, my favorite has to be the 404 error pages featuring Homer Simpson and his infamous ”D’Oh!”
Phaoloo
Nice examples, they inspire me for the next project.
Rent Apartment in Kuala Lumpur
Excellent collection of 404 page design!
Andrew Yates
Nice collection, how about this one… http://www.383project.com/404 ?
Editorial Staff
Very nice We will surely include it in our next collection.
Administratör
arfandhia
wow, nice colection,thanks for this list
Johnson Koh
Interesting collection. Thanks for the effort
abrcity
very nice article,very helpful
Arif
really nice designs, thanks for sharing
Klim
Some pages are really cool! Thanks for collecting them!
Dave Sparks
love the cats who code one, brilliant.
Website Design UK
Excellent showcase, my friend!! Well worthy of a Digg.
Jeffro
I like the catswhocode one. Works well with the site name! hah
G.Han
Beautiful post, very inspiring!
Hans
I really like the illustration on Catalyst Studios’. That on Carsonified is also very nice (all of them are)
I like this one to
http://jayj.dk/404
Editorial Staff
Very nice find there. That one is good.
Administratör
Honour Chick
lol, very funny 404 pages.
Shahriar Hyder
Very nice post. Please do check out the following article as well which is a compilation of:
Custom 404 error pages that are cool, funny yet creative
http://technosiastic.wordpress.com/2009/09/01/custom-404-error-pages-that-are-cool-funny-yet-creative/
Asif Iqbal
Very neat and clean options.. I am going to choone one of the best for my website.
Michigan Fur Coats
Very clever and unique.
vq
I wanted to throw two of mine in there:
http://weare.clickpopmedia.com/404
http://www.clickpopmedia.com/404
Both Wordpress. Let me know what you think.
Editorial Staff
Love your weare page. The second one can still use some work.
Administratör
Tobbi
Great collection. My favorites a #2 and #6
GailGrannum
Wow, you have really expanded my concept of the 404 page alternatives. Thank you for sharing very creative examples that will assist me in reducing my bounce rate. BTW – I have tweeted this article to my peeps.
Gail
Editorial Staff
We appreciate all the support on twitter If you ever have any questions or need help with WordPress feel free to ask us either via twitter or email.
Administratör
Teddy
Thanks for the showcase! I always find a lot of inspiration in 404 pages – basically, a good 404 page will have to appease the possibly frustrated user as well as make a good impression so that the visitor will continue probing the site instead of navigating away almost immediately.
Oh, and thanks for the tutorial too! I find it very useful and detailed for those who are still new to WordPress and PHP awesome job!
p/s: Some shameless self-promotion here: http://www.teddy-o-ted.com/wp-admins (to trigger a 404 page) and http://www.teddy-o-ted.com/demo/ (not strictly a 404 page but I’m thinking).
Editorial Staff
Love your Hot Dog idea. Also Oh God Dammit is pretty good too. Tough choice eh.
Administratör
Teddy
Kind of a tough choice. I think I’ll most probably be porting the hot dog idea over to my main site’s 404 template, heh.
Speaking of which, what inspired you to make the 202 + 202 = 404 title? That’s an interesting one
Editorial Staff
The idea of WPBeginner <<< Beginner and the whole number idea because I like numbers. Simple addition.
werthers
B3ta once ran a competition a long time ago for 404 images and they blew all these out of the water. One featured a map of the internet and an arrow and you are here to 404, it also had porn and the rantings of nerds among other areas.
It’s going a long time back so I don’t know if many of the images are still hosted
subcorpus
awesome …
need to think of kewl way to do that on my blog … hehe …
j2brown
I’m biased, since it’s my own site, but I think it’s rather creative:
http://www.sterlingfire.org/?error=404
Michel
Another excellent resource for 404s:
http://simplebits.com/notebook/2007/11/03/404.html
See all comments in this blog post by Dan! (not WP blogs) (but still the collection is impressive)
Oleg
Yeah! Nice Ideas! I have my custom 404 Error page too: http://www.xtraboy.com/some-error
Take a look at it. It’s funny Thanx
Editorial Staff
That is surely a memorable one. Had we known about it before, we would’ve added it. Will consider for our next showcase
Administratör
Oleg
Thank You! I’m glad to hear your words
Simran
Awesome collection. Thanks for sharing
Robert
Some of these are great!
I run a coffee blog in Vancouver and I used a split coffee cup as a my 404 page.
http://coffeevancouver.ca/error
Editorial Staff
Very nice use of the image. Love your other posts.
Administratör
Mike
techkultura from Polish:
404 The Way of the Samurai Codex
”If the searched page doesn’t exist,
Immediately fulfill Seppuku.”
ilmu komputer
they all very creative design.
Good.
TalkVietnam
Nice collection. Thanks.
Chris Berry
Here’s a good WordPress example.
http://roanoketweetup.com/404
lipelip
Nice collection, here is mine
http://www.lipelip.be/micou
I’m a fan of chuck norris
Editorial Staff
Your page is funny and good looking. Keep up the great work, and we love Chuck Norris as well.
Administratör
lipelip
héhé thanks, chuck rocks !
joyoge bookmark
nice 404 designs, thanks for the tut
Michel
Mmm, and how about this one? >
http://www.optimiced.com/en/404
100% WP powered, 100% custom designed;-)
Thomas
I’m pretty sure putting Adsense on a 404 error page is against Google’s terms of service, don’t you think?
Michel
My WordPress theme uses standard templates, so the 404 page simply has a small adsense block at the top, as most of the pages of my blog have it, too. I wouldn’t worry about it, nor do I care much if this page shows (or not) adsense at all. I was showing the design of the page, not the adsense block — looks like you were looking elsewhere;-)
Michel
Plus, if there’s content on the 404 page, Google allows to show ads on it — this is not against their TOS (this info could be useful to others, too)
Dave Bowker
How about this one? Can’t go wrong with Oompa Loompas!
http://quoterelish.com/err
Editorial Staff
It’s good, but we only listed sites that were powered by WordPress.
Administratör
Vidimonkey
missed out on http://freetubetv.net/404
it’s a tv blog/app so the 404 page is pretty brilliant considering the execution.
Editorial Staff
Once again, it is not powered by WP.
Daniel
http://www.gowatv.com/error-404.php also