SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
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.
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.
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
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