Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Vyhledávače a JavaScript

3,790 views

Published on

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.

Published in: Technology
  • http(s) requesty nejsou state-less → roboti používají cookies - alespoň ten od seznamu ano :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Vyhledávače a JavaScript

  1. 1. Vyhledávače  a  JavaScript   Jan  Tichý   !chy@medio.cz  
  2. 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. 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. 4. Na  co  se  zaměřit?   •  Indexace  stránky   •  Průchodnost  webu  
  5. 5. Indexace  stránky  
  6. 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. 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. 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. 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. 10. Průchodnost  webu  
  11. 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. 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. 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. 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. 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. 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. 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. 18. Díky  za  pozornost!   •  Prezentace:  slideshare.net/mediocz   •  Twi^er:    @jan!chy     •  E-­‐mail:    !chy@medio.cz          

×