De komplett Hreflang-Wegwiiser 2026 (mit Next.js Biischpiil)

Dini Website cha technischi perfekt uf Englisch sii und glich für de Grossteil vo de Wält unsichtbar blibe.

Englisch deckt nume 49.7% vom ganze Webinhalt ab (W3Techs, Mai 2026). Das heisst, d'andere Hälfti vom Web lauft in andere Sprache – und ohni s'richtige Signal mues Google rate, weli Version vo dinere Site zu welere Zielgruppe ghört. Dini dütsche Bsuecher überchömed e englischi Site. Si springed ab. Du verlüürsch d'Konversion.

Hreflang isch s'HTML-Attribut, wo das behebt. Und es isch uf de mehrschte mehrsprachige Sites kaputt.

In dem Guide zeiged mir dir, was hreflang isch, wie mer's ohni die üebliche Fehler schriibt, wo die meischte Entwickler stolpere, und genau wie mer's in es Next.js 15 App Router Projekt implementiert – inklusiv de Muster, wo mir bruuched, wenn mir 10 Sprachvariante über mehrsprachigi Builds verwaltet.

Wichtigi Erkenntniss

• 58% vo mehrsprachige Websites händ interni hreflang-Konflikt im Quellcode (Semrush, 2023)
• 76% vo Online-Iichäufer bevorzuged es, in ihrer Muetersprach z'chaufe – 40% chaufed gar nöd uf ere Site in ere andere Sprach (CSA Research, 2020)
• Google behandelt hreflang als en Hiwiis, nöd als en Befehl – unzuverlässigi Tags werded ignoriert, aber s'Problem mit doppeltem Inhalt blibt
• Im Next.js 15 App Router isch alternates.languages innerhalb vo generateMetadata() die korrekt Implementierigs-Methode ohni Abhängigkeite
• 96% vo Sites mit hreflang-Konflikt fehlt de selbstverwiisendi Tag – e eifachi Uslassig macht de ganz Cluster kaputt (Semrush, 2023)

Was isch Hreflang und warum isch es wichtig für dini Rankings?

Nume 25.9% vo de Internetnutzer stöbered hauptsächlich online uf Englisch (Internet World Stats via Wikipedia, 2025). Gliechwohl isch Googles Ufgab, jedem Nutzer Inhalt in sinere eigene Sprach z'liefere – und ohni hreflang mues es nur us Kontext-Signal rate. Hreflang isch es HTML -Attribut, wo Google gnau säit, weli Sprach- und Regionalversion vo ere Site welere Nutzer z'zeige isch.

D'Grundsyntax gseht so us:

``html ``

Dä Block mues uf allne Sprachversione vo de Site erschiine – inklusiv de englische Version, wo uf sich selber verwiist. Verpassisch du die Selbstverwiisig uf ere einzige Site, wird de ganz hreflang-Cluster für die URL in Googles Auge unzuverlässig.

Warum isch es wichtig, das richtig z'mache, für de kommerzielli Erfolg? E Umfrog vo CSA Research bi 8'709 Konsumente in 29 Länder hät zeigt, dass 76% es bevorzuged, Produkt mit Informatione in ihrer Muetersprach z'chaufe, und 65% würded e Site in ihrer Muetersprach wähle, au wenn d'Übersetzigsqualität tüüfer isch als bi ere englische Alternative (CSA Research "Can't Read, Won't Buy", 2020). Hreflang hilft nöd nur bi de Rankings – es bestimmt, ob übersetzte Traffic konvertiert.

D'58% interni Konfliktrate isch uffällig, aber d'Grundursach isch fascht immer die gliichi: Entwickler füeged hreflang zum englische Site-Template hii und vergässed, de ganz Cluster uf de übersetzte Site z'spiegle. E fehlendi Selbstverwiisig uf de dütsche Site macht d'Verbindig ungültig, wo Google bruucht, um z'bestätige, dass die englische und dütsche Site echti Variante voneinander sind – nöd Duplikat.

Wie bruucht Google Hreflang würklich?

Do isch, was die meischte hreflang-Guides vergässed: Google hät bestätigt, dass hreflang-Tags als Hiwiis, nöd als Befehl behandelt werded. Google wird kaputti hreflang nöd bestraafe – es wird Tags, wo es als unzuverlässig erachtet, stillschwigend ignoriere. D'Gfohr isch, was ohni de Hiwiis passiert: Google behandelt dini Sprachvariante als separati Site, wo um s'gliiche Keyword konkurriered, zeigt d'Suchende oft die falschi Sprach oder schafft e selbstkonkurrierendi Duplikat-Inhalt-Situation.

D'reziproki Aforderig isch d'Hauptregel. Jede Sprachversion vo ere Site mues hreflang-Tags enthalte, wo uf alli andere Versione verwiised, inklusiv sich selber. Wenn dini englischi Site uf d'dütschi Site verlinkt, aber d'dütschi Site nöd zrugg uf d'englischi Site verlinkt, isch de Cluster kaputt.

Was Google bi jedem hreflang-Tag validiert: - De hreflang-Wert stimmt mit de tatsächliche Sprach vo de verlinkte Site übere - De href isch die absolut kanonischi URL – relativi URLs schläged stillschwigend fehl - Alli Site im Cluster verwiised bidirektional uf enand

E Sprach-Diskrepanz – hreflang="de" uf ere Site z'deklariere, wo tatsächli uf Englisch isch – signalisiert Google, dass dini ganz hreflang-Iistellig unzuverlässig sii könnt. D'Semrush-Studie hät gfundä, dass 21% vo mehrsprachige Sites das Problem händ (Semrush, 2023). Das passiert normalerwiis, wenn e Site no nöd übersetzt worde isch, aber gliechwohl hreflang-Tags uf de englischi Inhalt verwiised.

Wie mer Hreflang-Attribute korrekt schriibt

De fehleranfälligschti Teil vo hreflang isch nöd de Attributname – es isch de Sprachcode-Wert. E Semrush-Studie hät gfundä, dass 15% vo mehrsprachige Sites ungültigi hreflang-Code-Format bruuched, normalerwiis dur Verwechslig vom Trennzeichä oder Verwechslig vo Sprach- und Ländercodes (Semrush, 2023).

D'Regle: - Bruuch ISO 639-1 zweibuechstabiigi Sprachcodes: en, de, fr, sv - Optional kombiniere mit ISO 3166-1 Alpha-2 Ländercodes mit emene **Bindestrich**: en-GB, de-CH, pt-BR - **Niemals Underlines bruuche** – en_US isch falsch; en-US isch richtig - Immer x-default für d'Fallback-Site iischliesse

Gmeinti Sprach	Korrekt hreflang	Üeblichi falschi Wert
English (global)	en	en-EN, english
English (UK)	en-GB	en_GB, eng-UK
German (Germany)	de	ger, de_DE with underscore
German (Switzerland)	de-CH	ch, de_CH with underscore
Swedish	sv	sw, swe
Norwegian Bokmål	nb	no
Portuguese (Brazil)	pt-BR	pt_BR with underscore
Fallback / selector	x-default	default, x_default

D'schwedische und norwegische Iiträg werded am meischte missverstande. De ISO 639-1 Code für Schwedisch isch sv, nöd sw. Norwegisch hät zwei schriftlichi Standard: nb (Bokmål) und nn (Nynorsk). Die meischte norwegische Sites sötted nb bruuche. no in hreflang z'bruuche isch technischi inkorrekt – es entspricht keinem gültige IANA Sprach-Subtag.

Schwiizerdütsch verdient e eigeti Notiz: ch isch de Ländercode vo de Schwiiz, nöd en Sprachcode. De hreflang-Wert für Schwiizerdütsche Inhalt isch de-CH. ch allei als hreflang-Wert z'bruuche isch ungültig und wird ignoriert.

Wie mer Hreflang im Next.js 15 App Router implementiert

De App Router vo Next.js 15 macht d'hreflang-Implementierig sauber und framework-nativ – kei Dritt-Aabieter-SEO-Paket nötig. Mir verwalted 10 Sprachvariante über üsi mehrsprachige Builds (Englisch, Finnisch, Französisch, Dütsch, Italienisch, Norwegisch, Schwiizerdütsch, Serbisch, Spanisch und Schwedisch) und s'Muster under isch das, wo mir in Produktion bruuched.

De Schlüssel isch s'Fäld alternates.languages innerhalb vo generateMetadata(). Next.js rendert es automatisch als Tags im , ohni dass e eigeti Rendierig nötig isch.

Schritt 1: E expliziti Sprachcode-Zuordnig erstelle

Dini interne URL-Sprachschlüssel stimmed nöd immer mit de ISO hreflang-Codes übere. Erstell e expliziti Map, um Runtime-Fehler z'vermeide:

``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 echti Produktions-Falle: De hreflang-Wert vo Norwegisch isch nb, nöd no. Und de ISO-Code vo Schwedisch isch sv – sw (wo intern als DB-Tabellepräfix praktisch isch) im hreflang-Attribut z'bruuche isch ungültig. Die expliziti Map verhindert, dass die Fehler in Produktion glanded.

Schritt 2: E zentralisierte getAlternates-Helfer erstelle

```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: I generateMetadata() bruuche

Für d'englischi Site:

```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 Sprachvariante:

```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 s'Objekt alternates.languages automatisch in de volli Satz vo Tags. Jede Sprach, inklusiv de Selbstverwiisig für die aktuelli Site, wird korrekt rendert, solang d'Zuordnig vollständig isch.

Gemäss ere Umfrog vo DeepL und Regina Corso Consulting bi führende Marketer in de USA, Dütschland, Japan und Frankriich händ 96% e positive ROI us Übersetzigs- und Lokalisierigs-Ufwänd gmeldet, und 65% händ e Rendite vo 3x oder meh gmeldet (BusinessWire, 2024). De technischi Ufwand für korrekt hreflang isch bescheide im Vergliich zum Iikomme, wo dahinter steckt.

Weli Hreflang-Methode söttisch bruuche?

Es git drei Mögliichkeite, hreflang z'deklariere: HTML Tags, XML Sitemap-Iiträg oder HTTP Response Headers. Alli drei sind für Google gültig – d'richtigi Wahl hängt vo dim Stack und dim Inhaltvolumä ab.

Methode	How it works	Best for
HTML tags	injected in each page's	Next.js App Router via generateMetadata()
XML sitemap	inside each block in sitemap.xml	CMS-managed sites, large page volumes
HTTP headers	Link: header in the server response	Non-HTML content (PDFs, JSON endpoints)

Für Next.js isch de generateMetadata()-Aasatz de richtig Standard. Er haltet hreflang-Deklaratione zäme mit de Site-Logik, wird bi de Build-Zit typ-prüeft und bruucht kei separati Sitemap-Wartig. De Sitemap-Aasatz isch e nützlichi Ergänzig uf grosse Sites, sött aber nöd die einzigi Quelle für hreflang sii, wenn s'Framework es nativ handhabt.

E Sache, wo erwähnenswert isch: Du chasch hreflang sowohl in de Tags als au in de Sitemap uf de gliiche Site deklariere. Google akzeptiert beides und sie kollidiered nöd. Aber zwei Quelle vo Wohrheit für die gliiche Date z'pflege isch öppis, wo mer sött vermeide – halt es in generateMetadata() und loh d'Sitemap d'Crawl-Priorität separat handhabe.

Wie mer dini Hreflang-Iistellig testet und validiert

Hreflang z'implementiere isch d'Hälfti vo de Arbet. Z'validiere, dass Google es korrekt übernoh hät, isch die ander Hälfti. Die vier Tools decked verschiedeni Fehlerarte ab – bruuch mindeschtens zwei.

Google Search Console – International Targeting Report Nach de Implementierig, öffne GSC → Legacy tools → International Targeting. Es zeigt a, weli Sprachvariante Google indexiert hät und markiert alli gfunde hreflang-Konfigurationsfehler. Das isch dini Grundwahrheit – wenn GSC e Sprach- oder Regionsflagge zeigt, untersuech das, bevor du öppis anders machsch.

Semrush Site Audit Füehr es volls Audit dure und filter uf hreflang-Problem. Semrush finded fehlendi Selbstverwiisigä, kaputti hreflang-URLs und Sprach-Diskrepanze – die drei üeblichschte Fehlerarte bi 20'000 gtestete Sites.

Ahrefs Site Audit Ahrefs meldet, weli Site in emene komplette hreflang-Cluster fehled, was wertvoll isch, wenn du 10 Sprache hesch und bestätige muesch, dass jede Variant alli andere chreuzverwiist. Es finded Lücke, wo Semrush mängisch übersiht.

hreflang.org – gratis Einzel-URL-Checker Füeg e URL ii, la dir alli hreflang-Tags aazeige und überprüef, ob de Cluster reziprok isch. Schnell für eifachi Stichprobe während de Entwicklig vor emene volle Site-Audit.

E Sache, wo Audit-Tools nöd erwütsched: hreflang, wo technischi gültig, aber semantisch falsch isch. Wenn du hreflang="de-CH" uf ere Site deklariersch, wo generische dütsche Inhalt statt Schwiizerdütsche Inhalt aabietet, bestahd de Tag jede Validator. Aber Google schliesst schliesslich us Verhaltenssignal, dass Schwiizer Nutzer nöd guet bedient werded, und s'Vertraue in din hreflang-Cluster nimmt mit de Zit ab. Technischi Validierig isch nur d'Grundlag – de Inhalt mit em deklarierte Gebiet z'vergliiche isch s'eigentlich Ziel.

---

Mir boued mehrsprachigi Next.js Sites mit kompletter hreflang-Implementierig vom erschte Tag a – korrekt Sprachcode-Zuordnig, übersetzti Sitemaps, sprachspezifischs Schema-Markup und strukturierti hreflang-Audits nach em Launch. Nimm Kontakt uf, um dis Projekt z'bespräche, oder lueg üsi Priise für mehrsprachigi Entwickligs- und SEO-Paket a.

---

Häufigi Frogä

Was isch hreflang und was macht es?

Hreflang isch es HTML Link-Attribut, wo Google säit, weli Sprachversion vo ere Site Nutzer in spezifische Regionä oder Sprache z'zeige isch. Korrekt Implementierig verhindert, dass Google die falschi Sprachversion zeigt, reduziert d'Absprungrate und vermeidet Duplikat-Inhalt-Strafä über Sprachvariante hiweg.

Verbessert hreflang d'Google Rankings direkt?

Google behandelt hreflang als en Hiwiis, nöd als en Befehl – es ignoriert Tags, wo es als unzuverlässig erachtet. Korrekt Implementierig verhindert, dass Suchendä die falschi Sprach zeigt wird, reduziert d'Absprungrate und verbessert d'Engagement-Signal, wo d'Rankings indirekt erhöhed. Kaputti hreflang schafft e Duplikat-Inhalt-Konkurrenz zwüsched dine eigene Sprachvariante.

Weli sind die üeblichschte hreflang-Fehler?

E Semrush-Studie vo 20'000 mehrsprachige Websites hät gfundä, dass 58% interni Quellcode-Konflikt händ, 37% uf kaputti oder umgleiteti URLs verlinked, 21% e Sprach-Diskrepanz zwüsched em deklarierte hreflang-Wert und de tatsächliche Site-Sprach händ, und 15% ungültigi Sprach- oder Ländercodes bruuched (Semrush, 2023).

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

In Next.js 15 exportier e alternates.languages-Objekt us generateMetadata(). Bruuch ISO 639-1 Sprachcodes als Schlüssel und absoluti kanonischi URLs als Wert. Schliess x-default ii, wo uf dis Standard-Gebiet verwiist. Next.js rendert die automatisch als Tags im Dokument-Head – kei separati Rendierig oder Dritt-Aabieter-Bibliothek nötig.

Für was wird x-default hreflang bruucht?

x-default bezeichnet e Fallback-Site für Nutzer, dere Sprach oder Region nöd mit dine deklarierte hreflang-Wärt übereinstimmt. Es isch typischerwiis die englischi Version oder e Sprachwähler-Landingpage. Schliess es immer ii – es signalisiert Google, dass du Bsuecher us nöd ufglischtete Gebiet bewusst berücksichtigt hesch, anstatt de Tag eifach z'vergässe.

Fazit

Hreflang isch eis vo dene technische SEO-Element, wo eifach isch, teilwiis richtig z'mache, aber schwirig, ganz richtig z'mache. D'Syntax isch eifach, aber d'Fehlerarte – fehlendi Selbstverwiisigä, relativi URLs, inkorrekt ISO-Codes, nöd-reziproki Links zwüsched Sprachvariante – sind subtil und erschiined nöd als sichtbari Fehler, bis du d'falschi Sprach in em falsche Märet ranke gsehsch.

Im Next.js 15 handhabt d'API alternates.languages in generateMetadata() d'Rendierig sauber und ohni zuesätzliche Paket. D'eigentlichi Investition isch in de Mapping-Schicht: sicherstelle, dass jede interne Sprachschlüssel zu emene gültige ISO hreflang-Code aufgelöst wird, und dass die kanonische URLs, wo du übergisch, absolut sind und uf die Site verwiised, wo tatsächli indexiert wird.

Wenn du e mehrsprachigi Next.js Site bouwsch und e Überprüefig vo dinere hreflang-Iistellig wünschsch, nimm Kontakt uf – mir finded gnau use, weli Cluster Problem händ, bevor Google sie markiert.