We lopen allemaal regelmatig tegen het probleem aan dat we een website graag goed willen migreren of een deel van onze sitestructuur anders willen inrichten. Hoe verwijzen we de oude pagina’s door naar de nieuwe adressen via 301 redirects? Hoe zorgen we ervoor dat bezoekers geen 404-pagina tegenkomen? En wat gebeurt er met onze oude linkwaarde?

Allemaal relevante vragen waar ik in dit artikel duidelijk antwoord op probeer te geven. Daarnaast zullen we gaan kijken naar andere best practices op het gebied van 301 redirects, zoals het doorverwijzen een non-www adres (www.example.com) naar een www-adres (example.com) en een 301 redirect van een http-adres naar een https-adres.

Het .htaccess bestand

De basis van de meeste doorverwijzingen (301 redirects, 302 redirects, etc..) ligt in het .htaccess bestand. Dit komt doordat de meeste websites zijn geïnstalleerd op een Apache webserver en deze maakt gebruik van een .htaccess voor het afvangen van bepaalde aanwijzingen, voordat de website geladen wordt.

Wanneer een bezoeker een adres (URL) opvraagt binnen jouw website, zal Apache allereerst kijken in de .htaccess of er aanwijzingen zijn dat deze is doorverwezen naar een nieuw adres. Vandaar dat we dit bestand straks zullen gaan gebruiken om redirects te maken.

[Tip: Mocht je uiteindelijk ontdekken dat je geen .htaccess bestand hebt op je FTP server, omdat je andere web server software draait, raadpleeg dan je hosting provider voor de specifieke redirect details binnen de gekozen webserver omgeving.]

Redirects en SEO

De kans is vrij groot dat je hier terecht bent gekomen vanuit een SEO invalshoek. Je weet dat het doorverwijzen van pagina’s een belangrijk onderdeel is van kwalitatieve SEO. Maar waarom is dat eigenlijk zo?

Allereerst is het natuurlijk slim om oude pagina’s door te verwijzen vanwege de gebruiksvriendelijkheid. Zodra je namelijk een website migreert naar een nieuwe opzet, verdwijnt vaak een groot deel van de oude adressen (URL’s). Je wilt niet dat bezoekers op een 404-pagina (error-pagina) terecht komen met een grote ‘Pagina niet gevonden’ melding.

De tweede belangrijke reden om goede redirects toe te passen is wegens het doorgeven van de linkwaarde. Een oude pagina bouwt namelijk krediet (autoriteit) op in de ogen van zoekmachines via interne en externe links. Zo kan een Google gedeeltelijk inschatten of een pagina te vertrouwen is of niet.

Wanneer de oude pagina een 404-pagina wordt, verdwijnt deze linkwaarde volledig! En dat wil je natuurlijk niet als website, aangezien je andere pagina’s ook hiervan profiteerden. Vandaar dat we onze vriendelijke redirects hebben als redmiddel en dit ook een vaste tool is voor iedere serieuze SEO specialist.

301 versus 302 redirects

Binnen het redirect-landschap is het van cruciaal belang om een goed onderscheid te maken tussen twee technisch verschillende soorten redirects: 301 redirects en 302 redirects.

301 redirects

Dit zijn de redirects waar we in de rest van deze handleiding naar zullen verwijzen wanneer we het hebben over ‘redirects’ of ‘doorverwijzingen’. Dit zijn namelijk permanente redirects. Ofwel, technisch gezien wordt er naar zoekmachines gecommuniceerd dat de oude pagina niet meer terug gaat komen en dat dus de waarde mag worden doorgegeven aan de nieuwe pagina.

302 redirects

Met slechts één letter verschil zorgt de 302 redirect toch regelmatig voor problemen in het SEO landschap! Dit is technisch gezien namelijk een tijdelijke redirect. Hiermee wordt bedoeld dat een pagina slechts voor een bepaalde periode doorverwijst naar een nieuw adres. Dit betekent voor zoekmachines dat de oude pagina nog terug gaat komen! En dus blijft de waarde in de tussentijd bij de oude pagina hangen, aangezien ze het anders later weer om zouden moeten draaien.

Wees dus zeer secuur bij het controleren van je geïmplementeerde redirects, want dit gaat veel vaker fout dan je zou denken.

Oude webpagina naar nieuwe pagina doorverwijzen

Tijd voor de praktijk en dus voor onze eerste 301 redirects! In dit voorbeeld gaan we domeinnaam.nl/oude-pagina doorverwijzen naardomeinnaam.nl/nieuwe-pagina.

Om een pagina door te verwijzen moet er allereerst aan Apache worden duidelijk gemaakt dat er redirects mogen plaatsvinden. Dit gebeurt via een simpele regel in de .htaccess:

RewriteEngine On

Vervolgens hebben we de optie om ‘redirect regels’ te formuleren. Dit kan op twee manieren, namelijk via ‘Redirect 301‘ en ‘RewriteRule‘. Beide zullen we uitwerken tot een praktisch voorbeeld:

Redirect 301 /oude-pagina /nieuwe-pagina
RewriteRule ^oude-pagina$ /nieuwe-pagina [R=301]

Je ziet gelijk al een duidelijk verschil: de eerste 301 redirect is een stuk eenvoudiger! Deze optie is dan ook perfect voor simpele één op één doorverwijzingen, aangezien dat ook het enige is wat deze type redirect kan doen.

De RewriteRule is complexer, maar kan weer veel meer (wat we later nog zullen zien). Dit komt doordat je patronen kunt beschrijven die overeen moeten komen, in plaats van alleen 1-op-1 door te verwijzen. Dit gebeurt via RegEx ofwel reguliere expressies.

In het kort een toelichting op de syntax:

Probeer beide voorbeelden zelf maar eens binnen je .htaccess! Maar pas op, een spatie of teken verkeerd en je website is stuk via een keiharde server-error (Apache kan de .htaccess niet goed meer lezen). Zorg daarom dat je altijd goed test en het oude bestand makkelijk terug kan zetten.

[Let op: Als je gaat werken met 'Redirect 301' voor je redirects, dan moet je de redirect voor je homepage (Redirect 301 / http://www.nieuwe-website.nl), als laatste neerzetten, omdat deze anders alle andere individuele redirects ongedaan maakt. Een alternatief is om met RewriteRule te werken voor je homepage, en deze door te verwijzen via RewriteRule ^$ http://www.nieuwe-website.nl [R=301].]

www naar non-www redirecten en andersom

De volgende, meer geavanceerde stap, is om ervoor te zorgen dat je website één gecentraliseerde versie heeft in de vorm van www.domeinnaam.nl of domeinnaam.nl.

Gek genoeg zijn dit namelijk hele andere domeinnamen in de ogen van zoekmachines, doordat www oorspronkelijk een subdomein was van domeinnaam.nl en dus compleet andere inhoud kan bevatten. Hierdoor kan je zomaar flink wat waarde mislopen doordat je twee versies geïndexeerd hebt van je zelfde domein (want in de praktijk zijn deze vrijwel altijd hetzelfde).

www naar non-www doorverwijzen

Voor de liefhebbers van korte domeinnamen zullen we eerst kijken hoe je ervoor kunt zorgen dat alle www-inhoud alleen te vinden is op de non-www versie (en dus niet meer met www in de domeinnaam).

In dit voorbeeld gaan we dus www.domeinnaam.nl redirecten naar domeinnaam.nl.

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.domeinnaam\.nl [NC]
RewriteRule ^(.*)$ http://domeinnaam.nl/$1 [R=301]

Tijd voor wat uitgebreide toelichting denk ik :=).

Non-www naar www 301 redirecten

Hier zal ik je laten zien hoe je de code uit het vorige hoofdstuk eenvoudig omzet naar een 301 redirect van non-www naar www. Voor de technische achtergrond verwijs ik je naar het vorige hoofdstuk.

Daar gaan we :=)!

RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^(.*)$ http://www.domeinnaam.nl/$1 [R=301]

Afwijkingen ten opzichte van www naar non-www:

[Let op: De regel ‘!^www\.‘ stelt als voorwaarde dat het niet overeenkomt met ‘www’, maar het kan dus zo zijn dat jij bijvoorbeeld een blog hebt staan op een subdomein via blog.domeinnaam.nl. Deze wordt met deze regel nu ook doorverwezen naar www, aangezien blog geen www is :=). Om dit op te lossen kun je een extra condition (RewriteCond) toevoegen voor je blog. Dan komt de uiteindelijke  code er zo uit te zien:

RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteCond %{HTTP_HOST} !^blog\. [NC]
RewriteRule ^(.*)$ http://www.domeinnaam.nl/$1 [R=301]

Een heel domein doorverwijzen / verhuizen

Het komt soms voor dat je als bedrijf je oude domeinnaam / merknaam zat bent en op zoek bent naar een nieuwe positionering. Het kan daarbij prima het geval zijn dat alleen je domeinnaam, huisstijl en logo wijzigt, en verder alles technisch hetzelfde blijft. Bijvoorbeeld als bol.com zou willen verhuizen naar vierkant.com voor een meer rechtlijnig beleid :=).

Maar hoe zou je dit doen? Want alle oude waarde ligt zoals je weet bij het oude adres, bol.com plus alle duizenden subpagina’s. Deze 1-op-1 doorverwijzen via 301 redirects is een hel.

Gelukkig hebben we onze RewriteRules en is het daardoor erg eenvoudig!

RewriteCond %{HTTP_HOST} ^(.*)bol\.com [NC]
RewriteRule ^(.*)$ http://vierkant.com/$1 [R=301,L]

Kleine aanvullende toelichting op wat ik eerder heb besproken:

[Let op: Wanneer er bij de migratie van je domeinnaam aspecten wijzigen in je sitestructuur, dan gaat de bovenstaande regel niet langer op en wordt de migratie veel complexer. Wanneer bijvoorbeeld bol.com/prachtig-boek opeens te vinden is op vierkant.com/boeken/prachtig-boek, dan verandert het patroon en kan het dus niet meer 1-op-$1 worden overgenomen :=).]

http naar https-redirecten en andersom

Om ervoor te zorgen dat een migratie naar https goed verloopt, zijn 301 redirects cruciaal. De grote valkuil is dat je niet verwacht dat je redirects moet toepassen, omdat er slechts één s verschil is met http.

Zeer regelmatig zie ik in de praktijk ofwel gebrek aan redirects bij een veilige migratie naar https, ofwel een verkeerde opzet, waarbij het oude http-domein met 302 redirects wordt doorgezet naar zijn nieuwe locatie.

Complete domein http naar https redirect

Eens kijken hoe wij het wel goed op kunnen zetten!

RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteCond %{SERVER_PORT} ^80$
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301]

Laten we de nieuwe elementen nog even bekijken:

Complete domein https naar http redirect

Wanneer we het andersom willen inrichten (vaak niet gewenst in de praktijk, aangezien https een goede en veilige stap is), kun je de volgende soortgelijke code gebruiken:

RewriteEngine On
RewriteCond %{HTTPS} on
RewriteRule (.*) http://%{HTTP_HOST}%{REQUEST_URI}

Slim werken met RewriteRule: directory’s doorverwijzen

Zoals we al hebben gezien, kan RewriteRule in combinatie met RewriteCond allerlei mooie trucs uithalen die ons leven een stuk gemakkelijker maken. Om dit in de praktijk goed toe te passen, wilde ik als laatste praktische voorbeeld laten zien hoe je een gehele ‘directory’ met adressen kunt verplaatsen.

Een voorbeeld van een directory is:

domeinnaam.nl/fantasieboeken/harry-potter-1
domeinnaam.nl/fantasieboeken/lord-of-the-rings

Nu kan het regelmatig binnen je website architectuur zo zijn dat je op een gegeven moment een directory op een andere plek neerzet, of een andere naam geeft. Zo zou het zomaar kunnen gebeuren dat we besluiten dat onze voorbeeldboeken hierboven, beter in de subcategorie ‘fantasie’ kunnen staan. Daarmee zouden ze komen te staan in de map:domeinnaam.nl/boeken/fantasie/.

Daarna zouden we de Harry Potter en Lord of the Rings handmatig stuk voor stuk kunnen gaan doorverwijzen, maar daar wordt je niet blij van als bijv. bol.com :=). Dus is hier een slimme redirect regel voor! Laten we snel gaan kijken:

RewriteEngine On
RewriteRule ^fantasieboeken/(.*)$ /boeken/fantasie/$1 [R=301]

Zo simpel kan het zijn! Onze bekende punt-sterretje((.*)) vangt alle adressen af binnen de categorie fantasieboeken en geeft deze mee aan zijn naaste vriend $1.

Query-strings (?id=) doorverwijzen

Een lastige variant  van 301 redirects zijn de zogenaamde query-strings. Deze zijn goed te herkennen aan hun vraagteken plus gelijk-aan combinatie. Een zeer bekend voorbeeld dat ik ook zal gebruiken voor de praktische uitwerking is:

Veel beheersystemen van websites gebruiken dit namelijk om een specifieke pagina uit de database op te halen en zo een unieke pagina te tekenen. Dit is echter totaal niet zoekmachinevriendelijk en onleesbaar, aangezien je als bezoeker niet kunt zien waar je nou eigenlijk op terecht bent gekomen.

Tijd om onze vriend de .htaccess er weer bij te pakken en er iets leuks van te maken! Stel dat ons id=12 gelijk staat aan een pagina over Harry Potter, dan willen we het volgende doen:

RewriteEngine On
RewriteCond %{QUERY_STRING} ^id=12$
RewriteRule ^(.*)$ /harry-potter? [R=301]

De diepgang:

Sjabloon/generator voor .htaccess  301 redirects

Om het nog makkelijker voor je te maken heb ik even wat tijd gestopt in het realiseren van een simpel 301 redirect sjabloon, zodat het technische helemaal verdwijnt :=).

Deze voegt in Excel simpelweg wat cellen samen tot mooie RewriteRules, waardoor iedere webredacteur een migratie voor individuele pagina’s zou kunnen inrichten. Zo ben je minder afhankelijk van technische tussenpersonen. Daarnaast gaat dit ook sneller dan continu opnieuw de redirect-regels schrijven.

Download het Excel sjabloon voor 301-redirects

Vanuit het sjabloon kun je zo alle waardes uit de resultaat-cellen kopiëren in je .htaccess. Vergeet niet om RewriteEngine On bovenaan toe te voegen!

Redirect checker (gratis)

Na al je harde werk en studie binnen deze complete handleiding voor 301 redirects, wil je natuurlijk weten of het allemaal ook echt goed gaat! Want hoe zie je eigenlijk in de praktijk of iets een 302 redirect of een 301 redirect is?

Daarvoor hebben we gelukkig een handig tooltje tot onze beschikking, namelijk ‘Redirect Path’. Dit is een gratis redirect checker voor Chrome, die je netjes de hele serie aan redirects laat zien die je hebt doorlopen voordat je op je eindbestemming aankwam.

Download Redirect Path voor Chrome

In de praktijk ziet dit er zo uit, wanneer je bijv. http://www.daan.onl opvraagt:

De redirect checker is na installatie terug te vinden naast je browserbalk met het icoontje: .

Htaccess syntax controleren

http://www.htaccesscheck.com/ 

Vragen / conclusie

Ik hoop dat je met behulp van de toelichting en de diverse praktijkvoorbeelden een heel eind komt met het inzetten van 301 redirects. Ik heb geprobeerd de meest voorkomende scenario’s mee te nemen en zo duidelijk mogelijk te beschrijven.

Is het je allemaal gelukt om te bereiken wat je wilde bereiken via redirects? Zijn er nog voorbeelden / praktijk-scenario’s die je mist? Ga je het sjabloon in de praktijk gebruiken? :=) Ik ben zoals altijd benieuwd. Laat het gerust weten via weustenraad@gmail.com

Dankjewel.