�ݺ�ߣ

WP Meetup Enschede
Javascript & SEO

Ik deel de  
slides achteraf.

Ik help onder andere deze
bedrijven met hun digitale
marketing, door hun websites te
optimaliseren voor gebruikers en
een klein beetje voor
zoekmachines.  
(dankjewel AMP…)
Even voorstellen

Javascript & SEO - Wp meetup enschede

Toen “het internet” nog simpel was.
• Bereikbare URL’s (URL’s in de HTML
• Duplicate content (#)
• Schone, unieke URL’s
Crawlen Indexeren Presenteren
Wat heeft de query nodig? 
Welke featured snippets, welke
data is hiervoor beschikbaar?
1 2 3

Canonical URL’s
Voorbeeld van booking.com
- http://www.booking.com/
destinationﬁnder.html?
label=gen173nr-15Eg...
2e8;dcid=4;dsf_header=1;dsf_sourc
e=1;dsf_from_header_cta=1
- http://www.booking.com/
destinationﬁnder.html
Vertel tegen Google welke pagina zou
moeten ranken als ze dezelfde
content bevatten.
https://support.google.com/webmasters/answer/139066?hl=nl

• Op de eerste pagina, http://www.ah.nl/producten/?page=1, zet je in de <head>:
- <link rel="next" href="http://www.ah.nl/producten/?page=2" />
• Op de tweede, http://www.ah.nl/producten/?page=2:
- <link rel="prev" href="http://www.ah.nl/producten/?page=1" />
- <link rel="next" href="http://www.ah.nl/producten/?page=3" />
• En op de derde pagina, http://www.ah.nl/producten/?page=3:
- <link rel="prev" href=“http://www.ah.nl/producten/?page=2" />
Voorbeeld van ah.nl: Paginering, het gebruik van rel=next/prev

Als je niet hele gekke custom themes
maakt rankt je WordPress site al heel
snel, makkelijk en goed,
mits je content blijft maken

130 Biljoen documenten*
*Juli 2016

SEO in 2018
- 4 ads
- Rich cards
- Google Local
- Organic results

Knowledge graph, AMP, video, events, featured snippets. Een grote kermis…

JavaScript Object Notation Linked Data
https://json-ld.org/
JSON of JavaScript Object Notation, is een
gestandaardiseerd gegevensformaat. JSON maakt
gebruik van voor de mens leesbare tekst in de vorm van
data-objecten die bestaan uit een of meer attributen met
bijbehorende waarden. Het wordt hoofdzakelijk gebruikt
voor uitwisseling van data tussen server en webapplicatie,
als een alternatief voor XML.
Aldus Wikipedia.

• Google heeft echt enorm uitgebreide help pagina’s hiervoor
• Speciaal voor WordPress:  
Gutenberg is heel erg geschikt om JSON-LD aan een block te koppelen. Yoast zijn
plugin heeft al enkele opties en ik heb uit betrouwbare bron dat dit er wel wat meer
worden (en je hoeft niet eens premium te hebben! https://yoast.com/yoast-seo-8-2/ )
• Als je echt nog een stapje verder wilt in hoe je met featured  
snippets aan de slag kunt: deze presentation van Izzi is een  
prima beginplek: 
/Is...g-epic-featured-snippets
Ik kan er uren over doorgaan, maar…

• Google gebruikt het liefst JSON-LD structured data om featured snippets te maken. Hier zijn een
paar voorbeelden van hele handige soorten JSON-LD:
• https://developers.google.com/search/docs/data-types/corporate-contacts
• https://developers.google.com/search/docs/data-types/logo
• https://developers.google.com/search/docs/data-types/social-proﬁle-links
• https://developers.google.com/search/docs/guides/mark-up-listings
• https://developers.google.com/search/docs/data-types/products
- Reviews zijn misschien wel de mooiste van allemaal (let op! deze doen het niet op je homepage)
- https://developers.google.com/search/docs/data-types/reviews
Featured Snippets via JSON-LD
https://developers.google.com/structured-data/testing-tool/

Crawlen blijft een kwestie van links volgen:

• Google doet geen acties:
- Geen kliks op ‘laad meer’
- Geen scrollende paginering
- Geen lazy loading
Dus:

Meer en meer websites met Javascript

-
Hoe doet Google dat dan?
Crawl
https://www.youtube.com/watch?v=PFwUbgvpdaQ

-
Index
Crawl

-
Index
Directe indexatie.
‘First wave of indexing’
Crawl

-
Index
Directe indexatie.
Nieuwe links
worden gecrawled
Crawl

-
Index
Render
Directe indexatie.
Nieuwe links
worden gecrawled
Crawl

-
Index
Render
Directe indexatie.
Nieuwe links
worden gecrawled
Als er rendertijd
beschikbaar komt
Crawl

-
Index
Render
Directe indexatie.
Nieuwe links
worden gecrawled
Als er rendertijd
beschikbaar komt
Tweede indexatie.
‘Second wave of indexing’
Crawl

WRS with Chrome 41
1024 screens and max 10.000 pix
height

• Metadata die er niet direct is terugvinden  
title/meta descriptions
• Incorrecte HTTP codes aanpassen  
denk aan 404 pagina’s
• Canonical tags gebruiken  
aangepaste canonical gebruiken
• Headless Browsing 
Dus Google gebruikt geen cookies, sessies, local storage etc.
• Timeouts van Content 
Ongeveer 5 seconden is de time-out, test je pagina’s.
Wat doet Google niet in haar second wave?

Dan krijg je dus dit soort dingen:
- Google is totaal in de war. De canonical in de ‘ﬁrst wave’ is kapot, de gerenderde
canonical word genegeerd (en is er ook niet altijd).

Hmm, dit gaat nog niet helemaal goed
- Dus per keer dat Google weer iets leuks heeft
geïndexeerd staat er weer iets anders.

-
Hoe dan?
view-source:
rendered content inspect:

-
Hoe dan?
view-source:
First wave

-
Hoe dan?
view-source:
First wave
Second wave

Als we die bronnen dan vergelijken:

• Zelf doen:
- Puppeteer: 
https://developers.google.com/web/tools/puppeteer/
- Rendertron 
https://github.com/GoogleChrome/rendertron
• 3rd Party:
- Prerender.io 
https://www.prerender.io
- Renderly.io 
https://renderly.io/
Mogelijke oplossingen:
https://www.youtube.com/watch?v=ydThUDlBDfc

Google’s “Nieuwe richtlijnen”:
Dynamic Rendering

Hoe dynamic rendering dan werkt

Je verdeelt je traffic over je bezoekers en Googlebot (vroeger heette dat Cloaking)

Bijv. via een Reverse Proxy, Cloudflare workers etc.

• Googlebot 
Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)
• Googlebot Mobile 
Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/41.0.2272.96 Mobile Safari/537.36 (compatible;
Googlebot/2.1; +http://www.google.com/bot.html)
• Let op! niet elke user agent met deze speciﬁcaties is Google. Wil je het zeker weten
doe dan een reverse look-up: https://support.google.com/webmasters/answer/80553
Splitten op User agents
> host 66.249.66.1

Dit is allemaal niet zo makkelijk maar alles hiervoor is aan boord:

Dus als je de site met bijv. een tool als Screaming Frog crawlt.

Het gaat niet alleen om  
de snelheid van de website,  
maar ook om de perceptie hiervan.
/DistilledSEO/searchlove-boston-2018-emily-grossman-the-marketers-guide-to-performance-optimization
/jonhenshaw/page-speed?ref=https://www.deepcrawl.com/blog/events/webinar-recap-site-speed-jon-henshaw

Misschien wel het beste verhaal over hoe je
stapsgewijs je WordPress site kunt
optimaliseren:
/jonoalderson/06-
seconds-is-the-new-slow

Let op! 
Test meer pagina’s dan alleen je
homepage, dus ook je categorie-,
dienst- of productpagina.

• Mobile testing Bookmarklet:  
javascript:(function()%7B window.open(%27https://search.google.com/test/mobile-
friendly%3Furl%3D%27%2Blocation.hostname)%7D)()%3B 
• Rich Result Test Bookmarklet 
javascript:(function()%7B window.open(%27https://search.google.com/test/rich-
results%3Furl%3D%27%2Blocation.hostname)%7D)()%3B
• Pagespeed Bookmarklet: 
javascript:void(window.open(%27https://developers.google.com/speed/pagespeed/
insights/?url=%27+window.location.href,%27_blank%27));
Handige bookmarklets.

-
E-mail & hangout:
Skype:
Twitter:
Linkedin:
@chapter42
Roy.huiskes
roy@chapter42.com
http://l.chapter42.com/linkedin
Roy Huiskes
06 248 139 80
Bedankt voor jullie aandacht, nog even de takeaways:
✓ Als je Lazy-loading wilt gebruiken,  
kijk dan naar best practices.
✓ Test je gerenderde pagina’s in de  
Rich Result Tool en Mobile Testing Tool
✓ Gebruik altijd een vorm van
prerenderen.  
Google’s voorkeur is dynamic rendering.
✓ Test je pagina’s weer opnieuw.
✓ Gebruik de bookmarklets.

�ݺ�ߣ

Javascript & SEO - Wp meetup enschede

More Related Content

Javascript & SEO - Wp meetup enschede