Ghid SEO Pasul 5: UX / Experiența Utilizatorului

Acesta este Pasul 5 din Ghidul SEO în 13 Pași. Experiența utilizatorului este acum un factor de clasificare direct — Google măsoară modul în care vizitatorii interacționează cu site-ul tău și recompensează site-urile care oferă experiențe rapide, accesibile și plăcute.

Strategia de conținut (Pasul 3) determină ce publici. Linkbuildingul (Pasul 4) dovedește autoritatea ta. Dar, dacă vizitatorii ajung pe pagina ta și părăsesc imediat pentru că este lentă, nu funcționează pe mobil sau este inaccesibilă — nimic din toate acestea nu contează. Google urmărește aceste semnale și le folosește pentru a ajusta clasamentele.

Din 2021, actualizarea Page Experience a Google a confirmat UX ca factor de clasificare. În 2024, INP (Interaction to Next Paint) a înlocuit FID ca un Core Web Vital. În 2026, aceste semnale au o greutate și mai mare, deoarece Google prioritizează din ce în ce mai mult metricii de satisfacție a utilizatorilor în detrimentul semnalelor tradiționale.

Ce Acoperă UX pentru SEO

Optimizarea UX pentru SEO se extinde pe 6 domenii:

Core Web Vitals — metrici oficiali UX ai Google (LCP, INP, CLS)
Optimizarea pentru Mobil — design responsiv, ținte tactile, viewport
Accesibilitate (WCAG) — fă-ți site-ul utilizabil pentru toți
Semnalele de Experiență pe Pagină — HTTPS, fără interstițiale, navigare sigură
Tiparele de Navigare — structură de site care ajută utilizatorii și crawler-ele
Optimizarea Fără Derularea Paginii — ce văd utilizatorii fără a derula

1. Core Web Vitals (CWV)

Core Web Vitals sunt cele trei metrici UX măsurabile ale Google. Acestea sunt urmărite în datele din raportul de experiență a utilizatorilor Chrome (CrUX) și influențează direct clasamentele.

Cele trei metrici:

| Metric | Măsoară | Bun | Necesită Îmbunătățiri | Prost | |--------|---------|-----|----------------------|------| | LCP (Largest Contentful Paint) | Viteza de încărcare | < 2.5s | 2.5s - 4.0s | > 4.0s | | INP (Interaction to Next Paint) | Reacție | < 200ms | 200ms - 500ms | > 500ms | | CLS (Cumulative Layout Shift) | Stabilitate vizuală | < 0.1 | 0.1 - 0.25 | > 0.25 |

LCP — Largest Contentful Paint

LCP măsoară cât de repede devine vizibil conținutul principal al paginii tale. "Cel mai mare conținut" este de obicei imaginea ta principală, titlul principal sau cel mai mare bloc peste linia de derulare.

Probleme comune de LCP și soluții:

| Problemă | Impact | Soluție | |----------|--------|---------| | Imagine hero neoptimizată | +2-5s | Format WebP, dimensiuni corecte, fetchpriority="high" | | CSS/JS care blochează redarea | +1-3s | Inline CSS critic, deferare non-critic | | Răspuns lent al serverului (TTFB) | +1-4s | CDN, cache server, implementare edge | | Fonturi web blochează redarea | +0.5-2s | font-display: swap, preîncărcare fonturi critice | | Scripturi de terță parte | +1-3s | Deferare widget-uri analytics/chat, încărcare lazy a reclamelor |

Prioritate pentru optimizarea LCP:

<!-- 1. Preîncărcare imagine LCP -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- 2. Inline CSS critic (primele 14KB) -->
<style>/* Stiluri peste linia de derulare */</style>

<!-- 3. Deferare CSS non-critice -->
<link rel="stylesheet" href="/full.css" media="print" onload="this.media='all'">

<!-- 4. Imagine hero cu dimensiuni explicite -->
<img src="/hero.webp" width="1200" height="600"
     fetchpriority="high" decoding="async"
     alt="Text alternativ descriptiv">

Câștig rapid: Rulează PageSpeed Insights pe pagina ta de start. Uită-te la elementul LCP pe care-l identifică. Dacă este o imagine, convertește-o în WebP, setează dimensiuni explicite și adaugă fetchpriority="high". Aceasta singură, adesea reduce LCP cu 1-2 secunde.

INP — Interaction to Next Paint

INP măsoară cât de repede răspunde pagina ta când utilizatorii interacționează (fac clic, ating, tastează). Urmărește cea mai proastă interacțiune în timpul vizitei pe pagină și folosește acea interacțiune ca scor.

Probleme comune de INP și soluții:

| Problemă | Impact | Soluție | |----------|--------|---------| | Sarcini JavaScript lungi | +200-1000ms | Împarte în sarcini mai mici, folosește requestIdleCallback | | Manipulatoare de evenimente greoaie | +100-500ms | Debounce, throttle, folosește requestAnimationFrame | | Layout thrashing | +50-300ms | Grupați citirile/scrierile DOM, folosiți will-change | | Scripturi de terță parte | +100-500ms | Deferare, încărcare după interacțiune, folosește Web Workers | | Apeluri API sincrone | +200-2000ms | Async/await, stări de încărcare, UI optimist |

Tehnici de optimizare INP:

// Rău: Blochează firul principal
button.addEventListener('click', () => {
  const data = heavyComputation(); // Blochează timp de 400ms
  updateDOM(data);
});

// Bun: Oferă randament firului principal
button.addEventListener('click', async () => {
  // Arată feedback imediat
  button.textContent = 'Încărcare...';

  // Împarte munca grea în fragmente
  await scheduler.yield();
  const data = heavyComputation();

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

Câștig rapid: Deschide Chrome DevTools > tabul Performance. Navighează pe site-ul tău și caută "Long Tasks" (triunghiuri roșii). Acestea blochează firul principal. Cea mai mare sarcină lungă este de obicei un script de terță parte — deferare sau încărcare după prima interacțiune.

CLS — Cumulative Layout Shift

CLS măsoară stabilitatea vizuală — cât de mult se mișcă conținutul paginii în timpul încărcării. Nimic nu-i frustrează mai mult pe utilizatori decât să facă clic pe un buton și să constate că pagina se mută încât să facă clic pe altceva.

Probleme comune de CLS și soluții:

| Problemă | Impact CLS | Soluție | |----------|------------|---------| | Imagini fără dimensiuni | 0.1-0.5 | Setează întotdeauna width și height | | Reclame ce se încarcă târziu | 0.1-0.3 | Rezervă spațiu cu min-height | | Fonturi web cauzând reflow | 0.05-0.2 | font-display: optional sau fallback ajustat la dimensiune | | Inserarea de conținut dinamic | 0.1-0.4 | Rezervă spațiu, folosește content-visibility | | Bannere cookie ce împing conținutul | 0.05-0.2 | Design overlay (nu împinge în jos) |

Lista de verificare pentru prevenirea CLS:

<!-- Întotdeauna specifică dimensiunile pentru media -->
<img src="photo.webp" width="800" height="600" alt="...">
<video width="1280" height="720"></video>
<iframe width="560" height="315"></iframe>

<!-- Rezervă spațiu pentru conținut dinamic -->
<div style="min-height: 250px;">
  <!-- Reclama se va încărca aici fără a schimba poziția -->
</div>

<!-- Folosește aspect-ratio pentru media responsivă -->
<div style="aspect-ratio: 16/9;">
  <img src="..." style="width: 100%; height: 100%; object-fit: cover;">
</div>

Câștig rapid: Adaugă atribute width și height explicite pentru fiecare și de pe primele tale 10 pagini. Această schimbare unică elimină cea mai comună problemă CLS — imagini care se încarcă și împing conținutul în jos.

2. Optimizarea pentru Mobil

Google folosește indexare mobile-first — experiența ta pe mobil ESTE experiența ta de clasificare. Dacă site-ul tău este rupt pe mobil, nu contează cât de perfect este versiunea desktop.

Lista de verificare pentru optimizarea mobilă:

| Element | Cerință | Eșec comun | |---------|---------|------------| | Meta viewport | width=device-width, initial-scale=1 | Complet lipsă | | Ținte tactile | Minim 44x44px | Linkuri mici, butoane înghesuite | | Dimensiunea fontului | Text de bază minim 16px | 12px ilizibil pe mobil | | Lățimea conținutului | Fără derulare orizontală | Elemente cu lățime fixă | | Spațierea între atingeri | 8px minim între ținte | Linkuri adiacente care se ating | | Imagini responsiv | srcset cu dimensiuni adecvate | Imagini de dimensiuni desktop pe mobil |

Tipare de design responsiv:

/* Abordare mobile-first */
.container {
  padding: 16px;
  font-size: 16px;
}

/* Ținte prietenoase la atingere */
.button, .link {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
}

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

/* Fără overflow orizontal */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

Semnale SEO mobile pe care Google le verifică:

Text lizibil fără a face zoom
Linkuri/butoane nu prea apropiate
Conținutul se potrivește lățimii viewportului (fără derulare orizontală)
Fără Flash sau tehnologii neacceptate
Interstițialele nu blochează conținutul la acces
Pagina se încarcă rapid pe conexiuni 4G/3G

Câștig rapid: Deschide-ți site-ul pe telefon. Încearcă să faci clic pe fiecare buton și link. Dacă atingi întâmplător un lucru greșit din cauza faptului că țintele sunt prea aproape sau dacă trebuie să faci zoom pentru a citi textul — acestea sunt remedierile tale prioritare.

3. Accesibilitate (WCAG)

Accesibilitatea nu este doar etică — este un semnal SEO. Algoritmii Google favorizează site-urile care sunt utilizabile de toată lumea, inclusiv utilizatori cu cititoare de ecran, navigare doar cu tastatura sau deficiențe vizuale. Complianta cu WCAG (Ghidurile de Accesibilitate pentru Conținutul Web) corelează cu clasamente mai bune.

Cerințe critice de accesibilitate:

| Element | Cerință | Impact SEO | |---------|---------|------------| | Text alternativ pentru imagini | Text descriptiv pentru toate imaginile semnificative | Direct (SEO imagine + accesibilitate) | | Ierarhia antetului | H1 → H2 → H3 fără salturi | Direct (structura conținutului) | | Contrast de culori | 4.5:1 pentru text normal, 3:1 pentru text mare | Indirect (uzabilitate) | | Navigare cu tastatura | Toate elementele interactive să fie accesibile prin Tab | Indirect (uzabilitate) | | Etichete ARIA | Etichete pentru pictograme, butoane fără text | Indirect (UX cititor de ecran) | | Indicatori de focalizare | Rame vizibile de focalizare pentru navigarea cu tastatura | Indirect (uzabilitate) | | Etichete pentru formulare | Fiecare intrare să aibă un asociat | Indirect (uzabilitate) | | Textul linkului | Descriptiv (nu "fă clic aici") | Direct (SEO text ancoră) |

Procesul de testare a accesibilității:

Scanare automată — Rulează Lighthouse, axe-core sau WAVE (prinde ~30-50% din probleme)
Test cu tastatura — Navighează întregul site folosind doar Tab, Enter, Escape
Test cu cititor de ecran — Folosește VoiceOver (Mac) sau NVDA (Windows) pe paginile cheie
Contrast de culori — Verifică toate textele față de fundaluri (folosește verificatorul de contrast din DevTools)
Test de mărire — Zoom la 200% — funcționează totul în continuare?

Remedieri comune de accesibilitate:

<!-- Imagini: text alternativ descriptiv -->
<img src="chart.png" alt="Grafic cu bare ce arată o creștere de 40% a traficului organic din ianuarie până în martie 2026">

<!-- Butoane: etichete clare -->
<button aria-label="Închide meniul de navigare">
  <svg>...</svg> <!-- Buton doar cu pictogramă are nevoie de aria-label -->
</button>

<!-- Formulare: etichete asociate -->
<label for="email">Adresa de email</label>
<input type="email" id="email" name="email" required>

<!-- Linkuri: text descriptiv -->
<a href="/guide">Citește întregul ghid SEO</a>
<!-- NU: <a href="/guide">Fă clic aici</a> -->

<!-- Sarcini de navigare pentru utilizatorii cu tastatură -->
<a href="#main-content" class="skip-link">Salt la conținutul principal</a>

Câștig rapid: Rulează Lighthouse pe pagina ta de start cu categoria Accesibilitate. Remediază tot ce a fost marcat ca "Eșec" mai întâi — aceste probleme sunt de obicei lipsa textului alternativ, lipsa etichetelor formularului și text cu contrast slab. Aceste remedieri durează adesea 30 de minute și îmbunătățesc punctajul tău cu peste 20 de puncte.

4. Semnalele de Experiență pe Pagină

Pe lângă Core Web Vitals, Google evaluează mai multe alte semnale de experiență pe pagină care afectează clasamentele.

Factori de experiență pe pagină:

| Semnal | Cerință | Verificare | |--------|---------|------------| | HTTPS | Întregul site servit prin HTTPS | Conținutul mixt îl întrerupe | | Fără interstițiale intruzive | Nu bloca conținutul la acces | Popups ce acoperă >30% pe mobil | | Navigare sigură | Fără malware, phishing, conținut înșelător | Statut Google Safe Browsing | | Prietenos pentru mobil | Trece testul de prietenie pentru mobil | Google Mobile-Friendly Test | | Fără reclame înșelătoare | Reclamele nu imită conținutul | Butoane de descărcare mascată |

Linii directoare pentru interstițiale (ce este permis versus penalizat):

| Permis | Penalizat | |--------|-----------| | Verificarea vârstei (legal necesară) | Popup-uri pe întreaga pagină la acces | | Consimțământ pentru cookie-uri (legal necesar) | Înscrierea prin email acoperind întregul conținut | | Muri de logare pentru conținut pe bază de abonament | "Descarcă aplicația noastră" blocând conținutul | | Bannere mici ce folosesc <30% din ecran | Timere de contorizare înainte de acces la conținut | | După ce utilizatorul derulează/interacționează | Înainte ca utilizatorul să vadă orice conținut |

Lista de verificare HTTPS:

[ ] Certificatul SSL valid și nesperat
[ ] Toate paginile redirecționează HTTP → HTTPS (301)
[ ] Fără conținut mixt (resurse HTTP pe pagini HTTPS)
[ ] Header HSTS activat (cu includeSubDomains)
[ ] Linkurile interne folosesc HTTPS (nu HTTP)
[ ] Sitemap-ul folosește URL-uri HTTPS
[ ] Etichetele canonice folosesc HTTPS

Câștig rapid: Verifică dacă există conținut mixt — deschide Consola DevTools pe paginile tale cheie. Orice avertisment "Mixed Content" înseamnă că încarci resurse HTTP pe o pagină HTTPS. Actualizează acele URL-uri pe HTTPS. Aceasta este una dintre cele mai comune probleme legate de experiența paginii.

5. Tiparele de Navigare

O navigare bună ajută atât utilizatorii, cât și motoarele de căutare. Utilizatorii găsesc rapid ceea ce au nevoie. Crawlerele Google înțeleg ierarhia site-ului tău și distribuie eficient PageRank.

Cele mai bune practici pentru navigare:

| Tipar | Beneficiu | Implementare | |-------|-----------|--------------| | Arhitectură plată | Pagini la 3 clicuri distanță de acasă | Pagini hub, breadcrumbs | | Breadcrumbs | Utilizatorii știu unde se află | Schema de marcare + traseu vizibil | | Structura URL logică | Cărări predictibile | /categorii/subcategorii/pagină | | Navigare de subsol | Pagini secundare accesibile | Legal, despre, contact, sitemap | | Căutare internă | Utilizatorii găsesc conținut specific | Casetă de căutare cu sugestii | | Conținut conex | Reduce bounce-ul, crește adâncimea | Secțiuni "Articole relevante" |

Arhitectura ideală a site-ului:

Pagina de start (1 clic de la tot ce e important)
├── /produse/ (hub de categorie — linkuri către toate produsele)
│   ├── /produse/categorie-a/
│   │   ├── /produse/categorie-a/produs-1
│   │   └── /produse/categorie-a/produs-2
│   └── /produse/categorie-b/
├── /blog/ (hub de conținut — linkuri către toate postările)
│   ├── /blog/topic-cluster-1/ (pagina pilon)
│   │   ├── /blog/subtopic-1a
│   │   └── /blog/subtopic-1b
│   └── /blog/topic-cluster-2/
├── /instrumente/ (pagini utilitare)
└── /despre/ (pagini de încredere)

Implementarea breadcrumb-urilor:

<!-- Breadcrumb vizibil -->
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Acasă</a></li>
    <li><a href="/blog/">Blog</a></li>
    <li aria-current="page">Ghid SEO Pasul 5</li>
  </ol>
</nav>

<!-- Schema de marcare (BreadcrumbList) -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Acasă", "item": "https://example.com/" },
    { "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://example.com/blog/" },
    { "@type": "ListItem", "position": 3, "name": "Ghid SEO Pasul 5" }
  ]
}
</script>

Steaguri roșii în navigare:

Pagini la mai mult de 4 clicuri de pagina de start (prea adânci)
Fără breadcrumbs (utilizatorii și Google își pierd contextul)
Navigare exclusiv Javascript (crawler-ele pot rata linkuri)
Pagini orfane (nicio legătură internă care să conducă la ele)
Mega meniuri cu 200+ linkuri (diluarea valorii pe link)

Câștig rapid: Verifică cele mai importante pagini de conversie — câte clicuri sunt de la pagina de start? Dacă sunt mai mult de 3, adaugă linkuri directe de pe pagina ta de start sau de pe hub-uri de categorii. Fiecare clic mai adânc reduce atât vizitele utilizatorilor, cât și frecvența de crawling.

6. Optimizarea Fără Derularea Paginii

Ce văd utilizatorii înainte de a derula determină dacă rămân sau pleacă. Conținutul deasupra fold-ului trebuie să comunice instantaneu valoare și să se alinieze la interogarea de căutare care i-a adus acolo.

Ce trebuie să conțină zona deasupra fold-ului:

| Element | De ce | Eșec comun | |---------|-------|------------| | Antet clar (H1) | Confirmă relevanța pentru interogare | General sau lipsă | | Propunerea de valoare | De ce ar trebui să rămână? | Îngropată sub fold | | CTA principal | Ce ar trebui să facă în continuare? | Ascuns sau neclar | | Imagine/media hero | Angajament vizual | Încărcare lentă, cauzând probleme de LCP | | Semnale de încredere | De ce ar trebui să te creadă? | Fără logo-uri, recenzii sau acreditive |

Tiparele de layout deasupra fold-ului:

Desktop (viewport 1440px):
┌──────────────────────────────────────┐
│ Bara de navigare                      │
├──────────────────────────────────────┤
│                                      │
│  H1: Antet clar corespunzător interogării |
│  Subtitlu: Propunerea de valoare     │
│                                      │
│  [Buton CTA Principal]               │
│                                      │
│  Semnale de încredere: logo-uri, statistici, insigne │
│                                      │
├──────────────────────────────────────┤
│ ↓ Conținutul continuă sub fold       │
└──────────────────────────────────────┘

Mobil (viewport 375px):
┌────────────────────┐
│ Navigare (hamburger)│
├────────────────────┤
│                    │
│ H1: Antet          │
│ (mai scurt pe mobil)│
│                    │
│ [Buton CTA]       │
│ (lățime completă, 44px+)│
│                    │
│ Insignă de încredere │
│                    │
├────────────────────┤
│ ↓ Derulați pentru mai mult │
└────────────────────┘

Reguli critice pentru zona deasupra fold-ului:

H1 trebuie să fie vizibil fără a derula (corespunde interogării de căutare)
CTA trebuie să fie vizibil fără a derula (reduce bounce-ul)
Fără schimbări de layout în conținutul deasupra fold-ului (UCV killer)
Imaginea hero trebuie să se încarce rapid (de obicei, este elementul LCP)
Mobil: reduce conținutul deasupra fold-ului (mai puțin spațiu în viewport)

Câștig rapid: Fă o captură de ecran a paginii tale de start pe mobil (lățime 375px). H1 este vizibil? Este vizibil un buton CTA? Poți spune ce face site-ul în decurs de 2 secunde? Dacă orice răspuns este "nu", pierzi vizitatori înainte de a derula.

Lista de verificare pentru Auditul UX

Rulează prin aceasta pentru paginile tale cheie:

[ ] LCP sub 2.5 secunde (imaginea hero optimizată, CSS-ul critic inline)
[ ] INP sub 200ms (fără sarcini JavaScript lungi care blochează interacțiunea)
[ ] CLS sub 0.1 (toate imaginile au dimensiuni, fără schimbări tardive)
[ ] Prietenos pentru mobil (ținte tactile de 44px, text de 16px+, fără derulare orizontală)
[ ] Accesibil (text alternativ, ierarhie a antetelor, contrast de culori, navigare cu tastatura)
[ ] HTTPS peste tot (fără conținut mixt, HSTS activat)
[ ] Fără interstițiale intruzive (overlay-uri de consimțământ OK, popups care blochează conținutul NU)
[ ] Breadcrumbs prezente (cu schema BreadcrumbList)
[ ] Adâncimea navigării sub 4 clicuri către orice pagină importantă
[ ] Optimizată deasupra fold-ului (H1 vizibil, CTA vizibil, LCP rapid)

Cum Scanează LANGR UX-ul Tău

Modulele de scanare legate de UX ale LANGR includ:

Module Core Web Vitals — Măsoară LCP, INP, CLS din raportul de experiență a utilizatorilor Chrome (date reale ale utilizatorilor)
Module PageSpeed — Audit complet al performanței Lighthouse cu scoruri mobile și desktop
Module Mobile — Configurarea viewport-ului, dimensiunea țintele tactile, lizibilitatea textului
Module Accesibilitate — Verificări de conformitate WCAG, utilizarea ARIA, contrast de culori
Modul de Scanare a Layout-ului — Evaluare AI a layout-urilor mobile și desktop
Modul de Experiență pe Pagină — Detectarea interstițialelor, statutul HTTPS, navigare sigură

Aceste module rulează la fiecare scanare, oferindu-ți o imagine completă despre cum experimentează vizitatorii site-ul tău — și exact ce trebuie să remediezi pentru un clasament mai bun.

Greșeli Comune de UX (Clasificate după Impact)

Ignorarea mobilului — 60%+ din căutări sunt pe mobil; mobilul rupt = clasament rupt
Imagini neoptimizate — Cea mai frecventă cauză a unui LCP lent (și adesea cea mai ușoară rezolvare)
Fără dimensiuni explicite ale imaginilor — Schimbările de layout distrug scorurile CLS
Suprasolicitarea scripturilor de terță parte — Widget-uri de chat, analitică, reclame blochează INP
Lipsa bazelor accesibilității — Fără text alternativ, fără ierarhie a antetelor, fără contrast
Interstițiale ce blochează conținutul — Popup-uri pe întreaga pagină înainte ca utilizatorii să vadă conținut
Arhitectură de site profundă — Pagini importante îngropate la 5+ clicuri de la pagina de start
Fără valoare deasupra fold-ului — Utilizatorii nu pot spune ce face site-ul fără a derula

Ce Urmează?

Pasul 6: Monitorizare & Clasament — Nu poți îmbunătăți ceea ce nu măsori. Poziții pe cuvinte cheie, urmărirea scorurilor, rapoarte de schimbare și monitorizarea uptime-ului.

Acest ghid face parte din seria de 13 pași SEO de la LANGR. Execută un audit gratuit pentru a vedea unde se află site-ul tău în toate cele 13 discipline.

Ghid SEO Pasul 5: UX / Experiența Utilizatorului — Cum Experiența Vizitatorilor pe Site-ul Tău Afectează Clasamentul