Skip to main content

Dark Kinetic — Portfolio by Héctor Trejo Luna

[ID_REF]blog-corporativo-oasis-hotels-plugin-cdn-seo-nextjs
[STK_VAL]Wordpress / Digital Ocean / AWS S3 / Nextjs
[STATUS]STABLE

Blog Corporativo Oasis Hotels & Resorts: Plugin CDN, SEO y Migración a Next.js

RoleFrontend Developer
Year2025
Captura de pantalla del proyecto OHR Blog

El desafío: un blog con lastre técnico y sin visibilidad orgánica

El blog corporativo de Oasis Hotels (oasishoteles.com/blog) se había convertido en un activo descuidado. Construido sobre WordPress con un volumen creciente de posts y assets, enfrentaba problemas que diluían su potencial como canal de tráfico orgánico:

  • Carga lenta: las imágenes y archivos estáticos se servían desde el mismo hosting de WordPress, sin CDN ni compresión eficiente. El tiempo de carga superaba los 4 segundos, penalizando el posicionamiento y la experiencia de usuario.
  • Archivo de posts descontrolado: cientos de artículos acumulaban formatos inconsistentes, meta descriptions duplicadas, categorías redundantes y etiquetas canibalizadas. Sin una limpieza profunda, el blog competía consigo mismo en los resultados de búsqueda.
  • Dependencia de plugins genéricos: las soluciones estándar para CDN no se adaptaban al stack híbrido que Oasis necesitaba, especialmente para conectar con buckets de DigitalOcean Spaces y, más tarde, con AWS S3.
  • Traducciones complejas: el sitio multilingüe usaba WPML, pero las claves de traducción se gestionaban manualmente, con textos desactualizados y páginas no indexadas correctamente.
  • Frontend rígido: el tema monolítico de WordPress limitaba cualquier evolución hacia una arquitectura más rápida y segura, como un frontend desacoplado con Next.js que el equipo ya planeaba adoptar.

La gerencia de marketing pidió mejorar la velocidad, el SEO y la capacidad de escalar el contenido, sin perder el historial de publicaciones ni la funcionalidad multilingüe.

La solución: un plugin a medida, limpieza SEO y evolución headless

Abordamos la transformación en cuatro ejes, siempre en contacto directo con los especialistas SEO del hotel para alinear la técnica con la estrategia de contenido.

1. Plugin personalizado para CDN: de DigitalOcean Spaces a AWS S3 con CloudFormation

El primer paso fue descargar el tráfico de assets del servidor WordPress y acelerar la entrega global.

  • Desarrollo del plugin original: creé un plugin para WordPress que conecta la biblioteca de medios con DigitalOcean Spaces (compatible con el protocolo S3). Permite subir automáticamente las imágenes a buckets y servirlas desde el CDN de DigitalOcean, reescribiendo las URLs en el frontend sin modificar los posts existentes.
  • Adaptación a AWS S3 y CloudFormation: cuando Oasis migró su infraestructura general a AWS, adapté el plugin para funcionar con Amazon S3 y CloudFront. Aproveché AWS CloudFormation para definir la infraestructura como código: buckets, políticas de acceso, distribuciones CDN y roles IAM. Esto permitió desplegar la configuración en minutos, replicarla entre entornos (staging/producción) y auditar los cambios antes de aplicarlos.
  • Resultado inmediato: el tiempo de respuesta de los assets se redujo en un 70 % y el servidor de WordPress dejó de saturarse con peticiones de imágenes.

2. Limpieza general y mantenimiento SEO del archivo de posts

Junto con el equipo SEO, lideré la depuración del contenido histórico, que era crucial para recuperar tráfico orgánico.

  • Auditoría masiva: revisé más de 300 posts en comunicación constante con los especialistas SEO. Consolidé categorías, corregí etiquetas canónicas, eliminé contenido duplicado y reescribí meta titles y descriptions según las keywords priorizadas.
  • Optimización técnica: implementé redirecciones 301 para URLs rotas o cambiadas, configuré correctamente el sitemap XML y limpié las señales de indexación (noindex, nofollow) donde correspondía.
  • Mantenimiento continuo: establecí un flujo mensual para validar que los nuevos posts cumplieran con las pautas SEO, revisar enlaces internos y actualizar contenidos desactualizados. Esto mantuvo el blog como una fuente creciente de tráfico cualificado para las 8 marcas del grupo.

3. Participación en el desarrollo del nuevo frontend headless con Next.js

Cuando el grupo decidió evolucionar toda su presencia digital hacia una arquitectura desacoplada, me integré al equipo que construiría el nuevo frontend del blog en Next.js.

  • Consumo de la API de WordPress: configuramos WordPress como CMS headless, exponiendo los posts, categorías y medios a través de la REST API y GraphQL (con WPGraphQL).
  • Renderizado híbrido: utilicé Next.js para implementar Server-Side Rendering (SSR) en las páginas de artículo y listado, combinado con Incremental Static Regeneration (ISR) para las páginas de categorías. Esto garantizaba contenido fresco y tiempos de carga inferiores a 1 segundo.
  • Reutilización del plugin CDN: adapté la lógica del plugin original para que el frontend Next.js consumiera directamente los assets desde S3/CloudFront, sin depender de WordPress para servir imágenes.
  • SEO técnico avanzado: generé metadatos dinámicos (Open Graph, Twitter Cards), structured data (Article schema) y canonicales automáticas desde Next.js, mejorando la visibilidad en redes sociales y buscadores.

4. Gestión de claves de traducción con WPML

El blog debía mantener su naturaleza multilingüe sin fricción.

  • Normalización de traducciones: organicé y documenté todas las cadenas de texto del blog (temas, plugins, etiquetas personalizadas) dentro de WPML, eliminando duplicados y textos huérfanos.
  • Sincronización con el frontend Next.js: trabajé con el equipo para que las traducciones almacenadas en WordPress se expusieran vía API, permitiendo al frontend headless renderizar cada idioma correctamente.
  • Control de calidad: implementé pruebas automáticas que verificaban que cada URL canónica tuviera sus versiones traducidas (hreflang) correctas y que no hubiera contenido mixto entre idiomas.

Resultados: un blog rápido, limpio y estratégico

Las métricas post-intervención hablan por sí solas:

  • Velocidad de carga: el LCP (Largest Contentful Paint) pasó de 4.8s a 1.2s, una mejora del 75 %.
  • Tráfico orgánico: en seis meses, las visitas desde buscadores crecieron un 45 %, impulsadas por la limpieza del archivo y los metadatos optimizados.
  • Eficiencia editorial: el equipo de contenido publica ahora directamente en WordPress, y los cambios se reflejan en el frontend Next.js en minutos, sin necesidad de desarrolladores.
  • Infraestructura confiable: la definición de CDN como código con CloudFormation eliminó los errores manuales y permitió replicar la configuración en nuevas propiedades del grupo en un solo comando.
  • Traducciones impecables: las versiones en inglés y español del blog indexan correctamente, sin contenido duplicado ni problemas de hreflang.

Tecnologías utilizadas

  • CMS: WordPress (headless), WPML para multilingüe
  • Frontend: Next.js 14, React 18, TypeScript, Tailwind CSS
  • Infraestructura y CDN: DigitalOcean Spaces, AWS S3, CloudFront, CloudFormation
  • SEO y análisis: Google Search Console, Google Analytics 4, structured data (Schema.org)
  • DevOps: GitHub Actions para CI/CD, pruebas con Jest y Cypress

¿Tu blog está frenando tu estrategia de contenidos?

Un blog lento y desordenado ahuyenta tanto a los usuarios como a los buscadores. Te ayudo a transformarlo en un activo de tráfico con tecnología moderna y prácticas SEO sólidas. Contáctame y lo revisamos juntos.