Det kan alltid hända att din webbplats underhålls, att enskilda sidor inte är tillgängliga eller innehåller felaktiga länkar, vilket ofta leder till en 404-sida. Detta är inte trevligt, men med väl utformade felsidor kan du ändå behålla dina besökare. Vi visar hur du gör det med WordPress och Visual Composer .

Syftet med en 404-felsida är att informera besökarna om det fel som uppstått. Och för att omdirigera dem till de delar av webbplatsen som fortfarande är tillgängliga eller fungerar. På så sätt sänker du avvisningsfrekvensen.

En anpassad 404-sida är också idealisk för marknadsföring och för att lägga in element som kallar till åtgärder. Det innebär att den i princip kan utföra samma funktioner som en fungerande landningssida och landningssida.

Vi tittar på följande punkter:

• Vad är en 404-felsida?
• 404 felvarianter
• När uppstår 404-fel? 
• Hur du åtgärdar 404-fel
• Goda och kreativa exempel på 404-sidor
• Skapa en anpassad 404-felsida med WordPress
• 404-felsida med Visual Composer skapa

Vad är en 404-sida?

Kortfattat beskrivet är 404-felet en HTTP-svarskod (Hypertext Transfer Protocol). Det betyder att servern inte kan hitta den begärda källan. Eller den del av webbplatsens sökväg som kommer efter "/". Det betyder i princip att den specifika sidan som ska visas inte är tillgänglig.

Oftast visas ett 404-felmeddelande på följande sätt:

• HTTP 404
• 404 Not Found / inte funnen
• 404
• 404 Fel / Fel
• 404 Den här sidan finns inte (Sidan finns inte)
• Sidan hittades inte
• Filen hittades inte
• Katalog inte hittad 
• Den begärda URL:n har inte hittats
• ... och liknande variationer

Möjliga orsaker till att 404-fel uppstår:

• En sida eller ett inlägg på WordPress tas bort eller flyttas till en annan sida utan att länkarna omdirigeras.
• En besökare skriver in domännamnet felaktigt (en bokstav saknas, stavfel osv.).
• Tidigare länkar (som har ändrats) anges fortfarande i externa källor.
• Servern/webbplatsen har kraschat, är under underhåll eller har tekniska problem som gör att webbplatsen inte visas korrekt (t.ex. avbruten anslutning).

Förutom 404-fel finns följande HTTP-statuskoder:

• 100-199 Svar: Begär mottagaren och fortsätter behandlingen.
• 200-299 Framgångsrik: Begäran är framgångsrik och accepterad.
• 300-399 Omdirigering: Kräver ytterligare åtgärder för att slutföra begäran.
• 400-499 Klientfel: ogiltig begäran eller begäran kan inte slutföras.
• 500-599 Serverfel: Servern kunde inte acceptera begäran.

Hur du åtgärdar 404-fel

Å ena sidan genom omdirigeringar, så omdirigerar du dina besökare direkt till målsidor som matchar innehållet i den ursprungliga begäran så mycket som möjligt. Vid Raidboxes Du behöver inte ett ytterligare WordPress-plugin för att ställa in omdirigeringar och vidarebe vidarebefordra regler. Se guiden till 301 och 302 omdirigeringar.

En annan möjlighet är att hitta och reparera trasiga länkar - dvs. ersätta dem med den nya giltiga interna källan. Se till att alla interna länkar leder till de önskade sidorna. Be också ägarna till externa länkkällor att ändra alla trasiga länkar.

Ett annat tips är att använda användarvänliga webbadresser och permalänkar - håll dem korta, använd små bokstäver och beskriv vad länkarna leder till. På så sätt kan du hålla koll på eventuella trasiga länkar och optimera din webbplats för sökmotorer. Se artikeln Intern länkning och SEO med WordPress .

Och slutligen bör du skapa en anpassad 404-sida. Detta leder "förlorade" besökare tillbaka till hemsidan eller till relevant innehåll. Samtidigt förväxlar de inte felet med ett avbrott på hela din webbplats.

Vad är målinriktade 404-sidor?

Det är därför viktigt att ha en anpassad 404-felsida som leder besökarna tillbaka till befintliga delar av webbplatsen. Nu ska vi titta på vilka alternativ du har. De vanliga och rekommenderade tillvägagångssätten för att skapa anpassade 404-sidor är följande:

• Tillbaka- eller hemknappen: Ge din publik möjlighet att återvända till de tillgängliga sidorna eller till vilken plats som helst.
• Sökfältet: Vanligtvis uppstår dessa typer av fel när användare:inside försöker hitta ett visst innehåll eller en viss sida. Erbjud dem ett sökalternativ eller föreslå specifika landningssidor.
• Kontaktformulär: Människor kan använda ett kontaktformulär eller en chatt för att få hjälp om de inte hittar det innehåll de söker. Eller om de behöver hjälp med andra saker på din webbplats.
• Ikoner för sociala medier: Det är alltid bra att koppla ihop olika sociala medier där ditt innehåll kan hittas och nås.
• Humoristiska bilder: Detta är en av de mest underskattade metoderna som är klart underutnyttjad. Humor kan säkert avdramatisera resultatet av en (troligen) negativ uppfattning. Här är några exempel på ett ögonblick.

Skapa en anpassad 404-sida med WordPress

Du har följande alternativ för att skapa en 404-sida. Med WordPress , med en webbplatsbyggare eller sidbyggare och med egen kod - t.ex. HTML. Så här fungerar det med WordPress :

1. Gå till din WordPress Dashboard
2. Välj området "Design" till vänster
3. Där finns underpunkten "Editor".
4. Kontrollera om din WordPress Theme innehåller en "404-mall" (Ctrl + F och ange sedan "404.php");
5. Klicka på länken för 404-mallen på höger sida.

Innehållet ser ut ungefär så här:

get_header();
?>
	<header class="page-header alignwide">
		<h1 class="page-title"><?php esc_html_e( 'Nothing here', 'twentytwentyone' ); ?></h1>
	</header><!-- .page-header -->
	<div class="error-404 not-found default-max-width">
		<div class="page-content">
			<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentytwentyone' ); ?></p>
			<?php get_search_form(); ?>
		</div><!-- .page-content -->
	</div><!-- .error-404 -->
<?php
get_footer();

Nu kan du ändra den enligt dina behov. Du behöver dock kunskaper i HTML för att göra detta. Du bör också arbeta med ett barn Theme, annars kan dina ändringar raderas igen efter en uppdatering av WordPress Themes .

Skapa en 404-sida med Visual Composer

Ett av de enklaste och snabbaste sätten att skapa en 404-sida är att använda en webbplats- eller sidbyggare. I det här exemplet visar vi hur du skapar en anpassad 404-sida med Visual Composer genom att dra och släppa. Observera att detta endast är möjligt med premiumversionen.

Först måste du ladda ner och installera Visual Composer Plugin . Se denna videohandledning på YouTube:

Så snart Plugin har installerats och aktiverats kan du komma igång. Använd en av de många mallarna. För att göra det klickar du på marknadsplatssymbolen i frontend-redigeraren. Välj Mallar och ange "404" för att hitta färdiga 404-sidor.

Den här handledningen förklarar exakt hur du skapar en anpassad 404-sida med Visual Composer :

När du har slutfört och sparat dina individuella 404-sidedesigns kan du nu hantera dem i redigeringsverktyget. Följande video visar hur du gör detta:

Mer tips om hur du skapar en anpassad 404-sida, de bästa lösningarna på Plugin och lite inspiration för 404-sidor finns i inlägget från Visual Composer 404-sidor med WordPress .

Exempel på bra 404-sidor

Vi har samlat några av de mest kreativa 404-felsidorna - oberoende av WordPress och Visual Composer - som du kan inspireras av. GOG.coms 404-sida är ett av de bästa exemplen på att tänka utanför boxen. Och det i ordets rätta bemärkelse:

Eftersom detta är en sida med underhållningsvärde måste Blizzard uppfylla höga krav på sin 404-sida. Den coola designen blir en klassiker i sig själv:

Det sista exemplet på 404-sidor från Slack är superenkelt, men ändå överraskande. Det är ett vackert exempel på kreativitet:

Slutsats om 404-sidor med WordPress

Nu vet du hur du skapar en 404-felsida för att leda dina besökare till aktiva undersidor på din webbplats. Och hur du kan vända en dålig situation till något som minimerar eller till och med löser irritationen. Det finns också mycket enkla sätt att utforma en sådan 404-sida - om man är kreativ och har lite grafisk skicklighet.

Med en webbplatsbyggare som verktyg behöver du inga kunskaper i programmering för att förvandla en tråkig 404-sida till något som gör dig på gott humör. Och/eller som hjälper dina besökare i deras situation. Har du ett bra exempel på en lyckad 404-felsida? Dela gärna med dig av den i kommentarerna.