Diseño web con SEO: bonita, rápida y que te encuentra la IA - Adela Ruiz

Enhorabuena por tu web preciosa. ¿Cuándo empieza a dar frutos?

Cuando alguien me manda un mensaje que empieza por ‘tengo la web muy bonita pero no aparece en Google’, ya sé lo que me voy a encontrar. Una web que pinta muy bien por fuera y que por dentro es un caos para los buscadores. ¿Diseño web con SEO? No sin jerarquía clara, con imágenes de 4MB, botones que no dicen nada y un código que Googlebot intenta leer y desiste a mitad de camino.

Y lo peor no es que no posicione en Google. Es que en 2026, con AI Overviews, AI Mode y los agentes de Gemini ya instalados en el día a día de las búsquedas, una web así directamente no existe para la inteligencia artificial.

En el Google I/O de mayo de 2026, Google confirmó que AI Mode ya supera los 1.000 millones de usuarios mensuales. Mil millones de personas haciendo búsquedas que no devuelven diez enlaces azules, sino respuestas generadas por IA. Si tu web no está preparada para que la entiendan las máquinas, lo tienes muy difícil.

La buena noticia es que diseño bonito y SEO técnico no son enemigos. Nunca lo han sido. El problema es que durante años se han llevado proyectos por separado, y el resultado es el que es: webs preciosas que no vende nadie.

Aquí te cuento cómo se construye una web que funciona en los dos planos. Sin sacrificar el diseño. Sin trucos baratos. Con la lógica de 2026.

Tu web puede ser preciosa Y aparecer en Google: así se hace

 

Tabla resumen: las 6 capas de una web que posiciona y gusta

 

CapaPor qué importa
Jerarquía H1-H3Google y Gemini usan los encabezados como mapa semántico de tu web
Core Web VitalsVelocidad, interactividad y estabilidad visual son factores de ranking directos
Layout por intenciónCada página necesita un diseño alineado con lo que busca el usuario
Copywriting naturalLas keywords integradas en texto fluido son las que cita la IA
Schema markupAyuda a Google a identificar entidades y citarte en AI Overviews
llms.txtNuevo en Lighthouse mayo 2026: facilita que los agentes IA naveguen tu web

Jerarquía visual = jerarquía semántica: cómo los H1-H3 ordenan tu web para humanos e IA

Los encabezados no son solo tipografía. Son la estructura que le dice a Google —y a Gemini, y a ChatGPT— de qué va cada sección de tu página.

Un H1 solo por página. H2s que explican los bloques principales. H3s para el detalle. Cuando eso está bien montado, pasan dos cosas: el usuario entiende la página de un vistazo y el modelo de IA puede extraer respuestas directas sin tener que interpretar nada.

Lo que hace Gemini cuando procesa una página para AI Overviews es básicamente esto: lee la jerarquía de encabezados, identifica el bloque más relevante para la pregunta que alguien ha hecho, y lo presenta como respuesta. Si tus H2s son vagos del tipo «Más información» o «Nuestros servicios», la IA no sabe qué hacer con eso.

El espacio en blanco, los márgenes, la tipografía: todo eso también comunica estructura. Un diseño limpio con una buena jerarquía visual es, casi siempre, un diseño con buena jerarquía semántica. No son cosas distintas.

  • Un solo H1 por página, con la keyword principal.
  • H2s descriptivos: que respondan una pregunta o expliquen claramente el bloque.
  • Evita los H2s decorativos: «¿Listo para empezar?» no le dice nada a nadie.
  • Coherencia entre lo que ves y lo que lee la IA: el texto visible y el código deben coincidir.

Velocidad y código limpio: el minimalismo que Google premia (y los usuarios también)

llms.txt en page speed insights

Core Web Vitals llevan años siendo factor de ranking. Y sin embargo sigo viendo webs con sliders de imagen que cargan 12 fotos de 3MB cada una, fuentes custom que bloquean el renderizado y scripts de terceros que se cargan aunque nadie los haya pedido.

  • El LCP (Largest Contentful Paint) mide cuánto tarda en aparecer el elemento más grande de tu página. Google quiere que sea inferior a 2,5 segundos. Si tu hero tiene un vídeo de fondo en autoplay, ya puedes ir rezando.
  • El CLS (Cumulative Layout Shift) mide si los elementos de la página se mueven mientras carga. Ese movimiento que hace que el usuario pulse el botón equivocado porque la página se ha recolocado. Google lo penaliza. Los usuarios lo odian. Y con razón.

La parte buena es que el diseño minimalista y la velocidad van de la mano. Una web limpia, con imágenes optimizadas, carga rápida y sin adornos innecesarios es tanto una decisión estética como una decisión técnica.

Si quieres profundizar en este punto, en este artículo sobre WPO y velocidad web lo explico con métricas concretas y soluciones para WordPress.

  • Imágenes en WebP, comprimidas y con dimensiones definidas en el HTML.
  • Fuentes del sistema o máximo dos fuentes custom con preload.
  • Scripts de terceros diferidos: analytics, chat, pixel… que carguen después del contenido principal.
  • Hosting decente: el servidor importa. Un hosting barato con tiempos de respuesta de 800ms arruina cualquier optimización.

Layouts que responden preguntas: diseña para la intención de búsqueda

Cada página de tu web tiene que estar diseñada para una intención concreta. No para «que quede bonita», sino para responder a lo que el usuario está buscando cuando llega a esa URL.

Una página de servicios necesita un layout que transmita confianza rápido: qué haces, para quién, qué resultado consiguen y cómo contratar. Una página de blog necesita un layout que invite a leer: encabezados claros, párrafos cortos, imágenes que apoyen el texto.

Esto reduce el porcentaje de rebote —que sigue siendo una señal de calidad para Google— y además da contexto ultrapreciso a los modelos de lenguaje. Cuando la estructura de la página coincide con la intención de búsqueda, la IA tiene mucho más fácil citar esa página como fuente.

Piénsalo así: si alguien busca «cuánto cuesta una web en Madrid» y llega a tu página de precios, el layout tiene que responder esa pregunta en los primeros dos scrolls. Si llega y lo primero que ve es tu historia personal y una foto de tu oficina, has perdido al usuario y a la IA de paso.

  • Para páginas de servicios: claridad sobre qué problema resuelves, para quién y con qué resultado.
  • Para posts de blog: párrafos de 3-4 líneas, H2s descriptivos cada 300-400 palabras.
  • Para landing pages: un solo objetivo por página. Más de un CTA compitiendo = conversión cero.

Textos que posicionan sin saturar: copywriting natural para webs premium

La keyword tiene que estar en el texto. Eso no ha cambiado. Lo que ha cambiado es cómo.

Meter la keyword a martillazos en cada párrafo ya no funciona desde hace años. Lo que funciona —y lo que la IA premia— es el lenguaje natural: responder preguntas reales de forma directa, usar sinónimos, variar la construcción de las frases.

Gemini, ChatGPT y el resto de modelos están entrenados en texto humano. Reconocen el texto forzado, el relleno, las frases que existen solo para meter una keyword. Y cuando lo detectan, no lo citan. Citan el texto que parece escrito por alguien que sabe de lo que habla.

Los botones, los subtítulos, los menús: todo ese microcopy también cuenta. Un botón que dice «Solicitar presupuesto de diseño web en Madrid» posiciona mejor que uno que dice «Haz clic aquí». Y además convierte mejor, que al final de eso se trata.

  • Keyword principal en el primer párrafo y en algún H2, de forma natural.
  • Keywords semánticas distribuidas en el texto sin forzarlas: diseño web seo, web con seo incluido, diseño y posicionamiento web.
  • Responde preguntas concretas: los fragmentos que cita la IA son casi siempre respuestas directas a preguntas.
  • SEO ético: cada párrafo tiene que ganarse su sitio. Si lo puedes quitar sin que el texto pierda sentido, quítalo.

Schema, entidades y llms.txt: las tres capas invisibles que hacen tu web citable por la IA

Esta es la parte que más diferencia a una web preparada para 2026 de una que simplemente está optimizada para 2020.

Schema markup: los datos estructurados le dicen a Google exactamente qué tipo de contenido tiene cada página. Un LocalBusiness con tu dirección, teléfono y horario. Un ProfessionalService con tus servicios. Un FAQPage con tus preguntas frecuentes. Todo eso va en JSON-LD en el <head> de tu web y es invisible para el usuario pero fundamental para la IA.

El schema FAQ es especialmente potente porque alimenta directamente los bloques de preguntas en los resultados y hace que la IA tenga respuestas estructuradas que puede citar sin ambigüedad. En este artículo sobre AIO y diseño web lo explico con más detalle.

Entidades y Knowledge Graph: Google no indexa solo palabras clave, indexa entidades. Tu nombre, tu negocio, tu ubicación, tus servicios. Cuando tu web menciona estas entidades de forma consistente —en el texto, en el schema, en tu Google Business Profile— Google puede construir una representación más sólida de quién eres. Eso se traduce en más presencia en AI Overviews.

llms.txt: esto es la novedad de mayo de 2026. En el Google I/O, Google añadió llms.txt como auditoría experimental en Lighthouse dentro de la categoría «Agentic Browsing». No es un factor de ranking para AI Overviews —Google lo tiene muy claro—, pero sí es una señal de preparación para los agentes IA que navegan tu web de forma autónoma.

Un agente de Gemini que tiene que completar una tarea (reservar, comparar precios, encontrar información específica) tarda menos y navega mejor si tu web tiene un llms.txt bien escrito. Sin él, tiene que inferir la estructura por su cuenta. Con él, va directo al grano.

Dato clave: Solo el 44% de los sitios auditados en mayo 2026 tenían un llms.txt real. Si lo implementas ahora, tienes ventaja de primero en mover en un campo que va a crecer.

Diseño web seo - Adela Ruiz

¿Tu web es preciosa pero nadie la encuentra? Hablamos

Si has llegado hasta aquí, ya sabes que el problema no es el diseño. El problema es que diseño web con SEO no es la suma de dos servicios distintos: es un solo proceso que tiene que pensarse desde el principio.

Cuando diseño una web para un cliente, la arquitectura de información, la velocidad, el schema y el copy van en el mismo briefing. No en reuniones separadas con equipos distintos que luego se enteran el uno del otro cuando ya está todo montado.

Si quieres saber exactamente cómo lo trabajo, te lo cuento todo en mi servicio de Diseño Web con SEO. Con resultados, con lo que de verdad hace que una web posicione ahora.

Ya no tienes que elegir entre diseño web y seo, puedes tener ambas.

Si llevas tiempo invirtiendo en diseño y los resultados no llegan, el problema casi nunca es el diseño. Es que nadie le dijo al diseño que también tenía que hablar con Google. Eso es exactamente lo que hago yo: diseño web que posiciona, que la IA cita y que convierte.

Mira cómo trabajo Diseño Web en Madrid — con resultados demostrables desde el primer mes.

Difunde si te ha gustado:

¿Te digo por dónde empezar?

Cuéntame qué vendes y en qué punto estás.

Te respondo con un diagnóstico rápido y el siguiente paso lógico (sin humo).

  • Respuesta en 24–48h laborables

  • Te digo si merece la pena (y por qué)

  • Sin promesas raras: estrategia + prioridades

Respondo yo, Adela. Nada de spam. Tus datos se usan solo para contestarte.

Adela Ruiz | Consultora SEO

Adela Ruiz | Consultora SEO

Llevo más de 19 años ayudando a pymes, autónomos y emprendedores a ganar visibilidad real en Google. Mi enfoque es práctico: si tu negocio no aparece cuando te buscan, estás perdiendo oportunidades.

Trabajo con estrategias SEO que generan señales medibles desde el primer mes (depende del punto de partida y el sector): mejor estructura, mejor intención, y keywords comerciales que empiezan a moverse sin prometer milagros.

Mi método parte de una idea clara: en 3 segundos debes explicar quién eres y qué ofreces. Todo comunica. Desde tu web hasta tu Google Business Profile, cada detalle define cómo te interpreta Google… y cómo te perciben tus clientes.

🧩 SEO Senior (9+ años en SEO | 19+ en Marketing Digital) + enfoque en SEO Local, contenido y visibilidad en AI Overviews / Modo IA.

🎯 Colaboro con la Agencia Reflipa, y actualmente ofrezco como freelance:

  • SEO para IA (AI Overviews / Modo IA): contenido y estructura para que Google te entienda y te cite.

  • AEO / SEO Local avanzado: GBP + landings locales + señales de entidad para búsquedas geolocalizadas.
  • Diseño Web con SEO: web escalable pensada para crecer sin rehacerla cada seis meses.
Perfil profesional completo aquí
Scroll al inicio