Vyhledávače a JavaScript

1. Vyhledávače a JavaScript Jan Tichý !chy@medio.cz

2. Proč by měl vyhledávače JS zajímat •  Protože web už dnes není jen HTML s troškou nevýznamných skriptů pro obveselení uživatelů •  Fulltext lépe porozumí tomu, co vidí uživatelé •  Dostane se k zajímavému obsahu – deep web •  Získává dodatečné faktory pro řazení •  Lépe pozná mobilní web •  Snáze odhalí podvody a nekalé prak!ky

3. A zajímá skutečně vyhledávače? •  Google –  Rozpoznání základních JS konstrukcí ve zdrojáku –  2009 – HashBang –  2011 – indexování vybraného JS obsahu –  2014 – spouštění skriptů na stránkách •  Seznam –  2014 – HashBang •  Nejde jen o fulltexty! –  Facebook, Twi^er, PPC systémy, záložky a historie…

4. Na co se zaměřit? •  Indexace stránky •  Průchodnost webu

5. Indexace stránky

6. Pokročilost indexace stránek •  Indexace čistě HTML stránek –  Stále i dnes plab pro Facebook, Twi^er, PPC systémy… •  Rozpoznání známých konstruktů ve zdrojáku –  document.write, loca!on.href •  Ad hoc indexace vybraného JS obsahu –  Facebook diskuze •  Spouštění skriptů, vykreslování stránek –  Fulltext vidí skutečnou podobu stránek –  Skryté texty či bloky, překryvy, míra reklamy –  Rychlost načítání a vykreslování stránky –  Mobilní či responzivní verze

7. Jak podpořit indexaci stránky? •  Být maximálně konzerva!vní – Nejavascriptový indexovatelný HTML základ – Javascript mít jako „nice-‐to-‐have“ vrstvu nad bm – Hlavně kvůli Seznamu, Facebooku, PPC… •  Na druhou stranu: – Nechat crawler, ať si spoušb JavaScript a CSS – Neblokovat externí skripty a styly v robots.txt – Nepodsouvat cloakingem nejavascript verzi

8. Další poznámky k indexaci stránky •  JS se spoušb při renderování, ne událos! – Inﬁnite scroll není zpravidla součásb stránky •  HTTP dotazy crawlera jsou zabm state-‐less – Nepracuje s cookies ani jinými klientskými uložiš! •  Client-‐side JS frameworky dělají často bordel – Házejí crawleru klacky pod nohy – Masivní duplicity, divoká či neindexovatelná URL

9. Dynamicky načítaný obsah (AJAX) •  Donačítané boxy, inﬁnite scroll… •  Z pohledu vyhledávače de facto další stránka •  Musíte to tak také chápat! •  Čili další obsah = další indexovatelná URL

10. Průchodnost webu

11. Tři pravidla průchodnosN webu 1.  Každý obsah musí mít svou URL 2.  Robot musí umět obsah z dané URL stáhnout 3.  Robot se o této URL musí nějak dozvědět

12. Každý obsah musí mít svou URL www.medio.cz/zamestnani www.medio.cz/?stranka=zamestnani www.medio.cz/#zamestnani www.medio.cz/#!/zamestnani •  Z pohledu vyhledávačů 1 URL = 1 „stránka“ •  Dynamické načítání obsahu s pomocí AJAXu –  Inﬁnite scroll, zpožděné bloky textu –  I ty musí mít svou vlastní další URL •  Uživatel by měl vždy vidět tu správnou aktuální URL –  Odkazy, loca!on.href, history.pushState()

13. Robot musí umět stáhnout obsah h^p://www.medio.cz/zamestnani h^p://www.medio.cz/?stranka=zamestnani •  Žádný problém – normálně crawlovatelné •  Pro dynamický obsah AJAXem se toho dosáhne jedině přes pushState

14. Robot musí umět stáhnout obsah h^p://www.medio.cz/#zamestnani •  Neindexovatelný obsah! •  Mřížku využívá spousta JS frameworků •  Uživatelům vše funguje OK, mají JavaScript •  Při nejavascriptovém základu pod bm problém s chybným cílením zpětných odkazů •  Dá se využít třeba u e-‐shopů pro odlišení ﬁltrů, které chci a které nechci indexovat

15. HashBang •  Crawlovatelné, musí být ale explicitní podpora na straně vyhledávače i samotného webu: h^p://www.medio.cz/#!/zamestnani h^p://www.medio.cz/?_escaped_fragment_=/zamestnani <meta name="fragment" content="!"> •  h^ps://developers.google.com/webmasters/ajax-‐crawling/ •  h^p://napoveda.seznam.cz/cz/ajax-‐indexace.html

16. Robot se o URL musí dozvědět •  Starý dobrý A HREF ve zdrojáku •  Metahlavičky – link (prev, next, canonical…) •  Sitemap.xml •  Ruční submit •  document.loca!on •  …

17. Poznámky k průchodnosN •  Nejen průchodnost, ale i rank – Silně preferujeme staré dobré odkazy •  Necrawlují se zpravidla obsah a odkazy generované až po vyrenderování stránky – Inﬁnite scroll – Musí se doplnit skrytými odkazy

18. Díky za pozornost! •  Prezentace: slideshare.net/mediocz •  Twi^er: @jan!chy •  E-‐mail: !chy@medio.cz

Vyhledávače a JavaScript

Taste Medio

Vyhledávače a JavaScript