Během přednášky jsme se snažili poukázat, že všichni máme často klapky na očích a vidíme pouze ten náš obor. Ukazovali jsme pár tipů a triků, které jsou z naší strany jednoduché a potřebné a často se s nimi u klientů nesetkáváme.

1. Jak nám vývojáři hážou
klacky pod nohy?
Martin Žatkovič

2. Martin Žatkovič – @zatkoma
• SEO is love, SEO is life
• Špetka UX, webové analytiky a e-commerce
• Zakladatel Marketingové Plzně
• Čerstvě dostudovaný středoškolák
• 4 roky zkušeností v online světě
Martin Žatkovič
SEO konzultant

3. Kontroverzní přednáška
Ale zas tak žhavé to nebude

4. „Vývoj je důležitější než nějaké SEO.“

5. 1/10

6. Naše úkoly jsou na
projektech minimální!

7. Martin Žatkovič – @zatkoma
Co je SEO?
Jde o soubor metod optimalizace webu, které mají za cíl
přivést na něj co nejvíc návštěvníků z organického
vyhledávání (Google, Seznam).
Soubor metod – aktivity, které se provádí
Přivést – být vidět nejlépe na 1. stránce
Co nejvíc – být vidět na relevantní klíčová slova
Organické vyhledávání – jde o marketingový kanál
Google, Seznam – Šikovný a nešikovný

8. Martin Žatkovič – @zatkoma
Co se v SEO řeší?
Co se v SEO řeší?
Technikálie Zpětné odkazyObsah
Backend
Frontend
Server
Unikátnost
Kvalita
E-A-T
Relevance
Kvalita
A další…

9. Martin Žatkovič – @zatkoma
Kde se něco dozvědět?
• 📃 SEO Audit – návod na komplexní analýzu webu
• 🎓 Školení: Technické SEO nejen pro vývojáře
• 📕 Ochutnejte technické SEO by Taste
• 📈 Oficiální nápověda Google (česky)
• 🐦 Twitter (@MarketingMiner, @neologyc, @PavelUngr,
@LinkiCZ, @Collabim_cz, @filippodstavec)

10. Martin Žatkovič – @zatkoma
SEO a Frontendisti
• Filip Podstavec – Vyhledávače a skrytý obsah
• Pavel Ungr – Filtrace pro vyhledávače
• Milan Kryl – Pěkné URL

11. Martin Žatkovič – @zatkoma
SEO a frontend
• Procházení stránek webu
• Skrývání obsahu
• Filtrace a stránkování
• schema.org a strukturovaná data
• Popups
• Rychlost načítání stránek
• Obrázkové SEO
• Super sexy JavaScripty
• Mírumilovný vývoj

12. Myslete na uživatele
SEO neděláte pro vyhledávače

13. Procházení webu a
indexace

14. „Ale ten vyhledávač stránku navštívil“

15. Martin Žatkovič – @zatkoma
Procházení != Indexace
Robot vyhledávače musí navštívit váš web a načíst si
stránku, aby se mohl rozhodnout, jestli ji uloží do svého
indexu a bude ji zobrazovat.
Musí navštívit – zjistíte z accesslogu
Načíst si stránku – stahuje a parsuje HTML (občas i JS)
Mohl rozhodnout – je stránka unikátní a pro uživatele
zajímavá?

16. Martin Žatkovič – @zatkoma
Crawl budget
Stránky, které máte na webu
Stránky, které chcete indexovat
Stránky, které prochází vyhledávač 50/50
Vyhledávače pravděpodobně nemají čas na procházení celého vašeho webu.
Proto je nutné optimalizovat stránky tak, aby vyhledávače neprocházely stránky,
které nejsou kvalitní a nemají pro uživatele přidanou hodnotu.
Vyplatí se u webů, které jsou větší než 1 000 000 URL, ale je dobré na něj myslet
i u menších webů. Počet URL adres zjistíte pomocí Scraming Frog

17. Martin Žatkovič – @zatkoma
Co nechcete procházet?
• Trackovací parametry (?UTM…, ?fbclid…, ?loginback=…).
• Filtry, které nejsou hledané.
• Obsahové duplicity.
• Stránky s dlouhým časem načítání.

18. Martin Žatkovič – @zatkoma
Jaké máte zbraně? ⚔
• <meta name=“robots” content=“noindex, follow”>
• Disallow: (v robots.txt)
• <a href=“” rel=“nofollow”>
• Ukrytí odkazu za mřížku (pozor! – může dělat problém)

19. Skrývání obsahu
mobile first indexing

20. „Na mobilních telefonech se nenakupuje.“

21. Martin Žatkovič – @zatkoma
Vývoj jednoho z webů

22. Martin Žatkovič – @zatkoma
Přišel vám tento e-mail?

23. Martin Žatkovič – @zatkoma
Mobile first
• Nejde o separátní index, jde o přístup k procházení.
• Google primárně prochází web jako mobilní telefon.
• 🔧 cache:url
• Desktop: Skrývání obsahu stránky je v pořádku, ale
nemusí na něj být brán zřetel.
• Mobile: Skrývání obsahu stránky dává smysl. Obsah by
měl být indexován, jestliže je uložen v HTML.

24. Martin Žatkovič – @zatkoma
Skrytý obsah

25. Martin Žatkovič – @zatkoma
Test použitelnosti v mobilech
• Google vám sám řekne, jak web vidí.

26. Uživatel first!

27. Martin Žatkovič – @zatkoma
Dává vám to smysl?

28. Filtrace a stránkování

29. „Filtraci vyřešíme JavaScriptem“

30. Martin Žatkovič – @zatkoma
Obecná x Longtail

31. Martin Žatkovič – @zatkoma
Jedna stránka?

32. Martin Žatkovič – @zatkoma
Takže filtry říkáš?

33. Martin Žatkovič – @zatkoma
Na co nezapomenout?
• Odkazy ve filtraci musí být přístupné i bez JavaScriptu.
• Filtry se musí generovat vždy stejně (pořadí parametrů).
• Nové vstupní stránky dávají smysl, jestliže jsou hledané
a mají unikátní obsah.
🎓 Video pro pilné studenty >
Správné řešení filtrů z pohledu SEO

34. „Vyřešili jsme to jinou cestou: Byl přidán tag meta
robots "no index"“

35. Martin Žatkovič – @zatkoma
Jeden přístup vládne všem
• Využívejte meta rel=“prev” / rel=“next”
• Označujete předchozí a následující stránky
• Noindex, Follow zobrazujete pouze Seznam botovi na
druhé a další stránce.

36. Strukturovaná data

37. „Strukturovaná data neumíme implementovat“

38. Martin Žatkovič – @zatkoma
Nápověda schema.org
• Podporovaná strukturovaná data ze strany Google.
• Jednoduchá implementace pomocí JSON-LD, Microdata.
• Implementaci můžete otestovat v oficiálním nástroji.
• 📈 Ovlivňují vzhled snippetu, tudíž mají vliv na CTR.

39. Martin Žatkovič – @zatkoma
Co dostat pod kůži?
Drobečková navigace
Sociální profily
Článek
Událost
Lokální obchod
Produkty
Recenze
Vyhledávání

40. Martin Žatkovič – @zatkoma
Jak vypadají?

41. Rychlost načítání
stránek

42. „Mě se ten web načítá rychle.“

43. Martin Žatkovič – @zatkoma
Na rychlosti záleží
• Co rychlost webu může ovlivnit?
• Uživatelský zážitek,
• dwell time,
• bounce rate,
• tržby.

44. Martin Žatkovič – @zatkoma

45. Neladíte pouze
homepage

46. Martin Žatkovič – @zatkoma
Chrome UX Report?

47. Martin Žatkovič – @zatkoma

48. Martin Žatkovič – @zatkoma
Co můžete udělat?
• Optimalizovat velikosti souborů (zejména obrázky).
• Snižovat počet požadavků na CSS a JS soubory.
• Statické soubory patřičně cachovat.
• Využívat meta tag prerender.
• Lazy-Loading obrázků.

49. Martin Žatkovič – @zatkoma
Nástroje pro rychlost

50. Máte
Developer Tools

51. Martin Žatkovič – @zatkoma

52. Blížíme se do finále

53. Martin Žatkovič – @zatkoma
Když si nepomáháme

54. Přitom k sobě máme
hodně blízko

55. Společně to dokážem!

56. Martin Žatkovič – @zatkoma
Vzhůru za výsledky!

57. Martin Žatkovič – @zatkoma
Děkuji za pozornost
Odkaz na prezentaci:
📄 ➡ zatkovic.cz/frontendisti-plzen ⬅ 📄