Gid SEO Etap 5: UX / Eksperyans Itliyè — Kijan Vizitè Yo Eksperyans Sit Ou A Afekte Klasman Yo
Gid SEO Etap 5: UX / Eksperyans Itliyè
Sa a se Etap 5 nan Gid SEO ki gen 13 Etap. Eksperyans itliyè se kounye a yon faktè klasman dirèk — Google mezire kijan vizitè yo entèaji ak sit ou a epi li rekonpans sit ki bay eksperyans rapid, aksesib, ak plezan.
Strateji kontni (Etap 3) detèmine sa ou pibliye. Linkbuilding (Etap 4) pwouve otorite ou. Men, si vizitè yo aterisaj sou paj ou a epi yo kite imedyatman paske li ralanti, domaje sou mobil, oswa ensèten — okenn nan sa a pa gen okenn valè. Google swiv siyal sa yo epi li itilize yo pou ajiste klasman yo.
Depi 2021, mete ajou Eksperyans Paj Google a fè UX yon faktè klasman konfime. Nan 2024, INP (Entèraksyon pou Penti Pwochen) ranplase FID kòm yon Core Web Vital. Nan 2026, siyal sa yo pote plis pwa pandan Google plis pwiorize metrik satisfaksyon itilizatè sou siyal tradisyonèl.
Sa UX pou SEO Kouvri
Optimizasyon UX pou SEO couvre 6 zòn:
- Core Web Vitals — Metrik ofisyèl UX Google yo (LCP, INP, CLS)
- Optimizasyon Mobil — Desen reponn, objektif manyen, viewport
- Aksè (WCAG) — Fè sit ou itil pou tout moun
- Siyal Eksperyans Paj — HTTPS, pa genyen interstitials, navigasyon sekirize
- Modèl Navigasyon — Estrikti sit ki ede itilizatè yo ak crawlers yo
- Optimizasyon Anwo-Pli — Sa itilizatè yo wè san yo pa route
1. Core Web Vitals (CWV)
Core Web Vitals se twa metrik mezurab UX Google yo. Yo swiv nan rapò experyans itilizatè Chrome (CrUX) ak enfliyanse dirèkteman klasman yo.
Twa metrik yo:
| Metrik | Mezire | Bon | Bezwen Amelyorasyon | Move |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Vitès chajman | < 2.5s | 2.5s - 4.0s | > 4.0s |
| INP (Interaction to Next Paint) | Responsivite | < 200ms | 200ms - 500ms | > 500ms |
| CLS (Cumulative Layout Shift) | Estabilite vizyèl | < 0.1 | 0.1 - 0.25 | > 0.25 |
LCP — Largest Contentful Paint
LCP mezire konbyen vit kontni prensipal paj ou a vin vizib. "Pi gwo kontni an" nòmalman se imaj hero ou a, tit prensipal la, oswa blòk ki pi gwo anwo pli.
Pwoblèm ak LCP komen ak solisyon:
| Pwoblèm | Enpak | Solisyon |
|---|---|---|
| Imaj hero ki pa optimize | +2-5s | Fòma WebP, dimansyon apwopriye, fetchpriority="high" |
| CSS/JS ki bloke rann | +1-3s | Inline CSS kritik, defer CSS ki pa kritik |
| Repons server ralanti (TTFB) | +1-4s | CDN, caching sou server, deployment bò ay |
| Font entènèt ki bloke rann | +0.5-2s | font-display: swap, preload font kritik |
| Script twazyèm pati | +1-3s | Defer widgets analitik/chat, lazy load piblisite |
Priyorite optimizasyon LCP:
<!-- 1. Preload imaj LCP a -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- 2. Inline CSS kritik (premye 14KB) -->
<style>/* Estil anwo pli sèlman */</style>
<!-- 3. Defer CSS ki pa kritik -->
<link rel="stylesheet" href="/full.css" media="print" onload="this.media='all'">
<!-- 4. Imaj hero avèk dimansyon eksplicit -->
<img src="/hero.webp" width="1200" height="600"
fetchpriority="high" decoding="async"
alt="Teks alt deskriptif">Rapid reyalizasyon: Kouri PageSpeed Insights sou paj d'ouvè ou. Gade nan eleman LCP li idantifye. Si se yon imaj, konvèti nan WebP, mete dimansyon espèsifik, epi ajoute fetchpriority="high". Sa a souvan fè LCP diminye pa 1-2 segonn.
INP — Interaction to Next Paint
INP mezire konbyen vit paj ou a reponn lè itilizatè yo entèaji (klike, tape, ekri). Li swiv pi move entèraksyon pandan vizit paj la epi li itilize sa a kòm nòt.
Pwoblèm ak INP komen ak solisyon:
| Pwoblèm | Enpak | Solisyon |
|---|---|---|
| Long travay JavaScript | +200-1000ms | Divize an ti travay, itilize requestIdleCallback |
| Devan manifoul ki lou | +100-500ms | Debounce, throttle, itilize requestAnimationFrame |
| Layout thrashing | +50-300ms | Bagay DOM li/li ekri an gwoup, itilize will-change |
| Script twazyèm pati | +100-500ms | Defer, chaje apre entèraksyon, itilize Web Workers |
| Apèl API senkronize | +200-2000ms | Async/await, eta chajman, UI optimize |
Teknik optimizasyon INP:
// Move: Bloke pwensipal fil
button.addEventListener('click', () => {
const data = heavyComputation(); // Bloke pou 400ms
updateDOM(data);
});
// Bon: Anilè pou pwensipal fil
button.addEventListener('click', async () => {
// Montre reyaksyon imedyat
button.textContent = 'Chaje...';
// Divize travay lou an moso
await scheduler.yield();
const data = heavyComputation();
await scheduler.yield();
updateDOM(data);
});Rapid reyalizasyon: Louvri Chrome DevTools > Onglet Performance. Klike nan sit ou epi gade pou "Long Tasks" (triyang wouj). Sa yo ap bloke pwensipal fil la. Pi gwo travay long lan anjeneral se yon script twazyèm pati — defer li oswa chaje li apre premye entèraksyon.
CLS — Cumulative Layout Shift
CLS mezire estabilite vizyèl — konbyen kontni paj la sa WAP chanje jan li chaje. Anyen ki fristre itilizatè yo plis pase klike sou yon bouton epi paj la chanje konsa yo klike sou yon lòt bagay.
Pwoblèm ak CLS komen ak solisyon:
| Pwoblèm | Enpak CLS | Solisyon |
|---|---|---|
| Imaj san dimansyon | 0.1-0.5 | Toujou mete width ak height |
| Piblisite ki chaje an reta | 0.1-0.3 | Rezève espas avèk min-height |
| Font entènèt ki fè reflow | 0.05-0.2 | font-display: optional oswa fallback ajiste fèt |
| Enserasyon kontni dinamik | 0.1-0.4 | Rezève espas, itilize content-visibility |
| Banners bonbon ki pouse kontni | 0.05-0.2 | Design Overlay (pa Pouse desann) |
Lis verifikasyon prevansyon CLS:
<!-- Toujou espesifye dimansyon pou medya -->
<img src="photo.webp" width="800" height="600" alt="...">
<video width="1280" height="720"></video>
<iframe width="560" height="315"></iframe>
<!-- Rezève espas pou kontni dinamik -->
<div style="min-height: 250px;">
<!-- Piblisite ap chaje isit la san chanjman -->
</div>
<!-- Itilize aspè-rapò pou medya reponn -->
<div style="aspect-ratio: 16/9;">
<img src="..." style="width: 100%; height: 100%; object-fit: cover;">
</div>Rapid reyalizasyon: Ajoute atribi width ak height espèsifik nan chak sou 10 paj pi plis ou yo. Chanjman sa a sèl elimin anpil pwoblèm CLS ki pi komen — imaj ki chaje ak pouse kontni desann.
2. Optimizasyon Mobil
Google itilize endeksaj mobil-pou-premye — eksperyans mobil ou se eksperyans klasman ou. Si sit ou a domaje sou mobil, li pa gen anyen a fè avèk estrikti desktop la.
Lis verifikasyon optimizasyon mobil:
| Eleman | Egzijans | Echèk komen |
|---|---|---|
| Meta viewport | width=device-width, initial-scale=1 | Ki manke totalman |
| Touch targets | Min 44x44px | Lyen ti, bouton ankrè |
| Gwosè font | Min 16px tèks kò | 12px ki enposib li sou mobil |
| Lajè kontni | Pa gen desen orizontal | Eleman ki gen lajè fiks |
| Espas tape | 8px minimòm ant sib yo | Lyen ki touche ansanm |
| Imaj reponn | srcset ak gwosè apwopriye | Imaj gwosye sou mobil |
Modèl desen reponn:
/* Apwòch mobil-pou-premye */
.container {
padding: 16px;
font-size: 16px;
}
/* Sib ki fasil pou manyen */
.button, .link {
min-height: 44px;
min-width: 44px;
padding: 12px 16px;
}
/* Tipografi reponn */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
p { font-size: clamp(1rem, 2vw, 1.125rem); }
/* Pa gen debòde orizontal */
img, video, iframe {
max-width: 100%;
height: auto;
}Siyal SEO mobil Google tcheke:
- Tèks ki lisib san gwo pou elaji
- Lyen/bouton ki pa twò pre ansanm
- Kontni ajiste ak lajè viewport (pa gen desen orizontal)
- Pa gen Flash oswa teknoloji ki pa sipòte
- Interstitial pa bloke kontni sou antre
- Paj la chaje rapid sou koneksyon 4G/3G
Rapid reyalizasyon: Louvri sit ou sou telefòn ou. Eseye klike sou chak bouton ak lyen. Si ou aksidantèlman tape sou bagay mal paske sib yo twò pre, oswa si ou bezwen pinçage pou li tèks la — sa yo se fason pou ou prioritè korije.
3. Aksè (WCAG)
Aksè se pa sèlman etik — se yon siy SEO. Algoritm Google yo favorize sit ki itil pou tout moun, enkli itilizatè ki gen lekti ekran, navigasyon ki sèlman itilize klavye, oswa defo vizyèl. Konfòmite WCAG (Web Content Accessibility Guidelines) konekte ak pi bon klasman.
Egzijans kritik aksè:
| Eleman | Egzijans | Enpak SEO |
|---|---|---|
| Teks alt sou imaj | Teks deskriptif pou tout imaj ki gen sans | Dirèk (SEO imaj + aksè) |
| Iyerachi tit | H1 → H2 → H3 san sa yo sote | Dirèk (estrikti kontni) |
| Kontraste koulè | 4.5:1 pou tèks nòmal, 3:1 pou tèks gwo | Endirekt (itilite) |
| Navigasyon klavye | Tout eleman entèaktif la aji ak Tab | Endirekt (itilite) |
| etikèt ARIA | Etikèt pou ikon, bouton san tèks | Endirekt (UX lekti ekran) |
| Endikatè konsantre | Boul konsantre vizib sou navigasyon klavye | Endirekt (itilite) |
| Etikèt fòm | Chak antre gen yon | Endirekt (itilite) |
| Teks lyen | Deskriptif (pa "klike isit la") | Dirèk (SEO tèks anchor) |
Pwosesis tès aksè:
- Scan otomatik — Kouri Lighthouse, axe-core, oswa WAVE (sa a atrape ~30-50% pwoblèm)
- Tès klavye — Navigasyon tout sit ou a sèlman itilize Tab, Antre, Escape
- Tès lekti ekran — Itilize VoiceOver (Mac) oswa NVDA (Windows) sou paj kle
- Kontraste koulè — Tcheke tout tèks kont fon (itilize DevTools kontraste checker)
- Tès zoom — Zoom a 200% — èske tout bagay toujou fonksyone?
Kòm pwoblèm aksè komen ak solisyon:
<!-- Imaj: teks alt deskriptif -->
<img src="chart.png" alt="Bar chart showing 40% increase in organic traffic from January to March 2026">
<!-- Bouton: etikèt klè -->
<button aria-label="Fermen meni navigasyon">
<svg>...</svg> <!-- Bouton sèlman ikon bezwen aria-label -->
</button>
<!-- Fòm: etikèt asosye -->
<label for="email">Adrès Imel</label>
<input type="email" id="email" name="email" required>
<!-- Lyen: teks deskriptif -->
<a href="/guide">Li gid SEO a konplè</a>
<!-- PA: <a href="/guide">Klike isit la</a> -->
<!-- Sote navigasyon pou itilizatè klavye -->
<a href="#main-content" class="skip-link">Sote nan kontni prensipal la</a>Rapid reyalizasyon: Kouri Lighthouse sou paj d'ouvè ou ak kategori Aksè. Korije tout bagay ki jwenn "Echwe" an premye — sa yo anjeneral imaj alt ki manke, etikèt fòm ki manke, ak tèks ki gen kontraste ba. Solisyon sa yo souvan pran 30 minit epi yo ogmante nòt ou pa plis pase 20 pwen.
4. Siyal Eksperyans Paj
Depi Core Web Vitals, Google evalye plizyè lòt siyal eksperyans paj ki afekte klasman yo.
Faktè eksperyans paj:
| Siyal | Egzijans | Tcheke |
|---|---|---|
| HTTPS | Tout sit sèvi ak HTTPS | Kontni melanje kraze li |
| Pa gen interstitial yo ki twòp | Pa bloke kontni sou antre | Popups kouvri >30% sou mobil |
| Navigasyon san danje | Pa gen malware, phishing, kontni twonpe | Estati navigasyon Google |
| Mobil-za fash | Pase tès mobil-fach | Google Tès Mobil-fach |
| Pa gen piblisite danjere | Piblisite pa imite kontni | Bouton telechaje déguisé |
Gid interstitial (ki sa ki pèmèt vs penalize):
| Pèmèt | Penalize |
|---|---|
| Verifikasyon laj (ki egzije legalman) | Pop-up ekran plen sou antre paj la |
| Konsantman bonbon (ki egzije legalman) | Enskripsyon imel kouvri tout kontni |
| Meni konekte pou kontni ki enkli nan abònman | "Telechaje aplikasyon nou an" bloke kontni |
| Banners ti ki itilize <30% nan ekran | Tan kont pou aksè kontni |
| Apre itilizatè a scroll oubyen entèaji | Anvan itilizatè a wè nenpòt kontni |
Lis verifikasyon HTTPS:
- [ ] Sètifika SSL valab ak pa ekspire
- [ ] Tout paj redirije HTTP → HTTPS (301)
- [ ] Pa gen kontni melanje (HTTP resources sou paj HTTPS)
- [ ] HSTS header aktive (avèk includeSubDomains)
- [ ] Lyne entèn yo sèvi ak HTTPS (pa HTTP)
- [ ] Sitemap sèvi ak URL HTTPS
- [ ] Tags kanonikal sèvi ak HTTPS
Rapid reyalizasyon: Tcheke pou kontni melanje — ouvri DevTools Console sou paj kle ou yo. Nenpòt avètisman "Kontni Melanje" vle di ou ap chaje resous HTTP sou yon paj HTTPS. Mete ajou URL sa yo pou HTTPS. Sa a se youn nan pwoblèm eksperyans paj ki pi komen.
5. Modèl Navigasyon
Bon navigasyon ede tou de itilizatè yo ak motè rechèch yo. Itilizatè yo jwenn sa yo bezwen rapidman. Crawlers Google yo konprann ierachi sit ou a epi distribye PageRank avèk efikasite.
Pi bon pratik navigasyon:
| Modèl | Benefis | Ekzekisyon |
|---|---|---|
| Achitekti plat | Paj nan 3 clicks depi nan kay la | Paj Hub, breadcrumbs |
| Breadcrumbs | Itilizatè yo konnen kote yo ye | Schema markup + trail vizib |
| Estrikti URL lojik | Chimen prediksyon | /kategori/sous-kategori/paj |
| Navigasyon anba | Paj segondè aksesib | Legal, sou, kontakte, sitemap |
| Rechèch entèn | Itilizatè yo jwenn kontni espesifik | Bwat rechèch ak sijesyon |
| Kontni ki gen rapò | Redwi bounce, ogmante pwofondè | Seksyon "Atik ki gen rapò" |
Achitekti ideal sit:
Paj d'ouvè (1 klik soti nan tout bagay enpòtan)
├── /produits/ (paj kategori — lyen nan tout pwodwi)
│ ├── /produits/kategori-a/
│ │ ├── /produits/kategori-a/produit-1
│ │ └── /produits/kategori-a/produit-2
│ └── /produits/kategori-b/
├── /blog/ (paj kontni — lyen nan tout pòs)
│ ├── /blog/topic-cluster-1/ (paj pil)
│ │ ├── /blog/sous-topic-1a
│ │ └── /blog/sous-topic-1b
│ └── /blog/topic-cluster-2/
├── /tools/ (paj itilite)
└── /about/ (paj konfyans)Egzekisyon breadcrumbs:
<!-- Breadcrumb vizib -->
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Kay</a></li>
<li><a href="/blog/">Blog</a></li>
<li aria-current="page">Gid SEO Etap 5</li>
</ol>
</nav>
<!-- Schema markup (BreadcrumbList) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Kay", "item": "https://example.com/" },
{ "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://example.com/blog/" },
{ "@type": "ListItem", "position": 3, "name": "Gid SEO Etap 5" }
]
}
</script>Drapeau wouj navigasyon:
- Paj plis pase 4 clics soti nan paj d'ouvè (trop fon)
- Pa gen breadcrumbs (itilizatè ak Google pèdi kontèks)
- Navigasyon sèlman JavaScript (crawlers ka rate lyen yo)
- Paj orfelen (pa gen lyen entèn ki pwen sou yo)
- Mega meni ki gen 200+ lyen (dilue valè chak lyen)
Rapid reyalizasyon: Tcheke paj konvèsyon ki enpòtan pou ou — konbyen klik soti nan paj d'ouvè a? Si plis pase 3, ajoute lyen dirèk soti nan paj d'ouvè ou oswa pag kategori yo. Chak klik pi fon diminye vizit itilizatè ak frekans crawl la.
6. Optimizasyon Anwo-Pli
Sa itilizatè yo wè anvan yo route detèmine si wi ou non yo rete oswa yo kite. Kontni anwo pli a dwe kominike valè imedyatman epi aliman ak rechèch ki mennen yo la.
Sa ki esansyèl anwo pli:
| Eleman | Poukisa | Echèk komen |
|---|---|---|
| Tit klè (H1) | Konfime reyalite ak rechèch la | Jenerik oswa ki manke |
| Pwopozisyon valè | Poukisa yo ta dwe rete? | Anfouye anba pli |
| CTA Prensipal | Kisa yo ta dwe fè pwochen? | Kache oswa pa klè |
| Imaj/media hero | Angajman vizyèl | Ralanti chajman, sa ki lakòz pwoblèm LCP |
| Siyal konfyans | Poukisa yo ta dwe fè konfyans ou? | Pa gen logos, revizyon, oswa kredansyèl |
Modèl layout anwo pli:
Desktop (1440px viewport):
┌──────────────────────────────────────┐
│ Bar navigasyon │
├──────────────────────────────────────┤
│ │
│ H1: Tit klè ki matche ak rechèch la │
│ Sou-tit: Pwopozisyon valè │
│ │
│ [Bouton CTA Prensipal] │
│ │
│ Siyal konfyans: logos, estatistik, badge │
│ │
├──────────────────────────────────────┤
│ ↓ Kontni kontinye anba pli │
└──────────────────────────────────────┘
Mobil (375px viewport):
┌────────────────────┐
│ Nav (hamburger) │
├────────────────────┤
│ │
│ H1: Tit │
│ (pi kout sou mobil)│
│ │
│ [Bouton CTA] │
│ (lajè konplè, 44px+)│
│ │
│ Badge konfyans │
│ │
├────────────────────┤
│ ↓ Scroll pou plis │
└────────────────────┘Règleman kritik pou anwo pli:
- H1 dwe vizib san yo pa route (matche ak rechèch)
- CTA dwe vizib san yo pa route (diminye taux bounce)
- Pa gen chanjman layout nan kontni anwo pli (CLS tèlman anmèd)
- Imaj hero dwe chaje rapidman (li anjeneral se eleman LCP la)
- Mobil: diminye kontni anwo pli (mwens espas viewport)
Rapid reyalizasyon: Pran yon screenshot paj d'ouvè ou sou mobil (lajè 375px). Èske H1 la vizib? Èske yon bouton CTA vizib? Èske ou ka konnen sa sit la fè nan 2 segond? Si nenpòt repons se "non," ou ap pèdi vizitè anvan yo route.
Lis Verifikasyon UX
Kouri sa a pou pi gwo paj ou yo:
- [ ] LCP anba 2.5 segond (imaj hero optimize, CSS kritik inline)
- [ ] INP anba 200ms (pa gen long travay JavaScript ki bloke entèraksyon)
- [ ] CLS anba 0.1 (tout imaj gen dimansyon, pa gen chanjman ki fèt anreta)
- [ ] Mobil-fach (44px touch targets, 16px+ tèks, pa gen desen orizontal)
- [ ] Aksè (alt text, ierachi tit, kontraste koulè, navigasyon klavye)
- [ ] HTTPS tout kote (pa gen kontni melanje, HSTS aktive)
- [ ] Pa gen interstitial twòp (kouch konsantman OKE, popups ki bloke kontni pa OKE)
- [ ] Breadcrumbs prezan (ak schema BreadcrumbList)
- [ ] Pwofondè navigasyon anba 4 klik pou nenpòt paj enpòtan
- [ ] Anwo pli optimize (H1 vizib, CTA vizib, vit LCP)
Kijan LANGR Tcheke UX Ou
Modil tcheke yo ki gen rapò ak UX LANGR yo enkli:
- Modil Core Web Vitals — Mezire LCP, INP, CLS soti nan rapò eksperyans itilizatè Chrome (done itilizatè reyèl)
- Modil PageSpeed — Yon audit pèfòmans Lighthouse konplè ak nòt mobil ak desktop
- Modil Mobil — Konfigirasyon viewport, dimansyon sib manyen, lizib tèks
- Modil Aksè — Tcheke konfòmite WCAG, itilizasyon ARIA, kontraste koulè
- Modil Layout Scan — Evalyasyon AI ki fèt sou layouts mobil ak desktop
- Modil Eksperyans Paj — Deteksyon interstitial, estati HTTPS, navigasyon san danje
Modil sa yo kouri sou chak tcheke, bay ou yon konpreyansyon konplè sou kijan vizitè yo eksperyans sit ou a — ak sa egzakteman ou dwe korije pou pi bon klasman.
Erè UX Komen (Klasman pa Enpak)
- Ignorer mobil — 60%+ nan rechèch yo se mobil; mobil domaje = klasman domaje
- Imaj ki pa optimize — Kòz #1 ralanti LCP (ak souvan pi fasil pou korije)
- Pa gen dimansyon imaj espèsifik — Chanjman layout detwi nòt CLS
- Vwa script twazyèm pati — Widgets chat, analitik, piblisite bloke INP
- Manque aksè debaz — Pa gen alt text, pa gen ierachi tit, pa gen kontraste
- Interstitial ki bloke kontni — Pop-ups ekran plen anvan itilizatè yo wè kontni
- Achitekti sit fon — Paj enpòtan ki antere 5+ kliks depi nan paj d'ouvè a
- Pa gen valè anwo pli — Itilizatè yo pa ka di sa sit la fè san yo pa route
Kisa Ki Swiv?
Etap 6: Siveyans & Klasman — Ou pa ka amelyore sa ou pa mezire. Pozisyon mo kle, swiv nòt, rapò chanjman, ak siveyans tan.
Gid sa a se yon pati nan seri 13 etap SEO LANGR. Fè yon audit gratis pou wè ki kote sit ou a ye atravè tout 13 disiplin yo.