Multi-Language Content Made Easy: Localization in Contensa

Reaching a global audience requires more than just translating text. In this guide, we'll explore how to implement a comprehensive localization strategy using Contensa.

Why Localization Matters

Localization goes beyond simple translation:

• Cultural Adaptation: Content that resonates with local audiences
• SEO Benefits: Improved search rankings in different regions
• User Experience: Native language support increases engagement
• Market Expansion: Access new markets effectively

Setting Up Localization

Enable Locales

Configure your supported locales in Contensa:

typescript
const locales = [
  { code: 'en-US', name: 'English (US)', default: true },
  { code: 'es-ES', name: 'Spanish (Spain)' },
  { code: 'fr-FR', name: 'French (France)' },
  { code: 'de-DE', name: 'German (Germany)' },
  { code: 'ja-JP', name: 'Japanese (Japan)' },
];

Content Model Configuration

Enable localization per field:

json
{
  "fields": [
    {
      "name": "title",
      "type": "text",
      "localized": true
    },
    {
      "name": "content",
      "type": "richText",
      "localized": true
    },
    {
      "name": "sku",
      "type": "text",
      "localized": false
    }
  ]
}

Fetching Localized Content

GraphQL Query

graphql
query GetLocalizedPost($slug: String!, $locale: String!) {
  blogPost(slug: $slug, locale: $locale) {
    title
    content
    locale
  }
}

Fallback Strategy

Implement locale fallback:

typescript
async function getLocalizedContent(slug: string, locale: string) {
  try {
    return await client.getEntry(slug, { locale });
  } catch (error) {
    // Fallback to default locale
    return await client.getEntry(slug, { locale: 'en-US' });
  }
}

Translation Workflow

1. Content Creation

Create content in your primary locale first.

2. Translation

Options for translation:

• Manual Translation: Content team translates directly
• Translation Service Integration: Connect with services like Phrase or Lokalise
• AI-Assisted: Use AI for initial drafts, human review

3. Review and Approval

Implement a review workflow:

typescript
const workflow = {
  draft: 'Content created',
  inTranslation: 'Sent to translators',
  inReview: 'Under review',
  published: 'Live in all locales',
};

Best Practices

1. Locale-Specific Images

Some images may need localization:

typescript
interface LocalizedAsset {
  'en-US': '/images/hero-en.jpg',
  'ja-JP': '/images/hero-ja.jpg',
}

2. Date and Number Formatting

Use locale-aware formatting:

typescript
const formatDate = (date: Date, locale: string) => {
  return new Intl.DateTimeFormat(locale, {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  }).format(date);
};

3. RTL Support

Consider right-to-left languages:

css
[dir="rtl"] .content {
  text-align: right;
  direction: rtl;
}

URL Structure

Choose an appropriate URL strategy:

• Subdomain: es.example.com
• Subdirectory: example.com/es/
• Parameter: example.com?lang=es

Monitoring and Analytics

Track localization effectiveness:

• Content completion rates per locale
• Translation turnaround times
• User engagement by locale
• Conversion rates across languages

Conclusion

Effective localization is key to global success. With Contensa's robust localization features, you can efficiently manage multilingual content and provide excellent experiences for users worldwide.