Skip to main content
← Back to blog

SEO Vodič Korak 5: UX / Korisničko Iskustvo — Kako Iskustvo Posjetitelja Utječe na Rangiranje

·16 min read·by LANGR SEO

SEO Vodič Korak 5: UX / Korisničko Iskustvo

Ovo je Korak 5 od 13-Koraka SEO Vodiča. Korisničko iskustvo sada je izravan faktor rangiranja — Google mjeri kako se posjetitelji ponašaju na vašoj stranici i nagrađuje stranice koje pružaju brza, pristupačna i ugodna iskustva.


Strategija sadržaja (Korak 3) određuje što objavljujete. Linkbuilding (Korak 4) dokazuje vašu autoritet. Ali ako posjetitelji dođu na vašu stranicu i odmah odu jer je spora, neispravna na mobitelu ili nepristupačna — ništa od toga nije važno. Google prati te signale i koristi ih za prilagodbu rangiranja.

Od 2021. godine, Googleova ažuriranje Page Experience učinilo je UX potvrđenim faktorom rangiranja. U 2024. godini, INP (Interakcija do Sljedeće Boje) zamijenio je FID kao osnovni Web Vital. U 2026. godini, ti signali imaju još veću težinu jer Google sve više prioritizira metrike zadovoljstva korisnika nad tradicionalnim signalima.

Što UX za SEO Obuhvaća

Optimizacija UX-a za SEO obuhvaća 6 područja:

  1. Osnovni Web Vitals — Googleove službene UX metrike (LCP, INP, CLS)
  2. Optimizacija za Mobilne Uređaje — Odgovarajući dizajn, dodirni ciljevi, viewport
  3. Pristupačnost (WCAG) — Omogućavanje korištenja vaše stranice za sve
  4. Signali Iskustva Stranice — HTTPS, bez prekida, sigurno pregledavanje
  5. Obrasci Navigacije — Struktura stranice koja pomaže korisnicima i crawlerima
  6. Optimizacija Iznad Stranice — Što korisnici vide bez pomicanja

1. Osnovni Web Vitals (CWV)

Osnovni Web Vitals su tri mjerljive UX metrike Googlea. Prate se u Chrome User Experience Report (CrUX) podacima i izravno utječu na rangiranje.

Tri metrike:

MetrikaMjeriDobarTreba PoboljšanjeLoš
LCP (Najveće Sadržajno Bojenje)Brzina učitavanja< 2.5s2.5s - 4.0s> 4.0s
INP (Interakcija do Sljedeće Boje)Reaktivnost< 200ms200ms - 500ms> 500ms
CLS (Kumulativni Pomak Rasporeda)Vizualna stabilnost< 0.10.1 - 0.25> 0.25

LCP — Najveće Sadržajno Bojenje

LCP mjeri koliko brzo glavni sadržaj vaše stranice postaje vidljiv. "Najveći sadržaj" obično je vaša hero slika, glavni naslov ili najveći blok iznad stranice.

Uobičajeni LCP problemi i rješenja:

ProblemUtjecajRješenje
Neoptimizirana hero slika+2-5sWebP format, pravilna veličina, fetchpriority="high"
CSS/JS koji blokiraju renderiranje+1-3sUčitajte kritični CSS u liniji, odgodite ne-kritične
Spora odgovor servera (TTFB)+1-4sCDN, keširanje servera, edge implementacija
Web fontovi blokiraju renderiranje+0.5-2sfont-display: swap, preuzmite kritične fontove
Skripte trećih strana+1-3sOdgodite analitiku/čavrljanje, lenjo učitavanje oglasa

Prioritet optimizacije LCP:

<!-- 1. Preuzmite LCP sliku -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- 2. Učitajte kritični CSS (prvih 14KB) -->
<style>/* Stilovi iznad stranice samo */</style>

<!-- 3. Odgodite ne-kritični CSS -->
<link rel="stylesheet" href="/full.css" media="print" onload="this.media='all'">

<!-- 4. Hero slika s eksplicitnim dimenzijama -->
<img src="/hero.webp" width="1200" height="600"
     fetchpriority="high" decoding="async"
     alt="Opisni alt tekst">

Brza pobjeda: Pokrenite PageSpeed Insights na vašoj početnoj stranici. Pogledajte LCP element koji identificira. Ako je to slika, konvertirajte je u WebP, postavite eksplicitnu širinu/visinu i dodajte fetchpriority="high". Ovo često smanjuje LCP za 1-2 sekunde.

INP — Interakcija do Sljedeće Boje

INP mjeri koliko brzo vaša stranica reagira kada korisnici interagiraju (kliknu, dodirnu, upišu). Prati najgoru interakciju tijekom posjeta stranici i koristi to kao rezultat.

Uobičajeni INP problemi i rješenja:

ProblemUtjecajRješenje
Dugo trajanje JavaScript zadataka+200-1000msRazbijte na manje zadatke, koristite requestIdleCallback
Teški upravljači događaja+100-500msDebounce, throttle, koristite requestAnimationFrame
Problemi s rasporedom+50-300msGrupirajte DOM čitanja/pisanja, koristite will-change
Skripte trećih strana+100-500msOdgodite, učitajte nakon interakcije, koristite Web radnike
Sinhroni API pozivi+200-2000msAsync/await, stanje učitavanja, optimističko korisničko sučelje

Tehnike optimizacije INP:

// Loše: Blokira glavni nit
button.addEventListener('click', () => {
  const data = heavyComputation(); // Blokira 400ms
  updateDOM(data);
});

// Dobro: Predaje glavnom niti
button.addEventListener('click', async () => {
  // Prikaži trenutni povratni feedback
  button.textContent = 'Učitavanje...';

  // Razbijte teški rad na dijelove
  await scheduler.yield();
  const data = heavyComputation();

  await scheduler.yield();
  updateDOM(data);
});

Brza pobjeda: Otvorite Chrome DevTools > Performance tab. Kliknite kroz vaš site i potražite "Duge zadatke" (crvene trokutiće). Oni blokiraju glavnu nit. Najveći dugi zadatak obično je skripta treće strane — odgodite ga ili učitajte nakon prve interakcije.

CLS — Kumulativni Pomak Rasporeda

CLS mjeri vizualnu stabilnost — koliko se sadržaj stranice pomiče dok se učitava. Ništa ne frustrira korisnike više od kliknuća na gumb i pomaka stranice tako da kliknu na nešto drugo.

Uobičajeni CLS problemi i rješenja:

ProblemCLS UtjecajRješenje
Slike bez dimenzija0.1-0.5Uvijek postavite width i height
Oglasi koji se učitavaju kasno0.1-0.3Rezervirajte prostor s min-height
Web fontovi uzrokuju ponovni raspored0.05-0.2font-display: optional ili font s prilagođenom veličinom
Dinamičko umetanje sadržaja0.1-0.4Rezervirajte prostor, koristite content-visibility
Cookie bannere koji pomiču sadržaj0.05-0.2Dizajn preklapanja (ne pomiče dolje)

Checklist za prevenciju CLS:

<!-- Uvijek specificirajte dimenzije za medije -->
<img src="photo.webp" width="800" height="600" alt="...">
<video width="1280" height="720"></video>
<iframe width="560" height="315"></iframe>

<!-- Rezervirajte prostor za dinamički sadržaj -->
<div style="min-height: 250px;">
  <!-- Oglas će se učitati ovdje bez pomicanja -->
</div>

<!-- Koristite aspect-ratio za responzivni sadržaj -->
<div style="aspect-ratio: 16/9;">
  <img src="..." style="width: 100%; height: 100%; object-fit: cover;">
</div>

Brza pobjeda: Dodajte eksplicitne width i height atribute svakoj i na vaših top 10 stranica. Ova promjena eliminira najčešći problem CLS-a — slike se učitavaju i pomiču sadržaj dolje.

2. Optimizacija za Mobilne Uređaje

Google koristi mobilno prvo indeksiranje — vaše iskustvo na mobilnim uređajima jest vaše iskustvo rangiranja. Ako je vaša stranica pokvarena na mobilnom, nije važno koliko je savršena verzija na desktopu.

Checklist za optimizaciju mobilnih uređaja:

ElementZahtjevUobičajena greška
Viewport metawidth=device-width, initial-scale=1Potpuno nedostaje
Dodirni ciljeviMinimalno 44x44pxMali linkovi, gužve tipke
Veličina fontaMinimalno 16px za osnovni tekst12px nečitljivo na mobilnim uređajima
Širina sadržajaNema horizontalnog pomicanjaElementi fiksne širine
Razmak između dodiraMinimalno 8px između ciljevaPovezani linkovi dodiruju se
Responzivne slikesrcset s odgovarajućim veličinamaSlike dimenzija za desktop na mobilnim

Obrasci responzivnog dizajna:

/* Mobilni pristup */
.container {
  padding: 16px;
  font-size: 16px;
}

/* Ciljevi prijateljski za dodir */
.button, .link {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
}

/* Responzivna tipografija */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
p { font-size: clamp(1rem, 2vw, 1.125rem); }

/* Nema horizontalnog prelijevanja */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

Signali mobilnog SEO-a koje Google provjerava:

  • Tekst čitljiv bez zumiranja
  • Linkovi/dugmići nisu previše blizu jedni drugima
  • Sadržaj odgovara širini viewporta (nema horizontalnog pomicanja)
  • Nema Flash-a ili nepodržanih tehnologija
  • Prekidi ne blokiraju sadržaj pri ulasku
  • Stranica se brzo učitava na 4G/3G vezama

Brza pobjeda: Otvorite svoju stranicu na svom telefonu. Pokušajte kliknuti svaki gumb i link. Ako slučajno dodirnete pogrešnu stvar jer su ciljevi previše blizu, ili ako morate zumirati da biste pročitali tekst — to su vaša prioritetna rješenja.

3. Pristupačnost (WCAG)

Pristupačnost nije samo etička — to je i SEO signal. Googleovi algoritmi favoriziraju stranice koje su korisne svima, uključujući korisnike koji koriste čitače ekrana, navigaciju samo s tipkovnicom ili imaju vizualne poteškoće. WCAG (Smjernice za pristupačnost web sadržaja) sukladnost korelira s boljim rangiranjima.

Kritični zahtjevi pristupačnosti:

ElementZahtjevSEO utjecaj
Alt tekst na slikamaOpisni tekst za sve značajne slikeIzravno (SEO slika + pristupačnost)
Hijerarhija naslovaH1 → H2 → H3 bez preskakanjaIzravno (struktura sadržaja)
Kontrast boja4.5:1 za normalan tekst, 3:1 za veliki tekstNeizravno (uporabljivost)
Navigacija tipkovnicomSvi interaktivni elementi dostupni putem TabNeizravno (uporabljivost)
ARIA oznakeOznake za ikone, gumbe bez tekstaNeizravno (UX čitača ekrana)
Indikatori fokusaVidljiv prsten fokusa pri navigaciji tipkovnicomNeizravno (uporabljivost)
Oznake za obrasceSvaki unos ima pridruženu Neizravno (uporabljivost)
Tekst linkaOpisni (ne "kliknite ovdje")Izravno (SEO anchor teksta)

Proces testiranja pristupačnosti:

  1. Automatsko skeniranje — Pokrenite Lighthouse, axe-core, ili WAVE (uhvati ~30-50% problema)
  2. Test tipkovnice — Navigirajte cijelim svojim stranicama koristeći samo Tab, Enter, Escape
  3. Test čitača ekrana — Koristite VoiceOver (Mac) ili NVDA (Windows) na ključnim stranicama
  4. Kontrast boja — Provjerite sav tekst naspram pozadina (koristite alat za provjeru kontrasta u DevTools)
  5. Test zuma — Povećajte na 200% — radi li sve još uvijek?

Uobičajena rješenja pristupačnosti:

<!-- Slike: opisni alt tekst -->
<img src="chart.png" alt="Stupčasti grafikon koji prikazuje 40% povećanja organskog prometa od siječnja do ožujka 2026">

<!-- Gumbi: jasni oznake -->
<button aria-label="Zatvori navigacijski izbornik">
  <svg>...</svg> <!-- Gumb samo s ikonom treba aria-označavanje -->
</button>

<!-- Obrasci: pridružene oznake -->
<label for="email">Email adresa</label>
<input type="email" id="email" name="email" required>

<!-- Linkovi: opisni tekst -->
<a href="/guide">Pročitajte potpuni SEO vodič</a>
<!-- NE: <a href="/guide">Kliknite ovdje</a> -->

<!-- Preskočite navigaciju za korisnike tipkovnice -->
<a href="#main-content" class="skip-link">Preskoči na glavni sadržaj</a>

Brza pobjeda: Pokrenite Lighthouse na vašoj početnoj stranici u kategoriji Pristupačnost. Prvo popravite sve ono što je označeno kao "Neuspjeh" — obično su to nedostajući alt tekst, nedostajuće oznake za obrasce i tekst s niskim kontrastom. Ova rješenja obično traju 30 minuta i poboljšavaju vašu ocjenu za 20+ bodova.

4. Signali Iskustva Stranice

Osim osnovnih Web Vitals-a, Google procjenjuje nekoliko drugih signala iskustva stranice koji utječu na rangiranje.

Faktori iskustva stranice:

SignalZahtjevProvjera
HTTPSCijela stranica servira se preko HTTPS-aMješoviti sadržaj ga prekida
Nema ometajućih prekidaNe blokirajte sadržaj po dolaskuPop-upovi koji pokrivaju >30% na mobilnom
Sigurno pregledavanjeNema zlonamjernog softvera, phishinga, obmanjujućeg sadržajaGoogle Safe Browsing status
Prijateljski prema mobilnim uređajimaProlazi test prijateljstva za mobilne uređajeGoogle Mobile-Friendly Test
Nema obmanjujućih oglasaOglasi ne imituju sadržajObmanjujući gumbi za preuzimanje

Smjernice za prekid (što je dopušteno protiv sankcioniranog):

DopuštenoSankcionirano
Provjera starosti (zakonski zahtjev)Pop-up zaslon na ulasku na stranicu
Suglasnost za kolačiće (zakonski zahtjev)Prijava na e-mail koja pokriva cijeli sadržaj
Zatvaranje za plaćeni sadržaj"Preuzmite našu aplikaciju" blokirajući sadržaj
Mali banneri koji koriste <30% zaslonaOdbrojavanje prije pristupa sadržaju
Nakon što korisnik pomiče/interagiraPrije nego korisnik vidi bilo koji sadržaj

HTTPS checklist:

  • [ ] SSL certifikat valjan i nije istekao
  • [ ] Sve stranice preusmjeravaju HTTP → HTTPS (301)
  • [ ] Nema mješovitog sadržaja (HTTP resursi na HTTPS stranicama)
  • [ ] HSTS header omogućen (s includeSubDomains)
  • [ ] Interni linkovi koriste HTTPS (ne HTTP)
  • [ ] Sitemap koristi HTTPS URL-ove
  • [ ] Kanoničke oznake koriste HTTPS

Brza pobjeda: Provjerite za mješoviti sadržaj — otvorite DevTools konzolu na svojim ključnim stranicama. Svaka "Mješoviti sadržaj" upozorenja znače da učitavate HTTP resurse na HTTPS stranici. Ažurirajte te URL-ove na HTTPS. Ovo je jedan od najčešćih problema s iskustvom stranice.

5. Obrasci Navigacije

Dobra navigacija pomaže i korisnicima i pretraživačima. Korisnici brzo nalaze što im treba. Google crawleri razumiju vašu hijerarhiju stranice i učinkovito distribuiraju PageRank.

Najbolje prakse navigacije:

ObrasciKoristImplementacija
Ravan arhitekturaStranice unutar 3 klika s početne straniceHub stranice, breadcrumbovi
BreadcrumboviKorisnici znaju gdje se nalazeSchema markup + vidljivi trag
Logična struktura URL-aPredvidljive staze/kategorija/subkategorija/stranica
Navigacija u podnožjuSekundarne stranice dostupnePravno, o nama, kontakt, sitemap
Interna pretragaKorisnici pronalaze specifičan sadržajTražilica s prijedlozima
Povezani sadržajSmanjuje bounce, povećava dubinuSekcije "Povezani članci"

Idealna arhitektura stranice:

Početna stranica (1 klik od svega važnog)
├── /proizvodi/ (hub kategorije — linkovi на sve proizvode)
│   ├── /proizvodi/kategorija-a/
│   │   ├── /proizvodi/kategorija-a/proizvod-1
│   │   └── /proizvodi/kategorija-a/proizvod-2
│   └── /proizvodi/kategorija-b/
├── /blog/ (hub sadržaja — linkovi на sve objave)
│   ├── /blog/tematski-skup-1/ (pillar page)
│   │   ├── /blog/subtematski-1a
│   │   └── /blog/subtematski-1b
│   └── /blog/tematski-skup-2/
├── /alat / (korisne stranice)
└── /o-nama/ (stranice od povjerenja)

Implementacija breadcrumbova:

<!-- Vidljivi breadcrumb -->
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Početna</a></li>
    <li><a href="/blog/">Blog</a></li>
    <li aria-current="page">SEO Vodič Korak 5</li>
  </ol>
</nav>

<!-- Schema markup (BreadcrumbList) -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Početna", "item": "https://example.com/" },
    { "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://example.com/blog/" },
    { "@type": "ListItem", "position": 3, "name": "SEO Vodič Korak 5" }
  ]
}
</script>

Crvene zastave navigacije:

  • Stranice više od 4 klika od početne stranice (previše duboko)
  • Nema breadcrumbova (korisnici i Google gube kontekst)
  • Navigacija samo putem JavaScript-a (crawleri mogu propustiti linkove)
  • Orfanske stranice (nema internih linkova koji ih upućuju)
  • Mega izbornici s 200+ linkova (razrjeđuje vrijednost po linku)

Brza pobjeda: Provjerite vaše najvažnije stranice konverzije — koliko klika od početne stranice? Ako više od 3, dodajte izravne linkove s vaše početne stranice ili hub stranica. Svaki klik dublje smanjuje i posjete korisnika i učestalost crawl-anja.

6. Optimizacija Iznad Stranice

Što korisnici vide prije pomicanja određuje hoće li ostati ili otići. Sadržaj iznad stranice mora odmah komunicirati vrijednost i biti u skladu s pretraživačkom upitom koji ih je doveo.

Must-haves iznad stranice:

ElementZaštoUobičajena greška
Jasan naslov (H1)Potvrđuje relevantnost na upitOpćenit ili nedostaje
Vrijednosna ponudaZašto bi trebali ostati?Zakopana ispod stranice
Primarni CTAŠto bi trebali učiniti dalje?Skriven ili nejasan
Hero slika/mediaVizualno angažiranjeSporo učitavanje, uzrokuje LCP probleme
Signali povjerenjaZašto bi vam trebali vjerovati?Nema logotipa, recenzija ili vjerodajnica

Izgled iznad stranice:

Desktop (1440px viewport):
┌──────────────────────────────────────┐
│ Traka za navigaciju                  │
├──────────────────────────────────────┤
│                                      │
│  H1: Jasan naslov koji se podudara s upitom │
│  Podnaslov: Vrijednosna ponuda       │
│                                      │
│  [Primarni CTA Gumb]                 │
│                                      │
│  Signali povjerenja: logotipi, statistike, oznake │
│                                      │
├──────────────────────────────────────┤
│ ↓ Sadržaj se nastavlja ispod stranice │
└──────────────────────────────────────┘

Mobile (375px viewport):
┌────────────────────┐
│ Navigacija (hamburger)  │
├────────────────────┤
│                    │
│ H1: Naslov       │
│ (kraći na mobitelu)│
│                    │
│ [CTA Gumb]        │
│ (cijela širina, 44px+)│
│                    │
│ Oznaka povjerenja   │
│                    │
├────────────────────┤
│ ↓ Pomaknite se za više │
└────────────────────┘

Kritična pravila iznad stranice:

  • H1 mora biti vidljiv bez pomicanja (podudara se s upitom pretraživanja)
  • CTA mora biti vidljiv bez pomicanja (smanjuje bounce)
  • Nema pomaka u sadržaju iznad stranice (ubica CLS-a)
  • Hero slika mora se brzo učitati (obično je to LCP element)
  • Mobilno: smanjite sadržaj iznad stranice (manje prostora viewporta)

Brza pobjeda: Napravite snimku zaslona vaše početne stranice na mobilnom (375px širina). Je li H1 vidljiv? Je li gumb CTA vidljiv? Možete li reći čime se bavi stranica unutar 2 sekunde? Ako je bilo koji odgovor "ne," gubite posjetitelje prije nego što se pomaknu.

Checklist za UX Reviziju

Prođite kroz ovo za vaše najvažnije stranice:

  • [ ] LCP ispod 2.5 sekundi (hero slika optimizirana, kritični CSS u liniji)
  • [ ] INP ispod 200ms (nema dugih JavaScript zadataka koji blokiraju interakciju)
  • [ ] CLS ispod 0.1 (sve slike imaju dimenzije, nema kasnih pomaka)
  • [ ] Prijateljski prema mobilnim uređajima (44px dodirni ciljevi, 16px+ tekst, nema horizontalnog pomicanja)
  • [ ] Pristupačno (alt tekst, hijerarhija naslova, kontrast boja, navigacija tipkovnicom)
  • [ ] HTTPS svuda (nema mješovitog sadržaja, HSTS omogućeno)
  • [ ] Nema ometajućih prekida (suglasnički overlayi OK, pop-upovi koji blokiraju sadržaj nisu)
  • [ ] Breadcrumbovi prisutni (s BreadcrumbList shemom)
  • [ ] Dubina navigacije ispod 4 klika do bilo koje važne stranice
  • [ ] Optimizirano iznad stranice (H1 vidljiv, CTA vidljiv, brzi LCP)

Kako LANGR Skandira Vaš UX

LANGR-ovi moduli za skeniranje povezani s UX-om uključuju:

  • Modul osnovnih Web Vitals — Mjeri LCP, INP, CLS iz Chrome User Experience Report (realni podaci korisnika)
  • Modul PageSpeed — Potpuna Lighthouse revizija performansi s mobilnim i desktop rezultatima
  • Mobilni modul — Konfiguracija viewport-a, veličina dodirnih ciljeva, čitljivost teksta
  • Modul Pristupačnosti — Provjere WCAG sukladnosti, ARIA korištenje, kontrast boja
  • Modul Skener Layout-a — AI-pokretač ocjena mobilnih i desktop izgleda
  • Modul Iskustva Stranice — Otkrivanje prekida, HTTPS status, sigurno pregledavanje

Ovi moduli se pokreću na svakom skeniranju, dajući vam potpuni pregled kako posjetitelji doživljavaju vašu stranicu — i točno što treba popraviti za bolje rangiranje.

Uobičajene UX Greške (Rangirane po Utjecaju)

  1. Ignoriranje mobilnih uređaja — 60%+ pretraživanja je putem mobilnog — pokvareni mobilni uređaj = pokvareno rangiranje
  2. Neoptimizirane slike — Najveći uzrok sporog LCP (i obično najlakše rješenje)
  3. Nema eksplicitnih dimenzija slika — Pomaci rasporeda uništavaju CLS rezultate
  4. Bloat skripti trećih strana — Čavrljanja, analitika, oglasi blokiraju INP
  5. Nedostajuće osnove pristupačnosti — Nema alt teksta, nema hijerarhije naslova, nema kontrasta
  6. Prekidi koji blokiraju sadržaj — Pop-upovi preko cijelog ekrana prije nego što korisnici vide sadržaj
  7. Duboka arhitektura stranice — Važne stranice zakopane 5+ klika od početne stranice
  8. Nema vrijednosti iznad stranice — Korisnici ne mogu reći čime se bavi stranica bez pomicanja

Što je sljedeće?

Korak 6: Praćenje & Rangiranje — Ne možete poboljšati ono što ne mjerite. Pozicije ključnih riječi, praćenje rezultata, izvještaji o promjenama i nadzor vremena rada.


Ovaj vodič je dio LANGR-ove serije od 13 koraka SEO. Izvršite besplatnu reviziju kako biste vidjeli gdje se vaša stranica nalazi u svim 13 disciplina.

Want to know where your site stands?

Run a free SEO audit — it takes under 60 seconds.

Related articles