BSEO - The IKEA Flatpack Guide to Rendering

These are the slides from my Brighton SEO Talk on The IKEA Flatpack Guide to Rendering

Transcript

1. The IKEA Flatpack Guide To Rendering Mark Stanford-Janes ROAST Speakerdeck.com/mstanford43
2. 1 2 3 4 5 6 CONTENTS What is Rendering? Why is Rendering Important? How Does Google render stuff? The IKEA Flatpack Guide to Rendering Which is best for SEO? How to tell if it’s working? UK
3. 1 What is Rendering? Rendering is how Google builds your site and “experiences it as a human”
4. 1 What is Rendering? Every Webpage Has Two States – Rendering occurs between them The Initial HTML The Rendered HTML
5. 1 What is Rendering? Every Webpage Has Two States The Initial HTML
6. 1 What is Rendering? Every Webpage Has Two States The Rendered HTML
7. 2 Why is Rendering Important? Three Phases: 1 Crawling Crawl Queue Crawler Processing Index Render Queue Render URL HTML Rendered HTML
8. 2 Why is Rendering Important? Three Phases: 1 Crawling 2 Rendering Crawl Queue Crawler Processing Index Render Queue Render URL HTML Rendered HTML
9. 2 Why is Rendering Important? Three Phases: 1 Crawling 2 Rendering 3 Indexing Crawl Queue Crawler Processing Index Render Queue Render URL HTML Rendered HTML
10. What is all the fuss about? Google can’t (technically) index what it can’t render so we need to make sure sites properly!
11. 3 How does Google Render stuff? 1. A URL is pulled from the crawl queue 2. Googlebot requests the URL and downloads the initial HTML 3. The Initial HTML is passed to the processing stage (First wave of processing by Google’s indexing service) 4. The processing stage extracts links from the initial HTML 5. These links go back on the crawl queue 6. Once resources are crawled, the page queues for rendering 7. When resources become available, the request moves from the render queue to the renderer 8. The rendering service assembles the page using the crawled links 9. Renderer passes the rendered HTML back to processing 10. Second wave of processing for Google’s index 11. Extracts links from the rendered HTML to put them into the crawl queue 12. Go to the next URL in the crawl queue and repeat the process. 13. Only 130 trillion pages more and you’ll be a proper bot
12. How does Google Render stuff? 1 First wave indexation 2 Second wave of processing for Google’s index 3 Fully indexed!
13. The IKEA Flatpack guide to Rendering
14. 1 IKEA – Server 2 Raw materials – html 3 Screws,nails, etc – JS, CSS 4 Your home – Browser 5 Bookcase– Finished page 4 The IKEA Flatpack Guide to Rendering The Basics
15. 4.1 Client-Side Rendering (CSR) You order the bookcase from IKEA The full flatpack is sent to your house You have to put it together yourself at home You can use the Bookcase
16. 4.2 Server-side Rendering (SSR) IKEA builds the Bookcase for you You order the bookcase from IKEA The Bookcase is sent to your house You can use the Bookcase
17. 4.3 Dynamic Rendering (DR) Users get Search engines get OR
18. 4.3 Dynamic Rendering (DR) Users get Search engines get OR
19. 4.4 Static Rendering (SR) IKEA builds the bookcase and stores it You order the bookcase from IKEA The Bookcase is sent to your house really quickly You can use the Bookcase but it has some wear and tear
20. 4.5 Incremental Static Regeneration (ISR) IKEA builds the bookcase and stores it You order the bookcase from IKEA The Bookcase is sent to your house really quickly You can use the Bookcase and any worn parts are replaced
21. 4.6 Prerendering (PR) You order the bookcase from IKEA They send only the wood (HTML) You can look at the pile of wood but not do anything with it… IKEA sends the screws and instructions and you build it
22. 4.7 Progressive Rehydration (PRH) You can use the top part of the bookcase After a while you can use the rest of the bookshelf Server-side Rendering
23. 4.8 Islands Rendering (IR) The entire catalogue is broken into separate parts You order the bookcase from IKEA They send only the exact parts for the bookshelf You have to put it together yourself at home You can use the Bookcase
24. So which is best?
25. 5 It Depends… Cheap/Simple Expensive/Difficult SEO Friendly Bad for SEO CSR SSR DR SR PRH IR ISR PR
26. 5.1 Best Rendering Methods for Small Static Sites… Cheap/Simple Expensive/Difficult SEO Friendly Bad for SEO CSR SSR DR SR PRH IR ISR PR
27. 5.2 Best Rendering Methods for Larger sites Cheap/Simple Expensive/Difficult SEO Friendly Bad for SEO CSR SSR DR SR PRH IR ISR PR
28. 5.3 Best Rendering Methods for a New Site Cheap/Simple Expensive/Difficult SEO Friendly Bad for SEO CSR SSR DR SR PRH IR ISR PR
29. 5.4 Best Rendering Methods for a Blog or News Site Cheap/Simple Expensive/Difficult SEO Friendly Bad for SEO CSR SSR DR SR PRH IR ISR PR
30. 6 How Can I Test my Site’s Rendering?
31. 6 Check Search Console
32. 6 The Rich Results Test
33. 6 Screaming Frog It!
34. 6 Turn off JS in Chrome With JS Without JS
35. THANK YOU