Dynamic Rendering - is this really an SEO silver bullet? SMX WEST
•
25 likes•10,929 views
This document discusses various approaches to JavaScript rendering and SEO. It begins by discussing the limitations of prerendering/dynamic rendering, noting that it creates duplicate content and outdated pages. It then discusses alternatives like server-side rendering, hybrid rendering, and static site generators that can improve the user experience. The document cautions against relying solely on prerendering and recommends approaches like server-side rendering that allow search engines to properly index the JavaScript content.
Report
Share
Dynamic Rendering - is this really an SEO silver bullet? SMX WEST
- 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.
- 3. #SMX @Bart_Goralewicz …however JavaScript SEO is still massively misunderstood in 2019
- 7. #SMX @Bart_Goralewicz But it gets much easieronce you start learning from the best. E.g. Google! #SMX @Bart_Goralewicz
- 11. #SMX @Bart_Goralewicz Let’s see if they practice what they preach
- 12. #SMX @Bart_Goralewicz April 2018 – the new version of Google Flights #SMX @BartGoralewicz#SMX @Bart_Goralewicz
- 13. #SMX @Bart_Goralewicz 20,000+ visibility down to 48 (!)
- 15. #SMX @Bart_Goralewicz Only 1 page indexed in Google
- 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,
- 23. #SMX @Bart_Goralewicz This is exactly why we have 2 waves of JavaScript indexing
- 25. #SMX @Bart_Goralewicz Source: Google I/O 2018 #SMX @Bart_Goralewicz
- 26. #SMX @Bart_Goralewicz New links to be crawled Second wave of indexing
- 27. #SMX @Bart_Goralewicz Isomorphic, universal, dynamic, hybrid, hydrating with JavaScript, etc. Latest nomenclature and solution to make JavaScript SEO friendly.
- 28. #SMX @Bart_Goralewicz Client-side Rendering #SMX @Bart_Goralewicz
- 29. #SMX @Bart_Goralewicz Prerendering Aka Dynamic Rendering an elephant in the room
- 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. #SMX @Bart_Goralewicz Google is recommending Dynamic Rendering Dynamic Rendering = WORKAROUND #SMX @Bart_Goralewicz
- 34. #SMX @Bart_Goralewicz prerendering Key problems with explained
- 42. #SMX @Bart_Goralewicz What are your options?
- 44. #SMX @Bart_Goralewicz Serve stale/outdated HTML1. Serve JavaScript and let Google (try to) handle it 2. Prerender on the fly3.
- 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. #SMX @Bart_Goralewicz Most popular Prerendering solutions Chrome Headless/Phantom JS Chrome Headless Chrome Headless Prerender.io Puppeteer Rendertron
- 47. #SMX @Bart_Goralewicz Most popular Prerendering solutions Prerender.io Puppeteer Rendertron Service/Free Free Free
- 49. #SMX @Bart_Goralewicz The Source Code vs. DOM Source code DOM #SMX @Bart_Goralewicz
- 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
- 54. #SMX @Bart_Goralewicz Why prerendering may not be the best solution for your business?
- 55. #SMX @Bart_Goralewicz It’s difficult to use dynamic rendering on websites using geolocation
- 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. #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. #SMX @Bart_Goralewicz … just like SEO ”containers” in some of the ecommerce stores.
- 60. #SMX @Bart_Goralewicz Server side rendering All of the rendering work is done by your servers. Google gets HTML. SEO = OK
- 62. #SMX @Bart_Goralewicz Server Side Rendering / Hybrid Rendering #SMX @Bart_Goralewicz
- 63. #SMX @Bart_Goralewicz HYBRID rendering Prerendered HTML is sent to users and the search engine.Then, JavaScript runs on top of that.
- 65. #SMX @Bart_Goralewicz Which brands use HYBRID rendering? #SMX @Bart_Goralewicz
- 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. #SMX @Bart_Goralewicz Next, Nuxt and Angular Universal are the next (amazing joke) trend! 35% of JS developers want to learn Next.js
- 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. #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. #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
- 73. #SMX @Bart_Goralewicz What if we just keep CSR JavaScript ? *Client Side Rendered *
- 76. #SMX @Bart_Goralewicz Is JavaScript Evil? #SMX @Bart_Goralewicz No, it is way worse.
- 77. #SMX @Bart_Goralewicz Is JavaScript Evil? #SMX @Bart_Goralewicz No, it is way worse. It is complex ☺
- 78. #SMX @Bart_Goralewicz JavaScript SEO best practices
- 79. #SMX @Bart_Goralewicz JavaScript taming the beast in 3 easy steps #SMX @BartGoralewicz
- 80. #SMX @Bart_Goralewicz Step 1. V.2 Choosing the right framework
- 81. #SMX @Bart_Goralewicz Step 2. Rendering JavaScript Prerendering Server Side Rendering Universal/Isomorphic Static site generators (Gatsby.js)
- 82. #SMX @Bart_Goralewicz Step 3. Enjoy your traffic!
- 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
- 85. #SMX @Bart_Goralewicz THANK YOU! SEE YOU AT THE NEXT #SMX bartosz@goralewicz.com