BrightonSEO, het bedevaartsoord waar SEO’ers minstens eenmaal per jaar naartoe trekken. Het is de grootste SEO conferentie in Europa met jaarlijks maar liefst 4000 deelnemers. Dit jaar hadden Jan en Mathias het geluk om naar Brighton te mogen trekken. Naast de toffe babbels en borrels met collega’s van Bol.com, Coolblue en Booking hebben ze ook een training en enkele talks gevolgd. Wat ze ervan hebben opgestoken kan je lezen in deze blogpost.

 

Inhoudstafel:

• Javascript en SEO, hoe moet je ermee omgaan?
• Training Fili Wiese: Advanced technical SEO
• Keynote Dave Trott ‘Simple is Smart, Complicated is Stupid’

 

Javascript en SEO, hoe moet je ermee omgaan? (Mathias)

Javascript frameworks als Angular, VUE.js en React winnen enorm snel aan populariteit bij developers. Deze frameworks zorgen voor heel wat SEO uitdaging waardoor SEO’ers vaak tegen het gebruik ervan ingaan. Wij hebben ervoor gekozen om niet meer koppig te doen en onszelf gewoon beter te scholen zodat we developers beter kunnen ondersteunen in de SEO optimalisatie van JS websites.

 

Het was dan ook vanzelfsprekend dat ik de Advanced Javascript opleiding gevolgd heb. Een dag vol tips en tricks over het optimaliseren van JS loading performance, JS rendering performance, de structuur van SPA’s en natuurlijk detecting en debugging.

 

Uiteraard zal ik nu niet de volledige training uitschrijven maar wel enkele praktische tips die ik zeker het delen waard vind. ;-)

 

Loading performance:

Dat laadsnelheid belangrijk is, hoef ik je waarschijnlijk niet meer te vertellen. Voor JS websites geldt hetzelfde verhaal, hoe sneller je site, hoe beter voor je bezoekers en zelfs ook zoekmachines. Wil je een JS website sneller krijgen dan zal je de loading performance moeten verbeteren.

 

Render blocking resources:
Beperk het aantal rending blocking resources (JS, CSS, ...) in de head. Deze remmen browsers en bots af in het sneller crawlen van de pagina.

 

Async en Defer:
Laad “time critical” scripts zoals 3rd party tracking tools asynchroon in en alle andere JS scripts met Defer. Op die manier worden die bestanden pas ingeladen wanneer de initial HTML geparsed is. Veel minder belemmering door JS scripts dus. Laad je de tracking scripts in via Google Tag Manager? Dan hoef je verder niets te doen.

 

Bron: https://www.josefzacek.cz/blog/whats-the-difference-between-async-vs-defer-attributes/

 

Andere tips:

• Verwijder ongebruikte CSS of plaats het in de juiste scope
• Maak gebruik van GZIP
• Beperkt het gebruik van code libraries zoals JQuery. Kan je het met vanilla JS uitvoeren, doe dat dan zeker.
• Inline belangrijke CSS or JS - Het absolute minimum om iets boven de fold te laten werken.

Wat met 3rd party scripts?:

• “Defer” indien niet time critical.
• Niet inline plaatsen, tenzij een tracker (met async)
• Inladen via GTM
• Overweeg het script zelf te hosten
• Google Fonts: laad niet te veel fonts, font weights, … in.
• Gebruik prefetch of pre-connect

Handige tools om te testen:

• “View source” in chrome of Firefox
• Waterfall load tools zoals Chrome, Pingdom, GTmetrix, …
• Lighthouse auditing in Chrome
• Pagespeed insight (Zeker CRux report)

Rendering performance:

Naast load time is het ook belangrijk dat bots zoals de GoogleBot je website correct kunnen interpreteren. Wordt alles vb. client-side gerenderd dan is de kans groot dat de GoogleBot moeite heeft met het begrijpen van de pagina.

 

Is dat het geval, gaan we best wat sleutelen aan de rendering performance van de applicatie. Alhoewel Google beter en beter wordt in het renderen van CSR JS sites gebeurt dit nog steeds in meerdere stappen.

 

 

Er zijn verschillende manieren waarop je de rendering performance kunt gaan optimaliseren van je JS applicatie. Om die duidelijk te maken haal ik er deze tabel van Jan-Willem Bobbink bij. Hij gaf namelijk ook een heel interessante talk over SEO en JS frameworks.

 

 

Wat je ook maar beslist te kiezen, zorg er altijd voor dat je steeds volledig gerenderde HTML serveert aan je gebruikers en bots (Niet enkel Google). En in dit geval is server side rendering toch wel de beste keuze voor SEO, maar helaas niet de goedkoopste optie. Pre-rendering is makkelijker qua implementatie maar is dan weer een minder goede optie voor dynamische websites die dagelijks veranderen.

 

Detecting en debugging

Hoe weet je of een sites met een JS framework gemaakt is? Gebruik deze tools:

• Wappalyzer, Whatruns, Builtwith

 

 

Er zijn enkele handige tooltjes die je kunnen helpen bij het debuggen:

• Request as Googlebot in Chrome
• Diffchecker: vergelijk de initial HTML met de gerenderd HTML
• Rendertron: Toont jouw ongeveer wat Google ziet aangezien het op dezelfde chromium versie draait
• Lighthouse devtools: performance
• pagespeed: performance
• Mobile friendly: Dezelfde technologie als Googlebot
• Bing Webmaster tools en Yandex

 

 

Check je logfiles om te zien welke url’s Google kan crawlen? (crawl depth en crawl activity)
Vergeet ook zeker niet gebruik te maken van Google Search console en crawl software zoals Screaming frog.

 

Enkele weetjes:

• Wanneer er een noindex op de pagina staat zal Google die pagina niet renderen.
• Google volgt soms JS redirects, maar je kan er niet op vertrouwen
• Je kan een CDN gebruiken om redirects in te stellen

 

Training Fili Wiese: Advanced technical SEO (Jan)

Op donderdag volgde ik (Jan) een Technische On-page SEO training van Fili Wiese. Fili is een ex-Googler en SEO specialist. Van 2005 tot 2012 was hij bij Google actief als Google engineer en deel van het Search Quality team. Hij was in het bijzonder betrokken in het opsporen en bestrijden van webspam en click fraud. Daarnaast werkte hij nauw aan de developer guidelines & bouwde hij veel expertise op rond manual penalties (en recovery). Hij werkt vandaag (samen met een andere ex-Googler) bij Search Brothers als SEO expert.

 

De training zelf nam een volledige dag in beslag en resulteerde in 14 pagina’s met notities, waar we de meest opvallende zaken uitgepikt hebben.

 

Enkele takeaways

• Visualiseer via je log files hoeveel waste Google crawlt! Als Googlebot voor elke indexeerbare URL 4 niet-indexeerbare vindt (en dat gebeurt hoor), dan moet hij minimum 5 crawls doen om 1 URL te updaten in de index. Sterker nog: Als het merendeel van jouw pagina’s niet-indexeerbaar zijn, dan gaat Googlebot de website minder prioriteit geven.
• Voor Google gaat het meer over crawl priority dan crawl budget. URL’s met problemen worden uiteindelijk wel verwijderd uit de index, maar het echte verschil is frequentie waarmee Google die URL opnieuw bezoekt.
• Interne linking is een bijzonder sterk signaal voor Google om nieuwe content te vinden op de website. Bevestigd door een ex-Googler!
• URL’s in de sitemap hebben geen hogere prioriteit. De sitemap kan wel het signaal van een canonical versterken (bevestigen). Als de canonieke URL in de sitemap staat, dan werkt het als een bevestiging voor Google. Vermijd mixed signals.
• AMP stelt vandaag nog zeer veel uitdagingen die het succes ervan belemmeren. Bovendien is een website niet noodzakelijk sneller met AMP.
• Als je nog geen HTTPS hebt: dan heb je een groot voordeel bij een migratie! Want als je de content updatet, en daarna verandert naar HTTPS, dan hercrawlt Google de hele website opnieuw.
• Vermijd altijd popups die zaken boven de fold bedekken als je de pagina laadt.
• Een GA bounce is geen SEO bounce. Google is enorm slim en weet perfect wanneer een gebruiker terugkeert (ook na afsluiten van een sessie).

Progressive enhancement

Dit concept gebruikt Fili om te optimaliseren voor UX en paginasnelheid.
Progressive enhancement betekent (eenvoudig): We renderen eerst de basis. Geen fancy animaties, lettertypes, scripts, … Het progressieve bestaat erin dat we voor de browsers die het aankunnen een extra laag functionaliteit laden (bovenop onze basisversie). Zo garanderen we een snelle laadtijd met de beste ervaring op de pagina.
 

Meest opvallende uitspraken

Over Guaranteed rankings:

“There is no such thing out there.”
“Most of us can’t afford to burn our website either.”

 

Over de relatie tussen de teams van AdWords en Search:

“It’s like a Chinese wall between them. Search doesn’t trust the sales people. The Search team doesn’t trust them with any specifics. There’s never a phone on the desk of the Search people. Because Adwords sales would call for a client that spent 10 million in ads and ask ‘Can you give them a head position?’. And Search would say ‘No, go to the help forum’.

 

Over hoe Google signalen interpreteert

“Google is all about TRENDS.”

Google kijkt niet zozeer naar individuele signalen, maar naar trends. Dat kunnen user signals zijn, on-page factoren (zoals canonicals), de sitemap URLs, … Met machine learning & AI stelt Google patronen (een trend) vast. Als je website technisch gezien linkt naar een versie van URL’s met slash, maar de canonicals verwijzen naar een andere versie, dan draagt het niet toe aan die trend die Google oppikt. Ook de URL’s in de sitemap moeten de trend volgen.

 

Over keywords in een URL:

“Keywords in your URL don’t do anything! We let go of that a long time ago.”

 

Over URL’s aanpassen:

“Changing the URL structure is more costly than the benefits of it.”

 

Keynote Dave Trott ‘Simple is Smart, Complicated is Stupid’

Een talk die nog even nazindert is de keynote van Dave Trott. Die viel een beetje uit de toon doordat zijn talk helemaal niet over SEO ging. Zijn verhaal ging (heel ironisch eigenlijk) over anders zijn dan de rest en hoe marketeers alles graag complex maken. Een luchtige afsluiter tegenover de technische talks misschien, maar niet zonder impact op ons als marketeers.

Zijn intro

“I’m gonna talk about what the stupid people are doing wrong.”

 

Hij stelt dat 89 procent van ons werk wordt genegeerd:

“89 percent is ignored, pissed away by so called experts.”

 

En daarmee had Dave meteen de aandacht van de zaal.

“They think complicated is better.”

 

Complexe dingen werken misschien in meetings, maar niet in de echte wereld. ROAS, operational cashflow, machine learning, … Allemaal buzzwords die men gebruikt om slim te lijken tijdens een vergadering. Maar een klant moet je met duidelijke taal bekoren.

“The problem really happened when technology replaced thinking. We got so sucked into the technology that we only think about that and we wonder why no one really gets it.”

 

We zijn als marketeers vergeten wat we aan het doen zijn en waarom we het doen.

Impact hebben

Voor Trott moet elke boodschap deze drie zaken hebben:

• Impact: zodat je de aandacht trekt
• Communicatie: je moet ook werkelijk iets gezegd hebben
• Overtuiging: mensen moeten weten: What’s in it for me?

En vergis je niet: impact kan ook negatief zijn! Het gaat er bij impact niet om dat je doet wat men graag heeft. Het gaat erom dat ze je opmerken en onthouden.

 

Een schitterende illustratie is de volgende:
Als je een reclameblok kijkt met 15 commercials die er zo uitzien:

 

 

Of je kijkt dit blok:

Welke commercial zal dat erosieproces overleven?

 

SEO takeaways

Hoewel de talk niet meteen gericht was op SEO, zijn er toch twee conclusies:

• Als we de user willen bekoren, dan moeten we het niet onnodig complex maken. Hoe maken we het simpeler? Met infographics, video, illustraties, … Maar vooral: Leg de dingen zo uit dat zelfs een elfjarige het begrijpt.
• Doe iets anders dan de rest. Begin bij de essentie, en dat is de boodschap die je wil overbrengen. Voor ons als SEO’ers betekent het: kopieer niet van de concurrentie. Probeer waarde toe te voegen of anders te zijn.