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 → https://goo.gle/3am6jMx
Listen to Search Off the Record on Google Podcasts → https://goo.gle/3yIHvXt
Listen to Search Off the Record on Spotify → https://goo.gle/3AynTaH
Listen to Search Off the Record on Apple Podcasts → https://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 → https://goo.gle/2VclBJz
Subscribe to the Google Search Central Channel → https://goo.gle/SearchCentral
#SearchLightningTalks #HTML #GoogleSearch
source
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.
That's domtastic! 😂
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.
How can you make animations like this? I am interested in creating educational videos like this.
Thank you, Google.
Beautifully explained. Thanks 👍
Thank you for your explanations, Martin !
what a great explanation!
Thanks Martin! I use the View Rendered Source extension to check the rendered HTML. Keep the good content coming!
Chrome Network, Performance Insights, SEO Pro Extension, Web.dev.measure, Pagespeed insights
Great content! Need some more of these.
Really helpful video and great explanation!
Very nicely explained! Thanks
I love it! Thanks for sharing 😊
Superb explanation. Very handy. The metaphor of recipe and dish just nailed it. Saved to our learning resources for our marketing team.
Thank you, Martin.
The recipe and dish example was great 👍
Tell us more about JS websites and their seo
This really helps me explain this to clients! Great video, keep it up 🙂
SEO lebih bagus SSR?
Very nice and informative.।।।।
And special thanks for hindi subtitles
Great!
Very nicely explained. Thank you. 🙂
Kudos to whoever did the animations! Brilliant. 🙂
Nice piece of content 😃
Awesome guys!
I have never seen a more crisp and easy explaination of this topic. This was awesome. Please make more technical videos!
Ideas for the next topic: What asset that Googlebot commonly see / consume while they are crawling.