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.

Dynamic Rendering - is this really an SEO silver bullet? SMX WEST

6,342 views

Published on

JavaScript SEO & prerendering best practices.

Published in: Marketing

Dynamic Rendering - is this really an SEO silver bullet? SMX WEST

  1. 1. #SMX @Bart_Goralewicz With Bartosz Goralewicz Dynamic Rendering Is this really an SEO silver bullet? Experiences from setting up the world's biggest prerendering engine.
  2. 2. #SMX @Bart_Goralewicz JavaScript madness
  3. 3. #SMX @Bart_Goralewicz …however JavaScript SEO is still massively misunderstood in 2019
  4. 4. #SMX @Bart_Goralewicz
  5. 5. #SMX @Bart_Goralewicz
  6. 6. #SMX @Bart_Goralewicz
  7. 7. #SMX @Bart_Goralewicz But it gets much easieronce you start learning from the best. E.g. Google! #SMX @Bart_Goralewicz
  8. 8. #SMX @Bart_Goralewicz
  9. 9. #SMX @Bart_Goralewicz
  10. 10. #SMX @Bart_Goralewicz
  11. 11. #SMX @Bart_Goralewicz Let’s see if they practice what they preach
  12. 12. #SMX @Bart_Goralewicz April 2018 – the new version of Google Flights #SMX @BartGoralewicz#SMX @Bart_Goralewicz
  13. 13. #SMX @Bart_Goralewicz 20,000+ visibility down to 48 (!)
  14. 14. #SMX @Bart_Goralewicz Is it indexed ?
  15. 15. #SMX @Bart_Goralewicz Only 1 page indexed in Google
  16. 16. #SMX @Bart_Goralewicz THE PROBLEM #SMX @Bart_Goralewicz
  17. 17. #SMX @Bart_Goralewicz Angular Connect conference 2015
  18. 18. #SMX @Bart_Goralewicz ele.ph/angularU If you search for any competitive keyword terms, it’s always going to be server rendered sites. And the reason is because although Google does index client-side rendered HTML it’s not perfect yet and other search engines don’t do it as well. So if you care about SEO, you still need to have server-rendered content. Jeff Whelpley “Angular 2 Server Rendering” Angular U conference, June 22-25, 2015,
  19. 19. #SMX @Bart_Goralewicz v.2 Not indexed
  20. 20. #SMX @Bart_Goralewicz HTML JS #SMX @Bart_Goralewicz
  21. 21. #SMX @Bart_Goralewicz HTML JS #SMX @Bart_Goralewicz
  22. 22. #SMX @Bart_Goralewicz HTML JS #SMX @Bart_Goralewicz
  23. 23. #SMX @Bart_Goralewicz This is exactly why we have 2 waves of JavaScript indexing
  24. 24. #SMX @Bart_Goralewicz
  25. 25. #SMX @Bart_Goralewicz Source: Google I/O 2018 #SMX @Bart_Goralewicz
  26. 26. #SMX @Bart_Goralewicz New links to be crawled Second wave of indexing
  27. 27. #SMX @Bart_Goralewicz Isomorphic, universal, dynamic, hybrid, hydrating with JavaScript, etc. Latest nomenclature and solution to make JavaScript SEO friendly.
  28. 28. #SMX @Bart_Goralewicz Client-side Rendering #SMX @Bart_Goralewicz
  29. 29. #SMX @Bart_Goralewicz Prerendering Aka Dynamic Rendering an elephant in the room
  30. 30. #SMX @Bart_Goralewicz
  31. 31. #SMX @Bart_Goralewicz Google is recommending Dynamic Rendering "Currently, it's difficult to process JavaScript (…) in the meantime, we recommend dynamic rendering as a workaround solution to this problem."
  32. 32. #SMX @Bart_Goralewicz Google is recommending Dynamic Rendering Dynamic Rendering = WORKAROUND #SMX @Bart_Goralewicz
  33. 33. #SMX @Bart_Goralewicz
  34. 34. #SMX @Bart_Goralewicz prerendering Key problems with explained
  35. 35. #SMX @Bart_Goralewicz Prerendering
  36. 36. #SMX @Bart_Goralewicz
  37. 37. #SMX @Bart_Goralewicz queue JavaScript prerender static HTML
  38. 38. #SMX @Bart_Goralewicz BLACK FRIDAY SCENARIO
  39. 39. #SMX @Bart_Goralewicz
  40. 40. #SMX @Bart_Goralewicz New product
  41. 41. #SMX @Bart_Goralewicz
  42. 42. #SMX @Bart_Goralewicz What are your options?
  43. 43. #SMX @Bart_Goralewicz JÄVASCRIPT On-the-fly rendering Outdated HTML
  44. 44. #SMX @Bart_Goralewicz Serve stale/outdated HTML1. Serve JavaScript and let Google (try to) handle it 2. Prerender on the fly3.
  45. 45. #SMX @Bart_Goralewicz What if you HAVE TO do prerendering Plan your updates and deployments1. Make sure that your prerendering setup is efficient2. Remember that you need to crawl and optimize both HTML and JavaScript versions of your website 3.
  46. 46. #SMX @Bart_Goralewicz Most popular Prerendering solutions Chrome Headless/Phantom JS Chrome Headless Chrome Headless Prerender.io Puppeteer Rendertron
  47. 47. #SMX @Bart_Goralewicz Most popular Prerendering solutions Prerender.io Puppeteer Rendertron Service/Free Free Free
  48. 48. #SMX @Bart_Goralewicz Failed prerendering case study
  49. 49. #SMX @Bart_Goralewicz The Source Code vs. DOM Source code DOM #SMX @Bart_Goralewicz
  50. 50. #SMX @Bart_Goralewicz Source Code (before JavaScript): Disqus -The #1 way to build your audience Rendered website: (after JavaScript): Disqus -The #1 way to build an audience on your website
  51. 51. #SMX @Bart_Goralewicz Enter prerendering
  52. 52. #SMX @Bart_Goralewicz What went WRONG?
  53. 53. #SMX @Bart_Goralewicz <html> </head> <body> </body> </html> <head>
  54. 54. #SMX @Bart_Goralewicz Why prerendering may not be the best solution for your business?
  55. 55. #SMX @Bart_Goralewicz It’s difficult to use dynamic rendering on websites using geolocation
  56. 56. #SMX @Bart_Goralewicz Not too dynamic (pun intended) Creates two separate structures instead of one Doesn’t improve UX. Adds an extra layer of complexity May work well BUT rarely does. Requires a very good SEO team maintaining it. WORKAROUND! Dynamic Rendering - summary
  57. 57. #SMX @Bart_Goralewicz My personal beef with dynamic rendering It is only made for the sake of SEO. It doesn’t improve anything for users…
  58. 58. #SMX @Bart_Goralewicz … just like SEO ”containers” in some of the ecommerce stores.
  59. 59. #SMX @Bart_Goralewicz (better)Alternatives to prerendering
  60. 60. #SMX @Bart_Goralewicz Server side rendering All of the rendering work is done by your servers. Google gets HTML. SEO = OK
  61. 61. #SMX @Bart_Goralewicz Alternatives to prerendering
  62. 62. #SMX @Bart_Goralewicz Server Side Rendering / Hybrid Rendering #SMX @Bart_Goralewicz
  63. 63. #SMX @Bart_Goralewicz HYBRID rendering Prerendered HTML is sent to users and the search engine.Then, JavaScript runs on top of that.
  64. 64. #SMX @Bart_Goralewicz https://www.searchenginejournal.com/javascript-seo- like-peanut-butter-and-jelly-thanks-to-isomorphic- js/183337/ https://www.searchenginejournal.com/javascript-seo-like-peanut- butter-and-jelly-thanks-to-isomorphic-js/183337/
  65. 65. #SMX @Bart_Goralewicz Which brands use HYBRID rendering? #SMX @Bart_Goralewicz
  66. 66. #SMX @Bart_Goralewicz Yes, Google recommends it! „If you have engineering resources though, I would highly recommend looking into server-side rendering or even better, hybrid rendering, because that yields user experience benefits, as well.”
  67. 67. #SMX @Bart_Goralewicz Next, Nuxt and Angular Universal are the next (amazing joke) trend! 35% of JS developers want to learn Next.js
  68. 68. #SMX @Bart_Goralewicz Twitter migrated to isomorphic JavaScript in 2012 https://www.oreilly.com/library/view/building-isomorphic- javascript/9781491932926/ch01.html – Initial page load decreased 80% (!)
  69. 69. #SMX @Bart_Goralewicz All the HTML files are built with data BEFORE they are uploaded to a server Static Site Rendering Source: https://www.youtube.com/watch?v=3jeznGJHenI GatsbyJS NextJS
  70. 70. #SMX @Bart_Goralewicz Pros of static sites 1.Very fast (even during traffic surge) 2. Increased security 3.Version control 4. Cheap to host Source: https://www.youtube.com/watch?v=3jeznGJHenI
  71. 71. #SMX @Bart_Goralewicz Limitations
  72. 72. #SMX @Bart_Goralewicz
  73. 73. #SMX @Bart_Goralewicz What if we just keep CSR JavaScript ? *Client Side Rendered *
  74. 74. #SMX @Bart_Goralewicz#SMX @Bart_Goralewicz
  75. 75. #SMX @Bart_Goralewicz Is JavaScript Evil? #SMX @Bart_Goralewicz
  76. 76. #SMX @Bart_Goralewicz Is JavaScript Evil? #SMX @Bart_Goralewicz No, it is way worse.
  77. 77. #SMX @Bart_Goralewicz Is JavaScript Evil? #SMX @Bart_Goralewicz No, it is way worse. It is complex ☺
  78. 78. #SMX @Bart_Goralewicz JavaScript SEO best practices
  79. 79. #SMX @Bart_Goralewicz JavaScript taming the beast in 3 easy steps #SMX @BartGoralewicz
  80. 80. #SMX @Bart_Goralewicz Step 1. V.2 Choosing the right framework
  81. 81. #SMX @Bart_Goralewicz Step 2. Rendering JavaScript Prerendering Server Side Rendering Universal/Isomorphic Static site generators (Gatsby.js)
  82. 82. #SMX @Bart_Goralewicz Step 3. Enjoy your traffic!
  83. 83. #SMX @Bart_Goralewicz Get the Starter Package for FREE Contact maria@elephate.com Give the password ”Freelephate” Within 15 minutes from this lecture Total value of the package: $1000 Maria Cieślak Head of SEO
  84. 84. #SMX @Bart_Goralewicz ele.ph/smxwest Download my deck
  85. 85. #SMX @Bart_Goralewicz THANK YOU! SEE YOU AT THE NEXT #SMX bartosz@goralewicz.com

×