Implementando Soporte Multilingüe en WillDevp: Un Caso de Estudio

La globalización del desarrollo web ha hecho que el soporte multilingüe sea una característica esencial para cualquier sitio web moderno. En WillDevp, decidimos dar este paso importante para hacer nuestro contenido más accesible a una audiencia global.

El Desafío Inicial

Nuestro sitio web, construido con Astro, necesitaba manejar:

• Múltiples idiomas (inicialmente español e inglés)
• URLs amigables para SEO
• Contenido dinámico y estático
• Navegación intuitiva entre idiomas
• Mantenimiento sencillo del contenido

La Solución

1. Estructura de Carpetas

Implementamos una estructura organizada para manejar el contenido multilingüe:

src/
├── content/
│   └── blog/
│       ├── es/
│       │   └── articulos-es.md
│       └── en/
│           └── articles-en.md
└── pages/
    ├── [lang]/
    │   └── blog/
    │       └── posts/
    │           └── [...slug].astro
    └── blog/
        └── posts/
            └── [...slug].astro
      

2. Manejo de Rutas Dinámicas

Utilizamos el sistema de rutas dinámicas de Astro para crear URLs limpias y SEO-friendly:

export const getStaticPaths = (async () => {
    const posts = await getCollection("blog");
    
    return posts.map((post) => {
        const slug = post.slug.split('/').pop();
        
        return {
            params: { 
                lang: post.data.lang,
                slug: slug
            },
            props: { post }
        };
    });
});
      

3. Componentes Reutilizables

Desarrollamos componentes que manejan automáticamente el idioma:

---
const { lang = 'es' } = Astro.props;
const translations = {
    es: {
        readMore: 'Leer más',
        published: 'Publicado el'
    },
    en: {
        readMore: 'Read more',
        published: 'Published on'
    }
};
---
      

4. Detección de Idioma

Implementamos un sistema de detección de idioma basado en:

• Preferencias del navegador
• URL actual
• Configuración del usuario

Desafíos y Soluciones

Manejo de Slugs

Uno de los mayores desafíos fue manejar correctamente los slugs para los posts del blog. La solución fue implementar un sistema que:

• Extrae el idioma del contenido
• Genera rutas únicas por idioma
• Mantiene la consistencia entre versiones

SEO y Metadatos

Aseguramos que cada página tuviera:

• Meta tags específicos por idioma
• Enlaces hreflang apropiados
• URLs canónicas
• Breadcrumbs estructurados

Resultados

La implementación del soporte multilingüe resultó en:

• Mejor posicionamiento en buscadores
• Mayor alcance internacional
• Mejor experiencia de usuario
• Mantenimiento más sencillo del contenido

Lecciones Aprendidas

• Planificación Detallada: Es crucial planificar la estructura antes de implementar.
• Componentes Reutilizables: Crear componentes que manejen el idioma de forma transparente.
• SEO desde el Inicio: Considerar el SEO en cada paso del desarrollo.
• Testing Exhaustivo: Probar todas las combinaciones de rutas y contenido.

Próximos Pasos

Planeamos:

• Añadir más idiomas
• Implementar un selector de idiomas más intuitivo
• Mejorar el sistema de traducciones
• Automatizar más el proceso de creación de contenido multilingüe