Cómo se construye una página web por dentro

Una peluquería de Valencia paga 400 euros por una web preciosa, la enseña orgullosa por WhatsApp y, seis meses después, no ha entrado ni una sola reserva por ahí. El problema no es el diseño: el diseño es lo único que se ve. Lo que decide si un sitio trae clientes o cría polvo vive por debajo de la superficie, en una capa técnica que ningún pantallazo enseña: la velocidad real en el móvil, lo que Google entiende de tus páginas, si alguien con un teléfono de hace tres años puede usarla sin desesperarse.

Esto es un recorrido en lenguaje claro por lo que un buen equipo construye debajo del diseño. No hace falta saber programar para seguirlo. Lo que sí conviene es saber qué pedir, porque la diferencia entre una web que rinde y una que solo está ahí es casi toda técnica, y es justo la parte que no se nota hasta que falta.

La velocidad no es un lujo, es el precio de la entrada

Abre tu web en el móvil con los datos, no con el wifi de la oficina, y cuenta los segundos hasta que puedes leer el titular y tocar algo sin que el contenido te baile delante. Esa espera es el mayor predictor de si quien te visita por primera vez se queda o se larga, y Google la mide por su cuenta, le pidas permiso o no.

La vara de medir son tres cifras que Google llama Core Web Vitals. El LCP (Largest Contentful Paint) registra cuánto tarda en aparecer el contenido principal: bien es por debajo de 2,5 segundos. El INP (Interaction to Next Paint) mide la rapidez con que la página reacciona al tocar o pulsar: bien es por debajo de 200 milisegundos. El CLS (Cumulative Layout Shift) mide cuánto salta la página mientras carga: bien es por debajo de 0,1. Google no se fija en una visita ideal, sino en la experiencia real de tus visitantes y por el lado lento del reparto (el percentil 75). Una página que vuela con la fibra del despacho pero se arrastra en un móvil con dos rayas sigue contando como lenta.

No son cifras de vanidad: alimentan el posicionamiento en buscadores, y ese empuje se reforzó con las actualizaciones de núcleo de Google en 2026. El listón también es más alto de lo que se supone. A mediados de 2026, solo algo más de la mitad de los sitios registrados en los datos de uso de Chrome aprueban las tres métricas a la vez, y la capacidad de respuesta (el INP) es la que más se suspende, en torno al 43 % de las webs. Una página web rápida sale de una ingeniería poco vistosa: imágenes comprimidas y bien dimensionadas, scripts recortados para que el navegador no se atragante, tipografías que no bloqueen el texto, un servidor ágil que entregue pronto el primer byte. La optimización Core Web Vitals no se ve por ningún lado, pero se siente en cada visita.

Móvil primero: el estándar, no una variante

Diseñar para el ordenador y luego apretujarlo en el móvil es hacerlo al revés, y Google lo dejó por escrito. Desde 2024 rastrea y posiciona la versión móvil como la principal; el 5 de julio de ese año terminó de pasar a los últimos sitios al rastreo móvil. Desde entonces, lo que no es accesible desde el teléfono sencillamente no se indexa: para el buscador, es como si no existiera.

La razón es matemática pura. Según cómo se cuente, entre la mitad y los dos tercios del tráfico web mundial en 2026 ya llega desde teléfonos; en Europa la balanza ronda el 50/50, y en muchos negocios de barrio la cuota móvil es todavía mayor. Pensemos en quien busca de pie en una esquina dónde comer o a qué fontanero llamar. Un desarrollo con diseño mobile-first arranca desde la pantalla pequeña: botones grandes para un pulgar, texto legible sin hacer pinza con los dedos, formularios que no exigen un teclado del tamaño de una mesa. Luego se expande con holgura hasta llenar un portátil. El mismo contenido y la misma velocidad, recolocados para el dispositivo que aparezca. Tratar el móvil como el producto de verdad, no como una copia encogida, es de lo que va esto.

La estructura limpia es el esqueleto que Google lee

Una página web se levanta con HTML, y el HTML tiene dos formas de decir lo mismo. Puedes meterlo todo en cajas genéricas, o usar elementos que describan qué es cada pieza: esto es el titular, esto es la navegación, esto es un artículo, esto es un botón. A lo segundo se le llama HTML semántico, y hacerlo bien no cuesta ni un céntimo más.

Importa porque tu página tiene dos públicos que nunca ven el diseño. Los buscadores leen la estructura en bruto para entender de qué va y cómo está organizada: un <h1> claro, subtítulos lógicos debajo, enlaces de verdad en lugar de imágenes que se pulsan. Los lectores de pantalla hacen lo mismo para quienes no pueden ver. Con el esqueleto bien, ambos te entienden al instante. Con un muro de cajas <div> anidadas y el titular fingido a base de negrita grande, le has entregado a una máquina un párrafo sin puntuación y le has pedido que adivine.

La estructura también incluye las direcciones. Una URL como /servicios/fontanero-sevilla le dice a la persona y al buscador qué van a encontrar; una /?page_id=4837 no dice nada. Una jerarquía con sentido, enlaces descriptivos entre páginas relacionadas y un sitemap que liste lo que merece indexarse separan un sitio que Google cartografía en una tarde de otro que nunca explora del todo.

El SEO se hornea dentro, no se atornilla después

Hay un mito muy resistente que dice que el SEO se contrata cuando la web ya está hecha. Las partes más caras de arreglar a posteriori son justo las que deberían haber estado en el desarrollo desde el primer día, y meterlas con calzador suele implicar rehacer páginas que ya pagaste una vez.

Unas cuantas cosas pertenecen a los cimientos:

• Títulos y descripciones únicos en cada página, para que en los resultados aparezca algo concreto y no la misma línea genérica repetida por todo el sitio.
• URLs limpias y legibles con estructura lógica, decidida antes de meter el contenido y no parcheada después.
• Datos estructurados: una capa pequeña e invisible de etiquetas que deja claros hechos que el buscador, si no, tendría que deducir: que eres una clínica dental de una ciudad concreta, tu horario, tus reseñas. Es lo que alimenta los resultados enriquecidos y las estrellas que ves en Google.
• Manejo correcto de páginas duplicadas y multiidioma, para que los buscadores sepan cuál es la versión canónica. Si atiendes en español y en otra lengua, equivocarte aquí reparte tus señales entre copias rivales de la misma página.

No son extras: son decisiones tejidas en la forma de generar las páginas. Atornillarlas tras el lanzamiento es posible, pero lento, a medias, y acabas pagando dos veces.

Accesibilidad: dejó de ser opcional y es buen negocio

Construir para que las personas con discapacidad usen tu sitio solía venderse como un detalle bonito. En la Unión Europea ya es ley. La Ley Europea de Accesibilidad entró en vigor en junio de 2025 y señala como referencia un estándar técnico llamado WCAG 2.2 en su nivel AA. Esa norma de accesibilidad web WCAG 2.2 es la definitiva desde octubre de 2023, y el nivel AA es el que se cita en todo el mundo. Muchas pymes y autónomos quedan dentro de su alcance, y el listón ya no es una aspiración.

El trabajo práctico se solapa mucho con la calidad estructural que ya hemos visto. Contraste de color suficiente para leer a pleno sol. Cada imagen con su descripción de texto para los lectores de pantalla. Formularios con etiquetas como es debido. Un sitio que se maneje solo con el teclado, sin ratón. Nada de esto afea la web; casi todo la hace más clara para cualquiera, incluida la gran parte de visitantes que tienen un móvil viejo, la pantalla rajada o van apretujados en un Cercanías. Accesibilidad y usabilidad son, en buena medida, el mismo proyecto con dos etiquetas distintas.

Seguridad y HTTPS: el candado que ya no es opcional

Has visto el icono del candado junto a una dirección web. Significa que la conexión va cifrada con HTTPS, así que los datos que viajan entre quien visita y el sitio no se pueden leer ni manipular por el camino. Durante años fue muy recomendable; ahora es prácticamente obligatorio.

Chrome está desplegando a lo largo de 2026 un cambio que carga los sitios por conexión segura de forma predeterminada y avisa antes de abrir una página HTTP insegura. Llega con Chrome 147 en abril y se vuelve la opción por defecto para todos con Chrome 154 en octubre. Un sitio sin candado recibirá cada vez más a sus nuevos visitantes con un aviso de “No es seguro”: una primera impresión demoledora para un negocio que pide a desconocidos rellenar un formulario. El certificado de cifrado es gratuito y estándar; cualquier desarrollo serio lo incluye. La seguridad va más allá del candado: mantener el software actualizado, blindar los formularios contra el spam y hacer copias de seguridad periódicas para que un mal día no se vuelva permanente. Esa es la capa de mantenimiento que distingue un sitio que alguien cuida de uno que alguien abandonó.

Analítica con consentimiento: saber qué funciona, dentro de la ley

Un sitio que no puedes medir es un sitio sobre el que vas a ciegas. Una analítica básica te dice qué páginas lee la gente de verdad, de dónde llega y dónde se rinde. Ese circuito convierte un folleto estático en algo que puedes mejorar mes a mes. Sin él, cada cambio es echarlo a cara o cruz.

El matiz es la privacidad. Bajo el RGPD, por lo general no puedes soltar cookies de seguimiento a un visitante de la UE antes de que dé su consentimiento. Por eso existen los avisos de cookies de verdad: no los del patrón oscuro que esconden el “rechazar”, sino una elección genuina que solo activa el rastreo tras un sí. Bien hecho, analítica y privacidad conviven: aprendes qué funciona, la persona mantiene el control de sus datos y tú te quedas del lado correcto de la Agencia de Protección de Datos. Mal hecho, o vas a ciegas o incumples la ley sin enterarte. Hay una forma ligera y respetuosa de hacerlo, y su sitio está en el plan original.

A medida, creadores o plantillas: dónde está el compromiso

Esta es la decisión que de verdad importa a la mayoría, así que vamos a lo concreto. Hay tres caminos, y la respuesta honesta es que los tres pueden funcionar o fracasar según el negocio.

Los creadores de arrastrar y soltar (las plataformas todo en uno) te ponen en línea rápido y barato, y se encargan del alojamiento, los certificados y las actualizaciones. El compromiso es un techo: estás dentro del sistema de otro, así que cuando con el tiempo necesites una maquetación concreta, una página más rápida, una integración precisa o un control fino del SEO, te chocas con paredes que no puedes mover. Para una presencia sencilla, ese techo puede quedarte tan alto que nunca te moleste.

Las plantillas (un diseño ya hecho que personalizas) están en medio. Partes de una base real y te ahorras diseñar desde cero, pero heredas la calidad con la que se construyó, incluidas las partes que no se ven. Una plantilla barata puede traer código inflado que suspende los Core Web Vitals desde el primer día, y no te enterarás hasta que te lo digan tus posiciones en Google.

Un desarrollo a medida cuesta más por adelantado y tarda más. Lo que compras es el control sobre cada capa de este artículo: rendimiento afinado para aprobar las métricas, estructura y SEO desde la primera línea, accesibilidad y seguridad tratadas a conciencia, y un sitio que se dobla a tu negocio en vez de al revés. Se amortiza cuando la web pasa a ser una fuente real de clientes y no una tarjeta de visita digital.

La elección correcta no es la más barata ni la más vistosa. Es la que encaja con lo que la web tiene que ganarse de verdad.

La trampa es juzgar cualquiera de estas opciones solo por su aspecto. Dos sitios pueden ser idénticos por fuera y mundos aparte por dentro: uno aprobando cada referencia técnica, el otro suspendiéndolas en silencio mientras su dueño se pregunta por qué no suena el teléfono.

Entender cómo se construye una página web para preguntar mejor

Una web es un iceberg. El diseño por encima de la línea de flotación es lo que todos notan y donde se centra casi toda la conversación de venta. La estructura, la velocidad, los cimientos de SEO, la accesibilidad, la seguridad y la medición que quedan bajo el agua deciden si la cosa flota: si posicionas, si la gente se queda, si se convierte en clientela. Esa ingeniería sumergida es lo que no sale en el pantallazo de un portafolio, y por eso es lo primero que se recorta cuando el precio es la única conversación.

No tienes que aprender a construir nada de esto. La gracia de entender en qué consiste el desarrollo web explicado así, sin tecnicismos, es poder hacer preguntas más afiladas. Cuando alguien te pase un presupuesto, pregunta qué puntuación sacará en Core Web Vitals, si el SEO y los datos estructurados van incluidos o aparte, si se entrega accesible y cómo se comporta en un móvil de tres años con poca señal. Las respuestas te dicen en treinta segundos si compras una web que funciona o la foto de una.