Budú vyhľadávače a JavaScript niekedy priateľmi?

Na súčasných weboch môžete nájsť niekoľko typov obsahu – texty, obrázky a videá a tiež čoraz využívanějšie komplexné aplikácie a interaktívne funkcie, ktoré vám denne bežia v prehliadači. A práve tie fungujú pomocou JavaScriptu. Ako to vnímajú vyhľadávače? Kedy by ste sa mali o JavaScript SEO zaujímať?

Java Script SEO
Java Script SEO

Na súčasných weboch môžete nájsť niekoľko typov obsahu – texty, obrázky a videá a tiež čoraz využívanějšie komplexné aplikácie a interaktívne funkcie, ktoré vám denne bežia v prehliadači. A práve tie fungujú pomocou JavaScriptu. Ako to vnímajú vyhľadávače? Kedy by ste sa mali o JavaScript SEO zaujímať?

JavaScript – asi každý o ňom niekedy počul. Ide o skriptovací jazyk, ktorý slúži na tvorbu interaktívnych webových stránok. Využíva sa na vytváranie jednoduchých animácií a aj zložitých aplikácií a akcií. 

Táto kalkulačka od Lidlu je kompletne vytvorená JavaScriptom.

Opakovanie je matka múdrosti

Najskôr si trochu pripomenieme indexáciu. Potom sa pozrieme na to, ako robot spracováva JavaScript a kde môžete naraziť na kameň úrazu. 

Indexácia

Indexácia sa dá jednoducho opísať ako ukladanie jednotlivých URL adries do databázy počas toho, ako robot prechádza web. Súbor stránok, ktoré sú pre vás dôležité a chcete byť na nich videný, sa označuje ako index.

Mali by tu byť iba tie podstatné stránky. Snažte sa preto čas, ktorý robot crawlovaniu webu venuje, čo najlepšie zúročiť. Nebojte sa využiť aj odoberanie stránok z indexu.

Indexácia a spracovanie JavaScriptu vyhľadávačom Google

Prichádza otázka, ktorá asi zaujíma všetkých najviac. Vie Google spracovať a zaindexovať javascriptové weby? Áno! Ponúkajú sa 3 spôsoby, ako vyhľadávaču JavaScript naservírovať:

  1. Necháte to na vôli vyhľadávača
  2. Server side rendering 
  3. Dynamic rendering

Každý zo spôsobov má svoje výhody aj nevýhody. A pretože je téma renderovania webu dosť obsiahla, jednotlivé spôsoby rozoberieme len okrajovo.

1. Nechajte to na vyhľadávači

Tento spôsob využijete v prípade, že SEO „toľko neriešite“. Nie ste teda obrovský e-shop so stotisícmi URL adries. Existujú základy, ktoré je však dôležité mať postavené dobre a správne. 

SPRACOVANIE JAVASCRIPTU

Keď Googlebot narazí na JavaScript, začína sa trochu iný postup indexácie, ako to bolo v prípade klasických jednoduchých stránok. Spracovanie JavaScriptu zahŕňa 3 hlavné fázy:

  • Crawling (prechádzanie)
  • Rendering (vykreslovanie), z ktorého získa ďalšie URL adresy
  • Indexácia
Zdroj: https://developers.google.com/search/docs/guides/javascript-seo-basics

Je nutné povedať, že Googlebot nekliká ani nescrolluje. Príde na odkaz, stiahne URL a zase odíde. Prichádza bez cookies a s prázdnou local storage. 

Ako môžete vidieť na obrázku, pri crawlovaní stránky s JavaScriptom sa proces indexácie trochu predlžuje – robot musí najskôr stránku stiahnuť zo zdrojového kódu, vykresliť ju, získať odkazy na dalšie URL a zaradiť ich do rady (render queue). Prejde ju, vykreslí, získá ďalšie odkazy a tak stále dookola. Až potom stránky indexuje. 

Pri veľkých weboch môže predlžovanie spôsobiť ťažkosti s crawl budgetom. Môže tak dôjsť k tomu, že robot váš web opustí, pretože už vyčerpal čas a neindexuje stránky, ktoré sú pre vás dôležité. A to je iba prvý problém. Google nestíha renderovať a indexovať veľké weby, nevie niektoré javascriptové funkcie spustiť sám a renderovanie môže trvať aj týždne. 

Oveľa pohodlnejšia pre vás bude tabuľka, ktorá pekne opisuje, čo Google dokáže zaindexovať a čo nie.

Zdroj: Jaroslav Hlavinka

2. Server side rendering

Server side rendering (SSR) funguje na princípe izomorfného JavaScriptu. Izomorfný JavaScript alebo aplikácia kombinuje výhody SPA (single page application) a MPA (multi-page application). Vo výsledku to znamená, že ste schopní spúšťať rovnaký kód na serveri aj vo vašom počítači.

AKO SERVER SIDE RENDERING PREBIEHA?

  1. Prvú požiadavku dostane kompletný HTML (titulok, obsah, popis – proste všetko textové), všetci dostanú to isté
  2. Ľuďom sa po načítaní HTML spustí JavaScript. Pomocou JavaScriptu sa stránky „oživia“, čokoľvek človek na webe potom robí, spúšťa sa cez API požiadavka na server a URL sa mení pomocou AJAX+ pushState
  3. Vyhľadávač dostal potrebné informácie v HTML a je spokojný

Pre väčšinu webov je SSR najlepšia voľba. Existujú už zabehnuté procesy, ako by všetko malo fungovať a ako by sa to malo správať. Výhodou SSR je, že ľudia aj roboti získajú obsah aj bez JavaScriptu. Máte teda takmer 100 % istotu, že sa všetko potrebné dostane k vyhľadávačom. Nevýhodou je potreba na serveri renderovať obsah pre obe strany – ľudí aj robotov. Ak nepoužívate cache, prvý request býva dosť pomalý. Takže používajte cache!

3. Dynamic rendering

Ak máte javascriptový web s miliónmi URL adries, prípadne veľký spravodajský web, tak je pre vás dynamic rendering trefa do čierneho. Tento typ renderovania funguje na princípe detekcie vyhľadávača a užívateľa. V skratke – každému poskytuje niečo trochu iné.

AKO DYNAMIC RENDERING PREBIEHA?

  1. Zistíte si na serveri, že pre stránku prišiel robot (napríklad pomocou user agenta). 
  2. Podľa toho sa môžete zachovať inak k ľuďom a inak k robotom. Ľuďom môžete poslať JavaScript, aby sa im v prehliadači vykreslila webovka správne a plnohodnotne.
  3. Robotom posielanie odkloníte, pošlete im iba statické HTML bez všetkých (Java)scriptov.
  4. Roboti budú spokojní a užívatelia tiež.

Ako renderovať?

  • Puppeteer
  • Rendertron 
  • Vlastné riešenie s PhantomJS, JSDOM, Chrome Headless
  • Prerender.io, PhantomJS as a service

Pozor na maskovanie

Dynamic rendering by sa dal ľahko zneužiť k maskovaniu (cloaking), keďže môžete poskytnúť iný obsah používateľovi a iný vyhľadávaču. Ak to bude len v malej miere, Google to nebude považovať za maskovanie. Problém nastáva vo chvíli, keď ľuďom pošlete stránku s jablkami a vyhľadávačom s hruškami.

SSR a Dynamic rendering majú veľa spoločného

Tieto metódy zvládajú nielen vyhľadávače Google, Zoznam, Bing, ale aj sociálne siete (Facebook, Instagram, Pinterest a pod.). V tom majú oproti „ponechaniu“ na robotovi navrch.

7 pravidiel indexácie javascriptových webov podľa Jaroslava Hlavinku

Google vie zhruba od roku 2015 spracovať JavaScript. To však neznamená, že je to štandard. Pre prepracovanejšie javascriptové weby stále platí, že potrebujú lásku a starostlivosť. Na nedávnom školení o technickom SEO od Jaroslava Hlavinku a Pavla Ungra ste sa mohli dozvedieť o 7 pravidlách, ktoré je dobré dodržiavať, ak túžite po hladkom zaindexovaní stránok vášho webu.

1. Každý dôležitý stav aplikácie má vlastnú URL

Kedykoľvek bude používateľ prechádzať web, je potrebné, aby sa menila URL adresa. Ide o:

  • Výpisy
  • Detaily (produktov)
  • Stránkovanie
  • Filtrácia
  • A v niektorých prípadoch aj hľadanie (tu však prosím s uvážením, všetko sa dá obmedziť pomocou robots.txt)

Predstavte si to napríklad na vyberaní parametrov nového mobilu. Kedykoľvek zmeníte v ponuke značku alebo napríklad rozlíšenie fotoaparátu či konkrétny model, URL adresa by sa mala zmeniť. Ideálnym tvarom je URL bez zbytočných parametrov (#,& a pod.)

Kedy, naopak, nemať vlastnú URL

  • V prípade, že máte na webe použité rozbaľovacie menu, ktoré sa prejaví po nabehnutí myšou.
  • Pri zobrazovaní skrytého obsahu, ktorý nie je dôležitý a chcete, aby sa používateľovi zobrazil až na jeho vlastné vyžiadanie.

2. Odkazy na stránke sú jasne viditeľné

Vyhľadávače skrátka potrebujú spoznať, že ide o odkaz. Najlepším možným riešením je staré dobré HTML v podobe <a href=”url-adresa”>. Google dokáže prečítať aj  <map><area href=”url-adresa”>, ale lepšie je klasické <a href=”url-adresa”>. Pri kliku na odkaz stopnite akciu a obslúžte ju JavaScriptom. V neposlednom rade je dobré spomenúť, že treba odkazovať na kanonickú URL. 

Čo vám vyhľadávače neprejdú?

  •  <#>
  • onClick (navigate alebo v kombinácii so span)
  • <svg><polygon>
  • Formuláre

3. Stop nekonečnému stránkovaniu

Nekonečné stránkovanie, teda infinite alebo endless scrolling, môže na webe narobiť poriadne nepríjemnosti. Ide o lazy loading obsahu, ktorý sa načíta až vaším scrollovaním. Môže to mať výhody, vo svojej podstate to má však oveľa viac nevýhod.

  • Používateľ v snahe nájsť, čo hľadá, preletí veľkú časť obsahu bez povšimnutia.
  • Často nemáte šancu dostať sa na pätu webu, kde sú umiestnené dôležité informácie (kontakt, formuláre na stiahnutie, otváracie hodiny a pod.)
  • Môže sa stať, že sa prekliknete inde a budete sa chcieť vrátiť späť na pôvodnú stránku, ktorá sa však načíta infinite scrollingom. Na posledné miesto vo vašom scrollování sa už nevrátite.
  • Ak bude načítanie pomalé, používateľ to môže vzdať a odíde. Postupným načítaním sa totiž môže vytvoriť poriadne dlhá stránka.

Ideálnym riešením je mať nekonečné stránkovanie dobre ošetrené. Na koniec výpisu pridajte skrytý odkaz na predchádzajúcuďalšiu stránku, aby to infinite scrolling vyhľadávač prešiel. Môže to vyzerať takto nejako: <a href=“/3“>Ďalší</a>. Nezabudnite po načítaní novej stránky opäť zmeniť URL /3, keďže ste menili stav.

4. Posielajte správne HTTP kódy

SPA (single page application) máva logiku stavov aplikácie, ale aj chýb na strane klienta. Vy ich potrebujete dostať zo strany klienta na server a predložiť ich vyhľadávačom.

5. Neblokujte zbytočne robotom prístup k JS, CSS a API

Typicky ide o zákazy v robots.txt, ktoré bývajú zle ošetrené. Za vidinou jednoduchšieho a rýchlejšieho spracovania sa tvoria zákazy prechádzania, ktoré však môžu spôsobiť robotom problémy. Musíte robotovi dovoliť, aby si sám vyrenderoval URL adresy, ktoré chce prechádzať a indexovať. 

User agent: *

Dissallow: /​​css

Dissallow: /​​js

Príklad, ako by nemal zákaz prechádzania vyzerať.

6. Presmerovávajte správne 

Na trvalé presmerovanie používajte stavový kód 301. Kód 301 musí byť odoslaný zo servera dostatočne dlho predtým, ako prehliadač vykoná JavaScript. Dajte si pozor tiež na zacyklené presmerovávanie. Každým ďalším a ďalším presmerovaním sa naťahuje čas načítania.

7. Testujte, testujte, testujte

Rada na záver znie – testujte všetko, čo sa dá.

  • Typové stránky (kategórie, produkt, blogový príspevok)
  • Používajte nástroj URL inspector v Google Search Console
  • V mobile friendly teste od Google Search Console (problémy s načítaním stránky)

Kedy by ste mali venovať pozornosť JavaScriptu z hľadiska SEO?

Možno si ani nedokážete predstaviť, ako veľmi JavaScript využívate. Skúste ho pomocou doplnku prehliadača s názvom Web developer vypnúť. Možno vás prekvapí, koľko vecí nebude fungovať a koľko prvkov sa vôbec nezobrazí.

 

Čo je problém?

Niektoré nedostatky sú väčší problém než iné. Medzi najväčšie problémy patria nasledujúce situácie:

  • Stránka vôbec nefunguje (biela stránka). 
  • Stránka neobsahuje určitú časť obsahu, ktorý chcete mať v indexe.
  • Neobsahuje odkazy vedúce na podstránky, ktoré chcete mať v indexe.

Čo, naopak, nie je taký problém?

  • Atraktívnejší dizajn a vizuálna stránka webu. Samozrejme, za predpokladu, že to nebude na úkor obsahu. 
  • Generovanie fotografií a obrázkov, ktoré nechcete v indexe.
  • Používateľské funkcie – kalkulačky, prevodníky a pod. Robot tiež nevie klikať, takže vykresľovanie tohto prvku pomocou JavaScriptu ničomu neprekáža. 

Pozrime sa na príklad, keď je úplne v poriadku, že po vypnutí JavaScriptu niečo nefunguje. Na portále www.hypokalkulacka.sk si môžete spočítať najvýhodnejšiu hypotéku. Do kalkulačky zadávate rôzne parametre – výšku splátky, cenu nehnuteľnosti, čas splácania.

Bez JavaScriptu je kalkulačka nefunkčná, odkazy pod ňou však fungujú. A to je dôležité.

Nenechávajte všetko na vyhľadávače

Keby ste si na záver postavili do jednej rady 3 spôsoby poskytovania JavaScriptu, na plnej čiare by vyhral server side rendering. Hneď za ním by bol dynamic rendering. Poskytnú vám väčšiu istotu, že vyhľadávač JavaScript prelúska a zaindexuje.

S postupným rozvíjaním rankbrainu a vylepšovaním algoritmov vyhľadávačov je technická stránka webu to jediné, čo dokážeme s istotou ovplyvniť. Hoci sa budete SEO venovať roky, vyhľadávače aj tak vždy prídu s novinkou, ktorú sa dozviete s určitým časovým oneskorením.

Na záver by som rada poďakovala Jardovi Hlavinkovi, ktorý je v problematike javascriptových webov ako ryba vo vode. Všetky moje vedomosti sa opierajú práve o know-how, ktoré som si odnesla z jeho obsiahleho školenia.

11. 03. 2022