Source HTML vs. Rendered HTML

Did you know the HTML coming from the server might not be what Google Search sees? Martin Splitt, Developer Relations Engineer, explores the relationship between source HTML, rendered HTML, the Document Object Model (DOM), and the rendering process. Learn how to inspect the DOM in a browser, the differences between what Google tools show when inspecting a URL and when using 3rd party view-sources, and more behind the scenes info of your browser.
Listen to Search Off the Record on Libsyn → goo.gle/3am6jMx
Listen to Search Off the Record on Google Podcasts → goo.gle/3yIHvXt
Listen to Search Off the Record on Spotify → goo.gle/3AynTaH
Listen to Search Off the Record on Apple Podcasts → goo.gle/3RuHlLV
0:00 - Introduction
0:31 - What happens when your browser opens a webpage
2:27 - What are the rendered HTML and the DOM?
5:35 - How to debug your page by viewing both the source and rendered HTML
7:30 - Recap
Watch all Search Central Lightning Talks → goo.gle/2VclBJz
Subscribe to the Google Search Central Channel → goo.gle/SearchCentral
#SearchLightningTalks #HTML #GoogleSearch

[@GoogleSearchCentral]

Subtitles are available in Portuguese, Spanish, Vietnamese, Hindi, Russian, Japanese, Korean, Indonesian, Chinese and English for this video. Click on the Settings icon in the bottom right corner of the video, and select Subtitles/CC from the menu.

[@rakshitvloggers2504]

Thank you for hindi subtititle.।।।। You guyz are amazing

[@anthmackandCatblew]

@@sivarajan8887 @@sivarajan8887

[@ankitchauhan7594]

I have never seen a more crisp and easy explaination of this topic. This was awesome. Please make more technical videos!

[@burtonordie]

Thanks Martin! I use the View Rendered Source extension to check the rendered HTML. Keep the good content coming!

[@faizanahmed9304]

Great content! Need some more of these.

[@beebole]

Superb explanation. Very handy. The metaphor of recipe and dish just nailed it. Saved to our learning resources for our marketing team.

[@lazarinastoy]

Really helpful video and great explanation!

[@jamesscott1711]

Beautifully explained. Thanks 👍

[@saliisshere]

The recipe and dish example was great 👍 Tell us more about JS websites and their seo

[@ThijsAanHetGamen]

This really helps me explain this to clients! Great video, keep it up :)

[@TopicalAuthority]

Thank you, Martin.

[@ANILKkotha]

Very nicely explained! Thanks

[@giliup]

I love it! Thanks for sharing 😊

[@juliengordon1]

Thank you for your explanations, Martin !

[@SeoEnEspanol]

what a great explanation!

[@BikeGremlinRS]

Very nicely explained. Thank you. :) Kudos to whoever did the animations! Brilliant. :)

[@faizanahmed9304]

of course

[@LuisCeladita]

How can you make animations like this? I am interested in creating educational videos like this.

[@rakshitvloggers2504]

Very nice and informative.।।।। And special thanks for hindi subtitles

[@gerhardschmid1733]

Nice piece of content 😃

[@hanscfs]

Ideas for the next topic: What asset that Googlebot commonly see / consume while they are crawling.

[@mungeripanchayat]

Excellent explanation, and it covers all aspects of HTML rendering. But I have one question if there is a high volume of images at the top and a low volume of images in the footer then how does rendering start from top to bottom or as usual from top? Or this means rendering based on image volume or from assigned functions from top to bottom.

[@kelvinkamau9083]

Great!

[@bontjerate]

Is there any difference in ranking between Client Side Rendered (CSR) websites and Server Side Rendered (SSR) websites?

[@chromama]

it's sometime possible. imagine some important resource has a timeout while loading the CSR-version. Your page might end up with missing content or directives etc. This will affect then what Google sees / or doesn't see

[@bontjerate]

@@chromama ah, okay, but if you put it that way, if your SSR page gives a 503 error the page doesnt get indexed at al. But you are saying that, if there is no server error, a CSR page gets indexed just as well as a SSR page?

[@syariful_umam]

SEO lebih bagus SSR?

[@LuisCeladita]

How can you make animations like this? I am interested in creating educational videos like this.

[@rondinellidigital]

Awesome guys!

[@sabuein]

Thank you, Google.

[@SKYLANCHE]

Chrome Network, Performance Insights, SEO Pro Extension, Web.dev.measure, Pagespeed insights