Language Detection Strategies: Browser, Geo, User Preference

Einleitung

Die falsche Sprache anzuzeigen ist einer der schnellsten Wege, internationale Besucher zu verlieren. Ein deutschsprachiger Nutzer, der auf einer rein englischsprachigen Seite landet, hat eine Absprungrate von 70 %. Eine effektive Spracherkennung erfordert eine mehrschichtige Strategie mit sinnvollen Fallbacks. Für einen Überblick über i18n-Architekturmuster empfehlen wir i18n für SaaS: Architekturmuster im Vergleich.

Strategie für die Erkennungsebene

Priorität	Quelle	Funktionsweise	Zuverlässigkeit
1	URL-Pfad/Sprachpräfix	`/de/dashboard`	Höchste
2	Benutzerpräferenz (gespeichert)	Cookie, localStorage, DB	Hoch
3	Browser Accept-Language	`navigator.languages`	Mittel
4	Geo-IP-Standort	Cloudflare, MaxMind	Mittel
5	Standard-Locale	Konfigurierbares Fallback	Niedrigste

URL-basierte Erkennung (Höchste Priorität)

// TanStack Router: Locale aus URL-Pfad
import { createRootRoute, createRouter, redirect } from '@tanstack/react-router'

const SUPPORTED_LOCALES = ['en', 'de', 'zh', 'ja', 'ar']
const DEFAULT_LOCALE = 'en'

// Root-Route mit Locale-Parameter
const rootRoute = createRootRoute({
  beforeLoad: ({ params, location }) => {
    const locale = params.locale
    
    if (!locale || !SUPPORTED_LOCALES.includes(locale)) {
      // Erkennen und weiterleiten
      const detected = detectUserLocale()
      throw redirect({
        to: `/${detected}${location.pathname}`,
        replace: true,
      })
    }
    
    // Locale für die App setzen
    setLocale(locale)
  },
})

Browser-Sprach Erkennung (Middleware)

// Cloudflare Worker: Accept-Language parsen
function parseAcceptLanguage(header: string | null): string[] {
  if (!header) return [DEFAULT_LOCALE]
  
  return header
    .split(',')
    .map(entry => {
      const [lang, quality = 'q=1'] = entry.trim().split(';')
      const q = parseFloat(quality.replace('q=', '')) || 1
      const locale = lang.split('-')[0] // 'en-US' → 'en'
      return { locale, q }
    })
    .sort((a, b) => b.q - a.q)
    .map(entry => entry.locale)
    .filter(locale => SUPPORTED_LOCALES.includes(locale))
}

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const url = new URL(request.url)
    const pathLocale = url.pathname.split('/')[1]
    
    if (SUPPORTED_LOCALES.includes(pathLocale)) {
      return env.ASSETS.fetch(request)
    }
    
    // Aus Accept-Language erkennen
    const acceptLang = request.headers.get('Accept-Language')
    const preferredLocales = parseAcceptLanguage(acceptLang)
    const detectedLocale = preferredLocales[0] || 'en'
    
    // Zur erkannten Locale weiterleiten
    return Response.redirect(`${url.origin}/${detectedLocale}${url.pathname}`, 302)
  }
}

Persistenz der Benutzerpräferenz

tsx

// React: Sprachpräferenz speichern und wiederherstellen
import { setLocale } from '~/paraglide/runtime.js'

function LanguageSwitcher() {
  const switchLanguage = (locale: string) => {
    // Präferenz speichern
    localStorage.setItem('preferred-locale', locale)
    document.cookie = `locale=${locale}; path=/; max-age=${60 * 60 * 24 * 365}`
    
    // Locale wechseln (Paraglide.js)
    setLocale(locale)
    
    // URL ohne vollständigen Reload aktualisieren
    const url = new URL(window.location.href)
    url.pathname = url.pathname.replace(/^\/[a-z]{2}/, `/${locale}`)
    window.history.pushState({}, '', url)
  }
  
  return (
    <select onChange={(e) => switchLanguage(e.target.value)}>
      <option value="en">English</option>
      <option value="de">Deutsch</option>
      <option value="zh">中文</option>
      <option value="ja">日本語</option>
      <option value="ar">العربية</option>
    </select>
  )
}

Entscheidungsfluss für die Erkennung

Besucher kommt an
      ↓
Hat die URL ein Locale? ──Ja──→ URL-Locale verwenden
      Nein
      ↓
Gespeicherte Präferenz? ──Ja──→ Gespeichertes Locale verwenden
      Nein
      ↓
Accept-Language prüfen
      ↓
Locale unterstützt? ──Ja──→ Browser-Locale verwenden
      Nein
      ↓
Geo-IP-Erkennung
      ↓
Standard verwenden (en) ──────→ Sprachumschalter prominent anzeigen

Fazit

Schichten Sie Ihre Erkennungsstrategie: URL-Pfad zuerst, gespeicherte Präferenz zweitens, Browser-Header drittens, Geolokalisierung viertens. Zeigen Sie immer einen prominenten Sprachumschalter – automatisierte Erkennung sollte niemals die einzige Möglichkeit sein, die Sprache zu ändern. Cachern Sie die Auswahl des Nutzers in einem Cookie und localStorage für Persistenz über Sitzungen hinweg.

Für SEO-Aspekte der Spracherkennung lesen Sie den hreflang-Tags Ultimate Guide. Wenn Sie sprachspezifische Landingpages erstellen, deckt Building a Language-Specific Landing Page Strategy den Ansatz ab. Für Experimente über Sprachen hinweg lesen Sie den Multi-Language A/B Testing Guide.