SEO průvodce Krok 5: UX / Uživatelova zkušenost — Jak způsob, jakým návštěvníci zažívají váš web, ovlivňuje hodnocení
SEO průvodce Krok 5: UX / Uživatelova zkušenost
Toto je Krok 5 z 13-krokového SEO průvodce. Uživatelova zkušenost je nyní přímým faktorem hodnocení — Google měří, jak návštěvníci interagují s vaším webem a odměňuje stránky, které nabízejí rychlé, dostupné a příjemné zážitky.
Obsahová strategie (Krok 3) určuje, co publikujete. Linkbuilding (Krok 4) dokazuje vaši autoritu. Ale pokud návštěvníci přistanou na vaší stránce a okamžitě odejdou, protože je pomalá, nefunkční na mobilních zařízeních nebo nepřístupná — nic z toho není důležité. Google sleduje tyto signály a používá je k úpravě hodnocení.
Od roku 2021 Googleova aktualizace Zážitek ze stránky učinila UX potvrzeným faktorem hodnocení. V roce 2024 INP (Interaction to Next Paint) nahradil FID jako Core Web Vital. V roce 2026 mají tyto signály ještě větší váhu, protože Google stále více upřednostňuje metriky spokojenosti uživatelů před tradičními signály.
Co pokrývá UX pro SEO
Optimalizace UX pro SEO zahrnuje 6 oblastí:
- Core Web Vitals — oficiální UX metriky Google (LCP, INP, CLS)
- Optimalizace pro mobilní zařízení — responsivní design, cíle dotyku, viewport
- Přístupnost (WCAG) — zajištění použitelnosti vaší stránky pro všechny
- Signály zážitku z stránky — HTTPS, žádné intersticiální reklamy, bezpečné prohlížení
- Vzor navigace — struktura webu, která pomáhá uživatelům a crawlerům
- Optimalizace nad rámec viditelnosti — co uživatelé vidí bez scrollování
1. Core Web Vitals (CWV)
Core Web Vitals jsou tři měřitelné UX metriky Google. Sledují se v datech Chrome User Experience Report (CrUX) a přímo ovlivňují hodnocení.
Tři metriky:
| Metrika | Měří | Dobré | Potřebuje vylepšení | Špatné |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Rychlost načítání | < 2.5s | 2.5s - 4.0s | > 4.0s |
| INP (Interaction to Next Paint) | Odezva | < 200ms | 200ms - 500ms | > 500ms |
| CLS (Cumulative Layout Shift) | Vizualní stabilita | < 0.1 | 0.1 - 0.25 | > 0.25 |
LCP — Largest Contentful Paint
LCP měří, jak rychle se hlavní obsah vaší stránky stává viditelným. "Největší obsah" je obvykle váš hlavní obrázek, hlavní nadpis nebo největší blok nad rámec viditelnosti.
Časté problémy s LCP a jejich řešení:
| Problém | Dopad | Řešení |
|---|---|---|
| Neoptimalizovaný hlavní obrázek | +2-5s | Formát WebP, správné dimenze, fetchpriority="high" |
| CSS/JS blokující renderování | +1-3s | Inline kritické CSS, odložit non-kritické |
| Pomalá odezva serveru (TTFB) | +1-4s | CDN, cache serveru, edge deployment |
| Webové fonty blokující renderování | +0.5-2s | font-display: swap, preload kritických fontů |
| Skripty třetích stran | +1-3s | Odložit analytiku/chat widgety, lazy load reklamy |
Priorita optimalizace LCP:
<!-- 1. Preload LCP obrázek -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- 2. Inline kritické CSS (prvních 14KB) -->
<style>/* Styly nad rámec viditelnosti pouze */</style>
<!-- 3. Odložit non-kritické CSS -->
<link rel="stylesheet" href="/full.css" media="print" onload="this.media='all'">
<!-- 4. Hlavní obrázek s explicitními rozměry -->
<img src="/hero.webp" width="1200" height="600"
fetchpriority="high" decoding="async"
alt="Popisný alternativní text">Rychlé vítězství: Spusťte PageSpeed Insights na vaší domovské stránce. Podívejte se na prvek LCP, který identifikuje. Pokud to je obrázek, převeďte ho na WebP, nastavte explicitní šířku/výšku a přidejte fetchpriority="high". Toto samotné často snižuje LCP o 1-2 sekundy.
INP — Interaction to Next Paint
INP měří, jak rychle vaše stránka reaguje, když uživatelé interagují (kliknutí, dotyk, psaní). Sleduje nejhorší interakci během návštěvy stránky a používá ji jako skóre.
Časté problémy s INP a jejich řešení:
| Problém | Dopad | Řešení |
|---|---|---|
| Dlouhé úkoly JavaScriptu | +200-1000ms | Rozdělit na menší úkoly, použít requestIdleCallback |
| Těžké event handlery | +100-500ms | Debounce, throttle, použít requestAnimationFrame |
| Layout thrashing | +50-300ms | Skupinové DOM čtení/zápisy, použít will-change |
| Skripty třetích stran | +100-500ms | Odložit, načíst po interakci, použít Web Workers |
| Synchronous API calls | +200-2000ms | Async/await, loading states, optimistické UI |
Techniky optimalizace INP:
// Špatně: Blokuje hlavní vlákno
button.addEventListener('click', () => {
const data = heavyComputation(); // Blokuje na 400ms
updateDOM(data);
});
// Dobře: Uvolňuje hlavní vlákno
button.addEventListener('click', async () => {
// Zobrazit okamžitou zpětnou vazbu
button.textContent = 'Načítání...';
// Rozdělit těžkou práci na části
await scheduler.yield();
const data = heavyComputation();
await scheduler.yield();
updateDOM(data);
});Rychlé vítězství: Otevřete Chrome DevTools > karta Výkon. Procházejte svým webem a hledejte "Long Tasks" (červené trojúhelníky). Tyto blokují hlavní vlákno. Největší dlouhá úloha je obvykle skript třetí strany — odložte ho nebo načtěte po první interakci.
CLS — Cumulative Layout Shift
CLS měří vizuální stabilitu — kolik se obsah stránky posouvá při načítání. Nic je víc nefrustruje, než když kliknou na tlačítko a stránka se posune, takže kliknou na něco jiného.
Časté problémy s CLS a jejich řešení:
| Problém | Dopad na CLS | Řešení |
|---|---|---|
| Obrázky bez dimenzí | 0.1-0.5 | Vždy nastavte width a height |
| Reklamy načítající se pozdě | 0.1-0.3 | Rezervujte prostor pomocí min-height |
| Webové fonty způsobující reflow | 0.05-0.2 | font-display: optional nebo velikostně přizpůsobené fallbacky |
| Vkládání dynamického obsahu | 0.1-0.4 | Rezervujte prostor, použijte content-visibility |
| Bannery cookies posouvající obsah | 0.05-0.2 | Design překrytí (ne posun) |
Kontrolní seznam prevence CLS:
<!-- Vždy specifikujte rozměry pro média -->
<img src="photo.webp" width="800" height="600" alt="...">
<video width="1280" height="720"></video>
<iframe width="560" height="315"></iframe>
<!-- Rezervujte prostor pro dynamický obsah -->
<div style="min-height: 250px;">
<!-- Reklama se načte zde bez posunu -->
</div>
<!-- Použijte aspect-ratio pro responsivní média -->
<div style="aspect-ratio: 16/9;">
<img src="..." style="width: 100%; height: 100%; object-fit: cover;">
</div>Rychlé vítězství: Přidejte explicitní atributy width a height ke každému na vašich nejdůležitějších 10 stránkách. Tato změna eliminuje nejběžnější problém CLS — obrázky se načítající a posouvající obsah dolů.
2. Optimalizace pro mobilní zařízení
Google používá indexaci na první mobil — vaše mobilní zkušenost JE vaše hodnotící zkušenost. Pokud je vaše stránka na mobilu rozbitá, nezáleží na tom, jak dokonalá je desktopová verze.
Kontrolní seznam optimalizace pro mobilní zařízení:
| Prvek | Požadavek | Běžné selhání |
|---|---|---|
| Viewport meta | width=device-width, initial-scale=1 | Úplně chybí |
| Cíle dotyku | Minimálně 44x44px | Malé odkazy, stísněná tlačítka |
| Velikost písma | Minimálně 16px pro text těla | 12px nečitelný na mobilu |
| Šířka obsahu | Žádné horizontální posouvání | Fixní šířkové prvky |
| Rozestupy pro dotyky | Minimálně 8px mezi cíli | Sousední odkazy se dotýkají |
| Responsivní obrázky | srcset s odpovídajícími velikostmi | Obrázky pro desktop na mobilu |
Vzory responsivního designu:
/* Přístup s mobilním prvkem */
.container {
padding: 16px;
font-size: 16px;
}
/* Cíle přátelské k dotyku */
.button, .link {
min-height: 44px;
min-width: 44px;
padding: 12px 16px;
}
/* Responsivní typografie */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
p { font-size: clamp(1rem, 2vw, 1.125rem); }
/* Žádné horizontální přetečení */
img, video, iframe {
max-width: 100%;
height: auto;
}Mobilní SEO signály, které Google kontroluje:
- Text čitelný bez zoomování
- Odkazy/tlačítka nejsou příliš blízko sebe
- Obsah se vejde do šířky viewportu (žádné horizontální posouvání)
- Žádné Flash nebo nepodporované technologie
- Intersticiální reklamy nezakrývají obsah po vstupu
- Stránka se rychle načítá na 4G/3G připojeních
Rychlé vítězství: Otevřete svůj web na telefonu. Zkuste kliknout na každé tlačítko a odkaz. Pokud náhodou klepnete na nesprávnou věc, protože cíle jsou příliš blízko, nebo pokud musíte zvětšit pro čtení textu — to jsou vaše prioritní opravy.
3. Přístupnost (WCAG)
Přístupnost není pouze etická — je to signál SEO. Algoritmy Google upřednostňují stránky, které jsou použitelné pro všechny, včetně uživatelů se čtečkami obrazovky, navigací pomocí pouze klávesnice nebo zrakovými omezeními. Splnění WCAG (Web Content Accessibility Guidelines) souvisí s lepšími hodnoceními.
Kritické požadavky na přístupnost:
| Prvek | Požadavek | SEO dopad |
|---|---|---|
| Alternativní text k obrázkům | Popisný text pro všechny smysluplné obrázky | Přímý (SEO obrázků + přístupnost) |
| Hierarchie nadpisů | H1 → H2 → H3 bez vynechání | Přímý (struktura obsahu) |
| Kontrast barev | 4.5:1 pro normální text, 3:1 pro velký text | Nepřímý (použitelnost) |
| Navigace klávesnicí | Všechny interaktivní prvky dostupné pomocí Tab | Nepřímý (použitelnost) |
| ARIA štítky | Štítky pro ikony, tlačítka bez textu | Nepřímý (uživatelský zážitek pro čtečky obrazovky) |
| Ukazatele zaostření | Viditelný ukazatel zaostření při navigaci pomocí klávesnice | Nepřímý (použitelnost) |
| Štítky formulářů | Každý vstup má asociovaný | Nepřímý (použitelnost) |
| Text odkazu | Popisný (ne "klikněte zde") | Přímý (SEO textu kotvy) |
Proces testování přístupnosti:
- Automatizovaný sken — Spusťte Lighthouse, axe-core nebo WAVE (pokryje ~30-50% problémů)
- Test klávesnicí — Navigujte celým svým webem pouze pomocí Tab, Enter, Escape
- Test čtečkou obrazovky — Použijte VoiceOver (Mac) nebo NVDA (Windows) na klíčových stránkách
- Kontrast barev — Zkontrolujte veškerý text proti pozadí (použijte contrast checker v DevTools)
- Test zoomu — Přiblížení na 200% — funguje všechno pořád?
Běžné opravy přístupnosti:
<!-- Obrázky: popisný alternativní text -->
<img src="chart.png" alt="Sloupcový graf ukazující 40% nárůst organického provozu od ledna do března 2026">
<!-- Tlačítka: jasné štítky -->
<button aria-label="Zavřít navigační menu">
<svg>...</svg> <!-- Tlačítko pouze s ikonou potřebuje aria-label -->
</button>
<!-- Formuláře: asociované štítky -->
<label for="email">Emailová adresa</label>
<input type="email" id="email" name="email" required>
<!-- Odkazy: popisný text -->
<a href="/guide">Přečtěte si celý SEO průvodce</a>
<!-- NE: <a href="/guide">Klikněte zde</a> -->
<!-- Přeskočte navigaci pro uživatele klávesnice -->
<a href="#main-content" class="skip-link">Přeskočit na hlavní obsah</a>Rychlé vítězství: Spusťte Lighthouse na své domovské stránce v kategorii Přístupnost. Opravy všeho s hodnocením "Selhání" nejdříve — tyto obvykle zahrnují chybějící alternativní text, chybějící štítky formulářů a nízký kontrast textu. Tyto opravy obvykle trvají 30 minut a zlepšují vaše hodnocení o více než 20 bodů.
4. Signály zážitku z stránky
Kromě Core Web Vitals Google hodnotí několik dalších signálů zážitku z stránky, které ovlivňují hodnocení.
Faktory zážitku ze stránky:
| Signál | Požadavek | Kontrola |
|---|---|---|
| HTTPS | Celý web je poskytován přes HTTPS | Smíšený obsah to přeruší |
| Žádné rušivé intersticiální reklamy | Nezakrývejte obsah po příjezdu | Vyskakovací okna pokrývající >30% na mobilu |
| Bezpečné prohlížení | Žádný malware, phishing, klamavý obsah | Stav Google Safe Browsing |
| Mobilní přívětivost | Projde testem mobilní přívětivosti | Google Mobile-Friendly Test |
| Žádné klamavé reklamy | Reklamy nemimují obsah | Maskované odkazy na stažení |
Pokyny pro intersticiální reklamy (co je povoleno vs. penalizováno):
| Povoleno | Penalizováno |
|---|---|
| Ověření věku (právně požadováno) | Pop-up přes celou obrazovku při vstupu na stránku |
| Souhlas s cookies (právně požadováno) | Registrace emailu pokrývající celý obsah |
| Přihlašovací zdi pro placený obsah | "Stáhněte naši aplikaci" blokující obsah |
| Malé bannery využívající <30% obrazovky | Časovače před přístupem k obsahu |
| Po scrollování/ interakci uživateli | Předtím, než uživatel uvidí jakýkoliv obsah |
Kontrolní seznam HTTPS:
- [ ] SSL certifikát platný a neexpirovaný
- [ ] Všechny stránky přesměrovávají HTTP → HTTPS (301)
- [ ] Žádný smíšený obsah (HTTP prostředky na HTTPS stránkách)
- [ ] HSTS hlavička povolena (s includeSubDomains)
- [ ] Interní odkazy používají HTTPS (ne HTTP)
- [ ] Sitemap používá HTTPS URL
- [ ] Canonical tagy používají HTTPS
Rychlé vítězství: Zkontrolujte smíšený obsah — otevřete DevTools Console na svých klíčových stránkách. Jakákoliv varování "Mixed Content" znamenají, že načítáte HTTP prostředky na HTTPS stránce. Aktualizujte tyto odkazy na HTTPS. To je jedna z nejběžnějších problémů se zážitkem ze stránky.
5. Vzory navigace
Dobrý navigační systém pomáhá jak uživatelům, tak vyhledávačům. Uživatelé rychle najdou to, co potřebují. Crawlers Google chápou hierarchii vašeho webu a efektivně distribuují PageRank.
Nejlepší postupy v navigaci:
| Vzor | Přínos | Implementace |
|---|---|---|
| Plochá architektura | Stránky se nachází maximálně 3 kliknutí od domova | Hub stránky, breadcrumb |
| Breadcrumbs | Uživatelé vědí, kde se nacházejí | Schéma a viditelná stopa |
| Logická struktura URL | Předvídatelné cesty | /category/subcategory/page |
| Navigace v patičce | Druhé stránky dostupné | Právní, o nás, kontakt, mapa webu |
| Interní vyhledávání | Uživatelé najdou konkrétní obsah | Vyhledávací pole s návrhy |
| Související obsah | Snižuje míru opuštění, zvyšuje hloubku | Sekce "Související články" |
Ideální architektura webu:
Domovská stránka (1 kliknutí na vše důležité)
├── /produkty/ (kategorický hub — odkazy na všechny produkty)
│ ├── /produkty/kategorie-a/
│ │ ├── /produkty/kategorie-a/produkt-1
│ │ └── /produkty/kategorie-a/produkt-2
│ └── /produkty/kategorie-b/
├── /blog/ (obsahový hub — odkazy na všechny příspěvky)
│ ├── /blog/tematický-klastr-1/ (pillar page)
│ │ ├── /blog/subtéma-1a
│ │ └── /blog/subtéma-1b
│ └── /blog/tematický-klastr-2/
├── /nástroje/ (užitečné stránky)
└── /o-nás/ (důvěryhodné stránky)Implementace breadcrumbs:
<!-- Viditelný breadcrumb -->
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Domov</a></li>
<li><a href="/blog/">Blog</a></li>
<li aria-current="page">SEO průvodce Krok 5</li>
</ol>
</nav>
<!-- Schéma (BreadcrumbList) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Domov", "item": "https://example.com/" },
{ "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://example.com/blog/" },
{ "@type": "ListItem", "position": 3, "name": "SEO průvodce Krok 5" }
]
}
</script>Varovné signály navigace:
- Stránky umístěné více než 4 kliknutí od domovské stránky (příliš hluboké)
- Žádné breadcrumb (uživatelé a Google ztrácí kontext)
- Navigace pouze v JavaScriptu (crawlers mohou minout odkazy)
- Orfánské stránky (žádné interní odkazy na ně)
- Mega menu s 200+ odkazy (rozředění hodnoty na odkaz)
Rychlé vítězství: Zkontrolujte své nejdůležitější konverzní stránky — kolik kliknutí od domovské stránky? Pokud více než 3, přidejte přímé odkazy z vaší domovské stránky nebo kategoriálních hubů. Každé hlubší kliknutí snižuje jak návštěvy uživatelů, tak frekvenci procházení.
6. Optimalizace nad rámec viditelnosti
Co uživatelé vidí před scrollováním určuje, zda zůstanou nebo odejdou. Obsah nad rámec viditelnosti musí okamžitě komunikovat hodnotu a odpovídat na vyhledávací dotaz, který je sem přivedl.
Povinné prvky nad rámec viditelnosti:
| Prvek | Proč | Běžné selhání |
|---|---|---|
| Jasný nadpis (H1) | Potvrzuje relevanci k dotazu | Obecné nebo chybí |
| Hodnota nabídky | Proč by měly zůstat? | Skryta pod rámcem viditelnosti |
| Primární CTA | Co by měly udělat dál? | Skrytý nebo nejasný |
| Hlavní obrázek/materiál | Vizuální zapojení | Pomalé načítání, způsobující problémy s LCP |
| Důvěryhodné signály | Proč by nám měly věřit? | Žádné loga, recenze nebo pověření |
Vzory rozložení nad rámec viditelnosti:
Desktop (viewport 1440px):
┌──────────────────────────────────────┐
│ Navigační lišta │
├──────────────────────────────────────┤
│ │
│ H1: Jasný nadpis odpovídající dotazu│
│ Podnadpis: Hodnota nabídky │
│ │
│ [Tlačítko primární CTA] │
│ │
│ Důvěryhodné signály: loga, statistiky, odznaky │
│ │
├──────────────────────────────────────┤
│ ↓ Obsah pokračuje pod rámcem viditelnosti │
└──────────────────────────────────────┘
Mobil (viewport 375px):
┌────────────────────┐
│ Navigace (hamburger)│
├────────────────────┤
│ │
│ H1: Nadpis │
│ (kratší na mobilu)│
│ │
│ [Tlačítko CTA] │
│ (celá šířka, 44px+)│
│ │
│ Důvěryhodná značka │
│ │
├────────────────────┤
│ ↓ Scroll pro více │
└────────────────────┘Kritická pravidla nad rámec viditelnosti:
- H1 musí být viditelný bez scrollování (odpovídá vyhledávacímu dotazu)
- CTA musí být viditelný bez scrollování (snižuje míru opuštění)
- Žádný posun v rozložení v nad rámcem viditelnosti (zabiják CLS)
- Hlavní obrázek musí načítat rychle (obvykle je to prvek LCP)
- Mobilní: zredukujte obsah nad rámcem viditelnosti (méně místa viewportu)
Rychlé vítězství: Pořiďte snímek obrazovky své domovské stránky na mobilu (šířka 375px). Je H1 viditelný? Je viditelné tlačítko CTA? Můžete říct, co web dělá během 2 sekund? Pokud je kterákoliv odpověď "ne", přicházíte o návštěvníky před tím, než provedou scroll.
Kontrolní seznam auditu UX
Projděte tímto pro své nejdůležitější stránky:
- [ ] LCP pod 2.5 sekundy (hlavní obrázek optimalizován, kritické CSS inline)
- [ ] INP pod 200ms (žádné dlouhé úkoly JavaScriptu blokující interakci)
- [ ] CLS pod 0.1 (všechny obrázky mají dimenze, žádné pozdě načítající posuny)
- [ ] Mobilní přívětivost (44px cíle dotyku, text 16px+, žádné horizontální posouvání)
- [ ] Přístupnost (alternativní text, hierarchie nadpisů, kontrast barev, navigace klávesnicí)
- [ ] HTTPS všude (žádný smíšený obsah, HSTS povoleno)
- [ ] Žádné rušivé intersticiální reklamy (souhlasové překryvy OK, pop-upy blokující obsah ne)
- [ ] Breadcrumbs přítomny (se schématem BreadcrumbList)
- [ ] Hloubka navigace pod 4 kliknutí na jakoukoliv důležitou stránku
- [ ] Optimalizace nad rámcem viditelnosti (H1 viditelný, CTA viditelný, rychlé LCP)
Jak LANGR skenuje vaše UX
LANGR moduly skenující související s UX zahrnují:
- Modul Core Web Vitals — Měří LCP, INP, CLS z Chrome User Experience Report (data skutečných uživatelů)
- Modul PageSpeed — Úplný audit výkonu Lighthouse s mobilními a desktopovými skóre
- Modul pro mobilní zařízení — Konfigurace viewportu, sizing cíle dotyku, čitelnost textu
- Modul přístupnosti — Kontroly souladu s WCAG, použití ARIA, kontrast barev
- Modul pro analýzu rozložení — AI-poháněné hodnocení mobilních a desktopových rozložení
- Modul pro zážitek ze stránky — Detekce intersticiálních blokací, stav HTTPS, bezpečné prohlížení
Tyto moduly běží při každém skenování, což vám poskytuje ucelený obrázek o tom, jak návštěvníci zažívají váš web — a přesně co je třeba opravit pro lepší hodnocení.
Běžné chyby UX (seřazené podle dopadu)
- Ignorování mobilů — 60%+ vyhledávání je mobilní; rozbitý mobil = rozbité hodnocení
- Neoptimalizované obrázky — Nejčastější příčina pomalého LCP (a obvykle nejjednodušší oprava)
- Žádné explicitní dimenze obrázků — Posuny rozložení ničí skóre CLS
- Bloat skriptů třetích stran — Widgety chatu, analytika, reklamy blokující INP
- Chybějící základní přístupnosti — Žádný alternativní text, žádná hierarchie nadpisů, žádný kontrast
- Intersticiální blokující obsah — Pop-upy přes celou obrazovku před tím, než uživatelé vidí obsah
- Hluboká architektura webu — Důležité stránky zasunuté 5+ kliknutí od domovské stránky
- Žádná hodnota nad rámcem viditelnosti — Uživatelé nemohou říct, co web dělá bez scrollování
Co bude dál?
Krok 6: Monitoring a hodnocení — Nemůžete zlepšit to, co neměříte. Pozice klíčových slov, sledování skóre, zprávy o změnách a sledování dostupnosti.
Tento průvodce je součástí 13-krokové SEO série LANGR. Spusťte bezplatný audit, abyste zjistili, jak si váš web stojí ve všech 13 disciplínách.