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:

1. Core Web Vitals — Melemo ya UX ya Google (LCP, INP, CLS)
2. Mobile Optimization — Moralo o amanang le mobile, mekgwa ya go ama, viewport
3. Accessibility (WCAG) — Go dira sebaka sa gago se kgonagaleng go se ele
4. Page Experience Signals — HTTPS, go se na interstitials, borai bo bolokehileng
5. Navigation Patterns — Setlhogo sa sebaka se se thusang batho le mekhala
6. 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:

1. Automated scan — Rung Lighthouse, axe-core, goba WAVE (e fa 30-50% ya dikgang)
2. Keyboard test — Gokwentse sebaka sa gago go dirisa fela Tab, Enter, Escape
3. Screen reader test — Dirisa VoiceOver (Mac) goba NVDA (Windows) mo mekgweng ya borai
4. Color contrast — Lekanya go tsamaea hara matlišwe (dirisa DevTools contrast checker)
5. 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.

5. Navigation Patterns

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)

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