Implementación de SEO y meta tags para rede...

Epica se pensó inicialmente como una Single Page Application (SPA) construida con React. Este tipo de aplicaciones cargan el contenido dinámicamente con JavaScript, lo cual presenta un problema: los crawlers de Google y los scrapers de redes sociales no ejecutan JavaScript de la misma forma que un navegador.

El resultado es que los informes públicos no aparecerían en búsquedas de Google y al compartir un enlace en LinkedIn o Twitter, la vista previa mostraba información genérica del sitio en lugar del contenido específico del informe.

Cambios implementados

Configuramos tres sistemas complementarios:

Sitemap dinámico

Creamos una función serverless que genera el sitemap XML consultando la base de datos. Incluye todos los informes públicos, posts del blog, y páginas estáticas. Se actualiza automáticamente cuando se publica o despublica contenido.

Prerender.io

Integramos Prerender.io como edge function en Netlify. Cuando detecta un user-agent de crawler (Googlebot, Twitterbot, LinkedInbot, etc.), sirve una versión pre-renderizada de la página en lugar del shell de la SPA. Los usuarios normales siguen recibiendo la aplicación React estándar.

Meta tags Open Graph y Twitter Cards

Corregimos la implementación de meta tags para que cada página inyecte sus propios valores. Antes había duplicados y conflictos que causaban que los scrapers tomaran valores incorrectos. Ahora el componente SeoMetadata sobrescribe correctamente los tags del documento según el contenido de cada página.

También corregimos las URLs de imágenes para usar rutas absolutas, requisito de los scrapers de redes sociales.

Cambios técnicos

Sitemap XML dinámico generado desde base de datos
Edge function para servir HTML pre-renderizado a crawlers
Corrección de meta tags OG y Twitter duplicados
URLs absolutas para imágenes en meta tags
Configuración de redirects en netlify.toml para sitemap