Hoe migreer ik mijn website naar HTTPS – De Invisible Puppy Case

SEO Digitale Optimalisatie

Hoe-migreer-ik-mijn-website-naar-https.jpg

Maandag 2 januari was een spannende dag voor mij. Niet omdat het de eerste werkdag van het jaar was.  Noch omdat ik een Adwords examen af te leggen had.  Ook niet omdat 2017 nog verschrikkelijker dan 2016 zou zijn volgens de sociale media influencers.

Wel omdat we op deze eerste werkendag de Invisible Puppy website volledig zouden omzetten naar https. Spanning ten top!

Mogelijks denkt u nu één van volgende zaken:

1. "Amai, die Xaveer is nogal snel enthousiast!"
2. "What the f* is https, waar heeft die gast het over?"
3. "Aha een https-websitemigratie, interesting. Tell me more."

Deze week wil ik deze drie gedachten verder voor u toelichten (behalve punt 1).

Kort licht ik toe hoe en waarom we de Invisible Puppy website omzetten naar de veiligere https standaard.
Wat was het te volgen proces, waar werd het lastig en hoe kan ook jij de overstap maken.

Het verhaal begint reeds enkele maanden geleden.
Zoals wel vaker ontvang ik technische vragen of opmerkingen betreffende onze eigen website (die volledig op HubSpot draait).
Zo ook op een op het eerste zicht willekeurige zondagnamiddag: Eén van onze bazen vraagt me of ik https kan activeren op onze website.

dilbert-blockchain.jpg
(copywright Scott Adams)

Mijn eerste gedacht: "Allez vooruit, hij heeft weer eens iets gelezen waarvan hij denkt dat het op een kwartier tijd op te lossen valt."
Nog voor ik kan vragen in welke kleur hij de https wilt, lees ik de voetnoot :

“Onderzoeken wat de impact is om dit te activeren.”

Ok, hier was meer aan de hand. Hier is over nagedacht.
Note to self: “Baas niet onderschatten.”

Na een kort aantal gesprekken wordt duidelijk dat we dit niet op een 15-tal minuutjes kunnen aanpassen door een vinkje aan te duiden in ons CMS systeem.
Het project wordt even in de frigo gezet, vanwege enkele strak te volgen deadlines van onze klanten (klanten gaan altijd voor bij een agency).

Enkele drukke projectweken later, pikken we de draad weer op. Meer daarover in onderdeel 3.
Laat ik eerst voor de mensen die met gedachte “2. What the f* is https, waar heeft die gast het over?” wat verduidelijking brengen.
Ik probeer in mensentaal uit te leggen wat https is en wat de voordelen ervan zijn in de volgende twee hoofdstukken

 https-activeren-email.jpg(Desbetreffende email die midscheeps op een dobberde nazomerdag mijn richting werd geschoten)

1. Wat is https?

Even terug naar het begin. Wat is https nu ook al weer?
Wel, kort door de bocht: het zorgt ervoor dat je website veiliger wordt.

Https (of http over SSL) volgens wikipedia:
“HyperText Transfer Protocol Secure, afgekort HTTPS, is een uitbreiding op het HTTP-protocol met als doel een veilige uitwisseling van gegevens. Bij gebruik van HTTPS worden de gegevens versleuteld, waardoor het voor een buitenstaander, bijvoorbeeld iemand die afluistert, onmogelijk zou moeten zijn om te weten welke gegevens verstuurd worden.”

In onderstaand schema zie je vereenvoudigd hoe dit concreet in zijn werk gaat.

 

Hoe werkt https.png

Als er iemand jouw website bezoekt gaat jouw server deze pagina (of informatie) versleutelen met een publieke sleutel.

Deze data kan vervolgens enkel ‘ontsleuteld’ worden door diegene die de informatie opvraagt.  Enkel na het decrypten van de data met de gebruikers private sleutel zal de informatie verzonden worden. Om het versleutelingsprincipe te initiëren heb je als bedrijf een SSL certificaat nodig, dat valideert dat jij effectief bent wie je beweert te zijn.

Dit systeem van dubbele sleutels zorgt ervoor dat data steeds versleuteld en nadien ontcijferd wordt waardoor aanvallers in principe nooit kunnen ‘meeluisteren’ wat er gaande is.

Meer informatie voor de geeks onder ons vind je onder andere hier en hier. Alsook in dit kort en bondig artikel van Comodo of wie echt in diepte wil gaan: deze uitgebreide gids en webdev document van Google.

Hoe zie je nu of een website over https beschikt:

  • https in begin van de url
  • groene balkje
  • groen slotje in de url balk

https-in-verschillende-browsers.jpg

Wat is de kostprijs van dit alles?

Wel vooreerst zal je een certificaat dienen aan te schaffen.
De grote jongens online gebruiken bijna allemaal een van volgende drie grote providers van certificaten:

Deze zijn in mijn ogen de beste oplossing indien je voor professionele doeleinden een SSL certificaat nodig hebt.  

Heb je een kleine website en beschik je over enige technische kennis, dan kan je dit ook volledig gratis opzetten dankzij het Let's Encrypt project. Zelf begon ik hier ook aan om mijn persoonlijke website over te zetten. Volledige toegang tot je eigen hosting, server en database zijn nodig. 

Kostprijs van deze certificaten gaat van 35€ per jaar tot 575€ per jaar voor één domein.
Handig overzicht van verschillende pakketten en prijzen vind je op sslcertificaten.nl

Je grootste kost zal echter in het werk zitten dat nodig is om dit alles op te zetten.
Reken al gauw op een 4-5 tal mandagen (intern of extern) om een middelgrote website volledig te migreren en op te volgen.

2. Waarom onze website naar https migreren?

Waarom zou je jouw website via https gaan opzetten?
Persoonlijk zie ik drie goede redenen, hoewel er een pak meer redenen zijn om de switch te maken.

Veiligheid

Hopelijk is het duidelijk dat websites waarbij persoonlijke of betaalgegevens verwerkt worden absoluut over https dienen te beschikken. Mocht je ooit een webshop tegenkomen waarbij dit niet het geval is, maak dan liever rechtsomkeer. Heb je zelf een webshop of vraag je veel klantendata zet dan zeker https op.

Scoren in Google

Reeds in 2014 gaf Google aan dat websites die over https beschikken hoger in de rankings zullen eindigen. Dit alleen al is een reden genoeg om https op te zetten. Bovendien maakte Google bekend om http websites die paswoorden verzamelen als “insecure” aan te duiden in hun nieuwe Chrome 56 browser van Januari 2017 (nu dus).

Google-insecure-https-in-chrome-56.png
(Google zal alle http websites die paswoorden verzamelen als onveilig markeren)

Vertrouwen

Een https website zorgt eveneens voor het nodige vertrouwen en professionaliteit bij jouw potentiële klanten. Het geeft weer dat je effectief bent wie je beweert te zijn, alsook dat je vertrouwelijk omgaat met de data die via jouw website verstuurd wordt. Dit kan bovendien een positieve impact hebben op de conversie ratio van je website.

3. Hoe hebben we dit aangepakt?

Het werd al snel duidelijk dat de nodige research diende te gebeuren alvorens deze switch te kunnen maken. Dit is alvast mijn eerste tip: doe de nodige research, lees en leer van anderen. Vertrouw niet blindelings op “automatische migraties” of plugins die dit voor jou regelen aangezien iedere website, ieder cms systeem, iedere hosting of server pakket verschillend is, waardoor er geen "one solution fits all" is.

Concreet maakten we een stappenplan om de switch te maken. Na de nodige research planden we drie fases om de aanpassing zo vlot mogelijk te laten verlopen: een voorbereidende fase, een fase waarin acties worden uitgevoerd tijdens switch, en tenslotte een opvolgfase na de lancering. De belangrijkste stappen vind je hieronder. In een exlusieve behind the scene's vind je alle stappen alsook extra informatie die we tijdens onze voorbereiding verzamelden. 


Voorbereidende fase

- SSL certificaat aanschaffen. Bij Invisible Puppy was dit inbegrepen in ons HubSpot pakket
- De nieuwe https website registreren bij de Google Search Console
- Nagaan welke redirects (doorverwijzingen van url A naar B) er opgezet werden voor jouw website. Deze dien je nadien namelijk door te verwijzen naar de nieuwe https versie
- Een redirect plan opstellen zodat alle http pagina's doorverwijzen naar de https versie
- Een nieuwe xml sitemap aanmaken voor de https pagina's
- Lopende advertentie campagnes inventariseren. Erg belangrijk wanneer je bijvoorbeeld AdWords campagnes hebt lopen. Je zal namelijk alle urls moeten aanpassen.

 
Tijdens de migratie uit te voeren taken
- De nodige aanpassinge op server/hosting niveau uitvoeren. Opgelet deze kunnen tot 48 uur duren.
Begin je migratie dus niet op een donderdag of vrijdag.
- Aanpassingen in je cms uitvoeren. Bij Hubspot enkele instellingen aanpassen, bij Wordpress eveneens.
- Google Analytics profielen aanpassen en linken aan de https website.
- De nieuwe Google Search Console linken aan je Google Analytics profiel.
- Sociale media profielen en andere externe links naar je website aanpassen zodat deze naar de https versie verwijzen.
- Online advertenties aanpassen. 
- De nodige redirects effectief opzetten. Dit kan zowel binnen je CMS als op hosting niveau ingesteld worden. 
Vb: 20thoughts.be verwijst nu door naar https versie http://www.invisiblepuppy.com/20thoughts-in-beeld


Na de lancering op te volgen

- Certificaat test uitvoeren via de site van Qualys
- Google Analytics tracking controleren: komt de data binnen op de nieuwe https pagina's?
- Nieuwe sitemap submitten in Google Search Console, zodat Google op de hoogte is van de nieuwe site
- Indexatie in Google opvolgen via de Search Console: vind Google je nieuwe pagina's?
- Keyword rankings opvolgen
- Email templates aanpassen zodat alle links nu naar de https versie gaan. 

Https Migratie Plan Checklists:

Er zijn online een pak goede migratie checklists te vinden. Waarvan de versie van Aleyda Solis zowat de beste is die er te vinden is. Het is ook deze checklist die ik als basis gebruikte.

Voorbeelden van andere https migraties

Er zijn al een pak andere websites die een https migratie achter de rug hebben en deze eveneens toegelicht hebben.
Hieronder volgen enkele internationale als ook Belgische voorbeelden die zeker de moeite waard zijn om na te lezen.

- Wired: https://www.wired.com/2016/09/wired-completely-encrypted/
- Android planet http://www.marketingfacts.nl/berichten/een-miljoenenpubliek-migreren-naar-https-zo-doe-je-dat
- Yelp: https://engineeringblog.yelp.com/2016/09/great-https-migration.html
- Dailybits: https://www.dailybits.be/item/migratie-naar-https-wordpress/

4. Eerste resultaten

Na de lancering is het cruciaal om een aantal zaken op te volgen, te testen en resultaten bij te houden.
Hiervoor gebruik ik een aantal tools. 

Certificaat: QUALYS

Een eerst test die ik uitvoerde was kijken of het ssl certificaat wel effectief online functioneerde.
Dit kan je makkelijk testen op de site van Qualys

SSL-test.png

(Test om na te gaan of ons certificaat effectief is)

Zoekresultaten: Google

Volgende check was nagaan of er al enkele van de nieuwe https pagina’s terug te vinden zijn in de zoekresultaten van Google.
Dit kan enkele dagen / weken duren. Voor Invisble Puppy zien we vandaag de eerste pagina’s verschijnen.
Nog niet alle resultaten tonen de nieuwe pagina’s, dit dienen we dus verder op te volgen.

Je kan dit zelf testen door volgende zoekopdracht in Google uit te voeren:  site:https://www.invisiblepuppy.com

Https-paginas-geindexeerd-in-Google.jpg
(De eerste 4 zoekresultaten tonen de https versie, nadien volgen de oude links)

Trafiek: Google Analytics

Na de aanpassingen in Google Analytics, is het cruciaal onmiddellijk na te gaan of de bezoekers op de nieuwe https pagina’s landen en of deze ook correct geregistreerd worden in Google Analytics. Hieronder zie je het organische verkeer die via zoekopdrachten in Google op onze website terecht komen. De laatste aantal dagen zie je dat de trafiek correct binnenkomt en zelf licht gestegen is ivm vorig jaar.

https-resultaten-google-analytics.jpg
(Google Analytics registreert de bezoekers op de nieuwe https website)

Keyword rankings: Moz

Iedere migratie van een website houdt bepaalde risico’s in qua rankings van je keywords. Bij Invisible Puppy gebruiken we de SEO tool MOZ om onze keywords en trafiek bij te houden. Een eerste zicht op een subset van onze keywords leert ons dat er niet echt significante verschuivingen zijn. All good.

MOZ-keyword-rankings-na-https-migratie.jpg
(Moz keyword ranking tool)

 Indexatie Google Search console

In Google’s Search Console kan je op een gestructureerde manier controleren wat Google met jouw data en pagina’s aanvangt.
Momenteel zien we dat onze sitemap werd opgepikt door Google maar nog niet volledig geïndexeerd werd.

 Google-search-console-geindexeerde-paginas.png(Google search console geeft weer hoeveel van de nieuwe pagina's te vinden zijn in Google)

Nog te doen:

- Google Search console
Nog niet alle links werden geindexeerd. Google is bezig om deze allen op te pikken.
Je kan dit proces echter versnellen door een aantal van je belangrijke urls manueel in te geven via de "Fetch as Google" Functie.
Op deze manier kan je tot 500 links aan Google meegeven.

Google-search-console-fetch-as-Google.jpg( Fetch as Google functie om het indexeren van de nieuwe https pagina's te versnellen)

- Hard gecodeerde http links
Op de huidige webiste werd af en toe naar de volledige http url verwezen in plaats van naar een relatief pad.
Deze dienen allemaal aangepakt te worden om deze rechtstreeks naar de hpps versie te sturen. 

Vb:
Je kan naar een pagina linken door de volledige url in te geven: https://www.invisiblepuppy.com/blog
Of je kan naar een pagina binnen je eigen website verwijzen door een relatief pad in te geven:  /blog

Alle links met relatieve paden zullen nu landen op een https pagina.
De volledige urls, zullen verwijzen naar de http versie en vervolgens met een redirect doorverwijzen naar de https versie. 

5. Conclusie

Je website overzetten naar https is niet iets waarbij je over één nacht ijs gaat..
Voldoende research en voorbereiding zijn cruciaal. 

De migratie bij Invisible Puppy ging al bij al redelijk vlot hoewel we nog niet 100% klaar zijn om alle best practices door te voeren.
Mochten jullie hier ook aan willen beginnen wens ik je alvast veel succes en doorzettingsvermogen om dit alles tot een goed einde te brengen.

Bij deze geef ik graag nog eens de https migratie checklist mee 

Vriendelijke groeten,
Xaveer

   
Reacties