Source HTML vs. Rendered HTML

  Рет қаралды 16,772

Google Search Central

Google Search Central

Күн бұрын

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

Пікірлер: 32
@GoogleSearchCentral
@GoogleSearchCentral 2 жыл бұрын
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
@rakshitvloggers2504 2 жыл бұрын
Thank you for hindi subtititle.।।।। You guyz are amazing
@anthmackandCatblew
@anthmackandCatblew Жыл бұрын
@@sivarajan8887 @@sivarajan8887
@ankitchauhan7594
@ankitchauhan7594 2 жыл бұрын
I have never seen a more crisp and easy explaination of this topic. This was awesome. Please make more technical videos!
@burtonordie
@burtonordie Жыл бұрын
Thanks Martin! I use the View Rendered Source extension to check the rendered HTML. Keep the good content coming!
@faizanahmed9304
@faizanahmed9304 Жыл бұрын
Great content! Need some more of these.
@beebole
@beebole Жыл бұрын
Superb explanation. Very handy. The metaphor of recipe and dish just nailed it. Saved to our learning resources for our marketing team.
@saliisshere
@saliisshere Жыл бұрын
The recipe and dish example was great 👍 Tell us more about JS websites and their seo
@TopicalAuthority
@TopicalAuthority Жыл бұрын
Thank you, Martin.
@jamesscott1711
@jamesscott1711 Жыл бұрын
Beautifully explained. Thanks 👍
@ThijsAanHetGamen
@ThijsAanHetGamen Жыл бұрын
This really helps me explain this to clients! Great video, keep it up :)
@BikeGremlinRS
@BikeGremlinRS 2 жыл бұрын
Very nicely explained. Thank you. :) Kudos to whoever did the animations! Brilliant. :)
@faizanahmed9304
@faizanahmed9304 Жыл бұрын
of course
@LuisCeladita
@LuisCeladita Жыл бұрын
How can you make animations like this? I am interested in creating educational videos like this.
@ANILKkotha
@ANILKkotha Жыл бұрын
Very nicely explained! Thanks
@hanscfs
@hanscfs 2 жыл бұрын
Ideas for the next topic: What asset that Googlebot commonly see / consume while they are crawling.
@lazarinastoy
@lazarinastoy Жыл бұрын
Really helpful video and great explanation!
@juliengordon1
@juliengordon1 Жыл бұрын
Thank you for your explanations, Martin !
@SeoEnEspanol
@SeoEnEspanol Жыл бұрын
what a great explanation!
@giliup
@giliup Жыл бұрын
I love it! Thanks for sharing 😊
@rakshitvloggers2504
@rakshitvloggers2504 2 жыл бұрын
Very nice and informative.।।।। And special thanks for hindi subtitles
@gerhardschmid1733
@gerhardschmid1733 2 жыл бұрын
Nice piece of content 😃
@mungeripanchayat
@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.
@bontjerate
@bontjerate 2 жыл бұрын
Is there any difference in ranking between Client Side Rendered (CSR) websites and Server Side Rendered (SSR) websites?
@chromama
@chromama 2 жыл бұрын
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
@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?
@LuisCeladita
@LuisCeladita Жыл бұрын
How can you make animations like this? I am interested in creating educational videos like this.
@SKYLANCHE
@SKYLANCHE Жыл бұрын
Chrome Network, Performance Insights, SEO Pro Extension, Web.dev.measure, Pagespeed insights
@kelvinkamau9083
@kelvinkamau9083 2 жыл бұрын
Great!
@syariful_umam
@syariful_umam Жыл бұрын
SEO lebih bagus SSR?
@rondinellidigital
@rondinellidigital 2 жыл бұрын
Awesome guys!
@sabuein
@sabuein Жыл бұрын
Thank you, Google.
How to grow your WordPress site with Site Kit?
11:19
Google Search Central
Рет қаралды 11 М.
Non-HTML files on the web
28:05
Google Search Central
Рет қаралды 5 М.
He sees meat everywhere 😄🥩
00:11
AngLova
Рет қаралды 7 МЛН
小女孩把路人当成离世的妈妈,太感人了.#short #angel #clown
00:53
How to optimize images for your ecommerce website (6 tips)
14:03
Google Search Central
Рет қаралды 21 М.
Kruno: How browsers work | JSUnconf 2017
20:06
JSConf
Рет қаралды 80 М.
HTML Templates Instead Of Reactivity | Prime Reacts
12:42
ThePrimeTime
Рет қаралды 109 М.
HTML vs DOM? Let’s debug them #DevToolsTips
5:12
Chrome for Developers
Рет қаралды 31 М.
SEO troubleshooting with Browser Devtools
5:29
Google Search Central
Рет қаралды 11 М.
How to make your ecommerce website stand out in Google Search  (6 Tips)
9:27
Google Search Central
Рет қаралды 13 М.
BASH scripting will change your life
14:18
NetworkChuck
Рет қаралды 999 М.
More HTML elements that almost no one uses (but should!)
15:47
Kevin Powell
Рет қаралды 49 М.
Let's talk image SEO
33:40
Google Search Central
Рет қаралды 19 М.
HTML in 100 Seconds
2:34
Fireship
Рет қаралды 633 М.
Ждёшь обновление IOS 18? #ios #ios18 #айоэс #apple #iphone #айфон
0:57
Неразрушаемый смартфон
1:00
Status
Рет қаралды 1,6 МЛН
Телефон в воде 🤯
0:28
FATA MORGANA
Рет қаралды 1,2 МЛН
Samsung Galaxy 🔥 #shorts  #trending #youtubeshorts  #shortvideo ujjawal4u
0:10
Ujjawal4u. 120k Views . 4 hours ago
Рет қаралды 9 МЛН
💅🏻Айфон vs Андроид🤮
0:20
Бутылочка
Рет қаралды 700 М.