WordPress & HTTPS: SSL-certificaat installeren op je WordPress-site?

Wil je de traffic op je WordPress-website via HTTPS laten verlopen? Een geldig SSL-certificaat zorgt ervoor dat al het verkeer op jouw website versleuteld wordt.

Met een SSL-certificaat kun je er voor zorgen dat jouw website via het HTTPS-protocol bereikbaar wordt. HTTP staat voor HyperText Transfer Protocol. HTTPS staat voor precies hetzelfde, maar dan met het woord “Secure” aan het einde. Een website die “Secure” is staat professioneler en heeft een hoop andere voordelen. In dit artikel leggen we je uit wat die voordelen zijn en hoe je een SSL-certificaat installeert voor jouw website.

Wat zijn HTTPS en SSL?

HTTPS is een protocol voor aanvragen vanuit een browser (zoals Google Chrome) en een webserver. HTTPS is een uitbreiding op het protocol HTTP. Bij HTTPS wordt verstuurde data versleuteld, bij HTTP gebeurt dit niet. Met HTTPS wordt het voor hackers en andere kwaadwillenden een stuk lastiger om te kunnen zien welke gegevens er heen en weer worden verstuurd. Om verkeer van jouw website te laten verlopen via HTTPS, dien je een SSL-certificaat te installeren. SSL staat voor Secure Sockets Layer. SSL is het meest gebruikte protocol voor versleutelde data op internet.

In een browser kun je websites met een (geldig en correct geïnstalleerd) SSL-certificaat herkennen aan het feit dat de URL begint met “https://” (vaak in het groen weergegeven) met daarvoor het woord “Secure” (met een slotje). In de screenshot rechts kun je zien hoe dat er bij deze website uit ziet (WPLounge).

Waarom HTTPS?

HTTPS wordt toegepast in alle scenario’s waarin gegevens veilig verstuurd moeten worden. Denk hierbij aan internetbankieren, webwinkels, e-mail of andere applicaties waarin persoonlijke informatie wordt verwerkt.

HTTPS vaak verplicht

In veel gevallen is het tegenwoordig zelfs verplicht om gebruik te maken van een versleutelde verbinding. In Europa is het zo dat iedere website die persoonlijke gegevens verwerkt voorzien moet zijn van een SSL-certificaat. Het verwerken van persoonlijke gegevens gebeurt overigens niet alleen bij ingewikkelde websites zoals webshops. Ook een contactformulier verzamelt en verstuurt persoonlijke informatie, en deze dient versleuteld te worden verzonden.

HTTPS is een “ranking factor” voor Google

Behalve het feit dat HTTPS in veel gevallen verplicht wordt, is het ook zo dat zoekmachines als Google websites met een SSL-certificaat steeds meer “voorrang” gaan geven boven andere zoekresultaten. Meer daarover lees je in het artikel HTTPS as a ranking signal uit 2014, waarin Google al aankondigt dat HTTPS langzaam een “ranking factor” zal worden.

Volgens The Verge zal Google Chrome alle websites die niet werken via HTTPS vanaf juli dit jaar markeren als “niet veilig” (not secure).

SSL installeren op je WordPress-website

Hoe je een SSL-certificaat kunt installeren op je WordPress-website, ligt er heel erg aan bij welke hostingpartij je klant bent én welk controlepeneel zij gebruiken. Bij sommige hostingpartijen (zoals Neostrada en Cloud86) worden websites standaard opgeleverd met een gratis SSL-certificaat. Deze certificaten zijn vaak afkomstig van Let’s Encrypt, een partij die gratis SSL-certificaten aanbiedt aan iedereen met een domeinnaam.

In dit artikel gaan we ervan uit dat je gebruikmaakt van DirectAdmin als controlepaneel.

SSL-certificaat installeren vanuit DirectAdmin

Wanneer je klant bent bij een hostingpartij met DirectAdmin als controlepaneel, is het vrij eenvoudig om een SSL-certificaat van Let’s Encrypt te installeren. Niet alle hostingpartijen met DirectAdmin hebben ook Let’s Encrypt ingeschakeld. Veel partijen doen dit echter wel, bijvoorbeeld Cloud86. Ervan uitgaande dat je hostingpartij deze mogelijkheid biedt, log je in bij DirectAdmin.

Klik op de domeinnaam waarvoor je een SSL-certificaat wilt installeren en klik vervolgens linksboven in DirectAdmin op “Domain Setup”. In dit scherm klik je op je domeinnaam en controleer je vervolgens op “Secure SSL” is aangevinkt. Staat de optie “Secure SSL” er niet bij? Neem dan contact op met je hostingpartij voordat je verder gaat.

Zodra je Secure SSL hebt ingeschakeld voor je domeinnaam, ga je in DirectAdmin naar Advanced Features > SSL Certificates:

Je komt nu in een nieuw scherm waar je moet kiezen voor de optie Free & automatic certificate from Let’s Encrypt. Vervolgens dien je een aantal gegevens in te vullen. Je domeinnaam staat al voor je ingevuld en hoef je dan ook niet aan te passen. Wel moet je je e-mailadres invullen én dien je te controleren of beide variaties van je domeinnaam zijn aangevinkt (één met www. ervoor en één zonder).

Nadat je alles hebt ingevuld, klik je onderin op “Save”. Als alles goed is gegaan krijg je de onderstaande melding te zien:

De installatie van het SSL-certificaat op jouw server is nu gelukt. Echter, als je naar https://jouwdomeinnaam.nl gaat, dan zul je nog niet je website zien staan. Waarschijnlijk zie je daar de onderstaande melding. Het kan echter een paar minuten duren voordat dit zichtbaar is. Haal een kop koffie en controleer daarna of je domeinnaam al via https bereikbaar is.

Zoals je kunt zien laat Google Chrome hier een slotje zien en een groene aanduiding dat de verbinding “Secure” is.

Je website overzetten naar HTTPS

Nu het installeren van een SSL-certificaat gelukt is, moet je je website nog overzetten naar HTTPS én zorgen dat al het verkeer op je website via HTTPS gaat verlopen. Hoe je je website moet overzetten naar HTTPS ligt er een beetje aan hoe je WordPress hebt geïnstalleerd. Heb je dit met Installatron gedaan? Dan is het vrij gemakkelijk om je website over te zetten.

Optie 1: Als je WordPress met Installatron hebt geïnstalleerd

Als je WordPress met Installatron hebt geïnstalleerd, ga je in DirectAdmin naar “Web Applications”. Selecteer vervolgens onder “My Applications” jouw website. Je komt nu in het onderstaande scherm, waar je op de “Clone”-knop moet klikken:

Je komt nu in het “Clone”-scherm van Installatron. In dit scherm ga je je website “klonen” naar de HTTPS-versie van je domeinnaam. Het enige dat je hier hoeft aan te passen is het “Domain” onder het kopje “Destination”. Daarnaast dien je te controleren of het veld “directory” leeg is. Standaard staat hier vaak “blog”, wat inhoudt dat je website zichtbaar wordt op https://jouwdomeinnaam.nl/blog.

Klik vervolgens helemaal onderin op “Clone” en wacht tot Installatron klaar is met het klonen. Je kunt nu controleren of je website werkt als je naar https://jouwdomeinnaam.nl gaat. Als dit het geval is, dan kun je in Installatron je oude WordPress-installatie verwijderen.

Ga nu verder naar de laatste stap: Bezoekers redirecten naar HTTPS

Optie 2: Als je WordPress handmatig hebt geïnstalleerd

Als je WordPress niet met Installatron hebt geïnstalleerd, dan heb je dit waarschijnlijk handmatig gedaan. Het is dan iets minder makkelijk om je website over te zetten naar HTTPS. Je dient namelijk alle “http”-verwijzingen in je database te vervangen door “https”.

Stap 1: Controleer of https en http dezelfde folder gebruiken

De eerste stap is om in DirectAdmin nog een keer naar Domain Setup te gaan. Het makkelijkste is om hier te kiezen voor de tweede optie. Je hoeft de bestanden van je website dan namelijk niet meer over te zetten van de public_html naar de private_html folder.

Stap 2: Alle verwijzingen naar “http” veranderen in “https”

Om alle verwijzingen in je database te veranderen naar de https-versie van je website, gaan we in DirectAdmin naar Advanced Features > phpMyAdmin. Maar, voordat we verdergaan: maak eerst een backup van je database! Als je in deze stap iets fout doet kan dat grote gevolgen hebben, dus is het beter om voor de zekerheid een reservekopie van je database te bewaren.

Wanneer je voor het eerst gebruikmaakt van phpMyAdmin zal je gevraagd worden om een gebruikersnaam en wachtwoord. Deze gegevens vind je in het wp-config.php bestand van je WordPress-website. Het gaat hier om de DB_USER en het DB_PASSWORD. Je komt nu in phpMyAdmin, waar je in de balk links op de naam van jouw database moet klikken. Deze naam vind je overigens óók in je wp-config.php bestand (DB_NAME). Klik nu bovenin het scherm op “SQL”:

In het tekstveld op deze pagina dien je de volgende code in te vullen:

UPDATE t
     set url = REPLACE(url, 'http:', 'https:')
     WHERE url like 'http://example.com%';

Vervang “example.com” met jouw eigen domeinnaam. Controleer ook of je de juiste versie van je domeinnaam hebt gekozen (met of zonder www). Klik nu helemaal rechts onderin op de Go-knop. Alle http-verwijzingen in je database worden nu vervangen door https.

Stap 3: Controleer of het gelukt is

Ga nu naar je website (met https:// ervoor) en controleer of het gelukt is. Je herkent dit aan het groene slotje links bovenin Google Chrome. Als hier “Secure” staat betekent dat dat het gelukt is. Controleer ook of de menu-items in je navigatie naar de https-versie linken en of je afbeeldingen via https worden geserveerd.

Bezoekers redirecten naar HTTPS

Nu je ervoor gezorgd hebt dat je website bereikbaar is via https, moet je waarschijnlijk alleen je bezoekers nog redirecten naar de juiste versie. Je wilt (meestal) niet dat je website via zowel http als https bereikbaar is. Controleer eerst wat er gebeurt als je naar je website gaat met http:// ervoor (zonder S). Word je al doorgestuurd naar de versie die begint met https? Dan hoef je verder niets te doen. Is dit niet het geval, dan dien je nog een redirect in te stellen naar de HTTPS-versie.

Dit kun je het beste doen door via FTP in te loggen op je server. Ga nu naar jouw domeinnaam en open de public_html folder. Zoek hier naar het .htaccess-bestand en voeg de volgende code toe:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTPS} off
    RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
    RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
    RewriteRule ^ https://%1%{REQUEST_URI} [R=301,L]
</IfModule>

Ga nu naar de http-versie van je website en controleer of je automatisch wordt doorgestuurd naar de https-versie. Je bent nu klaar: je website is alleen nog te bereiken via HTTPS. Staat je website ook in Google Search Console? Dan moet je de https-versie van je website hier toevoegen als nieuwe property.

Mogelijke problemen

Het kan gebeuren dat er tijdens het installeren van een certificaat iets niet helemaal goed is gegaan. Google Chrome zal dan géén groene balk laten zien. Ik heb op mijn eigen website (wouterpostma.nl) een pagina gemaakt met een verwijzing naar een “onveilige” afbeelding (afkomstig van een website zonder SSL-certificaat) om te laten zien hoe dit er uit ziet:

Op deze voorbeeld-pagina heb ik een afbeelding van een andere website (zonder SSL-certificaat) ingeladen. Wat er dan gebeurt in browsers als Google Chrome is dat je nog wel “https://” ziet staan, maar dat er geen “Secure” voor staat. Ook het slotje en de groene kleur ontbreken. Als jouw website er uitziet zoals in de screenshot hierboven, open dan je website in Google Chrome, druk op F12 en klik dan op “Console” (of op een Mac: Command + Option + J). De “Console” wordt nu geopend. Deze laat zien welke “mixed content” er op je website staat:

Je krijgt per “onveilige” resource te zien waar deze vandaan komt. Je weet nu welke afbeeldingen (en eventueel scripts) je opnieuw moet inladen via https.

Meestgestelde vragen samengevat

Beoordeel dit artikel