La plataforma que nos construimos con nuestros propios planos.

En breve: seo7.es es nuestra propia plataforma de ciclo completo. Una web trilingüe, un blog con artículos que genera una fábrica de IA, un portafolio de casos, una calculadora de servicios con cesta, un briefing con IA y un panel de administración funcionan sobre un mismo backend. Nos hicimos exactamente lo que hacemos para los clientes, así que el escaparate del estudio es al mismo tiempo su herramienta de trabajo.

Cliente: proyecto propio de SEO7 · Web: https://seo7.es · Categoría: plataforma del estudio

¿Qué es lo esencial del proyecto?

• Tres idiomas de serie: ruso, español e inglés, con control lingüístico contra la mezcla de locales.
• Blog con fábrica de artículos por IA pensada para la búsqueda clásica, los bloques de respuesta y las redes neuronales.
• Calculadora de servicios con cesta: el cliente arma su presupuesto y ve el precio antes de hablar con nadie.
• Prerenderizado de páginas para los rastreadores de búsqueda y de IA, que apenas ejecutan JavaScript.
• Seis páginas de áreas de servicio y un portafolio de casos con páginas internas.
• Panel de administración propio para contenido, blog y solicitudes.

¿Con qué está hecho el proyecto?

Frontend:

React 18 + Vite + TypeScript + Tailwind CSS v3

Backend:

Node.js (Express) + Prisma ORM + MySQL

IA:

generación y traducción de artículos en cascada, control de calidad lingüística contra la mezcla de idiomas

Infraestructura SEO:

prerenderizado de la SPA (SSG) para buscadores y crawlers de IA, sitemap, robots, llms.txt, JSON-LD Schema.org

Diseño:

proporción áurea, animaciones framer-motion, fuentes self-hosted (Manrope), sin render-blocking

Despliegue:

frontend estático, backend en VPS, CI con autodespliegue

¿Cómo empezó todo?

Al estudio no le hacía falta una web, sino una prueba. Enseñar capturas de proyectos ajenos puede cualquiera; dar el enlace de tu propia plataforma y decir «así va a funcionar lo tuyo» ya no.

Por eso nuestra propia plataforma se construyó con las mismas reglas que las de los clientes: rendimiento, accesibilidad, marcado, tres idiomas y prerenderizado para los rastreadores. Todo lo que solemos defender en proyectos ajenos aquí había que sostenerlo con lo nuestro.

El segundo sentido de la plataforma es práctico. La calculadora hace el presupuesto sin nosotros, el briefing con IA recoge la tarea con las palabras del cliente, el blog se llena con la fábrica de artículos y las solicitudes caen en el panel. El escaparate funciona como herramienta y no como carpeta de capturas.

¿Qué se ha implementado?

🌐 ¿De qué páginas consta la web?

• Portada con hero animado: proporción áurea, rotador de palabra con brillo, cinta de casos reales
• Preloader de marca «SEO7.ES» con brillo en movimiento antes de cargar la aplicación
• Componentes hero separados para móvil y escritorio (no un «escritorio comprimido»)
• Menú superior (CardNav) con idiomas, búsqueda y login, logo que se contrae al hacer scroll
• Página «Sobre el estudio», «Contacto», pie con logo en blanco
• Indicador de scroll y transiciones suaves entre secciones
• Adaptable a 375 / 768 / 1024 / 1440, sin scroll horizontal

🧭 ¿Cómo son las 6 páginas de servicios?

• Creación de webs, SEO, IA-SEO, publicidad/tráfico, IA-bots, automatización
• En cada una: H2/lead por idioma, paquetes, rejilla de micro-servicios, CTA dirigido
• Funciones marcadas por niveles (Start / Pro / Max) con leyenda y escala de color
• Despliegue del paquete en 3–4 columnas con animación ~1 s, tooltips en las etapas
• Ventajas locales en topFeatures, KPI medibles en las garantías

🧮 ¿Cómo funcionan la calculadora de servicios y la cesta?

• Selección interactiva de micro-servicios de 6 áreas, precio en tiempo real
• Cesta global «Tu conjunto» (PricingCartContext), panel lateral (Drawer)
• Regalos del estudio: los más económicos de lo elegido + un pool base de bonos
• Casillas en las líneas de etapa, deep-link a la ficha de servicio desplegada
• Página /precios con 6 áreas y tabla de ofertas especiales

📝 ¿Cómo funciona el blog con inteligencia artificial?

• Generación automática de artículos en formato «etalon»: SEO + AEO + GEO en una estructura
• Idioma base ES → traducción a RU/EN con control de calidad lingüística (detección de cirílico en es/en)
• Bloques atómicos de 40–60 palabras, Quick Answer, definition boxes, citas de expertos
• Bloque FAQ con Schema FAQPage, artículos relacionados, enlazado interno
• Artículo = una entrada con tres idiomas (etalonData), draft/published
• Automatización de publicación, generación de portadas, jobs programados

💼 ¿Cómo se presentan el portafolio y los casos?

• Escaparate de proyectos: tarjetas con capturas reales (portátil + móvil, DeviceDuo)
• Página de caso: split-hero, fichas 2×2, bloque de dispositivos, lista de funciones, FAQ
• Cinta de proyectos en la portada (escritorio — tooltips al pasar, móvil — swipe)
• Listado /portfolio con JSON-LD ItemList / CollectionPage
• El sitemap de casos se genera desde el registro en el build

🌍 ¿Cómo se resolvió el multilingüismo (RU / ES / EN)?

• Tres idiomas completos, autodetección de idioma por ruta
• hreflang entre idiomas, URLs canónicas, limpieza de parámetros de tracking
• Contenido propio en cada página, sin «tufo» a traducción automática
• Protección contra la filtración de un idioma en los campos de otro (en generación y validación)

🔍 ¿Qué se hizo para el SEO?

• Componente <SEO>/PageSeo: title, description, OG/Twitter, canonical, robots
• sitemap.xml y robots.txt, generación del sitemap desde los datos en el build
• Grafo único Schema.org (@graph): Organization, WebSite, BreadcrumbList
• Prerenderizado de páginas a HTML estático para la indexación en buscadores

🤖 ¿Qué se hizo para GEO y la búsqueda con IA?

• llms.txt para controlar el acceso de los LLM al contenido
• Estructura de contenido pensada para ser citada en ChatGPT, Perplexity, AI Overviews
• JSON-LD renderizado en el DOM (fuera de Helmet) — visible para crawlers sin JS
• Schema.org Article + FAQPage en los artículos del blog

♿ ¿Cómo se garantiza la accesibilidad (WCAG 2.2 AA)?

• Un solo h1 por pantalla (títulos visuales en div, el h1 SEO en sr-only)
• Estados de foco visibles, etiquetas aria en botones de icono, alt en las imágenes
• Contraste según AA, cierre de tooltips con Escape, aria-hidden en lo decorativo
• Respeto a prefers-reduced-motion en todas las animaciones (rotador, cinta, brillos)

⚡ ¿Cómo se aceleró la web?

• Fuentes self-hosted (Manrope) sin Google Fonts render-blocking
• Carga lazy de imágenes, width/height contra saltos de layout (CLS)
• Code-splitting por rutas, animaciones solo con transform/opacity
• Prerender de páginas clave → primer pintado rápido

🎨 ¿Cómo son el sistema de diseño y las animaciones?

• Tokens de diseño (--c-*), layout único de 1400px, tipografía Manrope
• Proporciones por número áureo (φ≈1.618): ritmo, timings de brillos, columnas split
• Animaciones orquestadas: palabra → brillo de la palabra → brillos de botones → cambio
• Página online /style-guide como fuente de verdad del estilo

🗂 ¿Sobre qué funcionan el backend y la API?

• Express + Prisma ORM + MySQL, clave de servicio para las automatizaciones
• Endpoints de blog, generación de artículos, briefing y solicitudes
• Truncado de campos a los límites de la BD, regeneración idempotente por slug
• Registro de errores de frontend con throttling en el panel

🛠 ¿Qué hace el panel de administración?

• Panel independiente de gestión de contenido, blog y solicitudes
• Pestañas de idioma al editar, estados draft/published
• Logs de errores de frontend, ajustes y operaciones de servicio

📦 ¿Cómo funcionan DevOps y el despliegue?

• Frontend estático + backend en VPS, CI con autodespliegue por push
• Healthcheck tras el despliegue, copias de seguridad de la base
• Entornos separados (dev / prod), variables de entorno sin secretos en el código

¿Cuál es el resultado?