SEO Gabay Hakbang 5: UX / Karanasan ng Gumagamit

Ito ay Hakbang 5 ng 13-Hakbang na SEO Gabay. Ang karanasan ng gumagamit ay ngayon ay isang direktang salik sa ranggo — sinusukat ng Google kung paano nakikipag-ugnayan ang mga bisita sa iyong site at ginagantimpalaan ang mga site na nagbibigay ng mabilis, madaling ma-access, at kaaya-ayang karanasan.

---

Ang estratehiya ng nilalaman (Hakbang 3) ay nagtatakda kung ano ang iyong ilalathala. Ang linkbuilding (Hakbang 4) ay nagpapatunay ng iyong awtoridad. Ngunit kung ang mga bisita ay bumaba sa iyong pahina at agad na umalis dahil mabagal ito, sira sa mobile, o hindi ma-access — wala nang kahulugan ang lahat ng iyon. Sinusubaybayan ng Google ang mga senyales na ito at ginagamit ang mga ito upang ayusin ang ranggo.

Mula noong 2021, ang update ng Page Experience ng Google ay gumawa ng UX bilang isang kumpirmadong salik sa ranggo. Noong 2024, ang INP (Interaction to Next Paint) ay pumalit sa FID bilang isang Core Web Vital. Sa 2026, ang mga senyales na ito ay nagdadala ng higit pang bigat habang unti-unting binibigyang-priyoridad ng Google ang mga sukatan ng kasiyahan ng gumagamit kaysa sa mga tradisyunal na senyales.

Ano ang Saklaw ng UX para sa SEO

Ang optimization ng UX para sa SEO ay sumasaklaw sa 6 na lugar:

1. Core Web Vitals — Mga opisyal na sukatan ng UX ng Google (LCP, INP, CLS)
2. Mobile Optimization — Responsive design, touch targets, viewport
3. Accessibility (WCAG) — Ginagawang magamit ang iyong site para sa lahat
4. Page Experience Signals — HTTPS, walang interstitials, ligtas na pag-browse
5. Navigation Patterns — Estruktura ng site na tumutulong sa mga gumagamit at crawlers
6. Above-the-Fold Optimization — Kung ano ang nakikita ng mga gumagamit nang hindi nag-scroll

1. Core Web Vitals (CWV)

Ang Core Web Vitals ay tatlong sukat ng UX ng Google na maaaring sukatin. Ito ay sinusubaybayan sa Chrome User Experience Report (CrUX) na data at direktang nakakaapekto sa ranggo.

Ang tatlong sukatan:

| Sukat | Sukat | Maganda | Kailangan ng Pagbuti | Mahina | |-------|-------|---------|----------------------|--------| | LCP (Largest Contentful Paint) | Bilis ng pag-load | < 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

Ang LCP ay sumusukat kung gaano kabilis nagiging visible ang pangunahing nilalaman ng iyong pahina. Ang "largest content" ay karaniwang ang iyong hero image, pangunahing pamagat, o pinakamalaking block na above-the-fold.

Karaniwang problema sa LCP at mga solusyon:

| Problema | Epekto | Solusyon | |----------|--------|----------| | Hindi optimized na hero image | +2-5s | WebP format, tamang sukat, fetchpriority="high" | | Render-blocking CSS/JS | +1-3s | Inline critical CSS, defer non-critical | | Mabagal na tugon ng server (TTFB) | +1-4s | CDN, server caching, edge deployment | | Web fonts na humahadlang sa render | +0.5-2s | font-display: swap, preload critical fonts | | Third-party scripts | +1-3s | Defer analytics/chat widgets, lazy load ads |

Pagsasaayos ng LCP na priyoridad:

<!-- 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">

Mabilis na panalo: Patakbuhin ang PageSpeed Insights sa iyong homepage. Tingnan ang LCP element na tinukoy nito. Kung ito ay isang imahe, i-convert sa WebP, itakda ang tiyak na lapad/tangkay, at idagdag ang fetchpriority="high". Madalas na bumababa nito ang LCP ng 1-2 segundo.

INP — Interaction to Next Paint

Ang INP ay sumusukat kung gaano kabilis tumugon ang iyong pahina kapag nakikipag-ugnayan ang mga gumagamit (click, tap, type). Sinusubaybayan nito ang pinakamasamang interaksyon sa panahon ng pagbisita sa pahina at ginagamit iyon bilang iskor.

Karaniwang problema sa INP at mga solusyon:

| Problema | Epekto | Solusyon | |----------|--------|----------| | Mahahabang JavaScript tasks | +200-1000ms | Hatiin sa mas maliliit na gawain, gumamit ng requestIdleCallback | | Mabigat na event handlers | +100-500ms | Debounce, throttle, gumamit ng requestAnimationFrame | | Layout thrashing | +50-300ms | Batch DOM reads/writes, gumamit ng will-change | | Third-party scripts | +100-500ms | Defer, load pagkatapos ng interaksyon, gumamit ng Web Workers | | Synchronous API calls | +200-2000ms | Async/await, loading states, optimistic UI |

Mga teknik sa optimization ng INP:

// Masama: Nag-bablock sa main thread
button.addEventListener('click', () => {
  const data = heavyComputation(); // Nagbabalak ng 400ms
  updateDOM(data);
});

// Maganda: Naghahatid sa main thread
button.addEventListener('click', async () => {
  // Ipakita ang agarang tugon
  button.textContent = 'Loading...';

  // Hatiin ang mabigat na trabaho sa mga chunk
  await scheduler.yield();
  const data = heavyComputation();

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

Mabilis na panalo: Buksan ang Chrome DevTools > Performance tab. Mag-click sa buong site mo at hanapin ang "Long Tasks" (pulang tatsulok). Ang mga ito ay nag-block sa main thread. Ang pinakamalaking mahabang gawain ay karaniwang isang third-party script — i-defer ito o i-load ito pagkatapos ng unang interaksyon.

CLS — Cumulative Layout Shift

Ang CLS ay sumusukat sa visual stability — kung gaano kalaki ang pagtalon ng nilalaman ng pahina habang naglo-load ito. Walang nakakainis sa mga gumagamit kaysa sa pag-click sa isang pindutan at ang pahina ay gumalaw kaya't nag-click sila ng ibang bagay.

Karaniwang problema sa CLS at mga solusyon:

| Problema | CLS Epekto | Solusyon | |----------|------------|----------| | Mga larawan nang walang dimensyon | 0.1-0.5 | Laging itakda ang width at height | | Ads na naglo-load ng late | 0.1-0.3 | Magreserba ng espasyo gamit ang min-height | | Web fonts na nagiging sanhi ng reflow | 0.05-0.2 | font-display: optional o size-adjusted fallback | | Dynamic na nilalaman na pag-insert | 0.1-0.4 | Magreserba ng espasyo, gumamit ng content-visibility | | Cookie banners na nagtutulak ng nilalaman | 0.05-0.2 | Overlay design (hindi nagtutulak pababa) |

CLS prevention checklist:

<!-- Laging itakda ang dimensyon para sa media -->
<img src="photo.webp" width="800" height="600" alt="...">
<video width="1280" height="720"></video>
<iframe width="560" height="315"></iframe>

<!-- Magreserba ng espasyo para sa dynamic na nilalaman -->
<div style="min-height: 250px;">
  <!-- Ang ad ay maglo-load dito nang hindi nag-shift -->
</div>

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

Mabilis na panalo: Idagdag ang tiyak na width at height na mga attribute sa bawat at sa iyong nangungunang 10 pahina. Ang isang pagbabago na ito ay nagtanggal ng pinakakaraniwang problema sa CLS — ang mga larawang naglo-load at nagtutulak ng nilalaman pababa.

2. Mobile Optimization

Gumagamit ang Google ng mobile-first indexing — ang iyong mobile experience ay ANG ranggo experience mo. Kung ang iyong site ay sira sa mobile, wala nang kahulugan kahit gaano pa kahusay ang bersyon sa desktop.

Mobile optimization checklist:

| Element | Kinakailangan | Karaniwang pagkukulang | |---------|---------------|-----------------------| | Viewport meta | width=device-width, initial-scale=1 | Wala nang ganap | | Touch targets | Minimum 44x44px | Maliliit na link, masikip na mga button | | Sukat ng font | Minimum 16px na body text | 12px na hindi mabasa sa mobile | | Lapad ng nilalaman | Walang horizontal scrolling | Fixed-width na mga elemento | | Tap spacing | Minimum 8px sa pagitan ng mga target | Nangangalabit na mga link | | Responsive images | srcset na may angkop na mga sukat | Desktop-sized na mga larawan sa mobile |

Responsive design patterns:

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

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

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

Mga signal ng Mobile SEO na sinusuri ng Google:

• Text na nababasa nang hindi nag-zoom
• Mga link/button na hindi masyadong malapit sa isa't isa
• Ang nilalaman ay angkop sa lapad ng viewport (walang horizontal scroll)
• Walang Flash o hindi suportadong teknolohiya
• Ang mga interstitial ay hindi nagba-block ng nilalaman sa pagpasok
• Ang pahina ay naglo-load nang mabilis sa 4G/3G na koneksyon

Mabilis na panalo: Buksan ang iyong site sa iyong telepono. Subukang i-click ang bawat button at link. Kung hindi mo sinasadyang tamang pindutin ang maling bagay dahil masyadong malapit ang mga target, o kung kailangan mong mag-pinch-zoom upang basahin ang text — iyon ang iyong mga priyoridad na ayusin.

3. Accessibility (WCAG)

Ang accessibility ay hindi lamang etikal — ito ay isang signal sa SEO. Pinapaboran ng mga algorithm ng Google ang mga site na magagamit ng lahat, kasama na ang mga gumagamit na may screen readers, keyboard-only navigation, o visual impairments. Ang pagsunod sa WCAG (Web Content Accessibility Guidelines) ay may kaugnayan sa mas magandang ranggo.

Mga kritikal na kinakailangan sa accessibility:

| Element | Kinakailangan | Epekto sa SEO | |---------|---------------|---------------| | Alt text sa mga larawan | Descriptive text para sa lahat ng makahulugang larawan | Direktang (image SEO + accessibility) | | Hierarchy ng pamagat | H1 → H2 → H3 nang hindi tumatalon | Direktang (structured ng nilalaman) | | Color contrast | 4.5:1 para sa normal na text, 3:1 para sa malalaking text | Indirect (usability) | | Keyboard navigation | Lahat ng interactive na elemento ay maaabot sa pamamagitan ng Tab | Indirect (usability) | | ARIA labels | Labels para sa mga icon, button na walang text | Indirect (screen reader UX) | | Focus indicators | Nakikitang focus ring sa keyboard navigation | Indirect (usability) | | Form labels | Lahat ng input ay may kaukulang | Indirect (usability) | | Link text | Descriptive (hindi "click here") | Direktang (anchor text SEO) |

Proseso ng testing sa accessibility:

1. Automated scan — Patakbuhin ang Lighthouse, axe-core, o WAVE (nahuhuli ang ~30-50% ng mga isyu)
2. Keyboard test — Mag-navigate sa buong site gamit lamang ang Tab, Enter, Escape
3. Screen reader test — Gumamit ng VoiceOver (Mac) o NVDA (Windows) sa mga pangunahing pahina
4. Color contrast — Tingnan ang lahat ng text laban sa mga backgrounds (gumamit ng DevTools contrast checker)
5. Zoom test — I-zoom sa 200% — gumagana pa rin ba ang lahat?

Karaniwang mga solusyon sa accessibility:

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

<!-- Mga Button: malinaw na labels -->
<button aria-label="Isara ang navigation menu">
  <svg>...</svg> <!-- Button na may icon lamang ay nangangailangan ng aria-label -->
</button>

<!-- Mga Form: mga kaukulang label -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" required>

<!-- Mga Link: descriptive text -->
<a href="/guide">Basahin ang kumpletong SEO gabay</a>
<!-- HINDI: <a href="/guide">Click here</a> -->

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

Mabilis na panalo: Patakbuhin ang Lighthouse sa iyong homepage sa Accessibility category. Ayusin ang lahat ng iskor na "Fails" muna — kadalasang mga ito ay nawawalang alt text, nawawalang form labels, at mababang contrast text. Ang mga pag-aayos na ito ay karaniwang tumatagal ng 30 minuto at nagpapabuti sa iyong iskor ng 20+ puntos.

4. Page Experience Signals

Higit pa sa Core Web Vitals, sinusuri ng Google ang iba pang mga senyales ng karanasan sa pahina na nakakaapekto sa ranggo.

Mga salik ng karanasan sa pahina:

| Signal | Kinakailangan | Suriin | |--------|---------------|--------| | HTTPS | Buong site na ibinibigay sa HTTPS | Kumikilos na nilalaman ang nagpuputol dito | | Walang nakakaabala na interstitials | Huwag harangan ang nilalaman sa pagdating | Popups na sumasakop ng >30% sa mobile | | Ligtas na pag-browse | Walang malware, phishing, o nakaliligaw na nilalaman | Katayuan ng Google Safe Browsing | | Mobile-friendly | Nakapasa sa mobile-friendly na pagsusuri | Google Mobile-Friendly Test | | Walang nakaliligaw na mga ads | Mga ad na hindi ginagaya ang nilalaman | Nakatagong mga download buttons |

Mga alituntunin sa interstitial (ano ang pinapayagan at pinaparusahan):

| Pinapayagan | Pinaparusahan | |-------------|---------------| | Age verification (legal na hinihiling) | Full-screen popup sa pagpasok ng pahina | | Cookie consent (legal na hinihiling) | Email signup na sumasakop sa buong nilalaman | | Login walls para sa paywalled content | "I-download ang aming app" na humaharang sa nilalaman | | Maliit na banners na gumagamit ng <30% ng screen | Mga countdown timer bago ma-access ang nilalaman | | Pagkatapos ng pag-scroll/interaksyon ng user | Bago makita ng user ang anumang nilalaman |

HTTPS checklist:

• [ ] SSL certificate na wasto at hindi expired
• [ ] Lahat ng pahina na nag-redirect mula HTTP → HTTPS (301)
• [ ] Walang mixed content (HTTP resources sa mga HTTPS pages)
• [ ] HSTS header na enabled (kasama ang includeSubDomains)
• [ ] Ang mga internal link ay gumagamit ng HTTPS (hindi HTTP)
• [ ] Ang sitemap ay gumagamit ng mga HTTPS URL
• [ ] Ang mga canonical tags ay gumagamit ng HTTPS

Mabilis na panalo: Suriin ang mixed content — buksan ang DevTools Console sa iyong mga pangunahing pahina. Anumang "Mixed Content" na babala ay nangangahulugang naglo-load ka ng mga HTTP resources sa isang HTTPS page. I-update ang mga URL na ito sa HTTPS. Isa ito sa pinakamadalas na isyu ng karanasan sa pahina.

5. Navigation Patterns

Ang magandang nabigasyon ay tumutulong sa parehong mga gumagamit at mga search engine. Madaling makahanap ang mga gumagamit ng kanilang kailangan. Naiintindihan ng mga crawlers ng Google ang estruktura ng iyong site at epektibong ipinamamahagi ang PageRank.

Mga pinakamahusay na kasanayan sa nabigasyon:

| Pattern | Benepisyo | Implementasyon | |---------|-----------|----------------| | Flat architecture | Ang mga pahina ay nasa loob ng 3 click mula sa home | Hub pages, breadcrumbs | | Breadcrumbs | Alam ng mga gumagamit kung nasaan sila | Schema markup + nakikitang trail | | Lohikal na estruktura ng URL | Predictable paths | /category/subcategory/page | | Footer navigation | Pangalawang pahina ay maa-access | Legal, tungkol, contact, sitemap | | Internal search | Makikita ng mga gumagamit ang partikular na nilalaman | Search box na may mga suhestiyon | | Kaugnay na nilalaman | Binabawasan ang bounce, pinapataas ang lalim | Mga seksyon ng "Kaugnay na artikulo" |

Ideal na estruktura ng site:

Homepage (1 click mula sa lahat ng mahalaga)
├── /products/ (category hub — mga link sa lahat ng produkto)
│   ├── /products/category-a/
│   │   ├── /products/category-a/product-1
│   │   └── /products/category-a/product-2
│   └── /products/category-b/
├── /blog/ (content hub — mga link sa lahat ng post)
│   ├── /blog/topic-cluster-1/ (pillar page)
│   │   ├── /blog/subtopic-1a
│   │   └── /blog/subtopic-1b
│   └── /blog/topic-cluster-2/
├── /tools/ (utility pages)
└── /about/ (trust pages)

Implementasyon ng breadcrumbs:

<!-- Nakikitang breadcrumb -->
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/blog/">Blog</a></li>
    <li aria-current="page">SEO Gabay Hakbang 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 Gabay Hakbang 5" }
  ]
}
</script>

Mga red flags sa nabigasyon:

• Ang mga pahina ay higit sa 4 na click mula sa homepage (masyadong malalim)
• Walang breadcrumbs (naliligaw ng konteksto ang mga gumagamit at Google)
• JavaScript-only na nabigasyon (maaaring mai-miss ng mga crawlers ang mga link)
• Orphan pages (walang internal links na nagtuturo sa kanila)
• Mega menus na may 200+ mga link (dinudilute ang halaga sa bawat link)

Mabilis na panalo: Suriin ang iyong mga pinakamahalagang pahina ng conversion — gaano karaming clicks mula sa homepage? Kung higit sa 3, idagdag ang direktang mga link mula sa iyong homepage o category hubs. Ang bawat click na mas malalim ay nagpapababa sa parehong pagbisita ng gumagamit at dalas ng pag-crawl.

6. Above-the-Fold Optimization

Ang makikita ng mga gumagamit bago mag-scroll ay nagtatakda kung sila'y mananatili o aalis. Ang above-the-fold na nilalaman ay dapat agad na makipag-ugnayan ng halaga at umangkop sa query ng paghahanap na nagdala sa kanila roon.

Mga dapat na mayroon sa above-the-fold:

| Element | Bakit | Karaniwang pagkukulang | |---------|-------|-----------------------| | Malinaw na headline (H1) | Nakumpirma ang kaugnayan sa query | Generic o nawawala | | Value proposition | Bakit dapat silang manatili? | Nasa ilalim ng fold | | Pangunahing CTA | Ano ang dapat nilang gawin sa susunod? | Nakatago o hindi malinaw | | Hero image/media | Visual engagement | Mabagal na naglo-load, nagiging sanhi ng mga isyu sa LCP | | Trust signals | Bakit dapat silang magtiwala sa iyo? | Walang logos, reviews, o credentials |

Above-the-fold na mga pattern ng layout:

Desktop (1440px viewport):
┌──────────────────────────────────────┐
│ Navigation bar                        │
├──────────────────────────────────────┤
│                                      │
│  H1: Malinaw na headline na tumutugma sa query │
│  Subtitle: Value proposition         │
│                                      │
│  [Pangunahing CTA Button]           │
│                                      │
│  Trust signals: logos, stats, badges │
│                                      │
├──────────────────────────────────────┤
│ ↓ Patuloy ang nilalaman sa ilalim ng fold │
└──────────────────────────────────────┘

Mobile (375px viewport):
┌────────────────────┐
│ Nav (hamburger)    │
├────────────────────┤
│                    │
│ H1: Headline       │
│ (mas maigsi sa mobile) │
│                    │
│ [CTA Button]       │
│ (full-width, 44px+)│
│                    │
│ Trust badge        │
│                    │
├────────────────────┤
│ ↓ Scroll para sa karagdagang nilalaman │
└────────────────────┘

Kritikal na mga tuntunin para sa above-the-fold:

• Ang H1 ay dapat makita nang hindi nag-scroll (tumugma sa search query)
• Ang CTA ay dapat makita nang hindi nag-scroll (nagpapababa ng bounce)
• Walang layout shift sa above-the-fold na nilalaman (CLS killer)
• Ang hero image ay dapat mabilis na mag-load (karaniwang ito ang LCP element)
• Mobile: bawasan ang above-the-fold na nilalaman (mas kaunting espasyo sa viewport)

Mabilis na panalo: Kumuha ng screenshot ng iyong homepage sa mobile (375px lapad). Nakikita ba ang H1? Nakikita ba ang isang button ng CTA? Maaari mo bang malaman kung ano ang ginagawa ng site sa loob ng 2 segundo? Kung ang anumang sagot ay "hindi," nawawalan ka ng mga bisita bago sila mag-scroll.

Ang UX Audit Checklist

Suriin ito para sa iyong mga pangunahing pahina:

• [ ] LCP sa ilalim ng 2.5 segundo (hero image optimized, critical CSS inlined)
• [ ] INP sa ilalim ng 200ms (walang mahahabang JavaScript tasks na nagbablock sa interaksyon)
• [ ] CLS sa ilalim ng 0.1 (lahat ng mga larawan ay may dimensyon, walang late-loading na shifts)
• [ ] Mobile-friendly (44px touch targets, 16px+ text, walang horizontal scroll)
• [ ] Accessible (alt text, hierarchy ng pamagat, color contrast, keyboard nav)
• [ ] HTTPS saan mang dako (walang mixed content, HSTS enabled)
• [ ] Walang nakakaabala na interstitials (consent overlays OK, content-blocking popups hindi)
• [ ] Present ang breadcrumbs (na may BreadcrumbList schema)
• [ ] Ang lalim ng nabigasyon ay nasa ilalim ng 4 na click sa anumang mahalagang pahina
• [ ] Above-the-fold na optimized (H1 nakikita, CTA nakikita, mabilis ang LCP)

Paano Sinusuri ng LANGR ang Iyong UX

Ang mga module ng pagsusuri ng UX ng LANGR ay kinabibilangan ng:

• Core Web Vitals module — Sinusukat ang LCP, INP, CLS mula sa Chrome User Experience Report (tunay na user data)
• PageSpeed module — Full Lighthouse performance audit na may mobile at desktop scores
• Mobile module — Configuration ng viewport, sukat ng touch target, readability ng text
• Accessibility module — Mga pagsusuri sa pagsunod sa WCAG, paggamit ng ARIA, color contrast
• Layout Scan module — AI-powered na pagsusuri ng mobile at desktop layouts
• Page Experience module — Pagsusuri ng interstitial, katayuan ng HTTPS, ligtas na pag-browse

Ang mga module na ito ay tumatakbo sa bawat scan, nagbibigay sa iyo ng kumpletong larawan kung paano nararanasan ng mga bisita ang iyong site — at eksaktong kung ano ang dapat ayusin para sa mas magandang ranggo.

Karaniwang mga pagkakamali sa UX (Ayon sa Epekto)

1. Pagpapabaya sa mobile — Mahigit 60% ng mga paghahanap ay mobile; sira ang mobile = sira ang ranggo
2. Hindi optimized na mga larawan — Ang #1 sanhi ng mabagal na LCP (at kadalasang pinakasimpleng ayusin)
3. Walang tiyak na dimensyon sa larawan — Ang mga layout shifts ay sumisira sa mga marka ng CLS
4. Third-party script bloat — Ang mga chat widgets, analytics, ads ay humaharang sa INP
5. Walang batayan sa accessibility — Walang alt text, walang hierarchy ng pamagat, walang contrast
6. Mga interstitial na humaharang sa nilalaman — Full-screen popups bago makita ng mga gumagamit ang nilalaman
7. Masyadong malalim na estruktura ng site — Mahalagang mga pahina ay nalubog ng 5+ click mula sa homepage
8. Walang halaga sa above-the-fold — Hindi makilala ng mga gumagamit kung ano ang ginagawa ng site nang hindi nag-scroll

Ano ang Susunod?

Hakbang 6: Pagsubok at Ranggo — Hindi mo maiiangat ang kung ano ang hindi mo sinusukat. Posisyon ng keyword, pagsubaybay sa iskor, ulat sa pagbabago, at monitoring ng uptime.

---

Ang gabay na ito ay bahagi ng 13-hakbang na SEO serye ng LANGR. Patakbuhin ang libreng audit upang makita kung nasaan ang iyong site sa lahat ng 13 disiplina.