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.
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