@intlayer/docs 5.5.10 → 5.5.11

package/blog/de/internationalization_and_SEO.md

@@ -0,0 +1,277 @@
+---
+createdAt: 2024-12-24
+updatedAt: 2025-06-29
+title: SEO und Internationalisierung
+description: Entdecken Sie, wie Sie Ihre mehrsprachige Website für Suchmaschinen optimieren und Ihre SEO verbessern.
+keywords:
+  - SEO
+  - Intlayer
+  - Internationalisierung
+  - Dokumentation
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - blog
+  - SEO-and-i18n
+---
+
+# SEO & I18n: Der Ultimative Leitfaden für die Mehrsprachigkeit Ihrer Website
+
+Möchten Sie mehr Nutzer weltweit erreichen? Ihre Website mehrsprachig zu gestalten, ist eine der besten Möglichkeiten, Ihr Publikum zu erweitern und Ihr SEO (Suchmaschinenoptimierung) zu verbessern. In diesem Blogbeitrag erläutern wir die Grundlagen des internationalen SEO, häufig als **i18n** (kurz für "Internationalisierung") bezeichnet, in klar verständlichen Begriffen. Sie erfahren, welche wichtigen Entscheidungen Sie treffen müssen, wie Sie technische Elemente wie `hreflang` verwenden und warum Werkzeuge wie **Intlayer** Ihre mehrsprachigen Next.js-Projekte vereinfachen können.
+
+---
+
+## 1. Was bedeutet es, Ihre Website mehrsprachig zu machen?
+
+Eine mehrsprachige Website bietet ihren Inhalt in mehr als einer Sprache an. Zum Beispiel könnten Sie eine englische Version (`example.com/en/`), eine französische Version (`example.com/fr/`) und eine spanische Version (`example.com/es/`) haben. Dieser Ansatz ermöglicht es Suchmaschinen, die richtige Sprachversion basierend auf den Vorlieben oder dem geografischen Standort der Nutzer anzuzeigen.
+
+Wenn Sie dies richtig machen, schaffen Sie ein benutzerfreundlicheres Erlebnis für Nicht-Englischsprachige, was zu besserem Engagement, höheren Konversionsraten und verbessertem SEO in verschiedenen Regionen führt.
+
+---
+
+## 2. Die richtige URL-Struktur wählen
+
+Wenn Sie sich entscheiden, mehrere Sprachversionen zu haben, benötigen Sie einen klaren, konsistenten Weg, um die URLs Ihrer Website zu organisieren. Jede Sprache (oder Region) sollte ihre eigene einzigartige „Adresse“ im Internet haben. Im Folgenden finden Sie drei gängige Möglichkeiten, mehrsprachige Websites zu strukturieren:
+
+1. Länderspezifische Top-Level-Domains (ccTLDs)
+
+   - Beispiel: `example.fr`, `example.de`
+   - **Vorteile:** Sendet ein starkes Signal an Suchmaschinen, welches Land der Inhalt anspricht (z.B. `.fr` = Frankreich).
+   - **Nachteile:** Die Verwaltung mehrerer Domains kann teurer und komplizierter sein.
+
+2. **Subdomains**
+
+   - **Beispiel:** `fr.example.com`, `de.example.com`
+   - **Vorteile:** Jede Sprache „lebt“ auf ihrer eigenen Subdomain, was es relativ einfach macht, Sprachen hinzuzufügen oder zu entfernen.
+   - **Nachteile:** Suchmaschinen behandeln Subdomains manchmal als separate Seiten, was die Autorität Ihrer Hauptdomain verwässern kann.
+
+3. **Subverzeichnisse (Unterordner)**
+   - **Beispiel:** `example.com/fr/`, `example.com/de/`
+   - **Vorteile:** Einfach zu verwalten, und der gesamte Verkehr verweist auf eine Hauptdomain.
+   - **Nachteile:** Nicht so starkes lokales SEO-Signal wie ccTLDs (obwohl es bei ordnungsgemäßer Durchführung immer noch sehr effektiv ist).
+
+> **Tipp:** Wenn Sie eine globale Marke haben und die Dinge einfacher halten möchten, funktionieren Subverzeichnisse oft am besten. Wenn Sie nur ein oder zwei Hauptländer ansprechen und jedes wirklich betonen möchten, könnten ccTLDs der Weg sein.
+
+---
+
+## 3. Sprache gezielt ansprechen mit Hreflang
+
+### 3.1. Was ist Hreflang?
+
+Wenn Sie identische oder sehr ähnliche Inhalte in mehreren Sprachen haben, können Suchmaschinen wie Google verwirrt sein, welche Version einem Nutzer angezeigt werden soll. **Hreflang** ist ein HTML-Attribut, das Suchmaschinen mitteilt, für welche Sprache (und Region) eine bestimmte Seite bestimmt ist und welche alternativen Sprach-/Regionseiten vorhanden sind.
+
+### 3.2. Warum ist das wichtig?
+
+1. Es verhindert Probleme mit **doppeltem Inhalt** (wenn Suchmaschinen denken, dass Sie den gleichen Inhalt mehrfach veröffentlichen).
+2. Es sorgt dafür, dass **französische Nutzer die französische Version sehen**, **spanische Nutzer die spanische Version sehen** usw.
+3. Es verbessert das gesamte Nutzererlebnis, was zu besserem Engagement und höheren SEO-Rankings führt.
+
+### 3.3. So verwenden Sie Hreflang im `<head>`-Tag
+
+In Ihrem HTML fügen Sie etwas wie folgendes hinzu:
+
+```html
+<link rel="alternate" hreflang="en" href="https://example.com/en" />
+<link rel="alternate" hreflang="fr" href="https://example.com/fr" />
+<link rel="alternate" hreflang="es" href="https://example.com/es" />
+<link rel="alternate" hreflang="x-default" href="https://example.com/en" />
+```
+
+- **`hreflang="en"`**: Gibt die englische Version der Seite an.
+- **`hreflang="fr"`**: Gibt die französische Version der Seite an.
+- **`hreflang="es"`**: Gibt die spanische Version der Seite an.
+- **`hreflang="x-default"`**: Eine „Fallback“-Sprache oder Standard-URL, wenn keine der anderen Sprachen mit den Vorlieben des Nutzers übereinstimmt.
+
+> **Kurze Anmerkung:** Stellen Sie sicher, dass die URLs in diesen Tags direkt auf die endgültige Seite zeigen, ohne zusätzliche Weiterleitungen.
+
+---
+
+## 4. Inhalte wirklich „lokal“ machen (nicht nur übersetzen)
+
+### 4.1. Lokalisierung vs. Übersetzung
+
+- **Übersetzung** bedeutet, Text Wort für Wort von einer Sprache in eine andere zu übertragen.
+- **Lokalisierung** bedeutet, das Format, die Währung, Maßeinheiten und kulturellen Referenzen der Inhalte für ein lokales Publikum anzupassen. Wenn Sie beispielsweise Frankreich ansprechen, würden Sie `€` anstelle von `$` verwenden.
+
+### 4.2. Duplizierte Inhalte vermeiden
+
+Selbst bei guten Übersetzungen können Suchmaschinen Ihre Website wegen doppelter Inhalte kennzeichnen, wenn sie zu ähnlich in der Struktur erscheint. Hreflang hilft klarzustellen, dass diese Seiten keine Duplikate sind, sondern Sprachvarianten.
+
+---
+
+## 5. Technisches SEO – Must-Haves
+
+### 5.1. Sprachdeklarationen (`lang` und `dir`)
+
+In Ihrem HTML-Tag können Sie die Sprache wie folgt deklarieren:
+
+```html
+<html lang="en"></html>
+```
+
+- **`lang="en"`** hilft Browsern und Hilfstechnologien, die Sprache zu verstehen.
+
+Für Sprachen mit von rechts nach links verlaufender Schrift (wie Arabisch oder Hebräisch) fügen Sie hinzu:
+
+```html
+<html dir="rtl" lang="ar"></html>
+```
+
+- **`dir="rtl"`** stellt sicher, dass die Textausrichtung von rechts nach links ist.
+
+### 5.2. Kanonische Tags
+
+Kanonische Tags teilen Suchmaschinen mit, welche Seite die „originale“ oder primäre Version ist, wenn Sie fast identische Seiten haben. Normalerweise haben Sie einen **selbstreferenziellen** Kanonischen Tag für mehrsprachige Seiten.
+
+```html
+<link rel="canonical" href="https://example.com/fr/produits" />
+```
+
+---
+
+## 6. On-Page SEO in mehreren Sprachen
+
+### 6.1. Titel & Meta-Beschreibungen
+
+- **Übersetzt und optimiert** für jede Sprache.
+- Führen Sie **Keyword-Recherchen** für jeden Markt durch, denn wonach die Leute in Englisch suchen, kann sich von Französisch oder Spanisch unterscheiden.
+
+### 6.2. Überschriften (H1, H2, H3)
+
+Ihre Überschriften sollten die **lokalen Phrasen** oder **Keywords** jeder Region widerspiegeln. Verwenden Sie nicht einfach Ihre ursprüngliche englische Überschrift, die Sie durch Google Translate laufen lassen und das war's.
+
+### 6.3. Bilder & Medien
+
+- Lokalisiert den Alt-Text, Bildunterschriften und Dateinamen, falls nötig.
+- Verwenden Sie visuelle Darstellungen, die mit der Zielkultur resonieren.
+
+---
+
+## 7. Sprachwechsel & Benutzererfahrung
+
+### 7.1. Auto-Redirect oder einen Sprachwechsler?
+
+- **Auto-Redirect** (basierend auf IP oder Browsereinstellungen) kann bequem sein, könnte jedoch Reisende oder VPN-Nutzer zur falschen Version senden.
+- **Ein Sprachwechsler** ist oft transparenter, Nutzer können ihre eigene Sprache wählen, wenn die automatisch erkannte falsche ist.
+
+Hier ist ein vereinfachtes Beispiel für Next.js + Intlayer:
+
+```tsx
+import { useLocation, useNavigate } from "react-router-dom";
+import {
+  Locales,
+  getHTMLTextDir,
+  getLocaleName,
+  getLocalizedUrl,
+} from "intlayer";
+import { useLocale } from "react-intlayer";
+import { type FC } from "react";
+
+const LocaleSwitcher: FC = () => {
+  const location = useLocation(); // Holen Sie sich den aktuellen URL-Pfad. Beispiel: /fr/about
+  const navigate = useNavigate();
+
+  const changeUrl = (locale: Locales) => {
+    // Konstruiere die URL mit dem aktualisierten Locale
+    // Beispiel: /es/about mit dem Locale auf Spanisch gesetzt
+    const pathWithLocale = getLocalizedUrl(location.pathname, locale);
+
+    // Aktualisiere den URL-Pfad
+    navigate(pathWithLocale);
+  };
+
+  const { locale, availableLocales, setLocale } = useLocale({
+    onLocaleChange: changeUrl,
+  });
+
+  return (
+    <ol>
+      {availableLocales.map((localeItem) => (
+        <li key={localeItem}>
+          <a
+            href={getLocalizedUrl(location.pathname, localeItem)}
+            hrefLang={locale === localeItem ? "x-default" : localeItem}
+            aria-current={locale === localeItem ? "page" : undefined}
+            onClick={(e) => {
+              e.preventDefault();
+              setLocale(localeItem);
+            }}
+          >
+            <span>
+              {/* Sprache in ihrem eigenen Locale - z.B. Französisch */}
+              {getLocaleName(localeItem, locale)}
+            </span>
+            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
+              {/* Sprache im aktuellen Locale - z.B. Spanisch mit aktuell auf Locales.SPANISH gesetztem Locale */}
+              {getLocaleName(localeItem)}
+            </span>
+            <span dir="ltr" lang={Locales.ENGLISH}>
+              {/* Sprache auf Englisch - z.B. Französisch */}
+              {getLocaleName(localeItem, Locales.ENGLISH)}
+            </span>
+            <span>
+              {/* Sprache in ihrem eigenen Locale - z.B. FR */}
+              {localeItem}
+            </span>
+          </a>
+        </li>
+      ))}
+    </ol>
+  );
+};
+```
+
+### 7.2. Präferenzen speichern
+
+- Speichern Sie die Sprachwahl Ihres Nutzers in einem **Cookie** oder einer **Sitzung**.
+- Bei ihrem nächsten Besuch auf Ihrer Website können Sie automatisch ihre bevorzugte Sprache laden.
+
+---
+
+## 8. Lokale Backlinks aufbauen
+
+**Backlinks** (Links von externen Seiten zu Ihrer) bleiben ein wichtiger SEO-Faktor. Wenn Sie eine mehrsprachige Seite betreiben, sollten Sie Folgendes in Betracht ziehen:
+
+- Kontaktieren Sie lokale Nachrichtenwebsites, Blogs oder Foren. Zum Beispiel kann eine `.fr`-Domain, die auf Ihr französisches Unterverzeichnis verweist, Ihr lokales französisches SEO steigern.
+- Überwachen Sie Backlinks pro Sprache, um zu sehen, welche Regionen mehr PR-/Marketingbemühungen benötigen.
+
+---
+
+## 9. Überwachung und Pflege Ihrer mehrsprachigen Website
+
+### 9.1. Google Analytics & Search Console
+
+- Segmentieren Sie Ihre Daten für jedes Sprachverzeichnis (`/en/`, `/fr/`, `/es/`).
+- Achten Sie auf **Crawl-Fehler**, **Duplicate Content-Flags** und **Indexierungsprobleme** auf Sprachbasis.
+
+### 9.2. Regelmäßige Inhaltsaktualisierungen
+
+- Halten Sie Übersetzungen aktuell. Wenn Sie eine Produktbeschreibung auf Englisch ändern, aktualisieren Sie diese auch in Französisch, Spanisch usw.
+- Veraltete Übersetzungen können für Kunden verwirrend sein und das Vertrauen der Nutzer untergraben.
+
+---
+
+## 10. Häufige Fallstricke, die zu vermeiden sind
+
+1. **Maschinenübersetzte Inhalte**
+   Automatisierte Übersetzungen ohne menschliche Überprüfung können voller Fehler sein.
+
+2. **Falsche oder fehlende `hreflang`-Tags**
+   Suchmaschinen können nicht selbst ermitteln, welche Sprachversionen vorhanden sind, wenn Ihre Tags unvollständig sind oder falsche Codes enthalten.
+
+3. **Sprachwechsel nur über JavaScript**
+   Wenn Google keine einzigartigen URLs für jede Sprache crawlen kann, erscheinen Ihre Seiten möglicherweise nicht in den richtigen lokalen Suchergebnissen.
+
+4. **Kulturelle Nuancen ignorieren**
+   Ein Witz oder eine Phrase, die in einem Land funktioniert, könnte in einem anderen beleidigend oder bedeutungslos sein.
+
+---
+
+## Zusammenfassung
+
+Ihre Website mehrsprachig zu gestalten, bedeutet mehr als nur Text zu übersetzen. Es geht darum, URLs effektiv zu strukturieren, `hreflang`-Tags zu verwenden, um Suchmaschinen zu helfen, die richtige Version auszuliefern, und ein hervorragendes Benutzererlebnis zu bieten, voll mit lokalisierten Grafiken, Sprachwechslern und konsistenten Navigationsmöglichkeiten. Wenn Sie diese bewährten Praktiken befolgen, sind Sie für den Erfolg in globalen Märkten gerüstet, steigern die Zufriedenheit der Nutzer und erzielen letztendlich bessere SEO-Ergebnisse in den verschiedenen Regionen.
+
+Wenn Sie Next.js verwenden (insbesondere App Router in Next.js 13+), kann ein Tool wie **Intlayer** diesen gesamten Prozess vereinfachen. Es hilft bei allem, von der Generierung lokalisierter Sitemaps bis hin zur automatischen Handhabung von `hreflang`-Links, der Sprachenerkennung und mehr, so können Sie sich auf die Erstellung qualitativ hochwertiger mehrsprachiger Inhalte konzentrieren.
+
+**Bereit, global zu gehen?** Beginnen Sie jetzt mit der Umsetzung dieser SEO- und i18n-Strategien und beobachten Sie, wie neue Besucher aus der ganzen Welt Ihre Website entdecken und sich mit ihr beschäftigen!

package/blog/de/intlayer_with_i18next.md

@@ -0,0 +1,162 @@
+---
+createdAt: 2024-12-24
+updatedAt: 2025-06-29
+title: Intlayer und i18next
+description: Integrieren Sie Intlayer mit i18next für optimale Internationalisierung. Vergleichen Sie die beiden Frameworks und lernen Sie, wie Sie sie zusammen konfigurieren.
+keywords:
+  - Intlayer
+  - i18next
+  - Internationalisierung
+  - i18n
+  - Lokalisierung
+  - Übersetzung
+  - React
+  - Next.js
+  - JavaScript
+  - TypeScript
+slugs:
+  - blog
+  - intlayer-with-i18next
+---
+
+# Internationalisierung mit Intlayer und i18next
+
+i18next ist ein Open-Source-Internationalisierungs (i18n) Framework, das für JavaScript-Anwendungen entwickelt wurde. Es wird häufig für die Verwaltung von Übersetzungen, Lokalisierung und Sprachwechsel in Softwareprojekten verwendet. Es hat jedoch einige Einschränkungen, die die Skalierbarkeit und die Entwicklung erschweren können.
+
+Intlayer ist ein weiteres Internationalisierungsframework, das diese Einschränkungen behebt und einen flexibleren Ansatz zur Inhaltsdeklaration und -verwaltung bietet. Lassen Sie uns einige wichtige Unterschiede zwischen i18next und Intlayer sowie deren Konfiguration für optimierte Internationalisierung erkunden.
+
+## Intlayer vs. i18next: Hauptunterschiede
+
+### 1. Inhaltsdeklaration
+
+Bei i18next müssen Übersetzungswörterbücher in einem bestimmten Ordner deklariert werden, was die Skalierbarkeit der Anwendung erschweren kann. Im Gegensatz dazu ermöglicht Intlayer die Deklaration von Inhalten im selben Verzeichnis wie Ihre Komponente. Dies hat mehrere Vorteile:
+
+- **Vereinfachte Inhaltsbearbeitung**: Benutzer müssen nicht nach dem richtigen Wörterbuch suchen, um Änderungen vorzunehmen, wodurch die Fehlerquote verringert wird.
+- **Automatische Anpassung**: Wenn sich der Standort einer Komponente ändert oder sie entfernt wird, erkennt Intlayer dies und passt sich automatisch an.
+
+### 2. Komplexität der Konfiguration
+
+Die Konfiguration von i18next kann komplex sein, insbesondere bei der Integration mit serverseitigen Komponenten oder der Konfiguration von Middleware für Frameworks wie Next.js. Intlayer vereinfacht diesen Prozess und bietet eine unkompliziertere Konfiguration.
+
+### 3. Konsistenz der Übersetzungswörterbücher
+
+Die Gewährleistung, dass Übersetzungswörterbücher in verschiedenen Sprachen konsistent sind, kann mit i18next herausfordernd sein. Diese Inkonsistenz kann zu Anwendungsabstürzen führen, wenn sie nicht ordnungsgemäß behandelt wird. Intlayer behebt dies, indem es Einschränkungen für übersetzte Inhalte durchsetzt, um sicherzustellen, dass keine Übersetzung ausgelassen wird und dass der übersetzte Inhalt genau ist.
+
+### 4. TypeScript-Integration
+
+Intlayer bietet eine bessere Integration mit TypeScript, die automatische Vorschläge für Inhalte in Ihrem Code ermöglicht, wodurch die Effizienz der Entwicklung verbessert wird.
+
+### 5. Teilen von Inhalten über Anwendungen hinaus
+
+Intlayer erleichtert das Teilen von Inhaltsdeklarationsdateien über mehrere Anwendungen und gemeinsame Bibliotheken. Diese Funktion erleichtert die Pflege konsistenter Übersetzungen über einen größeren Codebase.
+
+## Wie man i18next-Wörterbücher mit Intlayer generiert
+
+### Konfiguration von Intlayer zum Export von i18next-Wörterbüchern
+
+> Wichtige Hinweise
+
+> Der Export von i18next-Wörterbüchern befindet sich derzeit in der Beta-Phase und gewährleistet keine 1:1-Kompatibilität mit anderen Frameworks. Es wird empfohlen, eine auf Intlayer basierende Konfiguration zu verwenden, um Probleme zu minimieren.
+
+Um i18next-Wörterbücher zu exportieren, müssen Sie Intlayer entsprechend konfigurieren. Im Folgenden finden Sie ein Beispiel dafür, wie Sie Intlayer so einrichten, dass sowohl Intlayer- als auch i18next-Wörterbücher exportiert werden.
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  content: {
+    // Geben Sie an, dass Intlayer sowohl Intlayer- als auch i18next-Wörterbücher exportieren wird
+    dictionaryOutput: ["intlayer", "i18next"],
+    // Relativer Pfad vom Projektstammverzeichnis zum Verzeichnis, in das die i18n-Wörterbücher exportiert werden
+    i18nextResourcesDir: "./i18next/dictionaries",
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+import { Locales } from "intlayer";
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  content: {
+    // Geben Sie an, dass Intlayer sowohl Intlayer- als auch i18next-Wörterbücher exportieren wird
+    dictionaryOutput: ["intlayer", "i18next"],
+    // Relativer Pfad vom Projektstammverzeichnis zum Verzeichnis, in das die i18n-Wörterbücher exportiert werden
+    i18nextResourcesDir: "./i18next/dictionaries",
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+const { Locales } = require("intlayer");
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  content: {
+    // Geben Sie an, dass Intlayer sowohl Intlayer- als auch i18next-Wörterbücher exportieren wird
+    dictionaryOutput: ["intlayer", "i18next"],
+    // Relativer Pfad vom Projektstammverzeichnis zum Verzeichnis, in das die i18n-Wörterbücher exportiert werden
+    i18nextResourcesDir: "./i18next/dictionaries",
+  },
+};
+
+module.exports = config;
+```
+
+Durch das Hinzufügen von 'i18next' zur Konfiguration generiert Intlayer spezielle i18next-Wörterbücher zusätzlich zu den Intlayer-Wörterbüchern. Beachten Sie, dass das Entfernen von 'intlayer' aus der Konfiguration die Kompatibilität mit React-Intlayer oder Next-Intlayer beeinträchtigen kann.
+
+### Importieren von Wörterbüchern in Ihre i18next-Konfiguration
+
+Um die generierten Wörterbücher in Ihre i18next-Konfiguration zu importieren, können Sie 'i18next-resources-to-backend' verwenden. Hier ist ein Beispiel dafür, wie Sie Ihre i18next-Wörterbücher importieren können:
+
+```typescript fileName="i18n/client.ts" codeFormat="typescript"
+// i18n/client.ts
+
+import i18next from "i18next";
+import resourcesToBackend from "i18next-resources-to-backend";
+
+i18next
+  // Ihre i18next-Konfiguration
+  .use(
+    resourcesToBackend(
+      (language: string, namespace: string) =>
+        import(`../i18next/dictionaries/${language}/${namespace}.json`)
+    )
+  );
+```
+
+```javascript fileName="i18n/client.mjs" codeFormat="esm"
+// i18n/client.mjs
+
+import i18next from "i18next";
+import resourcesToBackend from "i18next-resources-to-backend";
+
+i18next
+  // Ihre i18next-Konfiguration
+  .use(
+    resourcesToBackend(
+      (language, namespace) =>
+        import(`../i18next/dictionaries/${language}/${namespace}.json`)
+    )
+  );
+```
+
+```javascript fileName="i18n/client.cjs" codeFormat="commonjs"
+// i18n/client.cjs
+
+const i18next = require("i18next");
+const resourcesToBackend = require("i18next-resources-to-backend");
+
+i18next
+  // Ihre i18next-Konfiguration
+  .use(
+    resourcesToBackend(
+      (language, namespace) =>
+        import(`../i18next/dictionaries/${language}/${namespace}.json`)
+    )
+  );
+```