Vyhledávače a JavaScript
•
2 j'aime•4,486 vues
Kde jsou hranice užití JavaScriptu, aby vyhledávačům nevadil? Jak udělat průchozí stránky pro vyhledávače? Co vyhledávače a Ajax? Jaký je rozdíl mezi Googlem a Seznamem v procházení a spouštění JavaScriptu? Je infinite scroll zlo? Prezentace z dubnového setkání SEO Logger.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Vyhledávače a JavaScript
Similaire à Vyhledávače a JavaScript (20)
Plus de Taste Medio
Plus de Taste Medio (20)
Vyhledávač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
- 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! – Infinite 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, infinite 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 – Infinite 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í filtrů, 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 – Infinite 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