Der vollständige Hreflang-Leitfaden 2026 (mit Next.js-Beispielen)

Ihre Website kann technisch perfekt in Englisch sein und trotzdem für den Großteil der Welt unsichtbar bleiben.

Englisch deckt nur 49,7 % aller Webinhalte ab (W3Techs, Mai 2026). Das bedeutet, die andere Hälfte des Webs operiert in anderen Sprachen – und ohne das richtige Signal muss Google raten, welche Version Ihrer Seite zu welchem Publikum gehört. Ihre deutschen Besucher erhalten eine englische Seite. Sie springen ab. Sie verlieren die Konversion.

Hreflang ist das HTML-Attribut, das dies behebt. Und es ist auf den meisten mehrsprachigen Websites fehlerhaft.

In diesem Leitfaden erklären wir, was hreflang ist, wie man es ohne die häufigen Fehler schreibt, die die meisten Entwickler stolpern lassen, und wie man es genau in einem Next.js 15 App Router-Projekt implementiert – einschließlich der Muster, die wir beim Verwalten von 10 Sprachvarianten über mehrsprachige Builds hinweg verwenden.

Wichtige Erkenntnisse

• 58 % der mehrsprachigen Websites weisen interne hreflang-Konflikte im Quellcode auf (Semrush, 2023)
• 76 % der Online-Käufer bevorzugen es, in ihrer Muttersprache einzukaufen – 40 % kaufen überhaupt nicht auf einer Website in einer anderen Sprache (CSA Research, 2020)
• Google behandelt hreflang als Hinweis, nicht als Anweisung – unzuverlässige Tags werden ignoriert, aber das Problem des doppelten Inhalts bleibt bestehen
• Im Next.js 15 App Router ist alternates.languages innerhalb von generateMetadata() die korrekte Implementierungsmethode ohne Abhängigkeiten
• 96 % der Websites mit hreflang-Konflikten fehlt der selbstverweisende Tag – eine einfache Auslassung bricht den gesamten Cluster (Semrush, 2023)

Was ist Hreflang und warum ist es wichtig für Ihr Ranking?

Nur 25,9 % der Internetnutzer surfen hauptsächlich online auf Englisch (Internet World Stats via Wikipedia, 2025). Doch Googles Aufgabe ist es, jedem Nutzer Inhalte in seiner eigenen Sprache zu liefern – und ohne hreflang muss es allein aus Kontextsignalen raten. Hreflang ist ein HTML--Attribut, das Google genau mitteilt, welche Sprach- und Regionalversion einer Seite welchem Nutzer angezeigt werden soll.

Die grundlegende Syntax sieht so aus:

``html ``

Dieser Block muss auf allen Sprachversionen der Seite erscheinen – einschließlich der englischen Version, die auf sich selbst verweist. Wenn dieser Selbstverweis auf einer einzelnen Seite fehlt, wird der gesamte hreflang-Cluster für diese URL in Googles Augen unzuverlässig.

Warum führt die korrekte Umsetzung zu kommerziellen Erfolgen? Eine CSA Research-Umfrage unter 8.709 Verbrauchern in 29 Ländern ergab, dass 76 % es vorziehen, Produkte mit Informationen in ihrer Muttersprache zu kaufen, und 65 % würden eine muttersprachliche Seite wählen, selbst wenn die Übersetzungsqualität niedriger ist als bei einer englischsprachigen Alternative (CSA Research "Can't Read, Won't Buy", 2020). Hreflang hilft nicht nur beim Ranking – es entscheidet, ob übersetzter Traffic konvertiert.

Die interne Konfliktrate von 58 % ist frappierend, aber die Ursache ist fast immer dieselbe: Entwickler fügen hreflang der englischen Seitenvorlage hinzu und vergessen, den vollständigen Cluster auf den übersetzten Seiten zu spiegeln. Ein fehlender Selbstverweis auf der deutschen Seite invalidiert die Verbindung, die Google benötigt, um zu bestätigen, dass die englische und die deutsche Seite echte Varianten voneinander sind – und keine Duplikate.

Wie verwendet Google Hreflang tatsächlich?

Das ist es, was die meisten hreflang-Anleitungen übersehen: Google bestätigte, dass hreflang-Tags als Hinweise, nicht als Anweisungen behandelt werden. Google bestraft fehlerhaftes hreflang nicht – es ignoriert stillschweigend Tags, die es für unzuverlässig hält. Die Gefahr liegt darin, was ohne den Hinweis passiert: Google behandelt Ihre Sprachvarianten als separate Seiten, die um dasselbe Keyword konkurrieren, zeigt Suchenden oft die falsche Sprache an oder schafft eine sich selbst konkurrierende Situation mit doppeltem Inhalt.

Die reziproke Anforderung ist die Kernregel. Jede Sprachversion einer Seite muss hreflang-Tags enthalten, die auf alle anderen Versionen verweisen, einschließlich sich selbst. Wenn Ihre englische Seite auf die deutsche Seite verlinkt, die deutsche Seite aber nicht auf die englische Seite zurückverlinkt, ist der Cluster fehlerhaft.

Was Google bei jedem hreflang-Tag validiert: - Der hreflang-Wert stimmt mit der tatsächlichen Sprache der verlinkten Seite überein - Der href ist die absolute kanonische URL – relative URLs schlagen stillschweigend fehl - Alle Seiten im Cluster verweisen bidirektional aufeinander

Eine Sprachinkongruenz – die Deklaration von hreflang="de" auf einer Seite, die tatsächlich auf Englisch ist – signalisiert Google, dass Ihr gesamtes hreflang-Setup unzuverlässig sein könnte. Die Semrush-Studie ergab, dass 21 % der mehrsprachigen Websites dieses Problem haben (Semrush, 2023). Dies geschieht normalerweise, wenn eine Seite noch nicht übersetzt wurde, aber immer noch hreflang-Tags enthält, die auf den englischen Inhalt verweisen.

Wie man Hreflang-Attribute korrekt schreibt

Der fehleranfälligste Teil von hreflang ist nicht der Attributname – es ist der Sprachcodewert. Eine Semrush-Studie ergab, dass 15 % der mehrsprachigen Websites ungültige hreflang-Codeformate verwenden, meistens durch Verwechslung des Trennzeichens oder Vermischung von Sprach- und Ländercodes (Semrush, 2023).

Die Regeln: - Verwenden Sie ISO 639-1 zweibuchstabige Sprachcodes: en, de, fr, sv - Optional kombinieren Sie mit ISO 3166-1 Alpha-2 Ländercodes mit einem Bindestrich: en-GB, de-CH, pt-BR - Verwenden Sie niemals Unterstriche – en_US ist falsch; en-US ist korrekt - Fügen Sie immer x-default für die Fallback-Seite hinzu

| Beabsichtigte Sprache | Korrekter hreflang-Wert | Häufig falscher Wert | |---|---|---| | Englisch (global) | en | en-EN, english | | Englisch (UK) | en-GB | en_GB, eng-UK | | Deutsch (Deutschland) | de | ger, de_DE mit Unterstrich | | Deutsch (Schweiz) | de-CH | ch, de_CH mit Unterstrich | | Schwedisch | sv | sw, swe | | Norwegisch Bokmål | nb | no | | Portugiesisch (Brasilien) | pt-BR | pt_BR mit Unterstrich | | Fallback / Auswahl | x-default | default, x_default |

Die schwedischen und norwegischen Einträge werden am häufigsten missverstanden. Der ISO 639-1-Code für Schwedisch ist sv, nicht sw. Norwegisch hat zwei Schriftsprachen: nb (Bokmål) und nn (Nynorsk). Die meisten norwegischen Websites sollten nb verwenden. Die Verwendung von no in hreflang ist technisch inkorrekt – es entspricht keinem gültigen IANA-Sprachuntertag.

Schweizerdeutsch verdient eine eigene Anmerkung: ch ist der Ländercode der Schweiz, nicht ein Sprachcode. Der hreflang-Wert für schweizerdeutsche Inhalte ist de-CH. Die alleinige Verwendung von ch als hreflang-Wert ist ungültig und wird ignoriert.

So implementieren Sie Hreflang im Next.js 15 App Router

Der App Router von Next.js 15 macht die hreflang-Implementierung sauber und framework-nativ – es werden keine Drittanbieter-SEO-Pakete benötigt. Wir verwalten 10 Sprachvarianten über unsere mehrsprachigen Builds (Englisch, Finnisch, Französisch, Deutsch, Italienisch, Norwegisch, Schweizerdeutsch, Serbisch, Spanisch und Schwedisch) und das untenstehende Muster ist das, was wir in der Produktion verwenden.

Der Schlüssel ist das Feld alternates.languages innerhalb von generateMetadata(). Next.js rendert es automatisch als -Tags im , ohne dass ein benutzerdefiniertes Rendering erforderlich ist.

Schritt 1: Eine explizite Sprachcode-Zuordnung erstellen

Ihre internen URL-Sprachschlüssel stimmen nicht immer mit den ISO-hreflang-Codes überein. Erstellen Sie eine explizite Zuordnung, um Laufzeitfehler zu vermeiden:

``typescript // src/lib/hreflang.ts export const HREFLANG_CODE: Record = { en: 'en', fi: 'fi', fr: 'fr', de: 'de', it: 'it', no: 'nb', // Norwegian Bokmål — ISO hreflang code is nb, not no ch: 'de-CH', // Swiss German — URL prefix /ch, hreflang value de-CH sr: 'sr', es: 'es', sw: 'sv', // Swedish — internal key sw, ISO hreflang code sv }; ``

Zwei echte Fallstricke in der Produktion: Der hreflang-Wert für Norwegisch ist nb, nicht no. Und der ISO-Code für Schwedisch ist sv – die Verwendung von sw (was intern als DB-Tabellenpräfix praktisch ist) im hreflang-Attribut ist ungültig. Diese explizite Zuordnung verhindert, dass diese Fehler in die Produktion gelangen.

Schritt 2: Einen zentralisierten getAlternates-Helfer erstellen

```typescript // src/lib/hreflang.ts (continued) const BASE_URL = 'https://fridamarketing.com'; const LANG_CODES = ['fi', 'fr', 'de', 'it', 'no', 'ch', 'sr', 'es', 'sw']; // URL prefix for each lang key (ch → no prefix needed? no → /no) const LANG_URL: Record = { fi: 'fi', fr: 'fr', de: 'de', it: 'it', no: 'no', ch: 'ch', sr: 'sr', es: 'es', sw: 'sv', };

export function getAlternates(routeKey: string, currentLang?: string) { const languages: Record = { en: ${BASE_URL}/${routeKey}, };

for (const lang of LANG_CODES) { const urlPrefix = LANG_URL[lang]; const hreflangCode = HREFLANG_CODE[lang]; languages[hreflangCode] = ${BASE_URL}/${urlPrefix}/${routeKey}; }

const canonical = currentLang ? ${BASE_URL}/${LANG_URL[currentLang] || currentLang}/${routeKey} : ${BASE_URL}/${routeKey};

return { canonical, languages: { ...languages, 'x-default': ${BASE_URL}/${routeKey} }, }; } ```

Schritt 3: Verwendung innerhalb von generateMetadata()

Für die englische Seite:

```typescript // app/about/page.tsx import { getAlternates } from '@/lib/hreflang';

export async function generateMetadata() { return { title: 'About Us | Frida Marketing', description: 'Next.js development and multilingual SEO agency.', alternates: getAlternates('about'), }; } ```

Für Sprachvarianten:

```typescript // app/[lang]/about/page.tsx import { getAlternates } from '@/lib/hreflang';

export async function generateMetadata({ params }: { params: { lang: string } }) { return { title: 'About Us | Frida Marketing', description: 'Next.js development and multilingual SEO agency.', alternates: getAlternates('about', params.lang), }; } ```

Next.js kompiliert das alternates.languages-Objekt automatisch in den vollständigen Satz von -Tags. Jede Sprache, einschließlich des Selbstverweises für die aktuelle Seite, wird korrekt gerendert, solange die Zuordnung vollständig ist.

Laut einer Umfrage von DeepL und Regina Corso Consulting unter leitenden Marketingexperten in den USA, Deutschland, Japan und Frankreich berichteten 96 % über einen positiven ROI aus Übersetzungs- und Lokalisierungsbemühungen, und 65 % berichteten über eine Rendite von 3x oder mehr (BusinessWire, 2024). Der technische Aufwand für korrektes hreflang ist im Vergleich zu den damit verbundenen Einnahmen gering.

Welche Hreflang-Methode sollten Sie verwenden?

Es gibt drei Möglichkeiten, hreflang zu deklarieren: HTML--Tags, XML-Sitemap-Einträge oder HTTP-Antwort-Header. Alle drei sind für Google gültig – die richtige Wahl hängt von Ihrem Stack und dem Umfang Ihrer Inhalte ab.

| Methode | Funktionsweise | Am besten geeignet für | |---|---|---| | HTML -Tags | in den jeder Seite eingefügt | Next.js App Router über generateMetadata() | | XML-Sitemap | innerhalb jedes -Blocks in sitemap.xml | CMS-verwaltete Websites, große Seitenmengen | | HTTP-Header | Link:-Header in der Serverantwort | Nicht-HTML-Inhalte (PDFs, JSON-Endpunkte) |

Für Next.js ist der generateMetadata()-Ansatz die richtige Standardeinstellung. Er hält hreflang-Deklarationen zusammen mit der Seitenlogik, wird zur Build-Zeit typgeprüft und erfordert keine separate Sitemap-Wartung. Der Sitemap-Ansatz ist eine nützliche Ergänzung auf großen Websites, sollte aber nicht die einzige Quelle für hreflang sein, wenn das Framework es nativ handhabt.

Eine Anmerkung ist erwähnenswert: Sie können hreflang sowohl in den -Tags als auch in der Sitemap auf derselben Website deklarieren. Google akzeptiert beides, und sie kollidieren nicht. Aber die Pflege von zwei Wahrheitsquellen für dieselben Daten sollte vermieden werden – behalten Sie es in generateMetadata() und lassen Sie die Sitemap die Crawl-Priorität separat behandeln.

So testen und validieren Sie Ihr Hreflang-Setup

Hreflang zu implementieren ist die halbe Miete. Die Validierung, dass Google es korrekt übernommen hat, ist die andere Hälfte. Diese vier Tools decken verschiedene Fehlerarten ab – verwenden Sie mindestens zwei davon.

Google Search Console – Bericht zur internationalen Ausrichtung Nach der Bereitstellung öffnen Sie GSC → Legacy-Tools → Internationale Ausrichtung. Es zeigt an, welche Sprachvarianten Google indexiert hat, und kennzeichnet alle erkannten hreflang-Konfigurationsfehler. Dies ist Ihre Grundwahrheit – wenn GSC eine Sprach- oder Regionsflagge anzeigt, untersuchen Sie dies zuerst.

Semrush Site Audit Führen Sie ein vollständiges Audit durch und filtern Sie nach hreflang-Problemen. Semrush erkennt fehlende Selbstverweise, fehlerhafte hreflang-URLs und Sprachinkongruenzen – die drei häufigsten Fehlerarten auf 20.000 getesteten Websites.

Ahrefs Site Audit Ahrefs berichtet, welche Seiten in einem vollständigen hreflang-Cluster fehlen, was wertvoll ist, wenn Sie 10 Sprachen haben und bestätigen müssen, dass jede Variante auf alle anderen verweist. Es findet Lücken, die Semrush manchmal übersieht.

hreflang.org – kostenloser Einzel-URL-Checker Fügen Sie eine URL ein, lassen Sie alle hreflang-Tags anzeigen und überprüfen Sie, ob der Cluster reziprok ist. Schnell für einmalige Stichproben während der Entwicklung vor einem vollständigen Site-Audit.

Eine Sache, die Audit-Tools nicht erfassen: hreflang, das technisch gültig, aber semantisch falsch ist. Wenn Sie hreflang="de-CH" auf einer Seite deklarieren, die generische deutsche Inhalte statt schweizerdeutscher Inhalte liefert, bestehen die Tags jeden Validator. Aber Google leitet schließlich aus Verhaltenssignalen ab, dass Schweizer Nutzer nicht gut bedient werden, und das Vertrauen in Ihren hreflang-Cluster nimmt mit der Zeit ab. Die technische Validierung ist nur die Basis – die Abstimmung des Inhalts auf das deklarierte Gebietsschema ist das eigentliche Ziel.

---

Wir erstellen mehrsprachige Next.js-Websites mit vollständiger hreflang-Implementierung von Anfang an – korrekte Sprachcode-Zuordnung, übersetzte Sitemaps, sprachspezifisches Schema-Markup und strukturierte hreflang-Audits nach dem Launch. Kontaktieren Sie uns, um Ihr Projekt zu besprechen, oder sehen Sie sich unsere Preise für mehrsprachige Entwicklungs- und SEO-Pakete an.

---

Häufig gestellte Fragen

Was ist hreflang und was bewirkt es?

Hreflang ist ein HTML-Link-Attribut, das Google mitteilt, welche Sprachversion einer Seite Nutzern in bestimmten Regionen oder Sprachen angezeigt werden soll. Eine korrekte Implementierung verhindert, dass Google die falsche Sprachversion anzeigt, reduziert die Absprungrate und vermeidet Strafen für doppelten Inhalt über Sprachvarianten hinweg.

Verbessert hreflang direkt das Google-Ranking?

Google behandelt hreflang als Hinweis, nicht als Anweisung – es ignoriert Tags, die es für unzuverlässig hält. Eine korrekte Implementierung verhindert, dass Suchenden die falsche Sprache angezeigt wird, reduziert die Absprungrate und verbessert Engagement-Signale, die indirekt das Ranking erhöhen. Fehlerhaftes hreflang führt zu einem Wettbewerb um doppelten Inhalt zwischen Ihren eigenen Sprachvarianten.

Was sind die häufigsten hreflang-Fehler?

Eine Semrush-Studie von 20.000 mehrsprachigen Websites ergab, dass 58 % interne Quellcode-Konflikte aufweisen, 37 % auf fehlerhafte oder weitergeleitete URLs verlinken, 21 % eine Sprachinkongruenz zwischen dem deklarierten hreflang-Wert und der tatsächlichen Seitensprache haben und 15 % ungültige Sprach- oder Ländercodes verwenden (Semrush, 2023).

Wie implementiere ich hreflang im Next.js 15 App Router?

In Next.js 15 exportieren Sie ein alternates.languages-Objekt aus generateMetadata(). Verwenden Sie ISO 639-1-Sprachcodes als Schlüssel und absolute kanonische URLs als Werte. Fügen Sie x-default hinzu, das auf Ihr Standard-Gebietsschema verweist. Next.js rendert diese automatisch als -Tags im Dokument-Head – kein separates Rendering oder eine Drittanbieterbibliothek erforderlich.

Wofür wird x-default hreflang verwendet?

x-default kennzeichnet eine Fallback-Seite für Benutzer, deren Sprache oder Region nicht mit einem Ihrer deklarierten hreflang-Werte übereinstimmt. Es ist typischerweise die englische Version oder eine Sprachauswahl-Landingpage. Fügen Sie es immer hinzu – es signalisiert Google, dass Sie Besucher aus nicht gelisteten Regionen absichtlich berücksichtigt haben, anstatt den Tag einfach zu vergessen.

Fazit

Hreflang ist eines dieser technischen SEO-Elemente, das leicht teilweise richtig und schwer vollständig richtig zu machen ist. Die Syntax ist einfach, aber die Fehlerursachen – fehlende Selbstverweise, relative URLs, inkorrekte ISO-Codes, nicht reziproke Links zwischen Sprachvarianten – sind subtil und treten erst als sichtbare Fehler auf, wenn Sie die falsche Sprache im falschen Markt ranken sehen.

In Next.js 15 handhabt die alternates.languages-API in generateMetadata() das Rendering sauber und ohne zusätzliche Pakete. Die eigentliche Investition liegt in der Zuordnungsschicht: Sicherzustellen, dass jeder interne Sprachschlüssel zu einem gültigen ISO-hreflang-Code aufgelöst wird und dass die von Ihnen übergebenen kanonischen URLs absolut sind und auf die tatsächlich indexierte Seite verweisen.

Wenn Sie eine mehrsprachige Next.js-Website erstellen und eine Überprüfung Ihres hreflang-Setups wünschen, kontaktieren Sie uns – wir identifizieren genau, welche Cluster Probleme haben, bevor Google sie kennzeichnet.