Hreflang ist ein HTML-Link-Attribut, das 2011 von Google eingeführt wurde und internationalen Websites hilft, Suchmaschinen korrekt über Sprachvarianten und regionale Versionen zu informieren. Es ist eines der komplexesten und gleichzeitig fehleranfälligsten Werkzeuge im technischen SEO-Arsenal.
Wenn Ihre Website in mehreren Sprachen existiert oder regionale Varianten hat, ist hreflang unverzichtbar. Ohne korrekte hreflang-Implementierung riskieren Sie, dass Google die falsche Sprachversion in den falschen Ländern ausspielt – oder dass Duplicate-Content-Probleme entstehen, die Ihre Rankings beeinträchtigen.
Warum hreflang existiert: Das Duplicate-Content-Problem
Stellen Sie sich vor, Ihre Website hat eine deutsche Version (/de/) und eine österreichische Version (/at/). Beide enthalten nahezu identischen deutschen Content, unterscheiden sich aber in Preis- und Produktangaben. Aus Google-Sicht sieht das zunächst nach Duplicate Content aus.
Hreflang löst dieses Problem: Es signalisiert Google, dass diese Seiten bewusst ähnlich sind – aber für unterschiedliche Zielgruppen gedacht. Google zeigt dann die jeweils passende Version in den Suchergebnissen des entsprechenden Landes.
Typische Szenarien für hreflang
- Deutsche und englische Version einer Unternehmenswebsite
- Österreichische, Schweizer und deutsche Version eines Online-Shops
- Globale Website mit regionalen Landingpages
- Mehrsprachige Blogs und Magazine
Hreflang-Werte und Sprachcodes
Hreflang-Werte basieren auf ISO-Sprachcodes (ISO 639-1) und optionalen Ländercodes (ISO 3166-1 alpha-2).
Nur Sprache (keine Region)
<link rel="alternate" hreflang="de" href="https://example.com/de/" />
<link rel="alternate" hreflang="en" href="https://example.com/en/" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/" />
Sprache + Region kombiniert
<link rel="alternate" hreflang="de-DE" href="https://example.de/" />
<link rel="alternate" hreflang="de-AT" href="https://example.at/" />
<link rel="alternate" hreflang="de-CH" href="https://example.ch/" />
<link rel="alternate" hreflang="en-US" href="https://example.com/us/" />
<link rel="alternate" hreflang="en-GB" href="https://example.co.uk/" />
x-default: Die Fallback-Variante
<link rel="alternate" hreflang="x-default" href="https://example.com/" />
x-default bezeichnet die Standardversion für Nutzer, deren Sprache oder Region nicht explizit abgedeckt ist. Häufige Verwendungszwecke:
- Eine Sprachauswahl-Seite (Language Selector)
- Die englische Version als globaler Standard
- Eine generische, nicht-regionalisierte Hauptseite
Die drei Implementierungsmethoden
Methode 1: HTML Head (empfohlen für die meisten Websites)
Die häufigste und einfachste Methode: hreflang-Tags direkt im <head> jeder Seite.
Vollständiges Beispiel für eine zweisprachige Seite:
<head>
<!-- Auf der deutschen Seite -->
<link rel="alternate" hreflang="de" href="https://pakumedia.de/de/leistungen/" />
<link rel="alternate" hreflang="en" href="https://pakumedia.de/en/services/" />
<link rel="alternate" hreflang="x-default" href="https://pakumedia.de/" />
</head>
Die Return-Tags-Regel: Auf der englischen Seite müssen dieselben Links erscheinen:
<head>
<!-- Auf der englischen Seite -->
<link rel="alternate" hreflang="de" href="https://pakumedia.de/de/leistungen/" />
<link rel="alternate" hreflang="en" href="https://pakumedia.de/en/services/" />
<link rel="alternate" hreflang="x-default" href="https://pakumedia.de/" />
</head>
Methode 2: XML-Sitemap (empfohlen für große Websites)
Bei Websites mit vielen Seiten ist die Implementierung über die XML-Sitemap effizienter. Statt jede Seite im HTML zu ändern, werden die hreflang-Angaben zentral in der Sitemap gepflegt.
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>https://example.com/de/leistungen/</loc>
<xhtml:link rel="alternate" hreflang="de" href="https://example.com/de/leistungen/"/>
<xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/services/"/>
<xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/"/>
</url>
<url>
<loc>https://example.com/en/services/</loc>
<xhtml:link rel="alternate" hreflang="de" href="https://example.com/de/leistungen/"/>
<xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/services/"/>
<xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/"/>
</url>
</urlset>
Methode 3: HTTP-Header
Nur relevant für Nicht-HTML-Dateien wie PDFs oder Bilder. Die hreflang-Information wird im HTTP-Response-Header mitgeliefert:
Link: <https://example.com/de/dokument.pdf>; rel="alternate"; hreflang="de",
<https://example.com/en/document.pdf>; rel="alternate"; hreflang="en"
Die Return-Tags-Regel: Der häufigste Fehler
Die Return-Tags-Regel ist die wichtigste Regel bei hreflang und gleichzeitig der häufigste Implementierungsfehler: Jede Sprachvariante muss auf alle anderen Varianten verweisen – inklusive sich selbst.
| Seite | Muss verweisen auf |
|---|---|
/de/leistungen/ | /de/leistungen/ (sich selbst), /en/services/ |
/en/services/ | /de/leistungen/, /en/services/ (sich selbst) |
Fehlt der Rückverweis, ignoriert Google die hreflang-Anweisung für diese Verbindung und behandelt die Seiten als unabhängige Duplikate.
Hreflang und Canonical URLs
Das Zusammenspiel von hreflang und Canonical URLs kann verwirrend sein. Die Grundregel:
- Ein hreflang-Tag sollte immer auf die kanonische Version einer Seite verweisen
- Eine kanonische URL sollte niemals auf eine Seite in einer anderen Sprache zeigen
- Self-referencing Canonicals und hreflang-Tags schließen sich nicht aus, sondern ergänzen sich
Korrekte Kombination:
<link rel="canonical" href="https://example.com/de/leistungen/" />
<link rel="alternate" hreflang="de" href="https://example.com/de/leistungen/" />
<link rel="alternate" hreflang="en" href="https://example.com/en/services/" />
Häufige hreflang-Fehler
| Fehler | Auswirkung | Lösung |
|---|---|---|
| Fehlende Return-Tags | Google ignoriert hreflang | Alle Seiten gegenseitig verknüpfen |
| Falscher Sprachcode (z. B. "ger" statt "de") | Tag wird ignoriert | ISO 639-1 zwei Buchstaben verwenden |
| Canonical auf andere Sprachversion | Duplicate-Content-Signal | Canonical immer auf eigene Sprache |
| x-default vergessen | Kein Fallback definiert | x-default immer setzen |
| Nicht-kanonische URLs in hreflang | Konflikt zwischen Signalen | Nur kanonische URLs verwenden |
| Hreflang für 301-Redirects | Tag funktioniert nicht | Nur auf live Seiten verweisen |
Warum Sprachcodes korrekt sein müssen
Häufig verwendete falsche Codes:
gerstattde(Deutsch)engstatten(Englisch)chnstattzh(Chinesisch)
ISO 639-1-Codes sind immer zweistellig. Eine vollständige Liste finden Sie auf der offiziellen ISO-Website.
Testing-Tools für hreflang
Google Search Console
Die Search Console meldet hreflang-Fehler unter „Internationale Ausrichtung" (nur für ältere Search Console-Versionen prominent). Aktuelle Fehler erscheinen auch in der URL-Überprüfung.
Hreflang Testing Tools
Kostenlose Online-Tools zur hreflang-Überprüfung:
- hreflang.org Checker: Analysiert eine URL und prüft alle hreflang-Verbindungen
- Ahrefs Site Audit: Erkennt fehlende Return-Tags und ungültige Codes
- Screaming Frog SEO Spider: Umfassende technische Analyse inklusive hreflang
Manuelle Überprüfung
Für die Spot-Prüfung: Öffnen Sie den Quellcode einer wichtigen Seite und suchen Sie nach hreflang. Prüfen Sie, ob alle Sprachvarianten aufgeführt sind und die URLs korrekt und erreichbar sind.
Hreflang in Next.js (App Router)
Für ein Next.js-Projekt mit next-intl oder ähnlicher i18n-Lösung lassen sich hreflang-Tags automatisch generieren:
// app/[locale]/layout.tsx
export async function generateMetadata({ params }) {
const { locale } = params;
const canonicalUrl = `https://pakumedia.de/${locale}`;
return {
alternates: {
canonical: canonicalUrl,
languages: {
'de': 'https://pakumedia.de/de',
'en': 'https://pakumedia.de/en',
'x-default': 'https://pakumedia.de',
},
},
};
}
Next.js 15 generiert daraus automatisch die korrekten <link rel="alternate" hreflang="..."> Tags im HTML Head.