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.

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

#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.

[ankitchauhan]

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!

[faizanahmed]

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.

[saliisshere]

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

[BikeGremlinRS]

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

[lazarinastoy]

Really helpful video and great explanation!

[hanscfs]

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

[ThijsAanHetGamen]

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

[rakshitvloggers]

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

[juliengordon]

Thank you for your explanations, Martin !

[AISEOPUNE]

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.

[LuisCeladita]

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

[SKYLANCHE]

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