Hur man skapar en anpassad 404-felsida med din egen design?

En 404-felsida är webbsidan som visas när någon anger en felaktig webbadress i sin webbläsare. Det är viktigt att ha en anpassad 404-felsida eftersom det hjälper till att förbättra användarupplevelsen och undvika att utlösa Google-påföljder. Den här artikeln kommer att ge steg-för-steg-instruktioner om hur du skapar din egen anpassade 404-felsida med din egen design, oavsett om du använder WordPress eller inte.

Vad är ett 404-fel?

HTTP-statusen kod 404 (eller “Sida hittades inte”) indikerar att servern inte kunde hitta innehållet som efterfrågades av användaren. I grund och botten är detta en icke-existerande eller trasig sida. Här är texten som du vanligtvis ser på sidan:

• 404
• 404-fel
• 404 hittades inte
• 404 Sidan hittades inte
• Fel 404 hittades inte
• HTTP 404 hittades inte

Det finns många anledningar till att ett fel 404 kan dyka upp på din webbsida – till exempel har webbplatsen tagit bort din sida. Det uppstår när en intern länk leder till en sida som inte finns. Sådana handlingar har potential att försämra användarupplevelsen samt störa sammanlänkningen av webbplatser.

En annan orsak kan vara att URL-adressen skrevs felaktigt av användaren. Kanske försökte de manuellt infoga en direktlänk och gjorde ett stavfel. Det kan också vara ett tekniskt fel – till exempel flyttades sidan och omdirigeringen var felaktigt inställd. Det faktum att sidan togs bort från webbplatsservern garanterar inte att ingen kommer att försöka komma åt den. Det kommer att finnas på sökmotorer ett tag. Dessutom kan användarens webbläsarflikar ha en länk till en specifik sida på webbplatsen.

Slutligen är det också möjligt att servern inte fungerar som den ska, även om det händer mycket sällan. Servern kan ibland ge ett 404-fel som ett resultat av ett fel. DNS-cachen sparar platserna (IP-adresserna) för webbservrar som nyligen har betjänat dig webbsidor. För att säkerställa att bara de aktuella IP-adresserna används kan du rensa den. När du har slutfört lämpliga procedurer startar du om din webbläsare och öppnar sidan för att se om du kan komma tillbaka till den.

Varför är en 404-sida viktig?

Ju äldre din webbplats är, desto mer sannolikt är förekomsten av 404-sidor. Majoriteten av webbplatstrafiken kommer från människor som skriver in webbadresser direkt i sitt webbläsarfönster. Så det är naturligt att dessa besökare förväntar sig vissa saker när de kommer dit:

• För att se vad de letade efter
• Att inte mötas av en åtkomst nekad sida eller något annat som ser ut som att de inte borde finnas där

Så tänk på 404 sidor som kundtjänst. Det spelar ingen roll hur stark din produktlinje är; dålig kundservice kan skada försäljningen exponentiellt mer än ingen kundservice alls. Ta inte din besökares lojalitet (och eventuellt deras pengar) för given!

En 404-felsida låter folk helt enkelt veta att de har angett en felaktig adress i sin webbläsare. De flesta webbplatser numera lägger till omdirigeringslänkar till några av sina mest populära sidor (som Hem eller Om oss) på deras 404-felsida, eftersom ingen vill sålla igenom dussintals sidor innan de hittar det de letar efter!

Sökmotorer rekommenderar: Google, Yahoo, Bing

En skräddarsydd 404-sida är en professionell lösning som kommer att fungera som en bra användarupplevelse såväl som varumärke för dig. Dessutom kommer människor som besöker din webbplats inte att gå vilse i cyberrymden när de klickar på något som inte finns! Nämn helt enkelt på din egen sida var de gick fel.

Enanpassad 404-sida krävs inte längre av Google, men Google belönar webbplatser som gör extra ansträngningar för att hjälpa användarna att hitta det de behöver. Vad gör att du sticker ut från andra företag? Hur leder det till att vara annorlunda trafik till din webbplats? Detta gäller oavsett om du äger ett lokalt kafé eller driver ett e-handelsföretag som säljer varor över hela världen. Det bästa sättet att svara på båda frågorna ovan är att skapa en anpassad 404-sida som representerar ditt varumärke väl och ger alla som besöker din webbplats förtroende för dig som deras kundtjänstleverantör.

SEO teknisk uppsättning av en 404-sida

Först och främst, när någon landar på en gammal eller felaktig URL, förväntar de sig att se något som är relevant för det de letar efter. Det är bättre att omdirigera besökare direkt än att göra dem besvikna senare med irrelevant innehåll. Din saknade sida kan ge trafik från sökmotorer om det inte finns andra högkvalitativa resultat runt din webbplats. direkt trafik är alltid bättre än trafik från sökrobotar. Och slutligen, det är bra att ha en snygg anpassad 404-felsida som kompletterar din webbdesign istället för att blanda ihop den. Detta kommer att förbättra din användarupplevelse och Google-rankning på samma gång!

Om du har utvecklat din webbplats själv bör du redan veta hur dessa fel ser ut. Men att skapa en ny anpassad felsida beror på vilken typ av CMS som används på din webbplats och om den tillhandahåller några speciella plugins för det ändamålet (diskuteras i detalj nedan).

Detta leder oss till frågan, är 404-felsidor bra eller dåliga för SEO? Kort sagt, de är både bra och dåliga. För det första kan de förhindra sökordsrankning om de inte är fixade. När webbsidor som tidigare levde blir 404 inte hittade, börjar alla sökord som tidigare rankades för den webbsidan att falla ur SERP:erna. Organisk trafikförlust uppstår när sökord börjar förlora relevans för webbplatsen. Om 404-sidan inte korrigeras kommer webbplatsen så småningom inte längre att rankas för den termen, och all organisk trafik som dessa sökord har tagit med kommer att gå förlorad. Detta kallas nyckelordsutfall; det påverkar främst större webbplatser, men det kan påverka alla webbplatser som försummas.

Dessutom tror många att indexeringen av webbplatsen och dess position i sökresultaten båda är hårt påverkade av 404-fel, men detta antagande är felaktigt i de allra flesta omständigheter. För bättre webbplatsoptimering är det avgörande att förstå SERP-element. Vad händer med en sida som denna när en robot stöter på den? Om det finns i indexet kommer det att tas bort; om det inte är det kommer boten inte att skanna det. Detta är förståeligt med tanke på att det inte längre är informativt eller användbart. Du måste dock vara medveten om möjligheten för MJUKA misstag. SOFT 404 är inte ett egentligt serversvar utan snarare en tagg som sökmotorer fäster på sidor efter en genomsökning.

Följande är anledningarna till att sökmotorer fattar sådana beslut:

• På sidan finns det lite eller inget innehåll;
• Det finns en omdirigering till en sida som inte uppfyller användarnas behov;
• Det finns inget 404- eller 410-serversvar för den icke-existerande sidan.

Å andra sidan kan 404 sidor leda till dålig SEO. När en webbsida inte hittas upptäcks inte sökorden på den webbsidan, varför 301-omdirigeringar kan hjälpa. Searchbots söker på webbplatsen för att identifiera nyckelord att ranka webbplatsen efter. Om en 301-omdirigering finns på plats kommer sökrobotar att identifiera nyckelorden att rangordna den nya webbsidans URL med, och webbplatsen kommer att behålla sina sökordsrankningar. Det finns några fler variabler att ta hänsyn till, men detta sammanfattar proceduren.

404-felsidor kan också förhindra indexering av webbsidor (endast i vissa fall). De kan hindra sökrobotar från att genomsöka resten av webbplatsens viktiga sidor. Beroende på problemet kan sökmotorer deindexera hela bitar (förutsatt att webbsidorna inte längre behövs) och äkta 410-webbsidor, vilket betyder BORTA. Om en webbsidas SEO inte har justerats ännu, även om den sedan dess har optimerats ordentligt, kommer sökmotorerna inte att se de nya ändringarna förrän sökrobotar genomsöker webbplatsen igen.

Alla interna länkar på dessa webbsidor kommer att gå förlorade om webbsidan eller, ännu värre, hela URL-mappen inte hittas. Detta kommer att försämra ytterligare indexering och sökordsrankning. Om du inte är försiktig kan SEO ha en dominoeffekt. När sökrobotgenomsökning är inaktiverad lider hela SEO för en webbplats; tills sidorna skannas igen kommer RankBrain att använda den senaste cachen på webbsidan för att utföra sina kontroller och balanser.

Å andra sidan, när webbadresser är trasiga eller aldrig existerade i första hand, får sökmotorer, webbplatsbesökare och webbansvariga ett 404-fel.

Detta gör att utvecklare kan åtgärda problemet för framtida webbplatsbesökare om de kan avgöra var dessa felkoder visas, och behålla kraften hos sidan som en gång fanns. Detta kallas trasig bakåtlänksbyggnad. Du kommer inte att veta att sidan – och därmed användaren – stöter på ett fel om du inte skickar en 404-svarskod.

Åtgärda alla 404-fel på webbplatsen

Genomsök din webbplats, upptäck alla trasiga länkar och åtgärda dem omedelbart

Something went wrong. Please, try again later.

Starta granskning

Hur skapar man en anpassad 404-sida?

Att skapa en anpassad 404-sida kräver grundläggande kunskap om kod och design. Om du har lite erfarenhet av det kan du skapa det själv – men om inte är det bäst att anlita en webbdesigner.

Metoden börjar med att skapa en typisk webbsida med alla de element du behöver för din 404-sida. Kom ihåg att inkludera ett lättsamt uttalande som förklarar varför en besökare har kommit till den här sidan, en sökruta så att de kan upptäcka vad de söker efter, och eventuellt en webbplatskarta så att de kan välja att gå någon annanstans.

Det är viktigt att ge din 404-sida ett unikt namn. Ladda sedan upp din sida i rotkatalogen på din server/webbplats. Men många människor använder nu plugins som WordPress, vilket gör det enkelt för vem som helst att skapa en anpassad 404-sida utan att behöva koda.

Tänk på följande mål när du lär dig hur man utvecklar en fantastisk 404-sida:

• Följ användarnas uppmärksamhet;
• Förklara vad som har hänt;
• Föreslå en lösning på problemet.

När det gäller att skapa din egen 404-sida rekommenderar sökmotorer dig att göra följande.

Google

• Sidan bör utformas i samma stil som huvudwebbplatsen (inklusive navigering);
• Ge länkar till de mest populära artiklarna samt en kommentarsruta;
• Gör det möjligt för dina användare att rapportera trasiga länkar.

Yandex

Dess design bör skilja sig från resten av webbplatsen; till exempel när du bygger en sida bör du använda olika färger eller kanske undvika att använda visuellt alls.

Allmänna förslag

Den bör innehålla en länk till startsidan, samt ett artigt meddelande som informerar användaren om att sidan de begärde inte är tillgänglig.

De föregående förslagen är inte absoluta riktlinjer för 404 sidor. Allt beror på webbplatsens ämne och avsedda målgrupp. En sökrad är viktig för en webbshop, och kontaktinformation är viktig för en webbplats som erbjuder tjänster.

Vad ska en 404-sida innehålla?

Webbdesigners bör alltid betrakta 404-sidor som en möjlighet för varumärkesbyggande och förbättring av användarupplevelsen. Överväg att inkludera kreativa och informativa element i din felsidas design för att minska din webbplats avvisningsfrekvens. Avvisningsfrekvensen hänvisar till hur många personer som lämnar din webbplats efter att bara ha tittat på en sida.

Även om det finns flera faktorer som påverkar avvisningsfrekvensen – som sökmotoroptimering – sker de flesta avvisningar för att användare tror att de hittat det de letade efter och inte ser någon anledning att stanna på din webbplats. Med andra ord, om folk inte stannar tillräckligt länge för att få ut något av ditt innehåll eller din reklam, kommer avvisningsfrekvensen att gå upp. Det finns tre huvudorsaker till höga avvisningsfrekvenser:

• Inte ger en tydlig uppmaning
• Inte förse läsarna med vad de letar efter på målsidor
• Att få besökarna att arbeta för hårt för att hitta information

Kolla in dessa praktiska sätt att minska din webbplats avvisningsfrekvens och tjäna mer pengar från varje kund du har:

1. Identifiera tydligt varje sidas syfte och CTA: Syftet med varje sida på din webbplats bör alltid vara mycket tydligt, inklusive när någon landar på den via ett sökresultat eller en annan länk. Om det inte är direkt uppenbart för läsarna var de har hamnat och vad de kommer att åstadkomma genom att stanna kvar på din webbplats, kommer besökarna inte bry sig om att stanna kvar. Du kan uppnå klarhet på ett antal sätt; välj CTA som är lämpliga för varje unik situation.

2. Beskriv vad som saknas: Att tillhandahålla sammanhang kan uppmuntra besökare att stanna kvar även om de inte landade på en specifik destination. Anta till exempel att du vill skapa en LinkedIn-profil men på något sätt hamnar på en Yahoo-hemsida istället. När Yahoo visar sitt berömda 404 File Not Found-felmeddelande, vet du vad som gick fel? Chansen är stor att du helt enkelt skrev fel webbadress. Genom att ange vart besökarna förväntas gå (och kanske till och med föreslå alternativa webbadresser) låter anpassade 404-sidor besökarna snabbt återhämta sig från misstag.

3. Ta bort onödiga steg: När du designar din anpassade 404-sida, fråga dig själv om det skulle förvirra eller frustrera nya läsare som landar där av misstag. Tänk dig till exempel att du driver en smyckesbutik och använder Facebook för att marknadsföra dina produkter. Låt oss säga att någon klickar på en länk till din Facebook-sida och kommer till din 404-sida. Den här personen förväntar sig förmodligen att se länkar för relaterade produkter eller någon indikation på vad som förde dem dit. Istället ser de inget som helst som är relevant. En sådan skakande brist på förklaring kommer sannolikt att få användaren att känna sig frustrerad, förvirrad och oönskad: precis vad du hoppas undvika i deras nuvarande sinnestillstånd.

4. Förklara för användarna vad de ser: Ge dina besökare en ledtråd om vilken typ av fel som tog dem till den sidan – till exempel “Hoppsan, vi kan inte hitta det du letade efter !” eller “Tyvärr, vi har ingen engelsk version av den här sidan!” Använd actionverb och förstapersons POV (jag kan inte hitta… och vi erbjuder inte… snarare än att du inte kan… och vi erbjuder inte…) för att hålla läsarna engagerade medan de söker efter exakt vad de behöver.

När du skapar din anpassade 404-felsida, ha dessa fyra tips i åtanke för att göra den både informativ och engagerande. Undvik att låta frustrerande situationer avskräcka framtida läsare från att vidta åtgärder på din webbplats. En av de största orsakerna till dålig webbplatsanvändbarhet är ett dåligt organiserat navigationssystem. Besökare måste lätt kunna hitta runt om de ska förbli engagerade och produktiva, så det är viktigt att du planerar i förväg innan du lanserar din webbplats.

Hur skapar man en 404-sida på WordPress?

Börja med att titta på din WordPress-instrumentpanel; du kommer att se ett antal alternativ att välja mellan på vänster sida av skärmen. Klicka på “Utseende” under Produkter och välj sedan “404 sida.”

Du kan ange lite information om typen av inlägg (t.ex. felmeddelande), men allt du egentligen behöver är lite text, till exempel “Sidan hittades inte.” Se till att du lägger till alla element som nämns ovan och klicka sedan på Publicera när du är klar. Du kan också använda plugins för att skapa kontaktformulär, förbättra SEO, lägga till widgets, etc.

Här är den supersnabba och enkla handledningen om hur man gör det med Elementor-plugin.

Hur man skapar skapare på plats: Wix, Shopify och andra

De flesta webbplatser använder specialbyggd JavaScript-kod eller programvara från tredje part för att skapa sina anpassade 404-sidor. Wix, till exempel, innehåller ett verktyg som låter dig bygga din egen 404 not found-sida som passar ditt varumärke. Det här verktyget genererar webbkod som du kan kopiera och klistra in på din webbplats hemsida, vilket innebär att den kommer att dyka upp när någon försöker besöka en trasig länk på din webbplats.

Om du föredrar Shopify som din plattform kan du välja från dess standardmallar eller skapa din egen anpassade 404-sidlayout:

Du kan också lägga till en anpassad bakgrund och element som ett sökfält för att förbättra användarupplevelsen.

Error 404 Page Design Best Practices

Även om det finns gott om fantastiska designmallar för 404-felsidor där ute, kan din webbplats unika innehåll och stil ge dig ett försprång när det gäller att ge en polerad användarupplevelse. Här är några bästa metoder för design av 404-felsidor som du kan använda som inspiration. Ha dem i åtanke när du väljer eller skapar någon typ av webbdesignmall; de hjälper dig att skapa en responsiv 404-felsida som känns hemma på din webbplats.

• Få inte användare att leta efter det de letade efter: En anpassad 404-felsida bör vägleda användare som har klickat på en trasig länk tillbaka till där de vill vara, snarare än att tvinga dem igenom flera steg för att komma tillbaka på rätt spår.
• Inkludera en kort beskrivning av ditt företag på varje 404-felsida — och länka till den från varje potentiellt trasig webbadress, så att besökare aldrig känner sig vilse när de letar runt!
• Lägg till användbar information om en trasig länk: Även om du faktiskt inte tillhandahåller en ersättning för saknat innehåll, överväg att lägga till annan relevant information om varför ett specifikt innehåll inte är tillgängligt för närvarande ( dvs. reavaror är endast tillgängliga online fram till den 20 januari). Detta ger sammanhang och användbarhet utan att få besökarna att klicka på fler länkar.
• Inkludera en uppenbar uppmaning: Om du har ett starkt konverteringsmål kopplat till varje besök på 404-felsidan, lägg till en “klicka här” CTA-knapp för att uppmuntra besökare att utforska din webbplats ytterligare .
• Ju renare din 404-felsida är, och ju mindre störande fel visas, desto lättare blir det för någon att agera direkt efter att ha sett din!
• Använd omdirigeringsverktyg där det är möjligt: Att omdirigera trafik via skript är vanligtvis mycket snabbare än att tvinga alla besökare att lämna sin nuvarande webbplats innan de omdirigeras någon annanstans.
• Om du försöker samla in kontaktinformation från besökare som angett en saknad målsidesadress manuellt kan använda både omdirigeringsskript OCH ett snabbformulär som låter människor ange sin e-postadress själva vara idealiskt .
• Var ärlig i din förklaring: Ärlighet säljer – även när det gäller att förklara varför något inte existerar längre. Säg så lite som möjligt, men inte mer än nödvändigt; låt kunderna direkt veta varför de hamnade på en 404-felsida.

Led kunder med exempel: Implementera anpassade 404-felsidor på alla dina webbplatser – även de som inte ägs av dig. Dina konsekventa meddelanden ger kunderna sinnesfrid att de inte av misstag har hittat en dålig länk någonstans under sin surfresa, och det gör det tydligt för alla exakt hur seriöst du tar dina affärssträvanden. Du skulle hata att förlora en potentiell kund eftersom de av misstag blev frustrerade och hoppade av skeppet, så det är en smart praxis att undvika potentiella problem. Kolla in följande designidéer för inspiration:

Sitechecker

WP-formulär

Disney

Netflix

Tripadvisor

GitHub

Ahrefs

YouTube

Amazon

Linkedin

När det kommer till att designa din egen 404-sida kan du antingen anlita en frilansare, arbeta med en designbyrå eller göra det själv. Ditt beslut bör bero på den budget du har och de färdigheter som krävs för att slutföra uppgiften.

Slutsats

Även om du bör se till att dina 404-sidor är förstklassiga, är det bäst att minimera deras existens. Lyckligtvis finns det några enkla korrigeringar på 404-felsidor. Först laddar du om sidan om det behövs. På grund av en dålig internetanslutning kan det hända att en webbsida inte laddas ordentligt ibland. Använd bara “uppdatera”-knappen i din webbläsare.

Du kan också prova att rensa cacheminnet och cookies på din dator. Öppna helt enkelt en webbplats eller webbsida i en annan webbläsare. Om HTTP 404-felet bara visas på en dator kan problemet bero på din webbläsare. Om webbplatsen är funktionell bör du rensa webbläsarens cache och cookies. Följ den här omfattande guiden om Googles cache för ytterligare information om webbläsarens cache och hur man tar bort cachen i din webbläsare.

Dessutom, ta dig runt på webbplatsen. Använd en webbplatssökning för att hitta en nödvändig webbsida; skriv bara in exakta termer för att hitta sidan du letar efter. Du kan kontakta webbmastern direkt om detta inte fungerar.

Andra problem med 4xx-sidor måste lösas, till exempel när AMP-sidans URL (4XX) inte upptäcks, 4xx-sidor får organisk trafik eller 4xx-sidor finns i webbplatskartan.