Categorie: Technische SEO

  • AMP naar de prullenbak

    Accelerated Mobile Pages (AMP) hebben hun langste tijd gehad. Google ontwikkelde deze techniek een aantal jaar geleden om laadtijden van webpagina’s voor mobiel te vergroten. Dat werkte ook echt wel goed, want nieuwe artikelen kwamen razendsnel in Google Stories terecht en ook social media gaven hier de voorkeur aan.

    Steun voor AMP brokkelt af

    Nu snelheid en rankingsfactor is, nemen steeds meer bedrijven dit serieus. AMP had beperkingen en werd daarom niet compleet omarmd. Nu websites steeds sneller worden is de noodzaak van AMP minder geworden. Google zelf toont nu zelfs niet-AMP pagina’s in Google Stories. Ook Twitter heeft openlijk aangegeven AMP niet meer te gaan ondersteunen.

    Struggles met AMP

    AMP HTML verschilt met HTML5. Het AMP framework ondersteunt een beperkte hoeveelheid script, geen externe bestanden, andere HTML-tags, formulieren werken anders en het tracken van statistieken is ook heel anders. Deze beperkingen maken dat AMP snel was én bleef. Designers konden minder makkelijk met AMP uit de voeten, maar voor gebruikers van smartphones was het geweldig. De laadtijden waren erg kort.

    Google Stories

    Google was het meesterbrein achter AMP, maar zij hebben het project zelf naar de rand van de afgrond geduwd toen bleek dat in Google Stories ook niet-AMP artikelen werden getoond. Google Stories is een rich snippet die op basis van een populaire zoekopdracht direct koppen van nieuwsartikelen in de zoekresultaten toont.

    Twitter stopt ook met AMP

    Social media profiteerden ook van de laadtijden van AMP-pagina’s. Normaal gesproken werden gebruikers standaard door Twitter naar de AMP-variant gestuurd, maar dat is nu verleden tijd. Omdat veel developers plugins van derden gebruikten, hekelden gebruikers de werking van de AMP-pagina’s. Ze vonden het verwarrend, omdat vaak de navigatie niet goed werkte. In mijn optiek lag de slechte implementatie meer aan de kant van de developer dan aan de techniek zelf.

    Blijft AMP nog wel werken?

    Dat Google AMP heeft afgeserveerd, betekent nog niet dat bestaande AMP-pagina’s niet meer werken. De voordelen die eerder met AMP waren te behalen, zijn er niet meer. 

    SEO is een vakgebied waarin technieken komen en gaan. De eerste websites die AMP hadden geïmplementeerd, hebben hier flink van geprofiteerd. Het heeft dus voordelen om voorop te blijven lopen en te experimenteren. SEO Ninja volgt constant de laatste ontwikkelingen en wil altijd dergelijke voordelen pakken. 

  • Javascript en CSS beperken voor betere SEO-resultaten

    Het hebben van snelle laadtijden is zó belangrijk geworden dat het nu echt aan komt op de details. Snelheid is een rankingsfactor in Google. Eerder schreef ik al over het optimaliseren van afbeeldingen. Daar vallen veelal de meeste winstpunten te behalen, maar het beperken van Javascript en CSS is de volgende stap in het proces. Hoe pak je dat aan?

    Ga verstandig om met libraries

    Voorbeeld van libraries zijn jQuery en Bootstrap. Dit zijn complete stukken aan functionaliteit, waarmee je een website snel en ogenschijnlijk goed laat werken. Er zit vaak zoveel code in, dat je het grootste deel ervan niet eens gebruikt. Bij de ontwikkeling van een nieuwe website maken front-end developers graag gebruik van libraries, want alles wat ze willen, kán dan ook gemaakt worden. Als de website eenmaal gelanceerd is, blijft al die overbodige CSS en Javascript staan. In het kader van snelle laadtijden moet je alleen die scripts behouden, die daadwerkelijk gebruikt worden en de rest moet je verwijderen. Webbrowsers laden alles in, dus ook alle overbodige scripts. Je vergroot de laadtijden aanzienlijk door die overbodige scripts te verwijderen.

    Hoe verwijder je overbodige CSS en Javascript?

    Als Google kan detecteren, welke Javascript- en CSS-regels niet gebruikt worden, dan is dat voor iedereen mogelijk! Chrome Console biedt de Coverage-tab, waarmee je per Javascript- en CSS-bestand kunt zien welke regel wel of niet gebruikt wordt. Je kunt dit regel voor regel nalopen en de overbodige regels verwijderen, maar dat is best een monnikenwerkje. Door gebruik te maken van WebPack kun je bij het publiceren van het webproject de Javascript en CSS laten bundelen (alle bestanden samenvoegen), splitten (= overbodige regels worden dan verwijderd) en comprimeren (= overbodige witruimtes verwijderen). Het eindresultaat is dan één Javascript- en één CSS-bestand, die alleen die codes bevatten die dan ook daadwerkelijk gebruikt worden.

    Bij toekomstige uitbreidingen kun je -in geval van WebPack- als front-end developer in de ontwikkelomgeving volledig gebruik blijven maken van alle gemakken van libraries. Zodra de wijzigingen live worden gezet, berekent de splitter welke Javascript en CSS van dat moment relevant zijn. Een goede inrichting van het webproject vooraf, maakt dat je achteraf kwalitatieve oplossing blijft opleveren.

    Defer en Async

    Ben je niet zo’n NodeJS-koning, dan kun je voor Javascript-bestanden altijd nog de attributen defer en async toevoegen. Daarmee geef je aan wanneer webbrowsers het specifieke bestand moeten inladen. Bij defer worden de script ingeladen als de webpagina staat. Bij async wordt het direct ingeladen. Browsers willen graag begrijpen wat je als webdeveloper precies wilt. Elke vorm van onduidelijkheid leidt tot snelheidsverlies. Daar hebben uiteindelijk de websitebezoekers het meeste last van.

    Google stuurt bezoekers liever door naar een gebruiksvriendelijke website en om die reden loont een website met snelle laadtijden. Wil jij ook meer resultaat uit jouw website? Schakel dan snel SEO Ninja in.

  • Technische SEO, een vak apart

    Webdevelopers zijn zich vaak onvoldoende bewust van de SEO-richtlijnen. Vooral front-end developers betrap ik op het toevoegen van veel en te grote JavaScript- en CSS-bestanden. Laten we nog maar zwijgen over afbeeldingen. Ook back-end developers ontlopen de dans niet bij het achterwege laten van caching, hosting-prestaties. Technische SEO omvat het complete plaatje van webdesign en door onze inzet verbeteren bureaus de kwaliteit van hun websites. 

    Automatisch afbeeldingen optimaliseren

    Bij 95% van de websites zie ik dat afbeeldingen matig geoptimaliseerd zijn. Van een opdrachtgever mag je niet verwachten om overal rekening mee te houden, dus de webdeveloper moet hierop inspelen. Bij het uploaden van een afbeelding moet deze automatisch in meerdere varianten worden opgeslagen. De HTML-code moet afbeeldingen met vaste formaten tonen. Zelfs bij een responsive webdesign zijn daar oplossingen voor in de vorm van een <picture>-tag. De browser pakt dan zelf de relevante afbeelding eruit en dat scheelt enorm in laadtijden.

    Lazy loading instellen

    Standaard wordt bij het openen van een webpagina alles op volgorde ingeladen. Bij lazy loading wordt de afbeelding pas ingeladen op het moment dat je op dat gedeelte van de webpagina komt. Voorzie elke afbeelding van het attribuut loading=lazy en klaar ben je. Mooie webdesigns hebben veel afbeeldingen, dus met deze techniek kun je snelle laadtijden behalen.

    Bundelen, comprimeren en cachen van CSS en JS

    Bij het openen van de bronbestanden zie je vaak een hele waslijst aan .css- en .js-bestanden. Bij het openen van een webpagina moeten al die bestanden stuk voor stuk worden geopend. Optimaliseer deze stap door alle .css-bestanden samen te voegen, te comprimeren (verwijderen van overbodige witruimtes en regels) en dan te cachen (tijdelijk geheugen van webserver). Dat proces ook aanbieden voor .js-bestanden. In plaats van tientallen bestanden in te laden, beperk je het tot twee grotere bestanden. Door deze geoptimaliseerde bestanden te cachen in het tijdelijke geheugen, levert dat veel tijdswinst op.

    DNS-prefetchen en preloading

    Bij het openen van een webpagina wil de browser vooraf al weten, welke (grotere) bestanden aangeroepen worden. Dit geldt voor afbeeldingen, CSS, script, lettertypes, externe bestanden, etc. Door het opgeven van DNS-prefetch en preload zo hoog mogelijk in de broncode (de <head>) te plaatsen, krijgt de browser alvast de kans om die bestanden in te laden. Hoe sneller dit gebeurt, des te beter dat uitpakt voor de performance.

    Wees zuinig met hyperlinks

    Iedereen lijkt te denken dat een groot menu gebruiksvriendelijk is. ‘Think again!’ Volgens Google mag een webpagina maximaal 150 hyperlinks hebben. Als je een groot uitklapmenu hebt en een grote hoeveelheid links in de footer, heb je nog maar weinig mogelijkheden over voor hyperlinks in de tekst. Ook tekstblokken in overzichten worden vaak verkeerd opgebouwd. Er zit een hyperlink op de titel, de afbeelding én de ‘lees meer’-link. Dit kun je simpel aanpassen door per item één hyperlink om het gehele blok te plaatsen en deze te voorzien van een “title”-attribuut met de titel van het item. Een gemiddeld overzicht bevat 10 artikelen, dus tel uit je winst.

    ALT-teksten standaard vullen

    Standaard dien je per afbeelding een ALT-tekst invullen. De opdrachtgever is vaak al blij dat er een afbeelding verschenen is bij het artikel. Laat staan dat er ook bij elke afbeelding zo’n alternatieve tekst moet komen. Met ALT-teksten geef je Google meer achtergrondinformatie mee over de afbeelding in relatie tot de inhoud. 

    Structured data toevoegen

    Zoekmachines indexeren webpagina’s en analyseren die vervolgens. Jarenlang moesten zoekmachines alles maar zelf interpreteren. Met structured data behoort dat tot het verleden. Je kunt nu precies aangeven welk type informatie wordt gebruikt en wat de onderlinge relaties zijn. Een goede implementatie van structured data maakt rich snippets mogelijk. Een rich snippet is een zoekresultaat in Google met daarin een afbeelding of het aantal reviews of prijzen en voorraden. Je stimuleert hiermee de zero click-resultaten.

    SEO Ninja analyseert websites en gaat met de developer(s) aan de slag om de technische SEO te optimaliseren. Een goede technische basis is noodzakelijk. Al zijn de teksten nog zo goed geoptimaliseerd of al heb je nog zoveel backlinks; het haalt weinig uit zonder goede technische SEO. Schakel daarom SEO Ninja in. 

  • De beste navigatiestructuur voor SEO

    Met regelmaat wordt SEO Ninja pas bij een nieuwe website betrokken wanneer deze bijna live gaat of net gelanceerd is. Om meerdere redenen is het handig om SEO vanaf het eerste moment in de ontwikkeling mee te nemen, maar achteraf implementeren kan natuurlijk ook. Het verwerken van de belangrijkste keywords in de navigatiestructuur levert SEO-succes op.

    Menu of navigatie

    De navigatiestructuur moet je niet verwarren met menu’s. Een menu is slechts een grafische uitwerking, die moet aansluiten op het zoekproces van de bezoeker. Een bezoeker moet binnen enkele klikken de juiste informatie kunnen vinden. Zoekmachines gebruiken de navigatiestructuur. De taak voor SEO is om bezoekers te laten begrijpen hoe de website in elkaar steekt.

    Content structureren

    SEO begint altijd eerst met een keywordanalyse. Als duidelijk is welke (longtail)keywords relevant zijn, dan helpt het om de keywords te groeperen. In geval van bruggen kun je denken aan de volgende structuur:

    • /bruggen
    • /bruggen/constructie
    • /bruggen/constructie/plaatbrug
    • /bruggen/constructie/tuibrug
    • /bruggen/constructie/vakwerkbrug
    • /bruggen/constructie/liggerbrug
    • /bruggen/functie
    • /bruggen/functie/verkeersbrug
    • /bruggen/functie/fietsbrug
    • /bruggen/functie/voetgangersbrug
    • /bruggen/functie/fiets-en-voetgangersbrug

    Voor het onderwerp ‘bruggen’ zoeken mensen naar bruggen op basis van constructie en op functie. 

    Als de structuur uitgewerkt is, ga je bekijken welke functionaliteiten nodig zijn om dit te realiseren. Uit de keywordanalyse moet ook blijken welke zoekintentie per keyword is vereist. In de zoekresultaten van Google kun je per zoekopdracht zien welke type pagina’s naar voren komen. Denk bijvoorbeeld aan productpagina’s, blogartikelen, homepages, enzovoorts.

    Bij de ontwikkeling van een nieuwe website komen we met een advies voor de technische opzet. Bij een bestaande website brengen we in kaart hoe deze ideale structuur binnen de huidige functionaliteiten in te passen. Opdrachtgevers kunnen het vervelend vinden dat een deel van de website omgegooid moet worden. Het is een stuk efficiënter om SEO zo vroeg mogelijk in het traject mee te nemen, maar soms is het niet anders. Veel bureaus kijken vaak wel goed naar een logische menustructuur, maar laten het zoekgedrag vaak achterwege. Als bezoekers eenmaal op de website zijn, dan zijn een goede opzet van het menu en de doorklikpaden natuurlijk heel belangrijk. SEO zit nog een fase hiervoor, dus vandaar dat het hebben van een goede navigatiestructuur cruciaal is. 

    De juiste balans

    De navigatiestructuur alleen is niet zaligmakend. SEO bestaat uit honderden richtlijnen. De navigatiestructuur is wel een belangrijke. Zonder goede webteksten, unieke metatags, hoge linkautoriteit, structured data, enzovoorts kom je er niet. SEO vraagt om de juiste balans.

    Beperk wijzigingen in de navigatiestructuur 

    Aanpassingen aan de navigatiestructuur zijn heftig. Google berekent linkautoriteit op elke pagina binnen de navigatiestructuur. Zodra je dit gaat veranderen, verschuift de linkautoriteit en leidt dit tot negatieve effecten in de zoekresultaten. De schade valt te beperken door zogenaamde 301-redirects toe te voegen (op oude URL’s verwijzingen plaatsen naar de nieuwe locatie), maar je valt nagenoeg altijd iets terug in de zoekresultaten. Denk hier dus goed over na en zet het liefst in één keer de ideale navigatiestructuur op. Het uitbreiden van de structuur is natuurlijk niet erg. Waar we met ‘aanpassen’ op doelen, is het hernoemen van bestaande URL’s of het rigoureus op de kop zetten. Als het niet anders kan, dan moet het. Weet dat de gewenste effecten maanden later de gewenste effecten hebben, dus plan deze aanpassingen goed in. Doe dit dus niet vlak voor het hoogseizoen in jullie branche. 

    Wil ook jouw bedrijf meer resultaat met zijn website bereiken, betrek SEO Ninja hier gerust in. Wij hebben ruime ervaring in webdevelopment om te weten hoe SEO op de beste manier te integreren in een website. 

  • Waarom laadtijden zo belangrijk zijn

    Trage websites wekken ieders irritatie op en de kans dat zij tot een conversie komen, slinkt per seconde. Google waardeert snelle websites en beloont ze met hogere rankings. 

    Google PageSpeed

    Test jouw website eens met Google PageSpeed. Dikke kans dat de scores voor mobiel en desktop onvoldoende zijn. Veelal zien we:

    1. Te grote afbeeldingen. 
    2. Veel script-bestanden. 
    3. Veel style-bestanden. 
    4. Geen gebruik van caching. 

    Voor de meeste ondernemers is dit abracadabra, maar zelfs veel webdevelopers controleren hier niet op bij het lanceren van de nieuwe website. Dit zijn ook vaak net die details die aan het eind van het project in het gedrang komen en omdat de opdrachtgever hier toch niet op controleert, raakt dit in de vergetelheid. Zonde, want door dit soort fouten valt de website ineens uit de top-100 van Google.

    “Maar ik gebruik toch WordPress ..?”

    Als ik ondernemers vertel dat de laadtijden flinke aandacht vereisen, krijg ik vaak het weerwoord: “Maar onze website is toch WordPress?”. Ik weet niet wat internetbureaus allemaal vertellen, maar uiteindelijk is de keuze van het CMS geen garantie op snelle laadtijden. WordPress heeft alle mogelijkheden om een snelle website te krijgen, maar daarop moet wel constant aan gewerkt worden. Uit ervaring weet ik dat je ook met andere CMS-en een goede vindbaarheid kunt behalen.

    Snelheid levert omzet op

    Op een snelle website klikken mensen sneller door en krijgen daardoor meer informatie tot zich. De kans dat zij converteren (contact opnemen) of bestellen is dan veel groter. Logisch ook, want we hebben allemaal weinig tijd. Ook de resultaten van Google Ads-campagnes, verwijzingen vanuit social media en e-mailmarketing behalen meer resultaat. Ieder online marketing-kanaal beloont snelle websites. Voor iedereen is dit een win-win.

    SEO Ninja neemt in zijn SEO audit altijd uitgebreid de tijd om de laadtijden te analyseren. Wij geven developers gerichte tips & tricks mee om tot de ideale SEO-basis te komen. Een wijze investering waar je lang van profiteert. Neem snel contact met me op!

  • SEO en meertaligheid: hoe doe je dit goed?

    Eén van de meest interessante vraagstukken rondom SEO gaat over meertaligheid. De juiste implementatie is volledig afhankelijk van wat je doel is. Het staat in ieder geval altijd garant voor heerlijke discussies met webdevelopers vanwege de technische inrichting.

    Taal (en regio) bepalen

    Zoekmachines zijn in staat om op basis van de teksten op de website te bepalen in welke taal het geschreven is. Met SEO mag je hier niet op gokken en moet je al in de HTML de taal bepalen en dat doe je al meteen door in de openingstag een lang-attribuut op te nemen <html lang="nl">. Deze code zegt tegen zoekmachines dat de inhoud van de betreffende webpagina in het Nederlands is. Het maakt dan nog niet per se uit in welk land de bezoeker zich bevindt.

    Om specifiek is een land vindbaar te zijn, kun je in het lang-attribuut de regio meenemen, bijvoorbeeld: <html lang="nl-NL"> of <html lang="nl-BE">. Bij ‘nl-NL’ richt je de inhoud op Nederlandstaligen in Nederland en bij ‘nl-BE’ richt je je op Nederlandstaligen in België.

    Gebruik je subdomeinen, submappen of verschillende domeinextensies?

    Als je in één land goed vindbaar wil zijn, gebruik je de lokale domeinnaam. Voor een goede vindbaarheid in Nederland registreer je bij voorkeur de ‘.nl’-domeinnaam. Wil je ook in België goed vindbaar zijn, dan kun je het beste een internationale domeinextensie (als .com) gebruiken en kiezen voor óf een subdomein (bijvoorbeeld be.domein.com) of een submap (domein.com/be).

    Hreflang-tags toepassen

    Als jouw webshop Engelstalig is en jouw klanten bevinden zich in het Verenigd Koninkrijk, Zuid-Afrika en Canada dan adviseert SEO Ninja om meerdere submappen aan te maken op één internationale domeinextensie. Omdat de productinformatie grotendeels gelijk is, wil je duplicate content voorkomen door op drie taalversies exact dezelfde inhoud te publiceren. Om deze reden komen de hreflang’s om de hoek kijken. Een voorbeeld hiervan:

    • <link rel="alternate" href="https://example.com/uk/product-01/" hreflang="en-UK" />
    • <link rel="alternate" href="https://example.com/za/product-01/" hreflang="en-ZA" />
    • <link rel="alternate" href="https://example.com/ca/product-01/" hreflang="en-CA" />
    • <link rel="alternate" href="https://example.com/product-01/" hreflang="en" />
    • <link rel="alternate" href="https://example.com/product-01/" hreflang="x-default" />

    Google bepaalt grotendeels op basis van de taalinstellingen van de browser van de gebruiker welke taalversie van de website het meest geschikt is. Een bezoeker uit Zuid-Afrika ziet in Google meteen het zoekresultaat met de URL https://example.com/za/. Het doel van Google is om de bezoeker naar de meest relevante informatie door te sturen. Zorg ervoor dat op alle webpagina’s in elke taal de hreflangs naar elkaar blijven verwijzen.

    Als de taal van de gebruiker niet in het rijtje met hreflang’s staat, toont Google de URL bij ‘x-default’. Dit is als het ware de fall back. Een bezoeker uit de Verenigde Staten of Australië komt in bovenstaande hreflang-tags op https://example.com/product-01/ terecht via Google.

    Omdat een foutje snel gemaakt is, controleer alle wijzigingen met een Hreflang-validator.

    Sparren over meertaligheid?

    Ben je als webbouwer aan het stoeien met de juiste implementatie voor meertaligheid? Neem gerust contact op met SEO Ninja. Wij hebben al jaren met dit bijltje gehakt.

  • Core Web Vitals rankingsfactor in 2021

    In 2021 voegt Google nieuwe factoren toe in de rankings: Core Web Vitals. Dit zijn scores voor factoren op het gebied van gebruiksvriendelijkheid. Denk aan laadtijden, interactiviteit en visuele stabiliteit van de webpagina. Ook zijn mobielvriendelijkheid, veiligheid, dataversleuteling (HTTPS) en geen opdringerige functionaliteiten.

    Testen van Core Web Vitals

    Ga naar Google PageSpeed en vul daar de URL van je website in.

    Screenshot van Google PageSpeed
    Voorbeeld van Google PageSpeed-score

    Waarom deze nieuwe factoren?

    Google wil dat eindgebruikers de zoekmachine blijven gebruiken. Toen ik begon in 2004 lag de focus van Google op techniek (lees: het vol-spammen van de metatags). Daarna kwam de opmars van kwalitatieve content (lees: SEO-teksten bomvol ongezonde hoeveelheden keywords). De laatste jaren zien we de kracht van machine-learning en door de opkomst van structured data worden zoekmachines slimmer. Techniek en content moeten in balans zijn, maar snelheid leidt tot positieve gebruikservaringen. Daarom stuurt Google het liefst zijn bezoekers door naar kwalitatieve websites, die mensen snel antwoord geven op hun vragen.

    Balans zoeken tussen mooi en functioneel

    Core Web Vitals vraagt om een gevoelige balans tussen tekst, afbeelding, video, opmaak en animaties. Daar wringt altijd de schoen met creatieve developers, die graag grote mooie afbeeldingen of zware effecten willen. Voor developers hoeft die poespas vaak niet, maar uiteindelijk overtuigt een keurig verzorgde website met snelle laadtijden de bezoeker om een conversie te plaatsen. Core Web Vitals maakt dit echt wel mogelijk, maar zowel de creatieveling als de nurd moeten met de online marketeer de juiste oplossing vinden. Uiteindelijk telt niet het ego, maar het aantal conversies. Het belang van de klant staat altijd voorop!