Guía de SEO Paso 5: UX / Experiencia do Usuario — Como a Experiencia dos Visitantes no Teu Sitio Afecta as Clasificacións
Guía de SEO Paso 5: UX / Experiencia do Usuario
Este é o Paso 5 da Guía de SEO de 13 Pasos. A experiencia do usuario é agora un factor de clasificación directo — Google mide como os visitantes interactúan co teu sitio e recompensa os sitios que proporcionan experiencias rápidas, accesibles e agradables.
A estratexia de contido (Paso 3) determina o que publicas. O linkbuilding (Paso 4) demostra a túa autoridade. Pero se os visitantes chegan á túa páxina e abandonan de inmediato porque é lenta, está rota en móbil ou é inaccesible — nada diso importa. Google rastrexa estes sinais e utilízaos para axustar as clasificaciones.
Desde 2021, a actualización da Experiencia na Páxina de Google fixo que a UX se convertira en un factor de clasificación confirmado. En 2024, o INP (Interacción co Próximo Pintado) substituíu ao FID como un Core Web Vital. En 2026, estes sinais teñen aínda máis peso á medida que Google prioriza cada vez máis as métricas de satisfacción do usuario sobre os sinais tradicionais.
Que Cobre a UX para o SEO
A optimización da UX para o SEO abrangue 6 áreas:
- Core Web Vitals — Métricas oficiais de UX de Google (LCP, INP, CLS)
- Optimización Móbil — Deseño responsivo, obxectivos táctiles, viewport
- Accesibilidade (WCAG) — Facendo o teu sitio usable para todo o mundo
- Sinais de Experiencia na Páxina — HTTPS, sen intersticiais, navegación segura
- Patrones de Navegación — Estrutura do sitio que axuda a usuarios e rastrexadores
- Optimización por Riba do Racheado — O que os usuarios ven sen desplazar
1. Core Web Vitals (CWV)
Os Core Web Vitals son as tres métricas de UX medibles de Google. Rastéanse nos datos do Chrome User Experience Report (CrUX) e inflúen directamente nas clasificacións.
As tres métricas:
| Métrica | Mede | Boa | Necesita Mellora | Pobre |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Velocidade de carga | < 2.5s | 2.5s - 4.0s | > 4.0s |
| INP (Interaction to Next Paint) | Capacidade de resposta | < 200ms | 200ms - 500ms | > 500ms |
| CLS (Cumulative Layout Shift) | Estabilidade visual | < 0.1 | 0.1 - 0.25 | > 0.25 |
LCP — Largest Contentful Paint
O LCP mide que tan rápido se fai visible o contido principal da túa páxina. O "contido máis grande" é normalmente a túa imaxe principal, o encabezado principal ou o bloque máis grande por riba do racheado.
Problemas e solucións comúns de LCP:
| Problema | Impacto | Solución |
|---|---|---|
| Imaxe principal non optimizada | +2-5s | Formato WebP, tamaño adecuado, fetchpriority="high" |
| CSS/JS que bloquean a renderización | +1-3s | CSS crítico en liña, adiar non crítico |
| Resposta lenta do servidor (TTFB) | +1-4s | CDN, caché do servidor, implementación de borde |
| Fuentes web que bloquean a renderización | +0.5-2s | font-display: swap, precargar fontes críticas |
| Scripts de terceiros | +1-3s | Adiar widgets de análises/chat, carga pregada de anuncios |
Prioridade de optimización de LCP:
<!-- 1. Precargar a imaxe LCP -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- 2. CSS crítico en liña (primeiros 14KB) -->
<style>/* Estilos por riba do racheado só */</style>
<!-- 3. Adiar CSS non crítico -->
<link rel="stylesheet" href="/full.css" media="print" onload="this.media='all'">
<!-- 4. Imaxe principal con dimensións explícitas -->
<img src="/hero.webp" width="1200" height="600"
fetchpriority="high" decoding="async"
alt="Texto alternativo descriptivo">Vitoria rápida: Executa PageSpeed Insights na túa páxina principal. Observa o elemento LCP que identifica. Se é unha imaxe, convértela a WebP, establece un ancho/alto explícito e engade fetchpriority="high". Isto só, á miúdo reduce LCP en 1-2 segundos.
INP — Interaction to Next Paint
O INP mide que tan rápido responde a túa páxina cando os usuarios interactúan (falan, tocan, escriben). Rastrea a peor interacción durante a visita á páxina e utiliza esa como a puntuación.
Problemas e solucións comúns de INP:
| Problema | Impacto | Solución |
|---|---|---|
| Longas tarefas de JavaScript | +200-1000ms | Dividir en tarefas máis pequenas, usar requestIdleCallback |
| Maneiradores de eventos pesados | +100-500ms | Debounce, throttle, usar requestAnimationFrame |
| Thrashing de disposición | +50-300ms | Agrupar lecturas/escritas do DOM, usar will-change |
| Scripts de terceiros | +100-500ms | Adiar, cargar despois da interacción, usar Web Workers |
| Chamadas API síncronas | +200-2000ms | Async/await, estados de carga, UI optimista |
Técnicas de optimización INP:
// Mal: Bloquea a fío principal
button.addEventListener('click', () => {
const data = heavyComputation(); // Bloquea durante 400ms
updateDOM(data);
});
// Ben: Renuncia ao fío principal
button.addEventListener('click', async () => {
// Mostrar retroalimentación inmediata
button.textContent = 'Cargando...';
// Dividir o traballo pesado en partes
await scheduler.yield();
const data = heavyComputation();
await scheduler.yield();
updateDOM(data);
});Vitoria rápida: Abre Chrome DevTools > pestana de Rendemento. Navega polo teu sitio e busca "Long Tasks" (triángulos vermellos). Estes bloquean o fío principal. A tarefa longa máis grande é normalmente un script de terceiros — adiáo ou cárgao despois da primeira interacción.
CLS — Cumulative Layout Shift
O CLS mide a estabilidade visual — canto contido da páxina salta mentres se carga. Nada frustra máis aos usuarios que facer clic nun botón e que a páxina se desplace, causando que fagan clic en outra cousa.
Problemas e solucións comúns de CLS:
| Problema | Impacto CLS | Solución |
|---|---|---|
| Imaxes sen dimensións | 0.1-0.5 | Sempre establece width e height |
| Anuncios que cargan tarde | 0.1-0.3 | Reservar espazo con min-height |
| Fuentes web que causan refluído | 0.05-0.2 | font-display: optional ou fallback de tamaño axustado |
| Inserción de contido dinámico | 0.1-0.4 | Reservar espazo, usar content-visibility |
| Banners de cookies que empuxan contido | 0.05-0.2 | Deseño de superposición (non empuxar cara abaixo) |
Lista de verificación para prevención de CLS:
<!-- Sempre especificar dimensións para media -->
<img src="photo.webp" width="800" height="600" alt="...">
<video width="1280" height="720"></video>
<iframe width="560" height="315"></iframe>
<!-- Reservar espazo para contido dinámico -->
<div style="min-height: 250px;">
<!-- O anuncio cargará aquí sen desprazar -->
</div>
<!-- Usar aspect-ratio para media responsiva -->
<div style="aspect-ratio: 16/9;">
<img src="..." style="width: 100%; height: 100%; object-fit: cover;">
</div>Vitoria rápida: Engade atributos de width e height explícitos a cada nas túas 10 páxinas principais. Este cambio único elimina o problema de CLS máis común — imaxes que cargan e empuxan o contido cara abaixo.
2. Optimización Móbil
Google utiliza o indexado primeiro móbil — a túa experiencia móbil É a túa experiencia de clasificación. Se o teu sitio está roto en móbil, non importa que tan perfecta sexa a versión de escritorio.
Lista de verificación para a optimización móbil:
| Elemento | Requisito | Fracaso común |
|---|---|---|
| Meta viewport | width=device-width, initial-scale=1 | Totalmente ausente |
| Obxectivos táctiles | Mínimo 44x44px | Ligazóns moi pequenas, botóns apretados |
| Tamaño de fonte | Texto corpo mínimo de 16px | 12px ilegible en móbil |
| Ancho do contido | Sen desprazamento horizontal | Elementos de ancho fixo |
| Espazo de toque | 8px mínimo entre obxectivos | Ligazóns adxacentes tocando |
| Imaxes responsivas | srcset con tamaños apropiados | Imaxes de tamaño de escritorio en móbil |
Patróns de deseño responsivo:
/* Enfoque primeiro móbil */
.container {
padding: 16px;
font-size: 16px;
}
/* Obxectivos amigables para toques */
.button, .link {
min-height: 44px;
min-width: 44px;
padding: 12px 16px;
}
/* Tipografía responsiva */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
p { font-size: clamp(1rem, 2vw, 1.125rem); }
/* Sen desbordamento horizontal */
img, video, iframe {
max-width: 100%;
height: auto;
}Sinais de SEO móbil que Google revisa:
- Texto legible sen aumentar
- Ligazóns/botóns non demasiado próximos
- Contido que se axusta ao ancho do viewport (sen desprazamento horizontal)
- Sen Flash ou tecnoloxías non soportadas
- Intersticiais que non bloquean contido ao entrar
- A páxina carga rapidamente en conexións 4G/3G
Vitoria rápida: Abre o teu sitio no teu móbil. Intenta facer clic en cada botón e ligazón. Se accidentalmente tocas a cousa incorrecta porque os obxectivos están demasiado próximos, ou se necesitas ampliar para ler o texto — esas son as túas solucións prioritarias.
3. Accesibilidade (WCAG)
A accesibilidade non é só ética — é un sinal de SEO. Os algoritmos de Google favorecen os sitios que son usables por todos, incluíndo usuarios con lectores de pantalla, navegación só por teclado ou discapacidades visuais. A conformidade coas WCAG (Web Content Accessibility Guidelines) correlaciona coa mellora das clasificacións.
Requisitos críticos de accesibilidade:
| Elemento | Requisito | Impacto SEO |
|---|---|---|
| Texto alternativo en imaxes | Texto descriptivo para todas as imaxes significativas | Directo (SEO das imaxes + accesibilidade) |
| Xerarquía de encabezamentos | H1 → H2 → H3 sen saltos | Directo (estructura do contido) |
| Contraste de cor | 4.5:1 para texto normal, 3:1 para texto grande | Indirecto (usabilidade) |
| Navegación por teclado | Todos os elementos interactivos accesibles a través da tecla Tab | Indirecto (usabilidade) |
| Etiquetas ARIA | Etiquetas para iconas, botóns sen texto | Indirecto (UX do lector de pantalla) |
| Indicadores de foco | Anel de foco visible na navegación por teclado | Indirecto (usabilidade) |
| Etiquetas de formulario | Cada entrada ten unha | Indirecto (usabilidade) |
| Texto de ligazón | Descritivo (non "fai clic aquí") | Directo (SEO do texto de ancoraxe) |
Proceso de testing de accesibilidade:
- Escaneo automatizado — Executa Lighthouse, axe-core ou WAVE (captura ~30-50% dos problemas)
- Proba de teclado — Navega por todo o teu sitio usando só a tecla Tab, Enter, Escape
- Proba de lector de pantalla — Usa VoiceOver (Mac) ou NVDA (Windows) en páxinas clave
- Contraste de cor — Comproba todo o texto contra os fondos (usa o verificador de contraste de DevTools)
- Proba de aumento — Aumenta ao 200% — funciona todo correctamente?
Solucións de accesibilidade comúns:
<!-- Imaxes: texto alternativo descriptivo -->
<img src="chart.png" alt="Gráfica de barras que mostra un aumento do 40% no tráfico orgánico de xaneiro a marzo de 2026">
<!-- Botóns: etiquetas claras -->
<button aria-label="Pechar menú de navegación">
<svg>...</svg> <!-- Botón só con icono necesita aria-label -->
</button>
<!-- Formularios: etiquetas asociadas -->
<label for="email">Enderezo de correo electrónico</label>
<input type="email" id="email" name="email" required>
<!-- Ligazóns: texto descriptivo -->
<a href="/guide">Ler a guía completa de SEO</a>
<!-- NON: <a href="/guide">Fai clic aquí</a> -->
<!-- Saltar navegación para usuarios de teclado -->
<a href="#main-content" class="skip-link">Saltar ao contido principal</a>Vitoria rápida: Executa Lighthouse na túa páxina principal coa categoría de Accesibilidade. Soluciona todo o que scored "Fails" primeiro — estes son normalmente texto alternativo que falta, etiquetas de formulario que faltan e texto de baixo contraste. Estas solucións á miúdo levan 30 minutos e melloran a túa puntuación en máis de 20 puntos.
4. Sinais de Experiencia na Páxina
Despois dos Core Web Vitals, Google evalúa varios outros sinais de experiencia na páxina que afectan as clasificacións.
Factores de experiencia na páxina:
| Sinal | Requisito | Comprobar |
|---|---|---|
| HTTPS | Todo o sitio servido sobre HTTPS | O contido mixto rompeo |
| Sen intersticiais intrusivos | Non bloquear contido ao entrar | Popups que cubren >30% en móbil |
| Navegación segura | Sen malware, phishing, contido enganoso | Estado de Google Safe Browsing |
| Amigable para móbil | Supera a proba de amigabilidade para móbil | Proba de Google Mobile-Friendly |
| Sen anuncios enganosos | Os anuncios non imitan contido | Botóns de descarga disfrazados |
Directrices para intersticiais (o que está permitido vs. penalizado):
| Permitido | Penalizado |
|---|---|
| Verificación de idade (legalmente necesario) | Popup de pantalla completa ao entrar na páxina |
| Consentimento de cookies (legalmente necesario) | Inscripción por correo que cubre todo o contido |
| Paredes de inicio para contido de pago | "Descarrega a nosa app" bloqueando contido |
| Banners pequenos que utilizan <30% da pantalla | Temporizadores de conta atrás antes de acceder ao contido |
| Despois de que o usuario se desplaza/interactúa | Antes de que o usuario vexa calquera contido |
Lista de verificación de HTTPS:
- [ ] Certificado SSL válido e non caducado
- [ ] Todas as páxinas redirixen HTTP → HTTPS (301)
- [ ] Sen contido mixto (recursos HTTP en páxinas HTTPS)
- [ ] Cabeceira HSTS habilitada (con includeSubDomains)
- [ ] Ligazóns internas usan HTTPS (non HTTP)
- [ ] O sitemap utiliza URLs HTTPS
- [ ] As etiquetas canónicas utilizan HTTPS
Vitoria rápida: Comproba se hai contido mixto — abre a consola de DevTools nas túas páxinas clave. Calquera advertencia de "Contido mixto" significa que estás cargando recursos HTTP nunha páxina HTTPS. Actualiza esas URLs a HTTPS. Este é un dos problemas de experiencia na páxina máis comúns.
5. Patrones de Navegación
Unha boa navegación axuda tanto a usuarios como a motores de busca. Os usuarios encontran rapidamente o que necesitan. Os rastrexadores de Google entenden a túa xerarquía do sitio e distribúen o PageRank de forma eficiente.
Mellores prácticas de navegación:
| Patrón | Beneficio | Implementación |
|---|---|---|
| Arquitectura plana | Páxinas dentro de 3 clics da casa | Páxinas hub, migallas |
| Migallas | Os usuarios saben onde están | Marcado Schema + pista visible |
| Estrutura de URL lóxica | Caminhos previsibles | /category/subcategory/page |
| Navegación do pé de páxina | Páxinas secundarias accesibles | Legal, sobre nós, contacto, sitemap |
| Busca interna | Os usuarios atopan contido específico | Caixa de busca con suxestións |
| Contido relacionado | Reduce o rebote, aumenta a profundidade | Seccións de "Artigos relacionados" |
Arquitectura do sitio ideal:
Páxina principal (1 clic de todo o importante)
├── /products/ (hub de categoría — ligazóns a todos os produtos)
│ ├── /products/category-a/
│ │ ├── /products/category-a/product-1
│ │ └── /products/category-a/product-2
│ └── /products/category-b/
├── /blog/ (hub de contido — ligazóns a todas as entradas)
│ ├── /blog/topic-cluster-1/ (páxina pilar)
│ │ ├── /blog/subtopic-1a
│ │ └── /blog/subtopic-1b
│ └── /blog/topic-cluster-2/
├── /tools/ (páxinas de utilidade)
└── /about/ (páxinas de confianza)Implementación de migallas:
<!-- Migalla visible -->
<nav aria-label="Migalla">
<ol>
<li><a href="/">Inicio</a></li>
<li><a href="/blog/">Blog</a></li>
<li aria-current="page">Guía de SEO Paso 5</li>
</ol>
</nav>
<!-- Marcado Schema (BreadcrumbList) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Inicio", "item": "https://example.com/" },
{ "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://example.com/blog/" },
{ "@type": "ListItem", "position": 3, "name": "Guía de SEO Paso 5" }
]
}
</script>Banderas vermellas na navegación:
- Páxinas a máis de 4 clics da páxina principal (demasiado profundo)
- Sen migallas (os usuarios e Google perden contexto)
- Navegación só en JavaScript (os rastrexadores poden perder ligazóns)
- Páxinas orfas (sen ligazóns internas que apunten a elas)
- Menús mega con 200+ ligazóns (dilúen o valor por ligazón)
Vitoria rápida: Comproba as túas páxinas de conversión máis importantes — Cantos clics da páxina principal? Se hai máis de 3, engade ligazóns directas desde a túa páxina principal ou hubs de categoría. Cada clic máis profundo reduce tanto as visitas de usuarios como a frecuencia de rastreo.
6. Optimización por Riba do Racheado
O que os usuarios ven antes de desprazarse determina se se quedan ou saen. O contido por riba do racheado debe comunicar valor instantaneamente e alinharse coa consulta de busca que os trouxo aquí.
Esenciais por riba do racheado:
| Elemento | Por que | Fracaso común |
|---|---|---|
| Encabezado claro (H1) | Confirma relevancia coa consulta | Genérico ou ausente |
| Proposición de valor | Por que deberían ficar? | Enterrado por debaixo do racheado |
| CTA principal | Que deberían facer a continuación? | Oculto ou pouco claro |
| Imaxe/media principal | Compromiso visual | Carga lenta, causando problemas de LCP |
| Sinais de confianza | Por que deberían confiar en ti? | Sen logos, reseñas ou credenciais |
Patróns de disposición por riba do racheado:
Escritorio (viewport de 1440px):
┌──────────────────────────────────────┐
│ Barra de navegación │
├──────────────────────────────────────┤
│ │
│ H1: Encabezado claro que coincide coa consulta │
│ Subtítulo: Proposición de valor │
│ │
│ [Botón CTA Principal] │
│ │
│ Sinais de confianza: logos, estatísticas, insignias │
│ │
├──────────────────────────────────────┤
│ ↓ O contido continúa por debaixo do racheado │
└──────────────────────────────────────┘
Móbil (viewport de 375px):
┌────────────────────┐
│ Nav (hamburguesa) │
├────────────────────┤
│ │
│ H1: Encabezado │
│ (máis curto en móbil)│
│ │
│ [Botón CTA] │
│ (largo completo, 44px+)│
│ │
│ Insignia de confianza│
│ │
├────────────────────┤
│ ↓ Desplázate para máis │
└────────────────────┘Regras críticas por riba do racheado:
- O H1 debe ser visible sen desprazarse (que coincida coa consulta de busca)
- O CTA debe ser visible sen desprazarse (reduce o rebote)
- Sen desprazamento de disposición no contido por riba do racheado (asesino de CLS)
- A imaxe principal debe cargar rápido (normalmente é o elemento LCP)
- Móbil: reducir contido por riba do racheado (menos espazo de viewport)
Vitoria rápida: Toma unha captura de pantalla da túa páxina principal en móbil (ancho de 375px). É visible o H1? É visible un botón de CTA? Podes dicir que fai o sitio dentro de 2 segundos? Se calquera resposta é "non," estás perdendo visitantes antes de desprazarse.
A Lista de Verificación da Auditoría de UX
Revisa isto para as túas páxinas principais:
- [ ] LCP por debaixo de 2.5 segundos (imaxe principal optimizada, CSS crítico en liña)
- [ ] INP por debaixo de 200ms (sen longas tarefas de JavaScript que bloqueen a interacción)
- [ ] CLS por debaixo de 0.1 (todas as imaxes teñen dimensións, sen cambios de carga tardíos)
- [ ] Amigable para móbil (obxectivos táctiles de 44px, texto de 16px+, sen desprazamento horizontal)
- [ ] Accesible (texto alternativo, xerarquía de encabezados, contraste de cor, navegación por teclado)
- [ ] HTTPS en todas partes (sen contido mixto, HSTS habilitado)
- [ ] Sen intersticiais intrusivos (superposicións de consentimento ben, popups que bloquean contido non)
- [ ] Migallas presentes (con esquema BreadcrumbList)
- [ ] Profundidade de navegación por debaixo de 4 clics a calquera páxina importante
- [ ] Optimizado por riba do racheado (H1 visible, CTA visible, LCP rápido)
Como LANGR Escanea a Tú UX
As módulos de escaneo relacionadas coa UX de LANGR inclúen:
- Módulo Core Web Vitals — Mide LCP, INP, CLS a partir do Chrome User Experience Report (datos de usuarios reais)
- Módulo PageSpeed — Auditoría completa de rendemento de Lighthouse con puntuacións de móbil e de escritorio
- Módulo Móbil — Configuración do viewport, tamaño dos obxectivos táctiles, legibilidade do texto
- Módulo de Accesibilidade — Comprobacións de conformidade coa WCAG, uso de ARIA, contraste de cor
- Módulo de Escaneo de Disposición — Avaliación impulsada por IA das disposicións móbil e de escritorio
- Módulo de Experiencia na Páxina — Detección de intersticiais, estado HTTPS, navegación segura
Estes módulos executan en cada escaneo, proporcionándoche unha imaxe completa de como os visitantes experimentan o teu sitio — e exactamente que corrixir para obter mellores clasificacións.
Erros Comúns de UX (Clasificados por Impacto)
- Ignorar móbil — 60%+ das búsquedas son móbiles; móbil roto = clasificación rota
- Imaxes non optimizadas — A causa #1 de LCP lento (e á miúdo a solución máis sinxela)
- Sen dimensións explícitas para imaxes — Os cambios de disposición destrúen as puntuacións CLS
- Bloque de scripts de terceiros — Widgets de chat, análises, anuncios que bloquean o INP
- Falta de básicos de accesibilidade — Sen texto alternativo, sen xerarquía de encabezados, sen contraste
- Intersticiais que bloquean contido — Popups de pantalla completa antes de que os usuarios vexan contido
- Arquitectura do sitio profunda — Páxinas importantes enterradas a 5+ clics da páxina principal
- Sen valor por riba do racheado — Os usuarios non poden dicir que fai o sitio sen desprazarse
Que Vén Despois?
Paso 6: Monitoreo & Clasificación — Non podes mellorar o que non mides. Posições de palabras clave, seguimento de puntuacións, informes de cambios e monitoreo de tempo de actividade.
Esta guía é parte da serie de 13 pasos de SEO de LANGR. Executa unha auditoría gratuíta para ver onde está o teu sitio en todas as 13 disciplinas.