Většina dnešních webových stránek využívá JavaScript, který jim dodává dynamiku a interaktivitu. Přestože vyhledávací roboti dosáhli značné inteligence, nemusí být schopni správně interpretovat veškerý obsah generovaný JavaScriptem, což může mít negativní dopad na hodnocení webové stránky.
Způsob, jakým je kód na vašem webu vykreslován, má zásadní vliv na to, jak je s obsahem JavaScriptu nakládáno.
Například při takzvaném server-side renderingu (vykreslování na straně serveru) server sám o sobě generuje a poskytuje obsah webu. Prohlížeč pak obdrží kompletní HTML kód na základě svého požadavku.
Naopak, při client-side renderingu (vykreslování na straně klienta) je JavaScript zodpovědný za vykreslení obsahu v prohlížeči pomocí DOM (Document Object Model).
Existuje ještě třetí varianta, a to dynamické vykreslování. V tomto případě je obsah pro prohlížeč generován na straně klienta, zatímco obsah určený pro vyhledávače je vykreslován na straně serveru.
Použitá technika vykreslování má přímý dopad na to, jak je JavaScript interpretován, a tím ovlivňuje i hodnocení webových stránek.
Aby byl veškerý JavaScript na vašem webu správně zpracován, je klíčové dodržovat osvědčené postupy v oblasti SEO pro JavaScript. Než se však do nich pustíme, pojďme si ujasnit, co vlastně JavaScript SEO znamená.
Co je to JavaScript SEO?
JavaScript SEO se zaměřuje na to, aby vyhledávače mohly efektivně procházet a indexovat JavaScriptový kód, tedy dynamický obsah, na webových stránkách. Vyhledávače, jako je Google, zpracovávají JavaScript ve třech klíčových krocích: procházení, vykreslování a indexování. Aby Google tyto procesy zvládl, musí být obsah generovaný JavaScriptem SEO-friendly, tedy viditelný a snadno dostupný.
Jak Google zpracovává JavaScript na stránce?
Zde jsou kroky, které Googlebot podniká při zpracování JavaScriptu:
- Načte URL adresu z fronty procházení prostřednictvím HTTP požadavku.
- Zkontroluje soubor robots.txt, zda neobsahuje URL, které web zakazuje procházet.
- Přeskočí „zakázané“ URL, analyzuje odpovědi pro ostatní adresy a přidá je do fronty procházení.
- Stránky zařadí do fronty pro vykreslení, kromě těch, které jsou označeny jako neindexovatelné.
- Použije Chromium k vykreslení stránky, spustí JavaScript a indexuje stránku.
- Znovu analyzuje vykreslené HTML pro nalezení odkazů.
- Přidá nově nalezené URL adresy do fronty pro procházení.
Kdy Google neindexuje obsah JavaScriptu?
Google je schopen indexovat JavaScript, pokud je správně implementován. Například, pokud jsou některé vaše JS a CSS soubory blokovány, Google nemusí být schopen web správně prozkoumat. Podobně, pokud máte odkazy v surovém HTML kódu, které nejsou přítomny ve vykresleném HTML, Google je může přeskočit při procházení nebo indexování.
Pokud JavaScript není přímo vložen v HTML kódu, Google musí soubor stáhnout a spustit. Vyhledávače mohou také mít verzi webové stránky uloženou v cache (pro lepší výkon), a JavaScript na této stránce nemusí být vždy synchronizován s aktuální verzí.
Vzhledem k tomu, že je potřeba přečíst každý kus JavaScriptového kódu, nadměrné používání JavaScriptu může zpomalit načítání stránky nebo způsobit chyby z důvodu vypršení časového limitu.
Proč je JavaScript SEO důležité?
JavaScript SEO je klíčové, protože ovlivňuje mnoho aspektů webové stránky a hodnotících faktorů, které vyhledávače (například Google) zohledňují pro SEO:
| Prvek na stránce | Potenciální problém se SEO | Možné SEO řešení |
| Vykreslený obsah | Vyhledávače (jako Google) nemusí být schopny vykreslit váš web, pokud jsou jeho zdroje blokovány v souboru robots.txt. Stejně tak Google nemůže indexovat JS a CSS soubory, které jsou blokované nebo skryté. | Omezte JavaScript v klíčovém obsahu stránky a upřednostňujte alternativní přístupy k vykreslování, jako je vykreslování na straně serveru, dynamické vykreslování, nebo hybridní vykreslování (kombinace vykreslování na straně klienta a serveru). |
| Odkazy | Pokud jsou některé odkazy interní, nebo pokud JavaScript generuje odkazy na URL až po kliknutí uživatele, Google takové odkazy nemusí objevit. | Používejte odkazy s atributem href a popisnými texty odkazů. Pseudo-odkazy jako tagy
a nejsou prohledávány.
|
| Metadata | Pokud web nepoužívá balíčky Node.js jako vue-meta, vyhledávače mohou u každého pohledu nebo stránky procházet stejná, nebo dokonce žádná metadata. | Používejte balíčky Node.js jako response-helmet, vue-meta, nebo respond-meta-tags. |
| Líně načtené obrázky | Vyhledávací roboti nezpracovávají obsah označený pro líné načítání, protože nejsou schopni posouvat stránku. | Využijte IntersectionObserver API, které rozumí viditelnosti a poloze prvků DOM, jakmile jsou k dispozici. Můžete také použít nativní funkci líného načítání prohlížeče (Chrome). |
| Doba načítání stránky | Stránka s velkým množstvím JavaScriptu se může načítat pomalu, což může negativně ovlivnit její hodnocení ve vyhledávání. | Vložte kritický kód JS do kódu HTML a odložte načítání nekritického kódu JS, dokud není vykreslen hlavní obsah. Tím snížíte celkové množství JS kódu. |
Doporučené postupy pro JavaScript SEO
Dodržováním následujících osvědčených postupů můžete vyhledávačům usnadnit procházení a vykreslování vašich stránek:
Přidávejte odkazy a obrázky podle standardů
Používejte k vytváření odkazů tag <a href> místo onclick, #pageurl nebo window.location.href=’/page-url‘. Google takto vytvořené odkazy snadno prochází a sleduje.
<a href="http://etechblog.cz.com">Vítejte v geek světě</a>
Podobně používejte pro vkládání obrázků tag <img src> místo <img data-src>:
<img src="myimg.png" />
Upřednostňujte vykreslování na straně serveru
Ujistěte se, že je obsah vašeho webu dostupný na serveru, nejen v uživatelském prohlížeči.
Zkontrolujte, zda vykreslený HTML obsahuje veškerý důležitý obsah
Vykreslený HTML by měl mít správný název stránky, meta roboty, meta popisy, obrázky, strukturovaná data a kanonické značky.
Optimalizace JavaScriptového webu pro SEO
Chcete-li otestovat, jak je na vašem webu implementováno JavaScript SEO, můžete provést následující kroky:
- Zjistěte, kolik JavaScriptu váš web využívá: Jednoduše deaktivujte JavaScript v prohlížeči. Pokud se vám zobrazí pouze malá část obsahu, váš web je na JavaScriptu do značné míry závislý.
- Ověřte, zda Googlebot získává veškerý důležitý obsah a značky: Využijte Nástroj pro testování použitelnosti v mobilech od Googlu nebo nástroj pro testování rozšířených výsledků. Tyto nástroje vám pomohou zjistit, jak Googlebot zpracovává surový HTML kód k vykreslení obsahu.
- Můžete použít rozšíření pro Chrome jako Zobrazit vykreslený zdroj. S jeho pomocí pochopíte, jak JavaScript mění stránku, a můžete porovnat zdrojový HTML s vykresleným HTML.
- Zkontrolujte důležité značky (titulek, meta popis atd.) ve vykresleném HTML pomocí rozšíření SEO Pro Chrome.
Závěr
V tomto článku jsme si rozebrali, jak může JavaScript komplikovat zpracování SEO a jak řešit případné problémy, které jsou způsobeny nadměrným používáním JavaScriptu ve vašem kódu.
Také jsme se seznámili s osvědčenými postupy a nástroji, které vám pomohou optimalizovat váš web postavený na JavaScriptu pro SEO. Další skvělé nástroje, které pomáhají Googlu lépe rozpoznat a procházet váš dynamický obsah, jsou Prerender, AngularJS a Huckabuy.
Můžete se podívat i na další tipy, jak zrychlit načítání webových stránek.
Bavilo vás čtení tohoto článku? Tak ho sdílejte se světem!