SEO Guide Step 5: UX / User Experience

Se ke Gogolo 5 ya 13-Step SEO Guide. Phihlelo ya mosebedisi (UX) jaanong ke lefelong le amanang le diphetho — Google e lekanya kamoo bapuisano ba amanang le sebaka sa gago le ho fa mekgwa e potlakileng, go fihlelleka, le e monate.

Leano la kontente (Gogolo 3) le laola se o se hwirang. Linkbuilding (Gogolo 4) e tiisa boemo ba gago. Empa fa bapuisano ba utlwa diphetho ka fa go ka fa diphetoho di leng slow, di sonotshwa mo mobile, kgotsa di se ka di finyelwa — go na le sengwe se se amanang. Google e lebelela mekgwa ya borai le go e dirisa go fetola diphetho.

Go simolola ka 2021, kgatiso ya Page Experience ya Google e dirile UX e amanang le diphetho. Ka 2024, INP (Interaction to Next Paint) e tsentse lebotho FID e le Core Web Vital. Ka 2026, mekgwa e e amanang le yone e fa thuto go feta ka nako ya Google e oketsegang go fa boikutlo jwa mosadi mo go amanang le motho.

Eng UX ka SEO e Amanang

Ntlafatso ya UX ka SEO e akaretsa dibaka tse 6:

Core Web Vitals — Melemo ya UX ya Google (LCP, INP, CLS)
Mobile Optimization — Moralo o amanang le mobile, mekgwa ya go ama, viewport
Accessibility (WCAG) — Go dira sebaka sa gago se kgonagaleng go se ele
Page Experience Signals — HTTPS, go se na interstitials, borai bo bolokehileng
Navigation Patterns — Setlhogo sa sebaka se se thusang batho le mekhala
Above-the-Fold Optimization — Seo batho ba se bonang ntle le go borai

1. Core Web Vitals (CWV)

Core Web Vitals ke mekgwa ya UX e meraro e amanang le Google. E lebeletsoa mo Chrome User Experience Report (CrUX) le e amanang le diphetho.

Mekgwa e meraro:

Mekgwa	Melemo	Go molemo	Go solegela	Go sumamisa
LCP (Largest Contentful Paint)	Potlako ya loading	< 2.5s	2.5s - 4.0s	> 4.0s
INP (Interaction to Next Paint)	Go amanang	< 200ms	200ms - 500ms	> 500ms
CLS (Cumulative Layout Shift)	Boemo jwa pono	< 0.1	0.1 - 0.25	> 0.25

LCP — Largest Contentful Paint

LCP e lekanya kamoo potlako ya boikaelelo jwa gago e bonalang ka teng. "Boikaelelo jo bo kgethegileng" ka kgete e amanang le setshwantsho sa gago, seka gobo se kgolo, kgotsa serutshwa se kgethegileng.

Dikgang tse di amanang le LCP le mekgwa ya go di lokisa:

Dikgang	Kgetsi	Lokisa
Setshwantsho sa hero se sa ntlafaditse	+2-5s	Foromo ya WebP, boikgetheng jo bo amanang, `fetchpriority="high"`
CSS/JS e tlhotlhang	+1-3s	Inline critical CSS, defer non-critical
Go apara ga sefatlhogang (TTFB)	+1-4s	CDN, server caching, edge deployment
Web fonts e sitang go bonala	+0.5-2s	`font-display: swap`, preload critical fonts
Ditshekedi dingwe di sitang	+1-3s	Defer analytics/chat widgets, lazy load ads

LCP optimization priority:

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

<!-- 2. Inline critical CSS (first 14KB) -->
<style>/* Above-the-fold styles only */</style>

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

<!-- 4. Hero image with explicit dimensions -->
<img src="/hero.webp" width="1200" height="600"
     fetchpriority="high" decoding="async"
     alt="Descriptive alt text">

Quick win: O ka dirisa PageSpeed Insights mo pele go sebaka sa gago. Bontšha LCP se se amanang le yone. Fa e le setshwantsho, fetola go WebP, beya boikgetheng, le go oketsa fetchpriority="high". Se se khoi a se tlaa fokotsa LCP ka 1-2 seconds.

INP — Interaction to Next Paint

INP e lekanya potlako ya boikaelelo jwa gago ka fa batho ba amanang (khetha, ama, ngwaga). E lebelela boikaelelo jo bo amanang go tswa mo beetseng ya gago le go dirisa se go na le sona.

Dikgang tse di amanang le INP le mekgwa ya go di lokisa:

Dikgang	Kgetsi	Lokisa
Joboya ya JavaScript e telele	+200-1000ms	Arobala go menagane, dirisa `requestIdleCallback`
Ditshekedi tse di amanang	+100-500ms	Debounce, throttle, dirisa `requestAnimationFrame`
Go ditlhophela	+50-300ms	Batch DOM reads/writes, dirisa `will-change`
Ditshekedi dingwe di sitang	+100-500ms	Defer, load after interaction, dirisa Web Workers
Synchronous API calls	+200-2000ms	Async/await, loading states, optimistic UI

INP optimization techniques:

// Bosigo: E sitisa main thread
button.addEventListener('click', () => {
  const data = heavyComputation(); // E sitisa ka 400ms
  updateDOM(data);
});

// Se se molemo: E fa main thread
button.addEventListener('click', async () => {
  // Bontsha borai bo potlakileng
  button.textContent = 'Loading...';

  // Arobala ga go telele go phethagisiwa
  await scheduler.yield();
  const data = heavyComputation();

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

Quick win: Bua Chrome DevTools > Performance tab. Etela sebaka sa gago le go lebelela "Long Tasks" (disekeli tse di khubung). Tse ke di sitisang go main thread. Se se amanang ka botlalo ke script ya borai — tolfisa kgotsa khoi load ka morago ko borai.

CLS — Cumulative Layout Shift

CLS e lekanya boemo jwa pono — gore lefa go lefa le boikaelelo bo a bona bsonya. Go na le sengwe se se kgethegileng go bakang le mokawege wa ba le tseleng ya mekgwa e amanang le gomana.

Dikgang tse di amanang le CLS le mekgwa ya go di lokisa:

Dikgang	Kgetsi ya CLS	Lokisa
Setshwantsho se se se nang le mekgwa	0.1-0.5	Nna o setse `width` le `height`
Ads di angwa go ga morago	0.1-0.3	Belela borai ka `min-height`
Web fonts di amanang	0.05-0.2	`font-display: optional` kgotsa fa go kgethegiling go amanang
Go inserted content	0.1-0.4	Belela borai, dirisa `content-visibility`
Banners ya cookies e amanang	0.05-0.2	Overlay design (go se se amanang)

CLS prevention checklist:

<!-- Nna o setse le mekgwa ya borai ka media -->
<img src="photo.webp" width="800" height="600" alt="...">
<video width="1280" height="720"></video>
<iframe width="560" height="315"></iframe>

<!-- Belela borai go go ama le go inset jade -->
<div style="min-height: 250px;">
  <!-- Ad e tlaa lolelang foo e sa amanang -->
</div>

<!-- Dirisa aspect-ratio go bo a amanang mediyale -->
<div style="aspect-ratio: 16/9;">
  <img src="..." style="width: 100%; height: 100%; object-fit: cover;">
</div>

Quick win: Oketsa boikgetheng le width le height mo go tsotlhe le mo diphaneleng di le 10. Se se amanang le se se amanang.

2. Mobile Optimization

Google e dirisa mobile-first indexing — phihlelo ya gago ya mobile ke phihlelo ya gago ya diphetho. Fa sebaka sa gago se sitwa ka mobile, go se a mokhoa o kgethegileng fa go sa matlha.

Mobile optimization checklist:

Khomputara	Go beela go	Diphuthelwa
Viewport meta	`width=device-width, initial-scale=1`	Go se na hwagwa
Touch targets	Fela 44x44px	Diphuthelwa tse di nyane, botlhe ba amanang
Font size	Fela 16px main body text	12px e siame
Content width	Go se ka ga borai	Fixed-width elements
Tap spacing	8px go amanang	Diphuthelwa tse di amanang go amanang
Responsive images	`srcset` ka mekgwa e amanang	Setshwantsho se se amanang ka mobile

Responsive design patterns:

/* Mobile-first approach */
.container {
  padding: 16px;
  font-size: 16px;
}

/* Diphuthelwa tse di amanang go ama */
.button, .link {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
}

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

/* Go se se amanang ka borai */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

Mobile SEO signals Google checks:

Text e ka balwa ntle le go zoom
Links/buttons di se di amanang
Content e amanang le viewport width (go se se amanang)
Go se na Flash goba theknoloji e amanang le bona
Interstitials di se di se amanang
Page e lolediwa potlako mo 4G/3G connections

Quick win: Etela sebaka sa gago mo founong ya gago. Lekanya go kgetha mongwe le mongwe. Fa o kgetha sengwe ka phoso ka gonne diphetho di amanang gaufi, kgotsa fa o tlhoka go pincha go tshepa go balwa ka borai — tseo di a amanang.

3. Accessibility (WCAG)

Go fihlelela ha go e se go le mekgwa ya botshelo — ke se se amanang le SEO. Alghorimu ya Google e fa mekgwa e amanang le go dirisiwa go se fele.

Dikgang tse di amanang le go fihlelela:

Khomputara	Go beela go	SEO impact
Alt text mo setshwantshong	Melemo e amanang go mekgwa ya borai	Direct (image SEO + accessibility)
Heading hierarchy	H1 → H2 → H3 ntle le go tsuokanya	Direct (content structure)
Color contrast	4.5:1 ya main text, 3:1 ya mokwatlhanki	Indirect (usability)
Keyboard navigation	Diphuthelwa tsotlhe di ka bonwa ka Tab	Indirect (usability)
ARIA labels	Ditlhopho ka likhomo, diphetheng leha go se na mekgwa	Indirect (screen reader UX)
Focus indicators	Signa e supang borai go montshi	Indirect (usability)
Form labels	Setlhogo se sengwe le se se amanang	Indirect (usability)
Link text	Melemo (go se go re "khetha fa")	Direct (anchor text SEO)

Accessibility testing process:

Automated scan — Rung Lighthouse, axe-core, goba WAVE (e fa 30-50% ya dikgang)
Keyboard test — Gokwentse sebaka sa gago go dirisa fela Tab, Enter, Escape
Screen reader test — Dirisa VoiceOver (Mac) goba NVDA (Windows) mo mekgweng ya borai
Color contrast — Lekanya go tsamaea hara matlišwe (dirisa DevTools contrast checker)
Zoom test — Zoom go 200% — na sengwe se se ka kgona?

Common accessibility fixes:

<!-- Setshwantsho: alt text ya mekgwa -->
<img src="chart.png" alt="Bar chart showing 40% increase in organic traffic from January to March 2026">

<!-- Diphuthelwa: se se amanang le borai -->
<button aria-label="Amohela go phethagisa le borai">
  <svg>...</svg> <!-- Icon-only button needs aria-label -->
</button>

<!-- Form: ditlhopho di amanang -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" required>

<!-- Links: description -->
<a href="/guide">Bala ngwaga ya SEO ka botlalo</a>
<!-- NOT: <a href="/guide">Khetha fa</a> -->

<!-- Skip navigation for keyboard users -->
<a href="#main-content" class="skip-link">Skip to main content</a>

Quick win: Rung Lighthouse mo lefelong la gago le gape mo lekgweng la Accessibility. Lokisetsa tsotlhe tse di amanang le "Fails" — tse di amanang ka go senyegile, go se go re fistlasang di le phethola ka mpa go 20+.

4. Page Experience Signals

Go feta Core Web Vitals, Google e lebelela diphetho di amanang le botshelo bo bjeo bo amanang le diphetho.

Page experience factors:

Signal	Go beela	Dikhutso
HTTPS	Sebaka se sengwe go beela HTTPS	Mixed content breaks it
Go se na interstitials tse di amanang	Go se quwe content ka phetsega	Popups covering >30% on mobile
Safe browsing	Go se na malware, phishing, disetlhogo tse di amanang	Google Safe Browsing status
Mobile-friendly	Go feta mobile-friendly test	Google Mobile-Friendly Test
Go se ama dikhouto	Dikhouto di se di amanang	Disguised download buttons

Guidelines ya interstitials (se se amanang le go se amang goba le gore):

E amanang	E selega
Go kgona go tlhaloganya (legally required)	Full-screen popup mo phetsega
Go se fele (legally required)	Email signup covering entire content
Login walls go content	"Download our app" e sitisang
Banners e amanang 30% go lefe	Dhekeng go go lalela go 10%
Go dirisa borai	Borai bo fhanang ka borai bo amanang

HTTPS checklist:

[ ] SSL certificate e amanang le go se go lema
[ ] Diphaneleng tsotlhe di fetsa HTTP → HTTPS (301)
[ ] Go se na mixed content (HTTP resources mo HTTPS pages)
[ ] HSTS header e amanang (ka includeSubDomains)
[ ] Internal links di dirisa HTTPS (go se HTTP)
[ ] Sitemap di dirisa HTTPS URLs
[ ] Canonical tags di dirisa HTTPS

Quick win: Lekanya ka mixed content — buang DevTools Console mo mekgwa ya gago e amanang. Le fa "Mixed Content" warnings e amanang, o ka carregka HTTP resources mo HTTPS page. Fokotsa tseno URLs go HTTPS. Se se amanang le dikgang di amanang le go go go amanang.

Go tsalane ga mekgoa go thusa batho le mekhala. Batho ba batla go mongwe ka borai. Google crawlers e tlhaloganya mehwa ya gago le go ankeutia PageRank hantle.

Best practices ya navigation:

Pattern	Melemo	Go kgetha
Flat architecture	Diphaneleng di le mo 3 clicks go tswa mo lapeng	Hub pages, breadcrumbs
Breadcrumbs	Batho ba tseba gore ba kae	Schema markup + visible trail
Logical URL structure	Melemo e amanang	`/category/subcategory/page`
Footer navigation	Diphaneleng tse di amanang	Legal, about, contact, sitemap
Internal search	Batho ba batla go kgethegela	Search box with suggestions
Content e amanang	Go fokotsa bounce, go oketsa borai	"Related articles" sections

Ideal site architecture:

Homepage (1 click from everything important)
├── /products/ (category hub — links to all products)
│   ├── /products/category-a/
│   │   ├── /products/category-a/product-1
│   │   └── /products/category-a/product-2
│   └── /products/category-b/
├── /blog/ (content hub — links to all posts)
│   ├── /blog/topic-cluster-1/ (pillar page)
│   │   ├── /blog/subtopic-1a
│   │   └── /blog/subtopic-1b
│   └── /blog/topic-cluster-2/
├── /tools/ (utility pages)
└── /about/ (trust pages)

Breadcrumb implementation:

<!-- Visible breadcrumb -->
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/blog/">Blog</a></li>
    <li aria-current="page">SEO Guide Step 5</li>
  </ol>
</nav>

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

Navigation red flags:

Diphaneleng di feta mo 4 clicks go tswa mo home page (go fa fa)
Go se na breadcrumbs (bathong le Google ba se ka kgona)
JavaScript-only navigation (crawlers di ka se ka di hudu)
Orphan pages (go se na internal links go amanang)
Mega menus di amanang le 200+ links (di kgethega go per-link value)

Quick win: Lekanya mekgwa ya gago e amanang le borai — go kgetha le fa e le borai? Fa di feta 3, oketsa mekgwa go tswa mo lapeng kgotsa mekgwa ya sebopego. Se se fa diphetho di amanang.

6. Above-the-Fold Optimization

Seo batho ba se bonang go na le go nketsega go amanang le gore ba boloke goba ba tlogele. Marekanyo ka fa femeng go amanang le elo ya sehlekehleke go kgethegile.

Above-the-fold needs:

Khomputara	Go amanang	Phihlelo
H1 e e kgethegileng	E netefatsa go amanang le ine	Go e na le githepe goba sitwa
Value proposition	Ke eng ba tshwanetse go tlogela?	Buried below fold
Primary CTA	Ke eng go tshwanetse go dirang?	Go se anane
Hero image/media	Bontsho e amanang	Slow-loading, causing LCP issues
Trust signals	Ke eng ba tshwanetseng go ngwaga?	Go se na lapa, ditlhopho, kgotsa ditlhopho

Above-the-fold layout patterns:

Desktop (1440px viewport):
┌──────────────────────────────────────┐
│ Navigation bar                        │
├──────────────────────────────────────┤
│                                      │
│  H1: Clear headline matching query   │
│  Subtitle: Value proposition         │
│                                      │
│  [Primary CTA Button]               │
│                                      │
│  Trust signals: logos, stats, badges │
│                                      │
├──────────────────────────────────────┤
│ ↓ Content continues below fold       │
└──────────────────────────────────────┘

Mobile (375px viewport):
┌────────────────────┐
│ Nav (hamburger)    │
├────────────────────┤
│                    │
│ H1: Headline       │
│ (shorter on mobile)│
│                    │
│ [CTA Button]       │
│ (full-width, 44px+)│
│                    │
│ Trust badge        │
│                    │
├────────────────────┤
│ ↓ Scroll for more  │
└────────────────────┘

Critical above-the-fold rules:

H1 e tshwanetse e bonala ntle le go se fa | seamanang |
CTA e tshwanetse e bonala ntle le go se fa | e kgethegile |
Go se na layout shift mo above-the-fold content | CLS killer |
Hero image e tshwanetse go lebelela potlako | se se tshwanang le LCP |
Mobile: oketsa above-the-fold content | | se se amanang |

Quick win: Tswa leline ka setshwantsho sa go boa mo mobile (375px width). Na H1 e bonala? Na CTA button e bonala? Na o ka tlhaloganya se fa o simolola? Fa ngwaga e re "nnyaa," o a ba go ngwaga ka dikgaolo go se di amanang.

The UX Audit Checklist

Kelela ka phalelo dintha tse di amanang le diphetho:

[ ] LCP fa tlase ga 2.5 seconds (hero image optimized, critical CSS inlined)
[ ] INP fa tlase ga 200ms (go se na long JavaScript tasks)
[ ] CLS fa tlase ga 0.1 (diphuthelwa tsotlhe di amanang, go se na late shifts)
[ ] Mobile-friendly (44px touch targets, 16px+ text, go se na borai)
[ ] Accessible (alt text, heading hierarchy, color contrast, keyboard nav)
[ ] HTTPS everywhere (go se na mixed content, HSTS enabled)
[ ] Go se na intrusive interstitials (consent overlays OK, content-blocking popups not)
[ ] Breadcrumbs di fa (le BreadcrumbList schema)
[ ] Navigation depth fa tlase ga 4 clicks go ya go nngwe le nngwe le phetho e amanang
[ ] Above-the-fold optimized (H1 visible, CTA visible, fast LCP)

Tsela e amanang le LANGR ho Audit ya gago

LANGR's UX-related scan modules di akaretsa:

Core Web Vitals module — E lekanya LCP, INP, CLS go tswa mo Chrome User Experience Report (real user data)
PageSpeed module — Full Lighthouse performance audit ka mobile le desktop scores
Mobile module — Viewport configuration, touch target sizing, text readability
Accessibility module — WCAG compliance checks, ARIA usage, color contrast
Layout Scan module — AI-powered evaluation of mobile and desktop layouts
Page Experience module — Interstitial detection, HTTPS status, safe browsing

Dikgwetlho tse di amanang le tse di amanang le nako di a dirisiwa mo mekgweng yotlhe, go fa mosadi e ka ama ya gago go supa se se amanang le go laolela.

Dikhuta tse di Amanang (Go Hlaola ka Se se amanang)

Go se amaneng le mobile — 60%+ ya go batla ga mobile; mobile e e amanang = diphetho tse di amanang
Setshwantsho se sa e se amanang — Se se amanang le slow LCP (le e amanang le se se amanang)
Go se na mekgwa ya setshwantsho — Layout shifts di senya CLS scores
Third-party script bloat — Chat widgets, analytics, ads tse di sitisang INP
Go se na dikhutlo tse di amanang — Go se na alt text, go se na heading hierarchy, go se na contrast
Content-blocking interstitials — Full-screen popups mo borai ba se bona
Deep site architecture — Mekgwa e amanang e se nang go kgethegisiwe ka 5+ clicks go tswa mo home page
Go se na borai fa godimo — Batho ba ka se kgethe se se amanang le borai ka botlalo.

Eng Go latelo

Step 6: Monitoring & Ranking — O sitwa go tlhotlha se o se balang. Tswana, boleng, le mehuta ya diphetho, le go namela.

Se se amanang le LANGR's 13-step SEO series. Dirisa audit e e amanang le nnete go bona mo tsela ya gago go amanang le diphetho tsotlhe di le 13.

SEO Guide Step 5: UX / User Experience — Tsela e Bontshang Ka Nako Bapuisanong Peno.

SEO Guide Step 5: UX / User Experience

Eng UX ka SEO e Amanang

1. Core Web Vitals (CWV)

LCP — Largest Contentful Paint

INP — Interaction to Next Paint

CLS — Cumulative Layout Shift

2. Mobile Optimization

3. Accessibility (WCAG)

4. Page Experience Signals

5. Navigation Patterns

6. Above-the-Fold Optimization

The UX Audit Checklist

Tsela e amanang le LANGR ho Audit ya gago

Dikhuta tse di Amanang (Go Hlaola ka Se se amanang)

Eng Go latelo

Want to know where your site stands?

Recently Analyzed

Related articles

SPF, DKIM le DMARC ka 2026: ke 41% fela ya didomeine tse di nang le imeile tse di nang le tsotlhe tse tharo

Di-header tsa tshireletso ka 2026: diwebosaete di le 3 mo go di le 4 ga di na Content-Security-Policy

Re sekene diwebosaete di le 96,283: diphoso tsa SEO tse di bonalang thata