404-pagina maken met WordPress en Visual Composer

Nikola Puciriusa Laatst bijgewerkt op 02.09.2021
6 Min.
Laatst bijgewerkt op 02.09.2021

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.

Wist je dat?

De uitvinder van het World Wide Web Tim Berners-Lee had een kantoor in kamer 404 van CERN (Europese Organisatie voor Kernonderzoek), waar hij de allereerste webserver hostte. De 404-fout is naar die kamer genoemd omdat Tim vaak niet gevonden kon worden.

We gaan kijken naar de volgende punten:

  • Wat is een 404-foutpagina?
  • Varianten van 404-fouten
  • Wanneer treden 404-fouten op 
  • Hoe 404-fouten op te lossen
  • 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

Een manier is door middel van redirects, daarmee stuur je je bezoekers rechtstreeks door naar doelpagina's die overeenkomen met de inhoud van het oorspronkelijke verzoek. Bij RAIDBOXES heb je geen extra WordPress plugin nodig voor het instellen van redirects en redirect regels. Zie de instructies over 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 .

Ten slotte moet je een aangepaste 404-pagina maken. Dit zal "verloren" bezoekers terugleiden naar de homepage of naar relevante inhoud. Tegelijkertijd zullen zij de fout niet verwarren met het feit dat je hele website plat ligt.

404-pagina's en SEO

De meeste 404-fouten hebben doorgaans geen directe negatieve gevolgen voor de prestaties of de ranking van de website. In het ergste geval bevatten ze geen redirects. Dan is de kans 88% groter dat gebruikers de site helemaal verlaten en niet meer terugkomen – een indirecte SEO-factor. Een goede 404-pagina gaat meer over het creëren van een betere ervaring voor jouw doelpubliek.

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 WordPress Plugins

Het beste in de wereld van WordPress zijn plugins. Er zijn meer dan 50.000 gratis plugins voor bijna elk doel dat je je kunt voorstellen: voor 404 pagina's, 301 pagina's, redirects, SEO en nog veel meer. Bekijk de officiële WordPress plugin directory.

404-pagina maken met Visual Composer

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:

YouTube

Door de video te laden, accepteer je het privacybeleid van YouTube.
Meer informatie

Laad video

PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iNTYwIiBoZWlnaHQ9IjMxNSIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9DY2FVNHNZd2NvbyIgdGl0bGU9IllvdVR1YmUgdmlkZW8gcGxheWVyIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmUiIGFsbG93ZnVsbHNjcmVlbj0iIj48L2lmcmFtZT4=

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:

YouTube

Door de video te laden, accepteer je het privacybeleid van YouTube.
Meer informatie

Laad video

PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iNTYwIiBoZWlnaHQ9IjMxNSIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9hSHg2V3dETnVqTSIgdGl0bGU9IllvdVR1YmUgdmlkZW8gcGxheWVyIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmUiIGFsbG93ZnVsbHNjcmVlbj0iIj48L2lmcmFtZT4=

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:

YouTube

Door de video te laden, accepteer je het privacybeleid van YouTube.
Meer informatie

Laad video

PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iNTYwIiBoZWlnaHQ9IjMxNSIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9LeG4xT2hmUGRxayIgdGl0bGU9IllvdVR1YmUgdmlkZW8gcGxheWVyIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmUiIGFsbG93ZnVsbHNjcmVlbj0iIj48L2lmcmFtZT4=

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:

404 Pagina Voorbeeld GOG
De 404-pagina van GOG.com (afbeelding © gog.com)

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:

404 Pagina Voorbeeld Blizzard
Blizzard stuurt zijn hulpjes erop uit (afbeelding © Blizzard)

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

404 Pagina Voorbeeld Slack
Speels en met animatie: de 404-foutpagina van Slack (afbeelding © Slack)

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.

Jouw vragen over 404-pagina's

Welke vragen heb je over 404-foutpagina's met WordPress? We kijken uit naar je reactie. Ben je geïnteresseerd in actuele onderwerpen over WordPress en WooCommerce? Volg RAIDBOXES dan op Twitter, Facebook, LinkedIn of via onze nieuwsbrief.

Na haar studie - Public Relations en Reclame Management - werkt Nikola in het marketingteam van Visual Composer. Haar focus ligt op copywriting, social media en analytics, ze is geïnteresseerd in psychologie en besluitvormingsprocessen in consumentengedrag.

Gerelateerde artikelen

Reacties op dit artikel

Laat een opmerking achter

Jouw e-mailadres zal niet worden gepubliceerd. Verplichte velden zijn met een * gemarkeerd.