Tenhle web jsem postavil s AI. Kód psal Claude, já jsem byl zadavatel: rozhodoval jsem, co má web umět, psal texty, dodal fotky a sám nastavoval doménu, hosting a vyhledávače.

S AI se učím delší dobu a hodně mě to baví. Stavba vlastního webu byla skvělý způsob, jak se naučit s AI opravdu pracovat — a k tomu i kus SEO.

100
výkon na počítači
PageSpeed Insights
100
přístupnost, postupy, SEO
na počítači i mobilu
4
dny
od prvního commitu po dnešní podobu
0
cookies
proto žádná cookie lišta

Zadání

Web má dva cíle. Získat sponzory — proto je nejdůležitější stránka Spolupráce. A sloužit jako moje SEO portfolio, na kterém se učím, jak web dostat do vyhledávačů.

Od začátku jsem měl pár pravidel, která AI nesměla porušit:

  • Fotky se neořezávají. Každá je celá, v původním poměru stran, a u každé je jméno fotografky.
  • Žádná vymyšlená čísla. Výsledky jsou jen z databáze Mezinárodní kanoistické federace a Českého svazu kanoistů.
  • Žádné ceny a žádné sliby, které nemůžu dodržet.
  • Texty mým hlasem. Když něco znělo strojově, přepsal jsem to.

Jak to probíhalo

  1. Návrh v Claude Design — vzhled, barvy, písma, rozvržení stránek.
  2. Převod do kódu — čisté HTML, CSS a JavaScript. Bez frameworku, bez knihoven, bez build nástrojů.
  3. Responzivita — návrh byl jen pro počítač, takže jsme ho přestavěli pro telefon a tablet.
  4. Nasazení — nejdřív Netlify, pak přechod na Cloudflare. Každé nahrání na GitHub se samo nasadí na ostrý web.
  5. Úklid kódu — jednotná kostra všech stránek, jeden soubor se styly, jeden se skripty, automatické formátování. Po úklidu jsme porovnali vzhled všech prvků ve třech šířkách obrazovky, aby se nic nezměnilo.
  6. Rychlost, bezpečnost a přístupnost.
  7. Texty — přepsal jsem je do svého stylu, aby nezněly jako od AI.
  8. Články, časté otázky a Bing.

SEO pod kapotou

Strukturovaná data

Vyhledávače a AI asistenti čtou web lépe, když mu rozumí. Proto má každá stránka strukturovaná data schema.org — přes 10 typů:

  • Person — kdo jsem, klub, reprezentace, škola, partner, profily na sítích
  • WebSite, ProfilePage, WebPage — co je která stránka
  • BlogPosting, CollectionPage — články a jejich seznam
  • FAQPage — časté otázky na Spolupráci
  • BreadcrumbList — kde se stránka na webu nachází
  • ImageObject — fotky i s autorkou

Indexace

  • Google Search Console — ověřené celou doménou přes DNS, odeslaná sitemap.
  • Bing Webmaster Tools — z indexu Bingu čerpá i hledání v ChatGPT a Copilot.
  • IndexNow — po každém nasazení web sám nahlásí Bingu změněné stránky. Nečeká se týdny, až je vyhledávač najde.

Rychlost

Na počítači má web plný počet bodů ve všech čtyřech kategoriích. Na mobilu je výkon kolem 90–95 — Google měří na simulovaném pomalém telefonu a každé měření vyjde trochu jinak. Přístupnost jsme zvedli z 96 na 100. Co pomohlo:

  • Filmové zrno přes celý web bylo živé SVG a prohlížeč ho přepočítával. Nahradil jsem ho malým obrázkem 22 kB — zpoždění vykreslení hlavní fotky kleslo z 1,9 s na 0,07 s.
  • Fotky ve více velikostech — telefon si stáhne menší verzi než velký monitor.
  • Mezipaměť na rok pro fotky a písma.
  • Písma přímo na webu, ne z Google Fonts.
  • Kontrast textu aspoň 4,5 : 1.

Zbytek výkonu na mobilu brzdí hlavně skript statistiky a to, že web nemá build krok, který by kód zmenšoval. Tohle je vědomé rozhodnutí: web zůstává jednoduchý a každou změnu nahraju bez dalších nástrojů.

Měření z 25. září 2026: zpráva PageSpeed Insights (otevře se v novém okně).

Bezpečnost a soukromí

  • HTTPS s HSTS a DNSSEC — doména i spojení jsou zabezpečené.
  • Content Security Policy — web smí načíst jen vlastní soubory, nic cizího do něj nepronikne.
  • Statistika bez cookies (Cloudflare Web Analytics) — žádné osobní údaje, žádná cookie lišta.

Přístupnost

  • Odkaz „Přeskočit na obsah“ pro ovládání klávesnicí.
  • Všechny ovládací prvky jdou ovládat klávesnicí.
  • Když má návštěvník v systému vypnuté animace, web se nehýbe.
  • Popisky fotek a odkazů pro čtečky obrazovky.

Co web umí

  • Filtr, graf a mapa závodů na Výsledcích se vytvářejí samy z tabulky výsledků. Nový závod dopíšu jednou a všechno se upraví.
  • Závodní dráha — lodě jedou rychlostí mého osobního rekordu, 200 metrů za 39,149 sekund.
  • Media kit v PDF se vyrábí automaticky ze zdrojové stránky ve stylu webu.
  • Nákresy ploch pro logo podle skutečných rozměrů ze smlouvy se svazem. Loď je obkreslená z fotky závodní kánoe.

Co mi to dalo

Naučil jsem se s AI pracovat jako s vývojářem. Jasně zadat, co chci, kontrolovat výsledek a neustoupit, když něco nesedí. Nákres lodi na Spolupráci jsme předělávali několikrát. Nejdřív vypadal jako kajak, pak jsem si všiml, že má prohozenou příď a záď.

A SEO jsem si osahal v praxi — od strukturovaných dat přes rychlost až po Search Console a Bing. Je to něco jiného, než o tom jen číst.

Použité nástroje

  • Návrh: Claude Design
  • Kód: Claude (Anthropic) — HTML, CSS, JavaScript
  • Hosting: Cloudflare Workers, nasazení z GitHubu
  • Doména: Wedos, DNS u Cloudflare
  • Vyhledávače: Google Search Console, Bing Webmaster Tools, IndexNow
  • Měření: PageSpeed Insights, Cloudflare Web Analytics