Hoofdstuk 12 van 13
Je site ziet er mooi uit. Maar is ze ook af? Een site opleveren is meer dan “het werkt op mijn laptop”. In dit hoofdstuk loop je een praktische checklist door die professionele webbouwers ook gebruiken. Neem ze er rustig bij vóór je je site indient of aan een klant toont: elk punt dat je hier oplost, hoeft een bezoeker nooit tegen te komen.
Werk de lijst af met twee schermen: in het ene venster ben je ingelogd en pas je aan, in het andere (een privévenster, Ctrl+Shift+N of Cmd+Shift+N) bekijk je de site als bezoeker. Vink af wat klaar is. Je kunt de koppen van dit hoofdstuk letterlijk als afvinklijst gebruiken.
1. Alle pagina’s zijn gevuld
- Geen lorem ipsum of “Dit is een voorbeeldtekst” meer, ook niet in een verborgen hoekje (een tabblad, een accordeon, een popup, de footer).
- Geen lege pagina’s of pagina’s met “komt nog”. Is een pagina niet klaar, zet ze dan op Concept en haal ze uit het menu.
- Ruim op onder Pagina’s en Berichten: verwijder testpagina’s en de standaardberichten van WordPress (“Hallo wereld!”, “Voorbeeldpagina”).
- Elke knop leidt naar een pagina die bestaat. “Bestel voor morgen” moet ergens naartoe gaan.
Zoek snel naar vergeten opvultekst: typ in het zoekveld van je eigen site (of bovenaan in Pagina’s) het woord lorem. Ook voorbeeld en test zijn goede zoekwoorden.
2. Het menu klopt
- Ga naar Weergave → Menu’s en kies je hoofdmenu (1).
- Kijk na: staan alle belangrijke pagina’s erin, in een logische volgorde? Zijn de labels kort (Contact, niet “Neem contact met ons op”)? Staan er geen testpagina’s of dubbele items in?
- Klik aan de voorkant op elk menu-item, ook in het menu op je gsm.
3. Logo, sitetitel en favicon
- Het logo staat in de header en linkt naar de homepage.
- De sitetitel en het slogan zijn ingevuld: je ziet ze in browsertabbladen en zoekresultaten.
- Er is een favicon: het kleine icoontje in het browsertabblad. Zonder favicon toont de browser een saai standaardicoon.
- Ga naar Weergave → Customizer → Website identiteit.
- Controleer Website titel en Slogan.
- Klik bij Favicon (1) op Selecteer favicon en kies een vierkante afbeelding van minstens 512 × 512 pixels, bv. enkel het beeldmerk uit je logo (de korenaar), niet het hele logo met tekst: dat wordt onleesbaar klein.
- Klik bovenaan op Publiceren.
4. Het contactformulier is getest
Een contactformulier dat niet werkt, is erger dan geen formulier: de bezoeker denkt dat zijn bericht aankwam.
- Vul in een privévenster het formulier in alsof je een klant bent, en verstuur het.
- Verschijnt er een duidelijke bevestiging (“Bedankt, we antwoorden binnen twee werkdagen”)?
- Kwam de mail aan bij het juiste adres? Kijk ook in de map Spam.
- Staat het bericht in het overzicht van de inzendingen? Voor Elementor-formulieren: Elementor → Submissions; voor Gravity Forms: Forms → Entries.
- Test ook wat er gebeurt als je een verplicht veld leeg laat of een fout e-mailadres typt.
Zet je eigen testberichten achteraf niet “per ongeluk” in de lijst van je klant: verwijder ze na het testen. En kijk na of het vakje Ik ga akkoord met de privacyverklaring naar je privacyverklaring linkt.
5. Mobiel getest
Meer dan de helft van je bezoekers komt via een gsm. Test dus niet alleen met de knopjes in Elementor, maar op een echte gsm.
- Is alle tekst leesbaar zonder in te zoomen? Loopt er niets buiten het scherm (horizontaal scrollen)?
- Staan kolommen mooi onder elkaar? Zijn foto’s niet raar bijgesneden?
- Zijn knoppen groot genoeg om met je duim aan te tikken?
- Werkt het hamburgermenu?
Geen gsm bij de hand? In Chrome druk je op F12 en dan op het icoontje met de gsm en tablet (Ctrl+Shift+M). Kies bovenaan bv. “iPhone 12 Pro”. Een echte gsm blijft wel de beste test.
6. Afbeeldingen zijn verkleind en hebben een alt-tekst
- Verkleinen: een foto rechtstreeks van je gsm of fototoestel is vaak 4000 pixels breed en 5 MB groot. Voor een website is 1920 pixels breed meer dan genoeg, en liefst onder 300 KB. Verklein je foto’s vóór je ze uploadt (bv. met squoosh.app of de exportfunctie van je fotoprogramma). Zware foto’s maken je site traag.
- Alt-tekst: een korte beschrijving van wat er op de foto staat. Blinde en slechtziende bezoekers horen die tekst via hun schermlezer, en Google gebruikt ze om je afbeeldingen te begrijpen.
- Ga naar Media en klik op een afbeelding.
- Vul rechts Alternatieve tekst in (1). Beschrijf wat je ziet, in één zin: Rond desembrood met een krokante, ingesneden korst in bakpapier. Niet: “foto”, “brood.jpg” of een rij zoekwoorden.
- De tekst wordt automatisch bewaard als je naar een ander veld klikt.
Puur decoratieve afbeeldingen (een lijntje, een achtergrondpatroon) krijgen géén alt-tekst. Dan slaat een schermlezer ze over, wat precies de bedoeling is.
7. SEO-titels en -beschrijvingen
Elke pagina heeft een eigen, duidelijke titel en beschrijving voor Google (zie het hoofdstuk over SEOPress).
- Open een pagina via Pagina’s → Bewerken (niet met Elementor) en scrol naar het blok SEO.
- Controleer de Title (maximaal 60 tekens, de teller kleurt rood als het te lang is) en de meta-beschrijving.
- Kijk in de Google Snippet Preview rechts hoe je pagina in Google verschijnt.
Op je studentensite staat zoekmachines blokkeren bewust aan (vandaar “noindex is on!” in het rood bovenaan): het is een oefensite. Bij een echte site zet je dat bij de oplevering uit, anders vindt Google je nooit. Dat doe je onder Instellingen → Lezen: haal het vinkje weg bij Blokkeer zoekmachines deze website te indexeren (1). Op je studentensite laat je dit vinkje staan.
8. Cookiebanner en privacyverklaring
- De cookiebanner verschijnt in een privévenster, op computer én gsm.
- Weiger werkt en houdt kaarten, video’s en statistieken echt tegen.
- Het cookiebeleid, de privacyverklaring en (eventueel) de disclaimer staan in de footer en kloppen met je site.
Hoe je dat instelt, lees je in het hoofdstuk over Complianz.
9. Een nette 404-pagina
Typ een adres in dat niet bestaat, bv. jouwsite.be/deze-pagina-bestaat-niet. Je komt op de 404-pagina (“niet gevonden”). Staat daar een kale foutmelding, dan raak je bezoekers kwijt. Een goede 404-pagina heeft je header en footer, een vriendelijke uitleg en knoppen terug naar de homepage of een zoekveld. Die maak je met de Theme Builder, net als je header en footer (zie het hoofdstuk over de Theme Builder).
10. Snelheid
Een trage site jaagt bezoekers weg, zeker op een gsm. Met PageSpeed Insights van Google meet je hoe snel je site is.
- Ga naar pagespeed.web.dev.
- Plak het adres van je site in het vak (1) en klik op Analyseren.
- Na een halve minuut krijg je twee scores van 0 tot 100: voor mobiel en voor desktop. Groen (90–100) is uitstekend, oranje (50–89) kan beter, rood (0–49) is slecht.
- Scrol naar beneden: daar staan concrete tips, bv. over afbeeldingen die te groot zijn of over bestanden die het laden vertragen.
Maak je niet blind op de score. Een mobiele score van 70 met een mooie, duidelijke site is beter dan 100 met een lege pagina. De meeste winst haal je met kleinere foto’s (punt 6) en door geen overbodige plugins, video’s of animaties te gebruiken. Werkt PageSpeed Insights niet voor je oefensite (bv. omdat ze afgeschermd is), dan meldt de tool dat hij de URL niet kan bereiken; test dan een andere site om het principe te leren.
11. Spelling en taal
- Laat iemand anders je teksten nalezen. Zelf lees je over je eigen fouten heen.
- Plak lange teksten in een spellingcontrole (Word, Google Docs of de ingebouwde controle van je browser).
- Wees consequent: overal “je” of overal “u”, overal dezelfde schrijfwijze van productnamen, openingsuren in hetzelfde formaat (6u30 of 6.30 uur, niet door elkaar).
- Vergeet de “kleine” teksten niet: knoppen, formulierlabels, foutmeldingen, de footer, alt-teksten, SEO-beschrijvingen.
12. Alle links werken
- Klik op elke knop en elke link: in het menu, in de teksten, in de footer, op de 404-pagina.
- Links naar andere sites (sociale media, een webshop) openen bij voorkeur in een nieuw tabblad.
- Telefoonnummers zijn klikbaar op gsm (link tel:+3216123456) en e-mailadressen ook (mailto:hallo@dekorenaar.be).
- Links naar je sociale media gaan naar jouw pagina, niet naar facebook.com.
13. Een back-up gemaakt
Maak vlak vóór de oplevering een volledige back-up met UpdraftPlus (database + bestanden) en download een kopie. Zo heb je een “opleverversie” waar je altijd naar terug kunt. Hoe dat werkt, lees je in het hoofdstuk over UpdraftPlus.
En niet vergeten: staat de onderhoudsmodus nog aan? Kijk naar het bolletje naast Maintenance in de bovenbalk. Groen = bezoekers zien je site niet. Bij de oplevering moet het rood zijn.
De checklist in één oogopslag
- Alle pagina’s gevuld, geen lorem ipsum, geen testpagina’s
- Menu klopt op computer en gsm
- Logo, sitetitel, slogan en favicon ingesteld
- Contactformulier getest: bevestiging, mail ontvangen, inzending zichtbaar
- Mobiel getest op een echte gsm
- Afbeeldingen verkleind en met alt-tekst
- SEO-titel en -beschrijving per pagina
- Cookiebanner werkt, privacyverklaring en cookiebeleid in de footer
- 404-pagina in huisstijl
- Snelheid gemeten met PageSpeed Insights
- Spelling nagelezen door iemand anders
- Alle links en knoppen getest
- Back-up gemaakt en gedownload
- Onderhoudsmodus uit
Opdracht: de oplevering van je eigen site
- Werk alle punten van de checklist af op je eigen site. Noteer bij elk punt kort wat je controleerde en wat je aanpaste.
- Maak schermafbeeldingen op je gsm van je homepage en je contactpagina.
- Laat een medestudent je site testen op zijn of haar gsm, zonder uitleg. Waar twijfelt die persoon? Wat vindt die niet?
- Meet je homepage met PageSpeed Insights (mobiel) en noteer de score. Kies één tip uit het rapport en voer ze uit.
- Maak tot slot een volledige back-up.
Samengevat
- “Af” betekent: volledig, correct, getest en veilig, niet enkel mooi.
- Test altijd als bezoeker: in een privévenster en op een echte gsm.
- Kleine dingen maken het verschil: favicon, alt-teksten, een nette 404-pagina, werkende links.
- Sluit af met een back-up en controleer dat de onderhoudsmodus uit staat.