Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Javascript & SEO - Wp meetup enschede

305 views

Published on

Javascript en SEO. Hoe gaat dat goed samen en wat kunnen we doen om het te checken of te verbeteren.

Published in: Marketing

Javascript & SEO - Wp meetup enschede

  1. 1. WP Meetup Enschede Javascript & SEO
  2. 2. Ik deel de 
 slides achteraf.
  3. 3. 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
  4. 4. 1998…
  5. 5. 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
  6. 6. Crawlen = Links volgen.
  7. 7. Canonical URL’s Voorbeeld van booking.com - http://www.booking.com/ destinationfinder.html? label=gen173nr-15Eg... 2e8;dcid=4;dsf_header=1;dsf_sourc e=1;dsf_from_header_cta=1 - http://www.booking.com/ destinationfinder.html Vertel tegen Google welke pagina zou moeten ranken als ze dezelfde content bevatten. https://support.google.com/webmasters/answer/139066?hl=nl
  8. 8. • 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 https://support.google.com/webmasters/answer/1663744?hl=nl
  9. 9. Als je niet hele gekke custom themes maakt rankt je WordPress site al heel snel, makkelijk en goed, mits je content blijft maken
  10. 10. Mei 2015
  11. 11. 130 Biljoen documenten* *Juli 2016
  12. 12. SEO in 2018 - 4 ads - Rich cards - Google Local - Organic results
  13. 13. SEO in 2018 - 4 ads - Rich cards - Google Local - Organic results
  14. 14. Knowledge graph, AMP, video, events, featured snippets. Een grote kermis…
  15. 15. Knowledge graph, AMP, video, events, featured snippets. Een grote kermis…
  16. 16. Maar er is nog meer…
  17. 17. Maar er is nog meer…
  18. 18. Maar er is nog meer…
  19. 19. Maar er is nog meer…
  20. 20. Maar er is nog meer…
  21. 21. Maar er is nog meer…
  22. 22. Maar er is nog meer…
  23. 23. Maar er is nog meer…
  24. 24. Maar er is nog meer…
  25. 25. Maar er is nog meer…
  26. 26. Maar er is nog meer…
  27. 27. Maar er is nog meer…
  28. 28. Maar er is nog meer…
  29. 29. Maar er is nog meer…
  30. 30. 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.
  31. 31. • 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:
 https://www.slideshare.net/Is...g-epic-featured-snippets Ik kan er uren over doorgaan, maar…
  32. 32. • 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-profile-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/
  33. 33. Maar goed rendering: Mei 2015
  34. 34. Maar goed rendering: Mei 2015
  35. 35. Crawlen blijft een kwestie van links volgen:
  36. 36. • Google doet geen acties: - Geen kliks op ‘laad meer’ - Geen scrollende paginering - Geen lazy loading Dus:
  37. 37. Meer en meer websites met Javascript
  38. 38. - Hoe doet Google dat dan? Crawl https://www.youtube.com/watch?v=PFwUbgvpdaQ
  39. 39. - Hoe doet Google dat dan? Index Crawl https://www.youtube.com/watch?v=PFwUbgvpdaQ
  40. 40. - Hoe doet Google dat dan? Index Directe indexatie. ‘First wave of indexing’ Crawl https://www.youtube.com/watch?v=PFwUbgvpdaQ
  41. 41. - Hoe doet Google dat dan? Index Directe indexatie. ‘First wave of indexing’ Nieuwe links worden gecrawled Crawl https://www.youtube.com/watch?v=PFwUbgvpdaQ
  42. 42. - Hoe doet Google dat dan? Index Render Directe indexatie. ‘First wave of indexing’ Nieuwe links worden gecrawled Crawl https://www.youtube.com/watch?v=PFwUbgvpdaQ
  43. 43. - Hoe doet Google dat dan? Index Render Directe indexatie. ‘First wave of indexing’ Nieuwe links worden gecrawled Als er rendertijd beschikbaar komt Crawl https://www.youtube.com/watch?v=PFwUbgvpdaQ
  44. 44. - Hoe doet Google dat dan? Index Render Directe indexatie. ‘First wave of indexing’ Nieuwe links worden gecrawled Als er rendertijd beschikbaar komt Tweede indexatie. ‘Second wave of indexing’ Crawl https://www.youtube.com/watch?v=PFwUbgvpdaQ
  45. 45. WRS with Chrome 41 1024 screens and max 10.000 pix height
  46. 46. • 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?
  47. 47. En wat als het mis gaat…
  48. 48. Dan krijg je dus dit soort dingen: - Google is totaal in de war. De canonical in de ‘first wave’ is kapot, de gerenderde canonical word genegeerd (en is er ook niet altijd).
  49. 49. Hmm, dit gaat nog niet helemaal goed - Dus per keer dat Google weer iets leuks heeft geïndexeerd staat er weer iets anders.
  50. 50. - Hoe dan? view-source: rendered content inspect:
  51. 51. - Hoe dan? view-source: rendered content inspect: First wave
  52. 52. - Hoe dan? view-source: rendered content inspect: First wave Second wave
  53. 53. Als we die bronnen dan vergelijken:
  54. 54. Oude beste situatie
  55. 55. Hoe het meestal werkte
  56. 56. • 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
  57. 57. Google’s “Nieuwe richtlijnen”: Dynamic Rendering
  58. 58. Hoe dynamic rendering dan werkt
  59. 59. Je verdeelt je traffic over je bezoekers en Googlebot (vroeger heette dat Cloaking)
  60. 60. Bijv. via een Reverse Proxy, Cloudflare workers etc.
  61. 61. Het totale plaatje
  62. 62. • 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 specificaties is Google. Wil je het zeker weten doe dan een reverse look-up: https://support.google.com/webmasters/answer/80553 Splitten op User agents https://support.google.com/webmasters/answer/1061943?hl=nl > host 66.249.66.1
  63. 63. Dit is allemaal niet zo makkelijk maar alles hiervoor is aan boord:
  64. 64. Hoe test ik dat dan?
  65. 65. Dus als je de site met bijv. een tool als Screaming Frog crawlt.
  66. 66. Google helpt ook daarbij.
  67. 67. Google helpt ook daarbij.
  68. 68. Het gaat niet alleen om 
 de snelheid van de website, 
 maar ook om de perceptie hiervan. https://www.slideshare.net/DistilledSEO/searchlove-boston-2018-emily-grossman-the-marketers-guide-to-performance-optimization https://www.slideshare.net/jonhenshaw/page-speed?ref=https://www.deepcrawl.com/blog/events/webinar-recap-site-speed-jon-henshaw
  69. 69. Misschien wel het beste verhaal over hoe je stapsgewijs je WordPress site kunt optimaliseren: https://www.slideshare.net/jonoalderson/06- seconds-is-the-new-slow
  70. 70. Let op!
 Test meer pagina’s dan alleen je homepage, dus ook je categorie-, dienst- of productpagina.
  71. 71. Mobile friendly test
  72. 72. Mobile friendly test
  73. 73. • 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.
  74. 74. Bookmarklets
  75. 75. Vragen?
  76. 76. - 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.

×