Guia SEO Pas 5: UX / Experiència de l'Usuari

Aquest és el Pas 5 de la Guia SEO de 13 passos. L'experiència de l'usuari és ara un factor de rànquing directe: Google mesura com interactuen els visitants amb el teu lloc web i recompensa els llocs que ofereixen experiències ràpides, accessibles i agradables.

La estratègia de contingut (Pas 3) determina què publiques. La creació d'enllaços (Pas 4) demostra la teva autoritat. Però si els visitants arriben a la teva pàgina i marxa immediatament perquè és lenta, està trencada en mòbil o és inaccessible, res d'això té importància. Google fa seguiment d'aquests senyals i els utilitza per ajustar els rànquings.

Des de 2021, l'actualització de l'Experiència de Pàgina de Google ha fet de l'UX un factor de rànquing confirmat. El 2024, l'INP (Interacció amb el Proper Pintat) va reemplaçar el FID com a Core Web Vital. El 2026, aquests senyals tenen encara més pes a mesura que Google prioritza cada cop més les mètriques de satisfacció de l'usuari per sobre dels senyals tradicionals.

Què Cobreix l'UX per SEO

L'optimització de l'UX per SEO abasta 6 àrees:

Core Web Vitals — Les mètriques oficials d'UX de Google (LCP, INP, CLS)
Optimització Mòbil — Disseny responsiu, objectius tàctils, viewport
Accessibilitat (WCAG) — Fer que el teu lloc sigui usable per a tothom
Senyals d'Experiència de Pàgina — HTTPS, sense intersticials, navegació segura
Patrons de Navegació — Estructura del lloc que ajuda als usuaris i a les aranyes
Optimització per sobre del plec — El que veuen els usuaris sense desplaçar-se

1. Core Web Vitals (CWV)

Els Core Web Vitals són les tres mètriques d'UX mesurables de Google. Es fan un seguiment en les dades del Chrome User Experience Report (CrUX) i influeixen directament en els rànquings.

Les tres mètriques:

| Mètrica | Mesura | Bé | Necessita Millora | Pobre | |---------|--------|----|-------------------|-------| | LCP (Largest Contentful Paint) | Velocitat de càrrega | < 2.5s | 2.5s - 4.0s | > 4.0s | | INP (Interaction to Next Paint) | Responsivitat | < 200ms | 200ms - 500ms | > 500ms | | CLS (Cumulative Layout Shift) | Estabilitat visual | < 0.1 | 0.1 - 0.25 | > 0.25 |

LCP — Largest Contentful Paint

LCP mesura com de ràpid apareix el contingut principal de la teva pàgina. El "contingut més gran" és normalment la teva imatge principal, capçalera o el bloc més gran per sobre del plec.

Problemes comuns de LCP i solucions:

| Problema | Impacte | Solució | |----------|---------|---------| | Imatge principal no optimitzada | +2-5s | Format WebP, reducció de mida, fetchpriority="high" | | CSS/JS bloquejant el renderitzat | +1-3s | CSS crític en línia, ajornar el no crític | | Resposta lenta del servidor (TTFB) | +1-4s | CDN, memòria cau del servidor, desplegament edge | | Fonts web bloquejant el renderitzat | +0.5-2s | font-display: swap, preload fonts crítiques | | Scripts de tercers | +1-3s | Afegir al seu treball analític/chat, càrrega lenta d'anuncis |

Prioritat d'optimització de LCP:

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

<!-- 2. CSS crític en línia (primeres 14KB) -->
<style>/* Estils per sobre del plec només */</style>

<!-- 3. Ajornament del CSS no crític -->
<link rel="stylesheet" href="/full.css" media="print" onload="this.media='all'">

<!-- 4. Imatge principal amb dimensions explícites -->
<img src="/hero.webp" width="1200" height="600"
     fetchpriority="high" decoding="async"
     alt="Text alternatiu descriptiu">

Guanyar ràpidament: Executa PageSpeed Insights a la teva pàgina d'inici. Fixa't en l'element LCP que identifica. Si és una imatge, converteix-la a WebP, establix amplada/altura explícita i afegeix fetchpriority="high". Només aquest canvi sovint redueix LCP en 1-2 segons.

INP — Interaction to Next Paint

INP mesura com de ràpid respon la teva pàgina quan els usuaris interactuen (clic, toc, escriure). Fa un seguiment de la pitjor interacció durant la visita a la pàgina i ho utilitza com a puntuació.

Problemes comuns d'INP i solucions:

| Problema | Impacte | Solució | |----------|---------|---------| | Tasques llargues de JavaScript | +200-1000ms | Dividir en tasques més petites, utilitzar requestIdleCallback | | Gestors d'esdeveniments pesats | +100-500ms | Debounce, throttle, utilitzar requestAnimationFrame | | Distorsió de layout | +50-300ms | Agrupar lectures/escriptures del DOM, utilitzar will-change | | Scripts de tercers | +100-500ms | Ajornar, carregar després de la interacció, utilitzar Web Workers | | Crides API síncrones | +200-2000ms | Async/await, estats de càrrega, UI optimista |

Tècniques d'optimització d'INP:

// Dolent: Bloqueja el fil principal
button.addEventListener('click', () => {
  const data = heavyComputation(); // Bloqueja durant 400ms
  updateDOM(data);
});

// Bo: Allibera el fil principal
button.addEventListener('click', async () => {
  // Mostrar reacció immediata
  button.textContent = 'Carregant...';

  // Dividir treball pesat en trossos
  await scheduler.yield();
  const data = heavyComputation();

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

Guanyar ràpidament: Obre Chrome DevTools > Pestanya de Rendiment. Fes clic a través del teu lloc i busca "Tasques Llargues" (triangles vermells). Aquestes bloquegen el fil principal. La tasca llarga més gran és, generalment, un script de tercers: ajornar-lo o carregar-lo després de la primera interacció.

CLS — Cumulative Layout Shift

CLS mesura l'estabilitat visual: quant salta el contingut de la pàgina mentre escarrega. Res frustra més als usuaris que fer clic a un botó i que la pàgina es mogui i els faci fer clic en altre lloc.

Problemes comuns de CLS i solucions:

| Problema | Impacte CLS | Solució | |----------|-------------|---------| | Imatges sense dimensions | 0.1-0.5 | Sempre establir width i height | | Anuncis que carreguen tard | 0.1-0.3 | Reservar espai amb min-height | | Fonts web causant refluix | 0.05-0.2 | font-display: optional o fallback ajustat de mida | | Inserció de contingut dinàmic | 0.1-0.4 | Reservar espai, utilitzar content-visibility | | Banners de cookies empentant contingut | 0.05-0.2 | Disseny d'overlay (no empènyer cap avall) |

Llista de verificació de prevenció de CLS:

<!-- Sempre especificar dimensions per a mitjans -->
<img src="photo.webp" width="800" height="600" alt="...">
<video width="1280" height="720"></video>
<iframe width="560" height="315"></iframe>

<!-- Reservar espai per a contingut dinàmic -->
<div style="min-height: 250px;">
  <!-- L'anunci es carregarà aquí sense moure's -->
</div>

<!-- Utilitzar aspect-ratio per a mitjans responsius -->
<div style="aspect-ratio: 16/9;">
  <img src="..." style="width: 100%; height: 100%; object-fit: cover;">
</div>

Guanyar ràpidament: Afegir atributs d'amplada i altura explícits a cada i a les teves 10 pàgines principals. Aquest canvi únic elimina el problema més comú de CLS: imatges carregant i empentant contingut cap avall.

2. Optimització Mòbil

Google utilitza l'indexació mòbil-primer: l'experiència mòbil que ofereixes ÉS la teva experiència de rànquing. Si el teu lloc està trencat en mòbil, no importa com sigui de perfecte la versió d'escriptori.

Llista de verificació per a l'optimització mòbil:

| Element | Requisit | Fallada comuna | |---------|----------|----------------| | Meta viewport | width=device-width, initial-scale=1 | Completament absent | | Objectius tàctils | Mínim 44x44px | Enllaços petits, botons amuntegats | | Mida de la font | Mínim 16px text del cos | 12px il·legible en mòbil | | Amplada del contingut | Sense desplaçament horitzontal | Elements d'amplada fixa | | Espai entre tocs | 8px mínim entre objectius | Enllaços adjacents tocant-se | | Imatges responsives | srcset amb mides apropiades | Imatges d'escriptori en mòbil |

Patrons de disseny responsiu:

/* Enfocament mòbil-primer */
.container {
  padding: 16px;
  font-size: 16px;
}

/* Objectius amigables per a tocs */
.button, .link {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
}

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

/* Sense desbordament horitzontal */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

Senyals SEO mòbils que Google comprova:

Text llegible sense fer zoom
Enllaços/botons no massa propers
Contingut s'ajusta a l'amplada del viewport (sense desplaçament horitzontal)
Sense Flash o tecnologies no compatibles
Intersticials no bloquegen el contingut a l'entrada
La pàgina es carrega ràpidament en connexions 4G/3G

Guanyar ràpidament: Obre el teu lloc al telèfon. Intenta clicar cada botó i enllaç. Si per casualitat carregues el que no volies perquè els objectius estan massa propers o si necessites fer zoom per llegir text: aquests són els teus errors prioritaris.

3. Accessibilitat (WCAG)

L'accessibilitat no és només ètica: és un senyal SEO. Els algorismes de Google favoracen llocs que són usables per tothom, incloent-usuaris amb lectors de pantalla, navegació només amb teclat o discapacitats visuals. Complir amb WCAG (Web Content Accessibility Guidelines) es correlaciona amb millors rànquings.

Requisits crítics d'accessibilitat:

| Element | Requisit | Impacte SEO | |---------|----------|-------------| | Text alternatiu a les imatges | Text descriptiu per a totes les imatges significatives | Directe (SEO d'imatges + accessibilitat) | | Jerarquia de capçaleres | H1 → H2 → H3 sense saltar | Directe (estructura de contingut) | | Contrast de colors | 4.5:1 per a text normal, 3:1 per a text gran | Indirecte (usabilitat) | | Navegació amb teclat | Tots els elements interactius accessibles via Tab | Indirecte (usabilitat) | | Etiquetes ARIA | Etiquetes per a icones, botons sense text | Indirecte (UX amb lector de pantalla) | | Indicadors de focus | Anell de focus visible en la navegació per teclat | Indirecte (usabilitat) | | Etiquetes de formulari | Cada entrada té un associat | Indirecte (usabilitat) | | Text dels enllaços | Descriptiu (no "cliqueu aquí") | Directe (SEO de text d'ancora) |

Procés de prova d'accessibilitat:

Escaneig automatitzat — Executar Lighthouse, axe-core o WAVE (captura ~30-50% dels problemes)
Prova amb teclat — Navegar tot el teu lloc només amb Tab, Enter, Escape
Prova amb lector de pantalla — Utilitzar VoiceOver (Mac) o NVDA (Windows) a pàgines clau
Contrast de colors — Comprovar tot el text contra fons (utilitzar l'eina de contrast de DevTools)
Prova de zoom — Augmentar a 200% — tot segueix funcionant?

Solucions comunes d'accessibilitat:

<!-- Imatges: text alternatiu descriptiu -->
<img src="chart.png" alt="Gràfic de barres que mostra un augment del 40% en el trànsit orgànic de gener a març de 2026">

<!-- Botons: etiquetes clares -->
<button aria-label="Tancar menú de navegació">
  <svg>...</svg> <!-- Botó només amb icona necessita aria-label -->
</button>

<!-- Formularis: etiquetes associades -->
<label for="email">Adreça de correu electrònic</label>
<input type="email" id="email" name="email" required>

<!-- Enllaços: text descriptiu -->
<a href="/guide">Llegiu la guia SEO completa</a>
<!-- NO: <a href="/guide">Cliqueu aquí</a> -->

<!-- Saltar navegació per a usuaris de teclat -->
<a href="#main-content" class="skip-link">Saltar al contingut principal</a>

Guanyar ràpidament: Executa Lighthouse a la teva pàgina d'inici amb la categoria d'Accessibilitat. Arregla tot el que tingui puntuacions "No superades" primer: aquests solen ser text alternatiu absent, etiquetes de formulari mancants i text de baix contrast. Aquestes solucions sovint triguen 30 minuts i milloren la teva puntuació en més de 20 punts.

4. Senyals d'Experiència de Pàgina

A més dels Core Web Vitals, Google avalua diversos altres senyals d'experiència de pàgina que afecten els rànquings.

Factors d'experiència de pàgina:

| Senyal | Requisit | Comprovar | |--------|----------|-----------| | HTTPS | Tot el lloc servit a través de HTTPS | Contingut mixt el trenca | | Sense intersticials intrusius | No bloquejar contingut a l'arribada | Popups cobrint >30% en mòbil | | Navegació segura | Sense malware, phishing, contingut enganyós | Estat de navegació segura de Google | | Amigable amb mòbil | Passa la prova d'amigabilitat mòbil | Prova d'amigabilitat mòbil de Google | | Sense anuncis enganyosos | Això no hauria de semblar contenir | Botons de descàrrega disfressats |

Directrius per intersticials (el que és permès i penalitzat):

| Permès | Penalitzat | |--------|------------| | Verificació d'edat (legalment requerida) | Pop-up de pantalla completa a l'entrada | | Consentiment de cookies (legalment requerit) | Inscripció per correu que cobreix tot el contingut | | Pantalles d'inici per contingut de pagament | "Descarrega la nostra app" bloquejant contingut | | Banners petits que utilitzin <30% de la pantalla | Comptadors abans d'accedir al contingut | | Després que l'usuari desplaci/interactuï | Abans que l'usuari vegi contingut |

Llista de control HTTPS:

[ ] Certificat SSL vàlid i no caducat
[ ] Totes les pàgines redirigeixen HTTP → HTTPS (301)
[ ] Sense contingut mixt (recursos HTTP a pàgines HTTPS)
[ ] Capçalera HSTS habilitada (amb includeSubDomains)
[ ] Enllaços interns utilitzant HTTPS (no HTTP)
[ ] El mapa del lloc utilitza URLs HTTPS
[ ] Les etiquetes canòniques utilitzen HTTPS

Guanyar ràpidament: Comprova el contingut mixt: obre la Consola de DevTools a les teves pàgines clau. Qualsevol advertiment de "Contingut Mixt" significa que carregues recursos HTTP en una pàgina HTTPS. Actualitza aquestes URLs a HTTPS. Aquest és un dels problemes més comuns d'experiència de pàgina.

5. Patrons de Navegació

Una bona navegació ajuda tant als usuaris com als motors de cerca. Els usuaris troben el que necessiten ràpidament. Les aranyes de Google comprenen la teva jerarquia i distribueixen eficientment el PageRank.

Bones pràctiques de navegació:

| Patró | Benefici | Implementació | |-------|----------|---------------| | Arquitectura plana | Pàgines a 3 clics de la pàgina d'inici | Pàgines hub, breadcrumbs | | Breadcrumbs | Els usuaris saben on són | Marcatge de esquema + sender visible | | Estructura d'URL lògica | Camins previsibles | /category/subcategory/page | | Navegació per peu | Pàgines secundàries accessibles | Legal, sobre, contacte, mapa del lloc | | Cerca interna | Els usuaris troben contingut específic | Caixa de cerca amb suggeriments | | Contingut relacionat | Redueix la rebuda, augmenta la profunditat | Seccions "Articles relacionats" |

Arquitectura del lloc ideal:

Pàgina d'inici (1 clic de tot el que és important)
├── /products/ (hub de categoria — enllaços a tots els productes)
│   ├── /products/category-a/
│   │   ├── /products/category-a/product-1
│   │   └── /products/category-a/product-2
│   └── /products/category-b/
├── /blog/ (hub de contingut — enllaços a totes les publicacions)
│   ├── /blog/topic-cluster-1/ (pàgina pilar)
│   │   ├── /blog/subtopic-1a
│   │   └── /blog/subtopic-1b
│   └── /blog/topic-cluster-2/
├── /tools/ (pàgines d'utilitat)
└── /about/ (pàgines de confiança)

Implementació de Breadcrumb:

<!-- Breadcrumb visible -->
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Inici</a></li>
    <li><a href="/blog/">Blog</a></li>
    <li aria-current="page">Guia SEO Pas 5</li>
  </ol>
</nav>

<!-- Marcatge de esquema (BreadcrumbList) -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Inici", "item": "https://example.com/" },
    { "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://example.com/blog/" },
    { "@type": "ListItem", "position": 3, "name": "Guia SEO Pas 5" }
  ]
}
</script>

Bandera roja de navegació:

Pàgines a més de 4 clics de la pàgina d'inici (massa profundes)
Sense breadcrumbs (usuaris i Google perden context)
Navegació només amb JavaScript (les aranyes poden perdre enllaços)
Pàgines orfes (sense enllaços interns apuntant a elles)
Mega menús amb 200+ enllaços (diluït valor per enllaç)

Guanyar ràpidament: Comprova les teves pàgines de conversió més importants: quants clics de la pàgina d'inici? Si són més de 3, afegeix enllaços directes des de la teva pàgina d'inici o hubs de categoria. Cada clic més profund redueix tant les visites d'usuaris com la freqüència de rastreig.

6. Optimització per sobre del plec

El que veuen els usuaris abans de desplaçar-se determina si es queden o marxen. El contingut per sobre del plec ha de comunicar el valor de manera instantània i estar alineat amb la consulta de cerca que els ha portat allà.

Elements imprescindibles per sobre del plec:

| Element | Per què | Fallada comuna | |---------|---------|----------------| | Capçalera clara (H1) | Confirma la rellevància amb la consulta | Genèric o absent | | Proposició de valor | Per què haurien de quedar-se? | Amagada per sota del plec | | CTA principal | Què haurien de fer a continuació? | Amagat o poc clar | | Imatge/medi principal | Participació visual | Carregant lentament, causant problemes de LCP | | Senyals de confiança | Per què haurien de confiar en tu? | Sense logos, opinions o credencials |

Patrons de disseny per sobre del plec:

Escriptori (viewport de 1440px):
┌──────────────────────────────────────┐
│ Barra de navegació                   │
├──────────────────────────────────────┤
│                                      │
│  H1: Capçalera clara que coincideix amb la consulta   │
│  Subtítol: Proposició de valor      │
│                                      │
│  [Botó CTA Principal]               │
│                                      │
│  Senyals de confiança: logos, estadístiques, insígnies  │
│                                      │
├──────────────────────────────────────┤
│ ↓ El contingut continua per sota del plec        │
└──────────────────────────────────────┘

Mòbil (viewport de 375px):
┌────────────────────┐
│ Navegació (hamburguesa) │
├────────────────────┤
│                    │
│ H1: Capçalera        │
│ (més curta en mòbil)    │
│                    │
│ [Botó CTA]       │
│ (ample, 44px+)│
│                    │
│ Insígnia de confiança        │
│                    │
├────────────────────┤
│ ↓ Desplaça't per més  │
└────────────────────┘

Regles crítiques per sobre del plec:

H1 ha de ser visible sense desplaçar-se (coincideix amb la consulta de cerca)
CTA ha de ser visible sense desplaçar-se (reduir la taxa de rebot)
Sense desplaçament de disseny en el contingut per sobre del plec (killer de CLS)
La imatge principal ha de carregar ràpidament (normalment és l'element LCP)
Mòbil: reduir contingut per sobre del plec (menys espai del viewport)

Guanyar ràpidament: Fes una captura de pantalla de la teva pàgina d'inici en mòbil (ample de 375px). És visible la H1? És visible un botó CTA? Pots identificar què fa el lloc en 2 segons? Si alguna resposta és "no", estàs perdent visitants abans que es desplacin.

La Llista de Comprovació de l'Auditoria UX

Repassa això per les teves pàgines més importants:

[ ] LCP per sota de 2.5 segons (imatge principal optimitzada, CSS crític en línia)
[ ] INP per sota de 200ms (sense tasques llargues de JavaScript bloquejant la interacció)
[ ] CLS per sota de 0.1 (totes les imatges tenen dimensions, sense canvis de càrrega tard)

[ ] Amigable amb mòbil (objectius tàctils de 44px, text de 16px+, sense desplaçament horitzontal)
[ ] Accessible (text alternatiu, jerarquia de capçaleres, contrast de colors, navegació per teclat)
[ ] HTTPS a tot arreu (sense contingut mixt, HSTS habilitat)
[ ] Sense intersticials intrusius (superposicions de consentiment OK, popups bloquejant contingut no)
[ ] Breadcrumbs presents (amb esquema BreadcrumbList)
[ ] Profunditat de navegació per sota de 4 clics per a qualsevol pàgina important
[ ] Optimitzat per sobre del plec (H1 visible, CTA visible, ràpid LCP)

Com LANGR Escaneja el Teu UX

Els mòduls d'escaneig relacionats amb l'UX de LANGR inclouen:

Mòdul Core Web Vitals — Mesura LCP, INP, CLS del Chrome User Experience Report (dades d'usuaris reals)
Mòdul PageSpeed — Auditoria completa del rendiment Lighthouse amb puntuacions mòbil i d'escriptori
Mòdul Mòbil — Configuració del viewport, dimensionament dels objectius tàctils, llegibilitat del text
Mòdul Accessibilitat — Comprovacions de compliment WCAG, ús d'ARIA, contrast de colors
Mòdul Layout Scan — Avaluació impulsada per IA dels dissenys mòbil i d'escriptori
Mòdul Page Experience — Detecció d'intersticials, estat HTTPS, navegació segura

Aquests mòduls s'executen en cada escaneig, oferint-te una visió completa de com els visitants experimenten el teu lloc — i exactament què arreglar per a millors rànquings.

Errors Comuns d'UX (Classificats per Impacte)

Ignorar mòbil — Més del 60% de les cerques són mòbils; mòbil trencat = rànquings trencats
Imatges no optimitzades — La causa número 1 de LCP lent (i sovint la solució més senzilla)
Sense dimensions d'imatge explícites — Els desplaçaments de disseny destrossen les puntuacions de CLS
Inflació de scripts de tercers — Widgets de xat, analítica, anuncis bloquejant INP
Faltan fonaments d'accessibilitat — Sense text alternatiu, sense jerarquia de capçaleres, sense contrast
Intersticials bloquejant contingut — Popups de pantalla completa abans que els usuaris vegin contingut
Arquitectura del lloc profunda — Pàgines importants enterrades a més de 5 clics de la pàgina d'inici
Sense valor per sobre del plec — Els usuaris no poden identificar què fa el lloc sense desplaçar-se

Què Ve en Avant?

Pas 6: Monitoreig i Rànquing — No pots millorar el que no mesuris. Posicions de paraules clau, seguiment de puntuacions, informes de canvis i monitoratge de temps d'activitat.

aquesta guia forma part de la sèrie de 13 passos SEO de LANGR. Fes una auditoria gratuïta per veure com està el teu lloc en totes les 13 disciplines.*

Guia SEO Pas 5: UX / Experiència de l'Usuari — Com l'Experiència dels Visitants al teu Lloc Web Afecta els Rànquings