Google Talks About Source HTML vs. Rendered HTML

Vo videu Search Central Lightning Talks, Google Developer Relations Engineer Martin Splitt vysvetľuje, ako sa zdrojový kód HTML môže líšiť od vykresleného kódu HTML a ako to môže ovplyvniť vaše SEO.

Na začiatku videa sa pýta: Skontrolovali ste niekedy zdroj webovej stránky a čudovali ste sa, prečo vyzerá inak ako to, čo vidíte vo svojom prehliadači, keď otvoríte tú istú webovú stránku?

Alebo ste možno počuli o vykreslenom HTML alebo DOM a neviete, ako sa líšia od toho, čo vidíte napríklad v zdroji zobrazenia, potom je toto video pre vás.

Dôrazne odporúčame vypočuť si tento podcast, ak vás vôbec zaujíma, ako veľmi môže váš zdrojový kód HTML a vykreslený kód HTML ovplyvniť vaše úsilie v oblasti SEO.

Martin 0:00
Skontrolovali ste niekedy zdroj webovej stránky a premýšľali ste, prečo vyzerá inak ako to, čo vidíte vo svojom prehliadači, keď otvoríte tú istú webovú lokalitu? Alebo ste možno počuli o vykreslenom HTML alebo DOM a neviete, ako sa líšia od toho, čo vidíte napríklad v zdroji zobrazenia, potom je toto video pre vás. V tomto videu by som vás chcel vziať na cestu do zákulisia vášho prehliadača. Poďme teda do toho.

Martin 00:26
Aby sme pochopili, čo sa stane medzi serverom, ktorý do vášho prehliadača odošle nejaký kód HTML, a prehliadačom, ktorý vám zobrazí webovú stránku v celej jej kráse, musíme začať v momente, keď stlačíte return v paneli s adresou a požiadate server niekde na internete, aby dať vám webovú stránku. Prvým krokom na získanie webovej stránky do vášho prehliadača je odoslanie požiadavky HTTP na server, ktorý je hostiteľom webovej stránky.

Keď server prijme požiadavku, server sa rozhodne, ako na ňu odpovedať. To môže znamenať spustenie programu, ako je skript PHP alebo program Java, alebo čokoľvek iné, alebo jednoducho poslať späť obsah súboru. V tomto videu preskočíme, čo presne server robí, a zameriame sa na skutočnosť, že server zvyčajne začne odosielať množstvo HTML späť do prehliadača. Mnoho ľudí si myslí, že kód HTML, ktorý bol odoslaný zo servera, je rovnaký ako web, ktorý uvidíte vo svojom prehliadači. Ale to nie je naozaj presné.

Čítať:  Systémové písma vs. webové písma: Prečo je rozdiel dôležitý?

Namiesto toho môžeme povedať, že to, čo vidíte v prehliadači, je jedlo a odoslaný kód HTML je recept. Prehliadač musí pripraviť alebo uvariť jedlo na základe receptu, ktorý dostal zo servera. Premení HTML na množstvo vizuálnych a niekedy interaktívnych prvkov, ktoré sa potom zobrazia na vašej obrazovke. Zaujímavosťou je, čo sa deje medzi kódom HTML a tým, čo vidíte vo svojom prehliadači. Toto sa nazýva vykresľovanie. Pozrime sa trochu bližšie na vykresľovanie, aby sme videli, čo sa stane medzi začiatkom, kódom HTML, ktorý prichádza zo servera, a koncom, interaktívnou webovou stránkou, s ktorou interagujete.

Aby sme pochopili rozdiel medzi kódom HTML, ktorý sme dostali zo servera, takzvaným zdrojovým kódom HTML, vykresleným kódom HTML a modelom DOM, musíme sa na tento proces vykresľovania pozrieť bližšie. Proces vykresľovania je séria krokov, ktoré začínajú zdrojovým kódom HTML. A ak do CSS zahrnie informácie o štýle, prehliadač začne analyzovať zdrojový kód HTML, a ak je k dispozícii, akýkoľvek CSS nájdený vo vnútri, čím sa vytvoria dve stromové štruktúry nazývané Document Object Model, skrátene DOM a objektový model CSS, skratka CSSOM.

Pre nás je DOM z týchto dvoch modelov dôležitejší, preto sa mu odteraz budeme venovať. Pre našu webovú stránku by napríklad prehliadač vytvoril nasledujúci strom DOM. Prehliadač potrebuje tento strom na identifikáciu jednotlivých prvkov na webovej stránke a ich vzťahu k ostatným prvkom. Napríklad, ktorý text patrí do nadpisu a ktorý do odseku alebo aký súbor je zdrojom tohto obrázku. Prehliadač potom vezme DOM a CSSOM a zistí, ako umiestniť všetky tieto veci do okna prehliadača. Toto sa nazýva rozloženie a vytvorí strom renderu. Render Tree v podstate obsahuje veľkosti a pozície na obrazovke pre každý z prvkov v DOM. Prehliadač používa tento strom na maľovanie skutočných pixelov, ktoré tvoria to, čo vidíme v okne prehliadača. Je dôležité pochopiť, že keď nám prehliadač zobrazí webovú stránku, môže použiť JavaScript, ktorý nám umožní interakciu s webovou stránkou.

Čítať:  Google vysvetľuje, čo môžu robiť profesionáli v oblasti SEO, ak stratia hodnotenie svojej značky

JavaScript potom môže zmeniť DOM pridaním, zmenou alebo odstránením prvkov v strome. Napríklad, keď kliknem na toto tlačidlo, pridá sa obrázok do DOM a tým aj na webovú stránku na obrazovke. Tu to môžeme vidieť v akcii. Na ľavej strane vidíte interaktívnu webovú stránku. Na pravej strane vidíte reprezentáciu DOM, ktorú prehliadač používa pre túto webovú stránku. Kedykoľvek sa klikne na tlačidlo, JavaScript pridá nový obrázok do stromu DOM a prehliadač ho vykreslí. V predchádzajúcom príklade môže strom DOM vyzerať kedykoľvek inak v závislosti od toho, čo sa stalo predtým.

Samotný DOM žije iba v pamäti prehliadača a sám o sebe nie je viditeľný, ale môžeme ho reprezentovať v rôznych formách. Jednou z takýchto foriem je interaktívny stromový pohľad, ktorý sme videli v nástrojoch pre vývojárov prehliadača na pravej strane predchádzajúceho videa. Prípadne by sme mohli premeniť strom DOM späť na HTML. Nazývame to vykreslené HTML.

Keď zmeníme strom DOM späť na vykreslený kód HTML, môžeme získať rôzne výsledky v závislosti od toho, čo sa stalo so stromom DOM predtým. Napríklad vykreslený kód HTML predchádzajúcej vzorovej webovej stránky je úplne rovnaký ako zdrojový kód HTML, pokiaľ sa nekliklo na tlačidlo.

Po kliknutí na tlačidlo sa spustí JavaScript a zmení DOM a následne aj vykreslený HTML. Teraz sa už možno pýtate, čo sa mi zobrazí, keď v prehliadači kliknem na položku Zobraziť zdroj? Je to zdrojový kód HTML alebo vykreslený kód HTML? Existujú tri spôsoby, ako vidieť zdrojový kód HTML pochádzajúci zo servera. Prvým, a pravdepodobne najznámejším, je kliknúť pravým tlačidlom myši na webovú stránku a vybrať Zobraziť zdroj alebo zadať pred URL dvojbodku zobraziť pomlčku zdroja. To vám ukáže zdrojový kód HTML. Prípadne môžete prejsť aj do nástrojov pre vývojárov vo svojom prehliadači, vybrať kartu Zdroje a zobraziť zdrojový kód HTML.

Čítať:  Koľko stojí SEO audit [Full Breakdown]

Tu môžete vidieť, že pravá strana zobrazuje pôvodný kód HTML bez obrázkov, ktoré sú momentálne viditeľné na webovej stránke. Tretím spôsobom je použiť kartu sieť v nástrojoch pre vývojárov prehliadača, kde môžete vidieť aj kód HTML, ktorý bol odoslaný späť zo servera. Ale aké mám možnosti, ak chceme vidieť, čo je v DOM?

Opäť, nástroje pre vývojárov prehliadača nás pokrývajú. Nástroje Dev obsahujú stromovú reprezentáciu DOM, ktorú môžeme skúmať a interagovať s ňou. Nájdeme to na karte Prvky v prehliadači Chrome. Môžete si všimnúť, že na rozdiel od ostatných panelov nástrojov pre vývojárov a zdroja zobrazenia nám toto zobrazuje aktuálny obsah DOM vrátane obrázkov, ktoré pridal JavaScript. Ak by sme chceli, môžeme DOM premeniť späť na HTML.

To môže byť dosť zložité vďaka veciam ako Shadow DOM alebo cross-origin iframe. Ale pre jednoduchšie webové stránky môžete získať vykreslený kód HTML tak, že prejdete do konzoly Dev Tools Console a spustíte tento útržok kódu JavaScript. Opäť upozorňujeme, že to nie vždy funguje, najmä v prípade zložitejších webových stránok. Na ladenie vám odporúčame použiť nástroj na kontrolu adries URL v službe Search Console, aby ste získali vykreslený kód HTML, ktorý Vyhľadávanie Google používa na indexovanie stránky.

Dobre, tak to bola poriadna jazda. Zhrňme si, čo sme sa dnes naučili.

Začali sme so zdrojovým kódom HTML, to je kód HTML, ktorý server odošle do nášho prehliadača, keď otvoríme webovú stránku. Potom sme sa dozvedeli, že prehliadač premení toto HTML na DOM. Ide o interaktívnu reprezentáciu webovej stránky po jednotlivých prvkoch zostavenú zo zdrojového HTML. DOM sa môže zmeniť, pretože JavaScript ho môže upraviť počas načítavania stránky, pri interakcii používateľa alebo iných udalostiach, keď je otvorená v prehliadači.

Čítať:  Google vysvetľuje, ako by ste mali vytvárať viacjazyčné súbory Sitemap

A potom, v neposlednom rade, sme identifikovali vykreslený HTML ako snímku toho DOM premeneného späť na HTML. Vykreslený kód HTML odráža obsah modelu DOM na stránke v čase vytvorenia snímky. Ak chcete zobraziť vykreslený kód HTML, môžete použiť nástroj na kontrolu adries URL v službe Google Search Console. Teraz sme sa teda pozreli na to, čo je zdrojový kód HTML, vykreslený kód HTML a DOM, a preskúmali sme, aké nástroje by ste mohli použiť na ladenie problémov na vašich webových stránkach. Aké nástroje používate na ladenie problémov na svojich webových stránkach?

Dajte nám vedieť v komentároch nižšie. A tiež veľmi pekne ďakujeme za sledovanie a označte, že sa vám páči a prihláste sa na odber, aby ste mali prehľad o našom najnovšom a najlepšom obsahu v oblasti vyhľadávania Google. Mnohokrat dakujem. A dovidenia. Chcete viac technických SEO vychytávok? Chyťte ma na podcaste Search Off the Record, kde hovoríme o všetkom, čo vyhľadáva Google, ideme do zákulisia a kto vie, možno aj o mojej láske k JavaScriptu.

Jéj! Pridajte sa ku mne, Martinovi a spoločnosti Google Search Relations a pozrite sa na nás, kdekoľvek si stiahnete podcasty.

Nové Publikácie:

ODPORÚČANIE