Oblíbená webová řešení, od jednostránkových webů až po tzv. SPA - single-page aplikace, naráží na všelijaká úskalí jak z pohledu SEO, tak při nastavování webové analytiky. Jak ošetřit, aby vyhledávací roboti našli a oblíbili si všechny informace, které potřebujete? Nebudeme procházet kódy a skripty, ale hlavní oříšky, na které si jako zadavatelé nebo projektoví manažeři musíte při tvorbě webů dát pozor.

1. PAVEL „MARI“ MARTINOVSKÝ
H1.CZ
SEO & UX a tak vůbec…

2. Informace, na kterých
můžete opravdu stavět.
JAK NA STAVBU
WEBU

3. BUDEME SI
ROZUMĚT
Nebojte se, přednáška
není primárně pro
specialisty z oboru.

4. ZÁKLADNÍ PRAVIDLA
1 Každý relevantní obsah by měl mít svoji URL
2 Robot se musí o této URL dozvědět
3 Robot musí mít možnost si stránku vykreslit a stáhnout obsah
4 Najděte si někoho, kdo robotům rozumí ☺
#pstreda @marinakcz

5. ZÁKLADNÍ PRAVIDLA
Když při vývoji webu nezapomenete na roboty,
nezapomenou oni na vás.
#pstreda @marinakcz

6. KONEC

7. 2 Jednostránkové weby
1 Postupné donačítání stránky
3 Záložky na webu
4 Modální okna (lightboxy)
5 Weby postavené „na javascriptu“
DÁME SI
TO JEŠTĚ
JEDNOU
Ale jinak…
#pstreda @marinakcz
6 Progressive Web Application (PWA)

8. NEKONEČNÁ STRÁNKA
stranka=1
stranka=2
stranka=3
• Unikátní URL
pushState/replaceState
www.priklad.cz/kategorie?stranka=1
• Ošetření stránkování
rel = next a rel = prev
nofollow, noindex
• Funkční bez JS

9. NEKONEČNÁ STRÁNKA
stranka=1
stranka=2
stranka=3
<a href="/kategorie?stranka=2">Načíst další</a>

10. /sluzby
/kontakty
JEDNOSTRÁNKOVÝ WEB
• Unikátní URL
pushState/replaceState
www.priklad.cz/sluzby
• Vlastní tagy
Title
Description
H1
• Rozdíl!
/#stranka
/stranka#kotva1

11. ZÁLOŽKY
• Desktop
Google indexuje skrytý text, ale může mít menší váhu = nižší pozice ve vyhledávání.
Dokázáno SEO testem agentury Reboot.
I obsah v záložce může mít svoji URL!
• Mobil (Mobile First)
Skrytý text má stejnou váhu jako neviditelný text.
• V první řadě myslete na uživatele
Důležitý text nikdy neschovávejte.
Využívejte navigaci napříč obsahem (např.: sticky menu).
#pstreda @marinakcz

12. MODÁLNÍ OKNA
<link rel="canonical" href="https://www.priklad.cz/produkt-123">
www.priklad.cz/produkt-123
<link rel="canonical" href="https://www.priklad.cz/produkt-123">
www.priklad.cz/kategorie/?modal=produkt-123
Ne všechna modální okna musí být průchozí
a indexovatelná!

13. JAVASCRIPTOVÉ FRAMEWORKY
#pstreda @marinakcz

14. JAVASCRIPTOVÉ FRAMEWORKY
#pstreda @marinakcz
Technologie ≠ SEO

15. PROGRESSIVE WEB APPLICATION (PWA)
#pstreda @marinakcz

16. PROGRESSIVE WEB APPLICATION (PWA)
#pstreda @marinakcz
http://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/The-2017-US-Mobile-App-Report

17. PROGRESSIVE WEB APPLICATION (PWA)
#pstreda @marinakcz

18. PROGRESSIVE WEB APPLICATION (PWA)
#pstreda @marinakcz
• Vyšší míra zapojení (mobile app > mobile web)
• Bez instalace
• PWA se tváří jako nativní
• Offline
• Push notifikace
• Home Screen
• Jeden vývoj pro Android a iOS
• …
https://developers.google.com/web/progressive-web-apps/

19. KONEC

20. Děkujeme za
pozornost!
Pavel „Mari“ Martinovský
Online Marketing Consultant & UX Designer
@marinakcz