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:
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.
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.
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?
- Es verhindert Probleme mit doppeltem Inhalt (wenn Suchmaschinen denken, dass Sie den gleichen Inhalt mehrfach veröffentlichen).
- Es sorgt dafür, dass französische Nutzer die französische Version sehen, spanische Nutzer die spanische Version sehen usw.
- 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:
<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 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 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.
<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:
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, 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
Maschinenübersetzte Inhalte Automatisierte Übersetzungen ohne menschliche Überprüfung können voller Fehler sein.
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.
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.
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!
Wenn Sie eine Idee haben, um diese Dokumentation zu verbessern, zögern Sie bitte nicht, durch das Einreichen eines Pull-Requests auf GitHub beizutragen.
GitHub-Link zum Blog