13 de enero de 2025

Implementing Multilingual Support in Willdevp: A Case Study

The globalization of web development has made multilingual support an essential feature for any modern website. At Willdevp, we decided to take this important step to make our content more accessible to a global audience.

The Initial Challenge

Our website, built with Astro, needed to handle:

• Multiple languages (initially Spanish and English)
• SEO-friendly URLs
• Dynamic and static content
• Intuitive language navigation
• Easy content maintenance

The Solution

1. Folder Structure

We implemented an organized structure to handle multilingual content:

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

2. Dynamic Route Handling

We used Astro’s dynamic routing system to create clean, SEO-friendly URLs:

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. Reusable Components

We developed components that automatically handle language:

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

4. Language Detection

We implemented a language detection system based on:

• Browser preferences
• Current URL
• User settings

Challenges and Solutions

Slug Handling

One of the biggest challenges was correctly handling slugs for blog posts. The solution was to implement a system that:

1. Extracts language from content
2. Generates unique routes per language
3. Maintains consistency between versions

SEO and Metadata

We ensured each page had:

• Language-specific meta tags
• Appropriate hreflang links
• Canonical URLs
• Structured breadcrumbs

Results

The implementation of multilingual support resulted in:

• Better search engine positioning
• Greater international reach
• Better user experience
• Easier content maintenance

Lessons Learned

1. Detailed Planning: It’s crucial to plan the structure before implementing.
2. Reusable Components: Create components that handle language transparently.
3. SEO from the Start: Consider SEO at every development step.
4. Thorough Testing: Test all route and content combinations.

Next Steps

We plan to:

• Add more languages
• Implement a more intuitive language selector
• Improve the translation system
• Automate more of the multilingual content creation process