Vykreslování spojené s JavaScriptem s sebou dlouhodobě nese řadu problémů. Google se proto nyní zaměřil na zlepšení procházení JavaScriptu. Jak lze překonat omezení spojená s dynamickým vykreslováním a vyhnout se potenciálním problémům s maskováním? Dozvíte se níže.
Většina moderních webových stránek se nezaměřuje pouze na statický obsah, a proto využívá nejrůznější šablony, pluginy, či rozšíření – ty ale většinou zahrnují kód, jehož součástí je JavaScript. JavaScriptové frameworky jsou oblíbené nejen proto, že umožňují rychlý vývoj a nabízejí lepší uživatelský zážitek, ale zajišťují i lepší výkon a vylepšené funkce, které tradiční frameworky postrádají. V čem je tedy problém?
Problém se čtením JavaScriptu
Kódy obsahující JavaScript však mohou být pro některé webové prohledávače nečitelné – nebo jen obtížně čitelné, a nejsou tak schopny je správně interpretovat. Mnohdy se proto setkáme s webovými stránkami, které právě kvůli problémům se čtením kódu s JavaScriptem nezobrazují správně část svého obsahu (ověřit si, jak prohledávače vidí váš web, si můžete například pomocí Google Search Console). Pokud k tomuto problému dojde, je možné jej vyřešit právě vykreslováním, které se využije pro vytvoření statické HTML verze stránky, která bude následně předložena prohledávačům namísto té původní.
►Zapojíte-li vykreslování do vašeho webu, pomůžete Googlu lépe a rychleji porozumět obsahu, který prochází.
Jak funguje vykreslování?
Pokud se zaměříme na vykreslování, můžeme na něj nahlížet z různých pozic. Jeho různé metody slouží k různým účelům, přičemž hlavním cílem je uspokojit potřeby vyhledávačů – a tedy následně i uživatelů. Znamená to že správné vykreslování je důležité pro úspěšné SEO.
Vykreslování na straně klienta
Vykreslování na straně klienta znamená, že by každý provozovatel webu měl do jeho správy začlenit vykreslování, které prohledávačům řekne, o čem daná stránka nebo web je. Princip fungování je poměrně jednoduchý – jakmile uživatel klikne na odkaz, jeho prohlížeč odešle požadavky na server, na kterém je web hostován. Ten pak narazí na základní HTML, které ale obsahují spoustu kódů s JavaScriptem, které není prohledávač schopen přečíst. Vaším cílem a úkolem by tedy mělo být říci samotnému prohlížeči, aby sám spustil JavaScript, aby získal všechny důležité HTML – dát mu jednoduše veškeré pokyny, které potřebuje.
Vykreslování na straně serveru
Tento typ vykreslování je pro prohlížeče rychlejší a méně náročný na zdroje. Používá se u klientů, kteří neprovádějí JavaScript a všechny zdroje jsou tak tedy vyžadovány na straně serveru. Váš prohlížeč ani robot vyhledávače tak nemusejí spouštět JavaScript, aby získali plně vykreslené HTML. Pokud provádíte vykreslování na straně serveru, v podstatě zviditelníte svůj HTML pro všechny druhy robotů a všechny druhy klientů.
►Pokud porovnáme vykreslování na straně klienta a na straně serveru a přirovnáme je k sestavování nábytku, pak vykreslování na straně klienta jde připodobnit k sestavě například šatní skříně, kterou si koupíte v Ikee rozmontovanou v krabici – prohledávači v tomto případě předložíte seznam všech součástí (rozumějte pokynů), ze kterých on si sestaví výslednou skříň (rozumějte stránku). Pokud však použijete vykreslování na straně serveru, předložíte prohledávači už kompletně sestavenou skříň.
Dynamické vykreslování
Pokud teď přemýšlíte, kterou možnost zvolit a nemůžete se rozhodnout, pak pro vás možná bude skvělým řešením dynamické vykreslování, které kombinuje výhody obou předchozích typů. Jedná se vlastně o přepínání mezi obsahem, který je vykreslen na straně klienta, a obsahem, jenž byl předvykreslen pro konkrétní uživatelské agenty, tedy uživatele a roboty. Pokud se nejedná o známého uživatelského agenta, nebo jde o něco, co není známo, spustí prohlížeč uživatele JavaScript, aby získal vykreslený HTML, ale stále těží z výhod vykreslování na straně klienta, které často zahrnuje vnímané zvýšení rychlosti. Pokud je však klientem bot, pak se k poskytování plně vykresleného HTML použije prohlížeč vykreslování na straně serveru.
►Díky dynamickému vykreslování mohou majitelé stránek poskytovat svůj obsah bez ohledu na možnosti JavaScriptu klienta a zároveň obě strany mohou optimalizovat svůj tok, aby lépe sloužil uživatelům nebo robotům, aniž by to ovlivnilo tok druhé strany.
Všechno má své chyby
Byť by se mohlo zdát, že dynamické vykreslování je tedy něčím, co je naprosto perfektním, musíme vás zklamat. Ani ono není dokonalé a jsou s ním spojeny nejrůznější komplikace – nejčastěji z hlediska maskování. Z obecného hlediska je každému uživateli jasné, že udržování dvou toků v chodu, tedy jak na straně klienta, tak na straně serveru, s sebou nese více práce a více složitostí (musíme udržovat dva toky, dvě sady logiky, ukládání do mezipaměti, další složité systémy atd.). Nesmírně důležité však je zachovat paritu mezi tím, co poskytujete robotům, a tím, co poskytujete uživatelům, a také musíte auditovat problémy, které by tuto paritu mohly narušit (pro provedení auditu můžete vyzkoušet nástroj Screaming Frog, který vám umožní porovnat dvě procházení a identifikovat potenciální problémy).
Kontrolu můžete provést i následujícím způsobem:
- Proveďte vizuální kontrolu přepnutím uživatelského agenta v prohlížeči a/nebo vypnutím JavaScriptu, abyste zjistili, zda se mezi verzemi něco změnilo.
- Použijte Google Search Console, pomocí kterého zjistíte, jaký typ kódu HTML je vrácen Googlu a jak jej dokáže vykreslit.
- Využít můžete i nejrůznější testovací nástroje, jako je Schema.org.
Rada na závěr aneb Co doporučuje Google?
Společnost Google preferuje a doporučuje dynamické vykreslování. Google totiž zajímá, jestli jsou důležitá fakta mezi oběma verzemi stejné. Těmi důležitými fakty je především SEO: obsah, nadpisy, meta tagy, interní odkazy, navigační odkazy, nadpis, kanonické značení strukturovaných dat, obsah, obrázky atd. Pro Google je nesmírně důležité, aby důležité bylo totožné – pokud zachováte totožný především obsah a metatagy, bude Google spokojen.
Zdroj: marketingland.com, facebook.com, cpcstrategy.com
Autor: Vlastimil Malík
Foto zdroj: pixabay.com
