Error 404 oplossen: aangepaste 404 not found pagina maken

Een 404 not found error verschijnt op je website als een webpagina niet (meer) gevonden kan worden op de webserver. Deze foutmelding is heel vervelend voor je bezoeker om te krijgen en daarom is een goede 404 pagina belangrijk. Met een gebruiksvriendelijke 404 kun je de bezoeker toch nog op je site houden. Wil jij het ongemak van error 404 oplossen? Maak dan een aangepaste 404 pagina met een zoekveld en bijvoorbeeld links naar de populairste berichten van de site. In dit bericht kun je zien hoe je een 404 pagina kunt maken in WordPress en Blogger.

De volgende onderwerpen komen aan bod in dit bericht:

Wat betekent 404 not found?
Maak slim gebruik van de 404 pagina
404 pagina maken WordPress
Aangepaste 404 pagina Blogger

Wat betekent 404 not found?

Als er een 404 error op een website verschijnt, betekent dit dat die pagina niet gevonden kan worden en niet (meer) bestaat op die plek. Dit kan komen doordat:

• de pagina verwijderd of verplaatst is
• de hele site verhuisd is en niet alle URL’s goed zijn aangepast
• de URL aangepast is en er geen redirect is ingesteld

In het geval van een 404 not found verschijnt er een melding met de strekking “Pagina niet gevonden” en vaak de code 404. Je kunt erachter komen hoe jouw 404 pagina eruit ziet door een onzin-pagina op je site of blog op te vragen. Bijvoorbeeld www.jouwurl.nl/hoezietmijn404eruit .

Maak slim gebruik van de 404 pagina

Een 404 is niet erg gebruiksvriendelijk. Mensen klikken op een link omdat ze graag een pagina willen bekijken en vervolgens bestaat deze pagina niet (meer). Als je een pagina verplaatst en/of de URL aanpast, moet je daarom altijd een redirect instellen.

Als je een pagina verwijdert, is het ook handig om de oude URL naar een andere URL te laten verwijzen, als je een bericht hebt dat qua onderwerp in de buurt komt tenminste. Standaard verwijzen naar de homepage is niet zo’n goed idee. Voor zoekmachines is het belangrijk dat de 404 foutmelding gegeven wordt, zodat ze de pagina kunnen verwijderen uit hun indexering.

De links die achter de pins op Pinterest zitten, kunnen niet aangepast worden. Je eigen pins zou je nog wel aan kunnen passen, al is het opsporen van deze pins een tijdrovende klus, maar bij pins die door anderen zijn bewaard kan dit niet. Daarom is een redirect zo belangrijk.

Wil je meer weten over hoe je Pinterest in kunt zetten om meer bezoekers naar je website te krijgen? In mijn Nederlandstalige Pinterest-cursus staat alles op een rij om de bezoekersstroom vanaf Pinterest op gang te krijgen.

Toch kan het altijd voorkomen dat een bezoeker op een 404 not found pagina terecht komt. Vooral bij oudere sites is dit bijna niet te voorkomen. Daarom is het handig om slim gebruik te maken van de 404 pagina en deze te optimaliseren voor het geval iemand er op terecht komt.

Zorg in ieder geval voor een zoekveld op de 404 pagina; zo kan de gebruiker alsnog het bericht vinden waar hij of zij naar op zoek was. Dit zoekveld kunt je inleiden met de tekst dat het bericht niet is gevonden, een verontschuldiging voor het ongemak en een aansporing om het zoekveld te gebruiken. Vind je het lastig om het zoekveld toe te voegen en heb je er wel een in bijvoorbeeld je zijbalk staan? Leg dan duidelijk uit waar het zoekveld gevonden kan worden.

Daarnaast kun je ook een overzicht met populaire of recente berichten toevoegen aan de 404 page. Dit is gelijk een mooie kans om de nieuwe bezoeker een indruk te geven waar je allemaal over schrijft. Zeker als je een site verhuist en je nog niet zeker weet dat alle links goed staan, is dit een heel goed idee.

404 pagina maken WordPress

Voor het maken van een custom 404 pagina met een zoekveld en een lijst met berichten, kun je gebruiken maken van drie handige WordPress plugins. Hieronder staat stap-voor-stap beschreven hoe je de pagina maakt en instelt:

1. Installeer en activeer de plugin Relevanssi. Deze plugin zorgt voor een verbeterde zoekfunctie van je site en zorgt voor relevantere resultaten bij het zoekveld dat je gaat toevoegen bij stap 4. Ga naar de instellingen van Relevanssi, controleer de settings en Build the index (tabblad Indexing).
2. Maak een nieuwe pagina aan, met in ieder geval “404” in de titel. (Pagina’s > Nieuwe Pagina)
3. Voeg een tekst toe waarin je uitlegt dat de pagina niet gevonden kan worden, met eventueel een verontschuldiging en raad aan om het zoekveld te gebruiken.
4. De HTML voor een zoekveld staat hieronder. Dit kun je kopiëren en plakken in de HTML-modus van het bericht:

   <form id="zoekvak" action="/search" method="get"/>
       <input type="text" id="input" name="q" placeholder="" //>
       <input type="hidden" name="max-results" value="8" //>
       <input id="submit" type="submit" value="Zoek" //>
   </form/>

5. Onder het zoekveld kun je een lijst met berichten plaatsen. Dit kan handmatig, maar dan zul je het steeds bij moeten werken. Met de plugin List category post kun je lijsten per categorie weergeven. Deze laat standaard automatisch de 10 laatste berichten uit een categorie zien. In de instellingen kun je dit eventueel nog aanpassen.Installeer en activeer de plugin. Vervolgens kun je per categorie een short code toevoegen, bijvoorbeeld catlist name=”Handleidingen”. Vervang Handleidingen door een categorienaam van je eigen site of blog. En zet de short code tussen [ ]. Zie afbeelding:
6. Test de pagina en publiceer hem als je tevreden bent.
7. Installeer en activeer de plugin 404page – your smart custom 404 error page
8. Ga naar de settings pagina van de 404 plugin (Weergave > 404 Error page). Hier kun je de zojuist gepubliceerde 404-pagina selecteren in een drop down om aan te geven dat dit de standaard 404-pagina moet worden. Vergeet niet om de wijzigingen op te slaan.
9. Test het geheel door een pagina te bezoeken die niet bestaat.

Aangepaste 404 pagina Blogger

Pas de titel aan

Standaard krijgt de 404 pagina in een Blogspot Blogger blog geen titel mee. Dat is jammer, want je zou de 404 code in de titel kunnen gebruiken om in Google Analytics te achterhalen via welk pad mensen bij je pagina met 404 error terecht komen. Daarom is het handig om wél 404 toe te voegen aan de titel, zodat je in de toekomst wel achter deze informatie kunt komen. Dat doe je als volgt:

1. Ga in het dashboard naar Thema en klik vervolgens op Back-up/herstellen om een back-up van het template te maken. Klik op Thema downloaden en vervolgens op Sluiten.
2. Klik op de knop HTML bewerken. De code verschijnt nu als het goed is. Ga op zoek naar de head-tag (<head>). Als het goed is, staat die vrij bovenaan.
3. Plak onder de head-tag het volgende stukje code:

   <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
   <title>404</title>
   </b:if>

   Eventueel kun je achter de tekst 404 nog de titel van je site of blog toevoegen. Deze code controleert of er een fout 404 terug wordt gegeven. Als dat het geval is, wordt de titel dus aangepast naar de tekens tussen <title> en </title> staan.

4. Druk op Thema opslaan.

Schakel aangepaste pagina niet gevonden in

De standaard 404 pagina in Blogger-blogs geeft de volgende tekst weer: “De pagina die je in deze blog zoekt, bestaat helaas niet.” Als je hier een zoekveld aan wilt toevoegen, dan zulke je de optie Aangepaste pagina niet gevonden moeten inschakelen. Dat doe je door naar Instellingen > Zoekvoorkeuren te gaan en hier op de knop Bewerken te drukken, achter Aangepaste pagina niet gevonden. Zie ook onderstaande afbeelding:

Voeg een zoekveld toe

Nu verschijnt er een tekstvak waarin je HTML kwijt kunt. Om een zoekveld toe te voegen, kun je de volgende code kopiëren en in dit veld plakken:

De pagina die je in deze blog zoekt, bestaat helaas niet. Probeer het zoekveld hieronder:

<form id="zoekvak" action="/search" method="get">
<input type="text" id="input" name="q" placeholder="..." />
<input type="hidden" name="max-results" value="8" />
<input id="submit" type="submit" value="Zoek" />
</form>

Wil je ook nog links naar (populaire) pagina’s toevoegen, dan zul je dit zelf naar HTML om moeten zetten. Weet je niet hoe je dat doet, dan kun je een nieuw bericht maken, hierin de links maken met behulp van de editor, naar HTML switchen en dit stukje code kopiëren en onder het zoekveld plakken. De 404 pagina ziet er dan zo uit:

Na het lezen van dit bericht weet je precies hoe je een aangepaste 404 not found pagina in kunt stellen voor je blog of website. Ik hoop dat je hiermee bezoekers langer op je site kunt houden. Mocht je ergens niet uit komen, aarzel dan niet om contact met me op te nemen, bijvoorbeeld via de comments. Succes!

Bewaar voor later op Pinterest: