SEO Faka'ata 5: UX / Me'akai e Ngaue'aki

Ko e Faka'ata 5 ia o e SEO Faka'ata 13. Ko e me'akai e ngaue'aki na'e hoko ko e ngaahi hanga ko e ranking — loaʻa hono tohi e fehoanaki o e kau tū'uvai mo e ngaahi me'akai e fa'ahinga e faingamalie, accessibility, mo e me'akai mālie.

---

Ko e ngaahi fakafuofua e pupuni (Faka'ata 3) ko e me'akai e kaunga. Ko e linkbuilding (Faka'ata 4) ko e fakapounamu. Pea kevika ko e kau tū'uvai e 'i he 'u pātaka ni pea faka-transa tu'u ki he lahi, break, pe to'otō e tangata — ko e ngāue'aki e kī ne pehē. Ko e Google e track e ngaahi signals ko ia mo e fa'u'i e rankings.

Mai he 2021, na'e faka'osi e updates e Page Experience ko Google e UX ko e me'akai e fa'ahinga ʻo e ranking. I he 2024, na'e toe ke fakafo'isia e INP (Interaction to Next Paint) ko e Core Web Vital. I he 2026, ko e ngaahi signals ko ia e totongi e lahi taha kehekehe ko e ao e Google ko e 'i he kī e maʻu lele kehekehe e well-being o e tagata mu'e 'ene.

Ko e Ux e Faka'ata SEO e Ngāue'aki

Ko e UX hofoa kehekehe e SEO e vae e 6:

1. Core Web Vitals — Ko e ngaahi metrics UX ko Google (LCP, INP, CLS)
2. Hofoa Fakakotahi — Ko e design responsive, touch targets, viewport
3. Accessibility (WCAG) — Ko e toe ke maʻua e ho'o pā ki he ngaahi tangata kotoa
4. Page Experience Signals — HTTPS, tšo, safe browsing
5. Navigation Patterns — Ko e funga me 'a e faingamalie e ki he tagata mo e crawlers
6. Above-the-Fold Hofoa — Ko e fehu'i e ki he tagata e 'o e scrolling

1. Core Web Vitals (CWV)

Ko e Core Web Vitals ko e tolu o e UX metrics ko Google e hiki 'aupito. Ko e ngaahi metrics ko ia e track 'i he Chrome User Experience Report (CrUX) data mo e to'ou e rankings.

Ko e tolu o e metrics:

| Metric | Measures | Vai | Vakaheke | Tēvolo | |--------|----------|------|-------------------|------| | LCP (Largest Contentful Paint) | Loading speed | < 2.5s | 2.5s - 4.0s | > 4.0s | | INP (Interaction to Next Paint) | Responsiveness | < 200ms | 200ms - 500ms | > 500ms | | CLS (Cumulative Layout Shift) | Visual stability | < 0.1 | 0.1 - 0.25 | > 0.25 |

LCP — Largest Contentful Paint

Ko e LCP e ngaahi tu'utu'uni ko e ta'e ke nau hoku 'a e faka'osi e me'akai. Ko e “me'akai lāngoa” ko e 'i he maau mô e 'aku he tamai vavalu oma.

Ko e ngaahi tefito?

| Tefito | Patanga | Taki | Vakahekega | |---------|--------|-----|-----| | Hero image noe he hofoa | +2-5s | WebP fakatekinolosi, proper sizing, fetchpriority="high" | | Render-blocking CSS/JS | +1-3s | Inline critical CSS, defer non-critical | | Slow server response (TTFB) | +1-4s | CDN, server caching, edge deployment | | Web fonts blocking render | +0.5-2s | font-display: swap, preload critical fonts | | Third-party scripts | +1-3s | Defer analytics/chat widgets, lazy load ads |

LCP hofoa:

<!-- 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: Faka'osi e PageSpeed Insights ki ho'o homepage. Fakafoki e LCP element e faka'osi. Kevika ko e me'akai, peti ki he WebP, pau e explicit width/height, mo e toe 'a e fetchpriority="high". Ko e transient ko ia e nau tefelili e LCP e 1-2 seconds.

INP — Interaction to Next Paint

Ko e INP e fa'ahinga ke fakafoki ko e lahi e page mo e vākava ki he kaungā mo e tangata e ngāue'aki (click, tap, type). Ko e Tracking e ngāue'aki kotoa.

Ko e ngaahi tefito?

| Tefito | Patanga | Taki | Vakaheke | |---------|--------|-----|-----| | Long JavaScript tasks | +200-1000ms | Break into smaller tasks, use requestIdleCallback | | Heavy event handlers | +100-500ms | Debounce, throttle, use requestAnimationFrame | | Layout thrashing | +50-300ms | Batch DOM reads/writes, use will-change | | Third-party scripts | +100-500ms | Defer, load after interaction, use Web Workers | | Synchronous API calls | +200-2000ms | Async/await, loading states, optimistic UI |

INP hofoa:

// Sā lele: Blocks main thread
button.addEventListener('click', () => {
  const data = heavyComputation(); // Blocks for 400ms
  updateDOM(data);
});

// Ōku: Yields to main thread
button.addEventListener('click', async () => {
  // Show immediate feedback
  button.textContent = 'Loading...';

  // Break heavy work into chunks
  await scheduler.yield();
  const data = heavyComputation();

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

Quick win: Faka'osi ke 'oku na'ā Hapo e Google DevTools > Performance tab. Kalukalu e ho'o site mo e ngali mo e "Long Tasks" (red triangles). Ko e tefito e tō kehe e long task ko ia e hoa e third-party script — defer e, pe toe ke pa'u ke toe tu'u.

CLS — Cumulative Layout Shift

Ko e CLS e ngaahi faingamalie e loku — ko e ngaahi me'akai e lahi e pōtungā 'aki e lōmukī. Ko e me'akai e kāfoʻu ko ia e hiki e fehoanaki ki e kai manako.

Ko e ngaahi tefito?

| Tefito | CLS Patanga | Taki | |---------|-----------|-----| | Images without dimensions | 0.1-0.5 | Always set width and height | | Ads loading late | 0.1-0.3 | Reserve space with min-height | | Web fonts causing reflow | 0.05-0.2 | font-display: optional or size-adjusted fallback | | Dynamic content insertion | 0.1-0.4 | Reserve space, use content-visibility | | Cookie banners pushing content | 0.05-0.2 | Overlay design (not push-down) |

CLS prevent checklist:

<!-- Always specify dimensions for media -->
<img src="photo.webp" width="800" height="600" alt="...">
<video width="1280" height="720"></video>
<iframe width="560" height="315"></iframe>

<!-- Reserve space for dynamic content -->
<div style="min-height: 250px;">
  <!-- Ad will load here without shifting -->
</div>

<!-- Use aspect-ratio for responsive media -->
<div style="aspect-ratio: 16/9;">
  <img src="..." style="width: 100%; height: 100%; object-fit: cover;">
</div>

Quick win: Fakafoki e explicit width mo height attributes ki he toe foo e mo ki ho'o top 10 pages. Ko e faingamalie ko ia e fakamālō e CLS.

2. Hofoanga Fakakotahi

Ko e Google e fa'ahinga e mobile-first indexing — ko ho'o mobile experience ko e ho fo'i experience. Kevika ko e site e tefito mo e dynamic chang a me casio.

Faka'ata hofoa fakakotahi:

| Element | Requirement | Common failure | |---------|-------------|----------------| | Viewport meta | width=device-width, initial-scale=1 | Missing entirely | | Touch targets | Minimum 44x44px | Tiny links, cramped buttons | | Font size | Minimum 16px body text | 12px unreadable on mobile | | Content width | No horizontal scrolling | Fixed-width elements | | Tap spacing | 8px minimum between targets | Adjacent links touching | | Responsive images | srcset with appropriate sizes | Desktop-sized images on mobile |

Responsive design patterns:

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

/* Touch-friendly targets */
.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); }

/* No horizontal overflow */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

Mobile SEO signals ko e Google e fa'ahinga:

• Ko e viongozi 'e malava ke no tayo e zoom
• Ko e ngaahi kōpaki e kei ta loma
• Ko e content e fit viewport width (no horizontal scroll)
• Ko e Flash pe ngaahi tekonolosi 'oku 'ikai ke foaki
• Ko e interstitials e kei tā 'a e content
• Ko e page e lahi e effeke maite he 4G/3B connections

Quick win: Faka'osi ho'o site ki ho'o telefoni. Fakapa e totonu ke mai klik e kotoa. Kevika e loma ko e pā si fa ké, pe 'alu a upu 'oku tata 'o e talk.

3. Accessibility (WCAG)

Ko e accessibility 'oku 'ikai na'e atā ko e ma'u lele - e SEO signal. Ko e Google e tu'u mo e tau ki e UI e tangata kotoa, ko e accessibility mo e ulungaanga. Ko e compliance e WCAG (Web Content Accessibility Guidelines) e homai o faingamalie kehekehe e rankings.

Ko e ngaahi me'akai ko 'eni:

| Element | Requirement | SEO impact | |---------|-------------|------------| | Alt text on images | Descriptive text for all meaningful images | Direct (image SEO + accessibility) | | Heading hierarchy | H1 → H2 → H3 without skipping | Direct (content structure) | | Color contrast | 4.5:1 for normal text, 3:1 for large text | Indirect (usability) | | Keyboard navigation | All interactive elements reachable via Tab | Indirect (usability) | | ARIA labels | Labels for icons, buttons without text | Indirect (screen reader UX) | | Focus indicators | Visible focus ring on keyboard navigation | Indirect (usability) | | Form labels | Every input has an associated | Indirect (usability) | | Link text | Descriptive (not "click here") | Direct (anchor text SEO) |

Ko e ngaahi taumu'a ko 'eni:

1. Automated scan — Faka'osi e Lighthouse, axe-core, pe WAVE (faka'aonga ki he 30-50% o e me'akai)
2. Keyboard test — Fakafoki e ko e site a ho'o e Tab, Enter, Escape
3. Screen reader test — Faka'aonga e VoiceOver (Mac) pe NVDA (Windows) ki he ngaahi taukave
4. Color contrast — Fakafoki e kotoa e 'ī kotoa ki he background (faka'aonga e DevTools contrast checker)
5. Zoom test — Zoom kotoa ki he 200% — ko e kei uhu 'a e me'akai?

Ko e ngaahi faingamalie:

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

<!-- Buttons: clear labels -->
<button aria-label="Close navigation menu">
  <svg>...</svg> <!-- Icon-only button needs aria-label -->
</button>

<!-- Forms: associated labels -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" required>

<!-- Links: descriptive text -->
<a href="/guide">Faka'osi e SEO guide ko 'eni</a>
<!-- Tēvolo: <a href="/guide">Klik ko 'eni</a> -->

<!-- Skip navigation for keyboard users -->
<a href="#main-content" class="skip-link">Faka'osi e to'u ki he content</a>

Quick win: Faka'osi e Lighthouse ki ho'o homepage mo e Accessibility puaki. Faka'osi e kotoa e "Fails" ko ia — ko e nātipuni e alt text, nātipuni e heading hierarchy, mo e low contrast text. Ko e ngaahi faingamalie ko ia e tefili e 30 miniti mo e fakamahu ki he to e kākau 20+ points.

4. Page Experience Signals

Tō e Core Web Vitals, ko e Google e fa'ahinga e ngaahi signals e me'akai e 'o e rankings.

Ko e ngaahi signals e ta'e 'o:

| Signal | Requirement | Check | |--------|-------------|-------| | HTTPS | Ko e site teuteu 'o e HTTPS | Mixed content breaks it | | No intrusive interstitials | Kuo 'ikai ke covering content ki he entrance | Popups covering >30% on mobile | | Safe browsing | Kuo 'ikai e malware, phishing, deceptive content | Google Safe Browsing status | | Mobile-friendly | Passes mobile-friendly test | Google Mobile-Friendly Test | | No deceptive ads | Ko e ngāu 'e 'ikai ke hā e content | Disguised download buttons |

Ko e ngaahi tu'ai ko 'eni:

| Allowed | Penalized | |---------|-----------| | Age verification (legally required) | Full-screen popup on page entry | | Cookie consent (legally required) | Email signup covering entire content | | Login walls for paywalled content | "Download our app" blocking content | | Small banners using <30% of screen | Countdown timers before content access | | After user scrolls/interacts | Before user sees any content |

HTTPS checklist:

• [ ] SSL certificate valid and not expired
• [ ] All pages redirect HTTP → HTTPS (301)
• [ ] No mixed content (HTTP resources on HTTPS pages)
• [ ] HSTS header enabled (with includeSubDomains)
• [ ] Internal links use HTTPS (not HTTP)
• [ ] Sitemap uses HTTPS URLs
• [ ] Canonical tags use HTTPS

Quick win: Faka'osi e mixed content — open e DevTools Console ki ho'o ngaue'aki. Ko e fakakaukau "Mixed Content" e fāpena 'o e lungao e HTTP resources 'i he HTTPS page. To e liliu ia ki HTTPS. Ko ia e ha to e pā.

5. Navigation Patterns

Ko e lelei 'a e navigation e fainga mo e articles. Ko e fehoanaki e 'e fa'a mei ki ho'o 'a ki e site pehē ha.

Navigation best practices:

| Pattern | Benefit | Implementation | |---------|---------|----------------| | Flat architecture | Pages within 3 clicks of home | Hub pages, breadcrumbs | | Breadcrumbs | Users know where they are | Schema markup + visible trail | | Logical URL structure | Predictable paths | /category/subcategory/page | | Footer navigation | Secondary pages accessible | Legal, about, contact, sitemap | | Internal search | Users find specific content | Search box with suggestions | | Related content | Reduces bounce, increases depth | "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 Faka'ata 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 Faka'ata 5" }
  ]
}
</script>

Navigation red flags:

• Pages more than 4 clicks from homepage (too deep)
• No breadcrumbs (users and Google lose context)
• JavaScript-only navigation (crawlers may miss links)
• Orphan pages (no internal links pointing to them)
• Mega menus with 200+ links (dilutes per-link value)

Quick win: Faka'osi e ngaahi me'akai e ngaahi pa'anga ko e me'akai — o e koi ke fa'a mai ku fehoanaki mai e kahau. Kevika e 'i he 3, toe koi e mohu e fo na'ua. Faka'osi puaki mai e funga.

6. Above-the-Fold Hofoa

Ko e me'akai e 'i he scrolling ko e fāēmuli e ke a'usi. Ko e me'akai e 'o e ne va'inga e pa ha 'a e lako ke nofo ai.

Ko e me'akai e 'i he:

| Element | Why | Common failure | |---------|-----|----------------| | Clear headline (H1) | Confirms relevance to query | Generic or missing | | Value proposition | Why should they stay? | Buried below fold | | Primary CTA | What should they do next? | Hidden or unclear | | Hero image/media | Visual engagement | Slow-loading, causing LCP issues | | Trust signals | Why should they trust you? | No logos, reviews, or credentials |

Ko e layouts ko 'eni:

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 must be visible without scrolling (matches search query)
• CTA must be visible without scrolling (reduces bounce)
• No layout shift in above-the-fold content (CLS killer)
• Hero image must load fast (it's usually the LCP element)
• Mobile: reduce above-the-fold content (less viewport space)

Quick win: Faka'osi e screenshot 'o ho'o homepage 'i he mobile (375px width). Ko e H1 visible? Ko e CTA button visible? Ko e fainga 'o e site 'oku 'i he 2 seconds? Kevika e toe ko e nai, o e fokotu'u mai e fehoanaki.

The UX Audit Checklist

Faka'osi e ngaahi mafai ia:

• [ ] LCP under 2.5 seconds (hero image optimized, critical CSS inlined)
• [ ] INP under 200ms (no long JavaScript tasks blocking interaction)
• [ ] CLS under 0.1 (all images have dimensions, no late-loading shifts)
• [ ] Mobile-friendly (44px touch targets, 16px+ text, no horizontal scroll)
• [ ] Accessible (alt text, heading hierarchy, color contrast, keyboard nav)
• [ ] HTTPS everywhere (no mixed content, HSTS enabled)
• [ ] No intrusive interstitials (consent overlays OK, content-blocking popups not)
• [ ] Breadcrumbs present (with BreadcrumbList schema)
• [ ] Navigation depth under 4 clicks to any important page
• [ ] Above-the-fold optimized (H1 visible, CTA visible, fast LCP)

Ko e ngaahi faitoko e UX e LANGR

Ko e module e UX ko LANGR e totonu ko e:

• Core Web Vitals module — Me'akai LCP, INP, CLS mai he Chrome User Experience Report (real user data)
• PageSpeed module — Full Lighthouse performance audit mo e mobile mo 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 mo desktop layouts
• Page Experience module — Interstitial detection, HTTPS status, safe browsing

Ko e ngaahi module e hoko ke he faingamalie kotoa, tu'u e ki ho'o e me'akai e nātipuni — pea hā ko e fai ke hā ko e maʻu e rankings.

Ko e ngaahi faingamalie UX (Lauhaki e ngaahi Loto)

1. Tu'ā e mobile — 60%+ e firiki e mobile; ko e mobile 'okú 'iai = broken rankings
2. Unoptimized images — Ko e #1 cause o e slow LCP (mo e to'e 'a e me'akai)
3. No explicit image dimensions — Ko e layout shifts e 'āu e CLS scores
4. Third-party script bloat — Chat widgets, analytics, ads blocking INP
5. Missing accessibility basics — No alt text, no heading hierarchy, no contrast
6. Content-blocking interstitials — Full-screen popups before users see content
7. Deep site architecture — Important pages buried 5+ clicks from homepage
8. No above-the-fold value — Ko e tagata 'oku 'ikai ke to'o ha o e kahi 'oku 'i he scrolling

Ko e 'i he 'enau ke o e

Faka'ata 6: Monitoring & Ranking — Faka'osi 'o e ko e faingamalie ko e fehu'i. Ko e 'au ki, sione ngaue, 'ī e ngaue, mo 'ato mo e monitoring.

---

Ko e guide ko 'eni ko e faingamalie e LANGR e 13. Faka'osi e a free audit ke fakafoki ko ho'o site te 'oku e fai ki e ngaahi faingamalie e 13.