Wie man eine Webseite übersetzt: Der ultimative Entwickler-Guide (2026)

Die Stufen der Website-Übersetzung

Website-Übersetzung ist ein Spektrum von "schnellem Hack" bis "produktionsreifes Internationalisierungssystem."

---

Stufe 1: Google Translate Widget

Wann verwenden: Sie wollen testen ob ein Markt tragfähig ist.

HTMLCopy
1<div id="google_translate_element"></div>
2
3<script>
4  function googleTranslateElementInit() {
5    new google.translate.TranslateElement({
6      pageLanguage: 'de',
7      includedLanguages: 'en,es,fr,zh-CN,ja'
8    }, 'google_translate_element');
9  }
10</script>

Warum das für Produktion nicht taugt:

• SEO-Desaster: Google indexiert nur Originalsprache
• Keine Kontrolle: Sie können schlechte Übersetzungen nicht korrigieren
• Performance: Jeder Seitenaufruf geht zu Googles Servern

---

Stufe 3: JSON-Dateien + Bibliothek (Standard-Ansatz)

React Beispiel (react-i18next)

TerminalCopy
npm install react-i18next i18next

JavaScriptCopy
1import i18n from 'i18next';
2import { initReactI18next } from 'react-i18next';
3
4i18n.use(initReactI18next).init({
5  resources: {
6    de: { translation: deTranslations },
7    en: { translation: enTranslations }
8  },
9  lng: 'de',
10  fallbackLng: 'en'
11});

Komponente:

JSXCopy
1import { useTranslation } from 'react-i18next';
2
3function HomePage() {
4  const { t, i18n } = useTranslation();
5
6  return (
7    <div>
8      <h1>{t('welcome.title')}</h1>
9      <button onClick={() => i18n.changeLanguage('en')}>English</button>
10    </div>
11  );
12}

Next.js Beispiel (next-intl)

TerminalCopy
npm install next-intl

Middleware:

TypeScriptCopy
1import createMiddleware from 'next-intl/middleware';
2
3export default createMiddleware({
4  locales: ['de', 'en', 'es'],
5  defaultLocale: 'de'
6});

URLs:

• /de → Deutsch
• /en → Englisch
• /es → Spanisch

---

Stufe 5: Volle i18n-Plattform

Was Sie bekommen:

• Web-UI für Übersetzer (mit Kontext, Screenshots)
• CLI für Entwickler (upload/download Übersetzungen)
• Git-Integration
• Maschinelle Übersetzung (DeepL, ChatGPT)
• Over-the-Air Updates
• Translation Memory

IntlPull Workflow

TerminalCopy
1npm install @intlpullhq/react
2npx @intlpullhq/cli init
3
4# Extrahieren und hochladen
5npx @intlpullhq/cli upload
6
7# Übersetzungen herunterladen
8npx @intlpullhq/cli download

---

SEO für übersetzte Sites

hreflang-Tags

HTMLCopy
<link rel="alternate" hreflang="de" href="https://example.com/de/seite" />
<link rel="alternate" hreflang="en" href="https://example.com/en/page" />
<link rel="alternate" hreflang="x-default" href="https://example.com/de/seite" />

Lokalisierte URLs

• example.com/de/ (empfohlen: Unterverzeichnisse)
• de.example.com (Subdomains)
• example.de (ccTLDs)

---

Performance-Optimierung

Code-Splitting

JavaScriptCopy
1// ❌ Schlecht: Alle Sprachen laden
2import de from './locales/de.json';
3import en from './locales/en.json';
4
5// ✅ Gut: Lazy Loading
6const loadTranslations = async (locale) => {
7  return await import(`./locales/${locale}.json`);
8};

---

Zusammenfassung

Bereit Ihre Website zu übersetzen? Starten Sie kostenlos mit IntlPull