Dynamic Rendering for SEO by Nati Elimelech
0 likes95 views
1. The document discusses dynamic rendering techniques for websites built with JavaScript frameworks like React, including client-side rendering (CSR) and server-side rendering (SSR). 2. With dynamic rendering, sites can serve pre-rendered HTML to search engines and bots while using CSR for users, allowing compatibility with all clients while optimizing performance. 3. Maintaining parity between what bots and users see is important for SEO, and the document provides recommendations for tools and techniques to check for rendering issues between different user agents and JavaScript settings.
Dynamic Rendering for SEO by Nati Elimelech
- 1. SMX Next * Dynamic rendering at scale What we learned from rendering over 200 million websites in React. Nati Elimelech, Tech SEO Lead, Wix @netanel November 2021
- 2. @netanel Dynamic rendering at scale SMX Next JS Frameworks aren’t going anywhere
- 3. @netanel Dynamic rendering at scale SMX Next The Rise of JS Frameworks - Rapid development - Better UX - Better performance - Enhanced functionality React
- 4. @netanel Dynamic rendering at scale SMX Next When you visit a web page that requires JS Browser executes JS & updates DOM Produces rendered HTML Your browser sends a request to a URL Server responds w/ skeleton HTML + JS Browser constructs the web page
- 5. @netanel Dynamic rendering at scale SMX Next Client-side rendering (CSR) The client (browser) does all the heavy lifting—needs to run JS to render the final HTML. Compatibility: clients with relevant JS capabilities
- 6. @netanel Dynamic rendering at scale SMX Next The Dark Side - Need to execute JS to get important HTML - Requires more resources from client - Not all bots & crawlers support JS - Things can break Yes, another Star Wars™ joke
- 7. @netanel Dynamic rendering at scale SMX Next When you visit a web page with server side rendering Browser gets fully rendered HTML response HTML = rendered HTML Your browser sends a request to a URL JS is executed & HTML rendered on server side Browser constructs the web page
- 8. @netanel Dynamic rendering at scale SMX Next Server-side rendering (SSR) The server does all of the heavy lifting so the client doesn’t need to execute JS to see important HTML. Compatibility: all bots and clients, most animals, some furniture
- 9. @netanel Dynamic rendering at scale SMX Next 🙎♂️🙍♀️ Introducing dynamic rendering (oh so very simplified) Request to URL Is this a known bot? No Ye s Initial response Rest of response Render HTML on server side Client Side Rendering 🤖🤖🤖 Serve skeleton HTML + JS Serve fully rendered HTML as the response Server Side Rendering
- 10. @netanel Dynamic rendering at scale SMX Next Server-side rendering (SSR) for bots Client-side rendering (CSR) for users
- 11. @netanel Dynamic rendering at scale SMX Next More flexibility ➔ Serve content and HTML regardless of client capabilities ➔ You can optimize HTML for bots ➔ User performance not impacted More complications ➔ Requires maintaining a UA list ➔ Multiple flows to maintain ➔ Multiple flows 🠆 more cache misses ➔ Parity between flows requires auditing Dynamic rendering brings:
- 12. @netanel Dynamic rendering at scale SMX Next What user clients see
- 13. @netanel Dynamic rendering at scale SMX Next What bots see (much tidier!)
- 14. @netanel Dynamic rendering at scale SMX Next A short PSA
- 15. SMX Next * More stuff I wanted to say but didn't have enough time for
- 16. @netanel Dynamic rendering at scale SMX Next Consistency is key 1. Main content of page inc. images 2. Title, canonical & robots tags 3. Internal links 4. Alternate / hreflang tags 5. Structured Data Markup 6. Other important elements on the page 7. Page layout doesn't break Check your "SEO stuff" - sending mixed signals to search engines is always a bad thing. By importance:
- 17. @netanel Dynamic rendering at scale SMX Next Checking for parity issues 2 sets of parity checks you want to be performing regularly: Googlebot Vs. Regular Chrome UA make sure bots see what users see, with JS rendering on 1️⃣ Bot Rendered HTML Vs. Bot Response HTML make sure bots that don't execute JS see what bots that don't execute JS see (at least for the important stuff) 2️⃣
- 18. @netanel Dynamic rendering at scale SMX Next Checking for parity issues Human - Bot wars Keep the following settings in mind when auditing a webpage Bot Wars 1️⃣ 2️⃣ User agents: - UA1: Googlebot for Smartphones - UA2: Latest Chrome UA JS settings: Enable JS execution (limit to 5 seconds) for both User agents: Googlebot for Smartphones for both JS settings: - UA 1: Enable JS execution (limit to 5 seconds) - UA 2: Disable JS
- 19. @netanel Dynamic rendering at scale SMX Next Manually auditing for parity issues Your Chrome browser & SEO extensions can be used to find rendering issues! 1. Change UA on browser using 'Network Conditions' or an extension 2. Disable or leave JS as required (extension) 3. Open your favorite SEO extension and record output 4. Change settings and use SEO extension again 5. Compare
- 20. @netanel Dynamic rendering at scale SMX Next Tools you can use for free 1. Manual labor (prev. slide) 2. Mobile-Friendly Test, GSC and other Google tools will return rendered HTML as Googlebot 3. If you have the time - python
- 21. @netanel Dynamic rendering at scale SMX Next Features you want in your paid auditing tool 1. Fully customizable UA 2. JS rendering setting / compare 3. Crawl comparisons 4. Render a visual preview of the page
- 22. SMX Next * Got questions? Follow me on @netane l