Het kan altijd gebeuren dat je website in onderhoud is, individuele pagina's niet toegankelijk zijn of foutieve links bevatten, wat vaak leidt tot een 404-pagina. Dit is niet ideaal, maar met goed ontworpen foutpagina's kun je je bezoekers toch vasthouden. We laten je zien hoe je dit doet met WordPress en Visual Composer.

Het doel van een 404-foutpagina is om je bezoekers te informeren over de fout die is opgetreden. En om ze door te verwijzen naar die delen van je website die nog wel beschikbaar zijn of werken. Op die manier verlaag je het bouncepercentage.

Een aangepaste 404-pagina is ook ideaal voor het promoten en invoegen van call-to-action-elementen. Hierdoor kan de 404-pagina in principe dezelfde functies uitvoeren als een functionerende doelpagina of landingspage.

We gaan kijken naar de volgende punten:

• Wat is een 404-foutpagina?
• Varianten van 404-fouten
• Wanneer treden 404-fouten op 
• Zo kunnen 404-fouten opgelost worden
• Goede en creatieve voorbeelden voor 404-pagina's
• Aangepaste 404-foutpagina met WordPress maken
• 404-foutpagina met Visual Composer maken

Wat is een 404-pagina?

Kort gezegd is de 404 error een HTTP-antwoordcode (Hypertext Transfer Protocol). Dit betekent dat de server de gevraagde bron niet kan vinden. Of dat deel van het websitepad dat na de "/" komt. In principe betekent dit dat de specifieke pagina die moet worden weergegeven, niet beschikbaar is.

Meestal wordt een 404-foutmelding als volgt weergegeven:

• HTTP 404
• 404 Not Found / niet gevonden
• 404
• 404 Error / Fout
• 404 This page does not exist (Deze pagina bestaat niet)
• Page Not Found
• File Not Found
• Directory Not Found 
• Requested URL Not Found
• ... en soortgelijke variaties

Mogelijke redenen waarom 404-fouten optreden:

• Een pagina of artikel op WordPress is verwijderd of verplaatst naar een andere pagina zonder dat de links worden doorverwezen
• Een bezoeker voert de domeinnaam verkeerd in (een letter ontbreekt, spelfout, enz.)
• Vroegere links (die zijn veranderd) worden nog steeds vermeld in externe bronnen
• De server/website is gecrasht, wordt onderhouden of heeft technische problemen waardoor de website niet goed wordt weergegeven (bijvoorbeeld verbroken verbinding).

Naast 404-fouten zijn er de volgende HTTP-statuscodes:

• 100-199 Antwoord: verzoek ontvangen en verwerking voortzetten
• 200-299 Succesvol: verzoek succesvol en geaccepteerd
• 300-399 Omleiding: vereist verdere actie om het verzoek te voltooien
• 400-499 Aanvraagfout: ongeldig verzoek of verzoek kan niet worden voltooid
• 500-599 Serverfout: de server kon het verzoek niet aanvaarden

Hoe zijn 404-fouten op te lossen

Enerzijds stuur je je bezoekers via redirects rechtstreeks door naar doelpagina's die zo dicht mogelijk bij de inhoud van het oorspronkelijke verzoek liggen. Bij Raidboxes heb je geen extra WordPress plugin nodig voor het instellen van redirects en redirect regels. Zie de instructies over het onderwerp 301 en 302 redirects.

Een andere mogelijkheid is om gebroken links te vinden en deze te repareren, d.w.z. te vervangen door de nieuw geldige interne bron. Zorg ervoor dat alle interne links naar de gewenste pagina's leiden. Vraag ook aan de eigenaars van externe linkbronnen om alle gebroken links te wijzigen.

Een andere tip is om gebruiksvriendelijke URL's en permalinks te gebruiken. Hou ze kort, gebruik kleine letters en beschrijf waar de links naartoe leiden. Zo kun je eventuele gebroken links beter opsporen en je website optimaliseren voor zoekmachines. Bekijk ons artikel over Intern linken en SEO met WordPress .

Tot slot moet je een aangepaste 404-pagina maken. Dit leidt "verloren" bezoekers terug naar de homepage of naar relevante inhoud. Tegelijkertijd zullen ze de fout niet verwarren met een storing van je hele website.

Wat maakt 404-pagina's doelgericht

Het is dus belangrijk om een aangepaste 404-foutpagina te hebben die je bezoekers terugleidt naar de bestaande delen van de website. Laten we nu eens kijken welke opties je hebt. De gebruikelijke en aanbevolen benaderingen voor het maken van aangepaste 404-pagina's zijn:

• Terug- of homeknop: Geef je publiek de mogelijkheid om terug te keren naar de beschikbare pagina's of naar een willekeurige locatie.
• Zoekbalk: Meestal treden dit soort fouten op wanneer gebruikers proberen een specifieke inhoud of pagina te vinden. Bied hen dus een zoekoptie of stel specifieke landingspagina's voor.
• Contactformulieren: Mensen kunnen een contactformulier of live chat gebruiken om hulp te krijgen als ze de inhoud die ze zoeken niet kunnen vinden. Of als ze hulp nodig hebben met andere dingen op je website.
• Pictogrammen voor sociale media: Het is altijd goed om verschillende social media platformen te linken waar je content gevonden en bereikt kan worden.
• Humoristische afbeeldingen: Dit is een van de meest onderschatte praktijken die duidelijk te weinig wordt gebruikt. Humor kan zeker de uitkomst van een (waarschijnlijk) negatieve perceptie onschadelijk maken. Hier volgen zo meteen enkele voorbeelden.

Maak een 404-pagina op maat met WordPress

Je hebt de volgende mogelijkheden om een 404-pagina te maken. Met WordPress, met een websitebouwer of paginabouwer en met aangepaste code - zoals HTML. Dit is hoe het werkt met WordPress:

1. Ga naar je WordPress Dashboard
2. Selecteer het gedeelte "Design" aan de linkerkant
3. Selecteer het sub-item "Editor"
4. Controleer of je WordPress theme een "404 template" bevat (Ctrl + F en voer vervolgens "404.php" in);
5. Klik op de link voor het 404 template aan de rechterkant

De inhoud ziet er ongeveer zo uit:

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();

Verander nu de code al naar gelang je behoeften. Hiervoor is echter kennis van HTML nodig. Je moet ook werken met een Child Theme, anders kunnen je wijzigingen weer worden verwijderd na een update van het WordPress thema.

404-pagina met Visual Composer maken

Een van de gemakkelijkste en snelste manieren om een 404-pagina te maken, is met een website- of paginabouwer. In dit voorbeeld laten we zien hoe je een aangepaste 404-pagina maakt met Visual Composer, met behulp van Drag and Drop. Let op: dit is alleen mogelijk met de premiumversie.

Eerst moet je Visual Composer Plugin downloaden en installeren. Zie deze video tutorial op YouTube:

Zodra de plugin is geïnstalleerd en geactiveerd, kun je aan de slag. Gebruik een van de vele sjablonen ofwel templates. Klik hiervoor op het marktplaats symbool in de frontend editor. Selecteer "Templates" en voer "404" in om kant-en-klare 404-pagina's te vinden.

Deze handleiding legt precies uit hoe je een aangepaste 404-pagina met Visual Composer kunt maken:

Nadat je individuele 404-pagina-ontwerpen af zijn en je ze opgeslagen hebt, kun je ze beheren in de editor. De volgende video laat zien hoe dat in zijn werk gaat:

Meer tips over op maat gemaakte 404-pagina's, de beste plugin-oplossingen en inspiratie voor 404-pagina's vind je in het artikel van Visual Composer 404-pagina's met WordPress.

Voorbeelden van goede 404-pagina's

We hebben een aantal van de meest creatieve 404-foutpagina's – onafhankelijk van WordPress en Visual Composer – voor je verzameld om inspiratie uit te putten. De 404-pagina van GOG.com is een van de beste voorbeelden van buiten de gebaande paden denken. En dat in de waarste zin van het woord:

Aangezien dit een pagina met amusementswaarde is, moest Blizzard aan een hoge standaard voldoen wat betreft zijn 404-pagina. Het coole ontwerp wordt een klassieker op zich:

Het laatste voorbeeld van 404-pagina's van Slack is super eenvoudig, maar toch verrassend. Het is een mooi voorbeeld van creativiteit:

Conclusie over 404-pagina's met WordPress

Nu weet je hoe je een 404-foutpagina kunt maken om je bezoekers naar de actieve subpagina's van je website te leiden. En hoe je een nare situatie kunt ombuigen tot iets dat de ergernis minimaliseert of zelfs oplost. Bovendien heb je ontdekt dat er heel eenvoudige manieren zijn om die 404-pagina's te ontwerpen – mits je over de nodige creativiteit en wat grafische vaardigheden beschikt.

Met een websitebouwer als hulpmiddel heb je geen programmeerkennis nodig om een saaie 404-pagina om te toveren in iets dat je in een goed humeur oplevert. En/of dat je bezoekers helpt in hun situatie. Heb je een goed voorbeeld van een geslaagde 404-foutpagina? Voel je dan vrij om het te delen in de opmerkingen.