Aprende a optimizar el trabajo visual para el posicionamiento: imágenes, tipografía, layout y experiencia de usuario que Google considera señales de calidad.
Cuándo usarlo: Diseñar interfaces que cumplan con los criterios de Page Experience de Google
Herramienta recomendada: Claude
Actúa como un especialista en UX y SEO visual que ayuda a diseñadores a entender cómo sus decisiones de diseño afectan directamente al posicionamiento en buscadores y a la experiencia del usuario que Google mide y premia. Soy diseñador UI/UX y quiero entender qué aspectos de mi trabajo tienen impacto en el SEO para poder colaborar mejor con los equipos de marketing y desarrollo cuando se habla de posicionamiento orgánico. El tipo de proyectos en los que trabajo es: [e-commerce, producto SaaS, portal de contenidos, landing pages corporativas] Las herramientas que uso son: [Figma, Adobe XD, Webflow, etc.] Mi mayor duda actual sobre SEO visual es: [velocidad de carga de imágenes, diseño responsive, accesibilidad, CLS] Necesito que me expliques en detalle: **1. Optimización de imágenes sin perder calidad visual** Explícame los formatos modernos (WebP, AVIF) y cuándo usarlos. Detalla las dimensiones y resoluciones recomendadas para los distintos breakpoints, el uso de srcset y sizes en HTML, la importancia del lazy loading y qué imágenes deben estar above the fold con carga prioritaria. Dime cómo escribir alt text que sea descriptivo para accesibilidad y también relevante para el SEO sin caer en keyword stuffing. **2. Cumulative Layout Shift (CLS) y diseño estable** Explícame qué causa el CLS desde la perspectiva del diseño: elementos sin dimensiones definidas, fuentes web que cambian el layout al cargar (FOUT/FOIT), banners dinámicos, anuncios sin espacio reservado, embeds de redes sociales. Dime qué debo especificar en mis entregables de diseño (aspect-ratios, dimensiones fijas para contenedores de imagen, font-display) para que el equipo de desarrollo implemente páginas sin CLS. **3. Tipografía web y rendimiento** Detalla cómo la elección de fuentes afecta al rendimiento: número de variantes a cargar, self-hosting vs Google Fonts, font subsetting, preload de fuentes críticas. Explícame cómo diseñar una jerarquía tipográfica que también sirva como señal de estructura semántica para Google (H1 único, H2 para secciones principales, H3 para subsecciones). **4. Diseño responsive y Mobile-First Indexing** Explícame qué significa que Google indexe el sitio desde la versión móvil y qué implica para el diseño: que el contenido visible en mobile debe ser equivalente al de desktop, que los menús hamburguesa ocultan texto pero Google lo lee, que los botones deben cumplir el tamaño mínimo de toque de 48x48px. Dame una checklist de diseño responsive enfocada en SEO. **5. Señales de experiencia de usuario (Page Experience)** Explica cómo el diseño influye en métricas de comportamiento que Google considera señales de calidad: bounce rate, scroll depth, tiempo en página, número de páginas por sesión. Dime qué patrones de diseño aumentan el engagement (tabla de contenido clickable, imágenes ilustrativas cada 300 palabras, CTAs contextuales) y cuáles lo perjudican (interstitials agresivos, popups inmediatos, contenido por encima del fold demasiado escaso). **6. Accesibilidad como SEO** Detalla la intersección entre accesibilidad web (WCAG 2.1) y SEO: contraste de color mínimo, texto alternativo en imágenes, orden lógico del DOM, uso correcto de ARIA labels, navegación por teclado. Explícame por qué mejorar la accesibilidad también mejora el posicionamiento y cómo incorporo estas consideraciones en el proceso de diseño sin duplicar el trabajo. Incluye ejemplos visuales descritos en texto y dame un checklist final de los diez puntos de SEO visual que debo revisar antes de entregar cualquier diseño al equipo de desarrollo.