SEO//12 Min. Lesezeit

hreflang Tags: Der vollständige Implementierungsleitfaden für mehrsprachiges SEO

Eray Gündoğmuş
Teilen
Inhaltsverzeichnis

hreflang Tags: Der vollständige Implementierungsleitfaden für mehrsprachiges SEO

Wenn Sie eine Website in mehr als einer Sprache betreiben oder Nutzer in verschiedenen Ländern ansprechen, sind hreflang-Tags das wichtigste technische SEO-Signal, das Sie implementieren können. Setzen Sie sie richtig ein, und Google liefert jedem Nutzer die korrekte Sprachversion. Setzen Sie sie falsch ein, und Sie riskieren Duplicate-Content-Strafen, Kannibalisierung zwischen Ihren eigenen Seiten und sinkende Rankings in Regionen, die Sie aktiv bedienen möchten.

Dieser Leitfaden behandelt das gesamte Thema: was hreflang-Tags tatsächlich bewirken, die drei Implementierungsmethoden, jedes gängige Muster, auf das Sie in der Praxis stoßen werden, Framework-spezifische Code-Snippets für moderne JavaScript-Stacks, die Fehler, die Implementierungen lautlos brechen, und die Tools, die Sie benötigen, um alles vor dem Launch zu validieren.

TL;DR / Wichtigste Erkenntnisse

  • hreflang ist ein HTML-Attribut, das Google mitteilt, welche Sprach- oder Regionalvariante einer Seite für eine bestimmte Zielgruppe ausgeliefert werden soll. Bing verwendet hreflang nicht — es verlässt sich auf andere Signale wie Content-Language HTTP-Header und Geolokationsdaten.
  • Jede Seite in einem hreflang-Set muss einen selbstreferenzierenden Tag enthalten, der auf sich selbst zeigt, zusätzlich zu Tags, die auf alle anderen Varianten zeigen.
  • hreflang-Beziehungen müssen bidirektional sein: Wenn Seite A Seite B als Variante deklariert, muss Seite B auch Seite A als Variante deklarieren. Einseitige Deklarationen werden ignoriert.
  • Der x-default-Wert ist ein Fallback-Bezeichner, kein Sprachcode. Verwenden Sie ihn für Seiten, die als Sprachauswahl, Weiterleitungs-Gateway oder Auffangnetz für nicht übereinstimmende Locales fungieren.
  • hreflang kann an drei Stellen implementiert werden: HTML <link>-Tags im <head>, HTTP-Response-Header oder XML-Sitemaps. Alle drei sind für Google gleichermaßen gültig.

Was sind hreflang-Tags?

hreflang-Tags sind HTML-Annotationen, die Suchmaschinen mitteilen, welche Version einer Seite für Nutzer gedacht ist, die eine bestimmte Sprache sprechen oder sich in einem bestimmten Land befinden. Das Attribut wurde 2011 von Google eingeführt und ist in Googles Search Central-Entwicklerdokumentation unter dem Namen „Google über lokalisierte Versionen Ihrer Seite informieren" dokumentiert.

Das Kernproblem, das hreflang löst, ist die Disambiguierung. Angenommen, Ihre Website existiert auf Englisch unter /en/, auf Deutsch unter /de/ und auf Deutsch speziell für österreichische Nutzer unter /de-at/. Ohne hreflang sieht der Crawler einer Suchmaschine drei Seiten mit im Wesentlichen ähnlichem Inhalt und muss raten, welche für welche Zielgruppe eingestuft werden soll. Er rät oft falsch. Mit hreflang entfernen Sie das Rätselraten und deklarieren die Beziehung explizit.

Wie Google hreflang verwendet

Wenn Google auf hreflang-Annotationen trifft, gruppiert es Seiten in Äquivalenzmengen. Innerhalb einer Menge wählt Google die am besten geeignete Variante für jede Suchanfrage basierend auf der Benutzeroberflächen-Sprache des Nutzers und, in geringerem Maße, seinem Standort aus. Die ausgewählte Variante erscheint in den Suchergebnissen für diesen Nutzer. hreflang garantiert kein Ranking — es teilt Google nur mit, welche Seite für eine bestimmte Zielgruppe bevorzugt werden soll.

hreflang löst auch Duplicate-Content-Probleme. Wenn Google zwei URLs mit identischem oder nahezu identischem Inhalt und gültigen hreflang-Links sieht, die sie verbinden, behandelt es sie als absichtliche regionale Varianten und nicht als zufällige Duplikate.

Google vs. Bing: Ein wichtiger Unterschied

hreflang ist eine Funktion von Google (und Yandex). Bing verwendet hreflang-Tags ausdrücklich nicht. Laut den Bing Webmaster-Richtlinien verwendet Bing folgende Signale, um die Zielsprache und -region einer Seite zu bestimmen:

  • Den Content-Language HTTP-Response-Header
  • Das lang-Attribut am <html>-Element
  • Den geografischen Standort des Servers
  • Die länderspezifische Top-Level-Domain (ccTLD), sofern zutreffend
  • Den Inhalt der Seite selbst

Wenn Bing eine bedeutende Traffic-Quelle für Ihre internationalen Zielgruppen ist, müssen Sie diese Signale unabhängig von Ihrem hreflang-Setup implementieren. Eine gut aufgebaute mehrsprachige Website implementiert typischerweise beides: hreflang für Google und das lang-Attribut am <html> plus Content-Language-Header für Bing. Die beiden Ansätze stehen nicht in Konflikt miteinander.

Syntax und Platzierung

Format für Sprach- und Regionscodes

hreflang-Werte folgen dem durch IETF BCP 47 definierten Format. In der Praxis bedeutet das:

  • Nur Sprache: en, de, fr, ja, zh-Hans, zh-Hant
  • Sprache plus Region: en-US, en-GB, de-AT, fr-CA, pt-BR
  • Sonderwert: x-default

Sprachcodes sind zweistellige ISO 639-1-Codes. Regionscodes sind zweistellige ISO 3166-1 alpha-2-Ländercodes. Das Trennzeichen ist ein Bindestrich, kein Unterstrich. Ein häufiger Fehler ist das Schreiben von en_US (Unterstrich) statt en-US (Bindestrich) — Google ignoriert die Unterstrich-Variante vollständig.

Dies ist die am häufigsten verwendete Methode. Platzieren Sie <link>-Elemente im <head> jeder Seite im hreflang-Set.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Product Page</title>

  <!-- Selbstreferenzierender Tag (erforderlich) -->
  <link rel="alternate" hreflang="en" href="https://example.com/en/product/" />

  <!-- Andere Sprachvarianten -->
  <link rel="alternate" hreflang="de" href="https://example.com/de/product/" />
  <link rel="alternate" hreflang="fr" href="https://example.com/fr/product/" />
  <link rel="alternate" hreflang="de-AT" href="https://example.com/de-at/product/" />

  <!-- Fallback für nicht übereinstimmende Locales -->
  <link rel="alternate" hreflang="x-default" href="https://example.com/product/" />
</head>
<body>
  <!-- Seiteninhalt -->
</body>
</html>

Jede Sprachvariante dieser Seite muss genau denselben Satz von <link>-Tags enthalten. Die deutsche Seite unter /de/product/ muss ebenfalls alle fünf <link>-Elemente enthalten, einschließlich des Tags, der auf /en/product/ zeigt.

Methode 2: HTTP-Response-Header

Für Nicht-HTML-Ressourcen — PDFs sind der häufigste Fall — können Sie keine HTML-Tags einbetten. Stattdessen sendet der Webserver hreflang als Teil des HTTP-Link-Response-Headers.

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Link: <https://example.com/en/product/>; rel="alternate"; hreflang="en",
      <https://example.com/de/product/>; rel="alternate"; hreflang="de",
      <https://example.com/fr/product/>; rel="alternate"; hreflang="fr",
      <https://example.com/product/>; rel="alternate"; hreflang="x-default"

In einer Nginx-Konfiguration:

location /en/product/ {
    add_header Link '<https://example.com/en/product/>; rel="alternate"; hreflang="en", <https://example.com/de/product/>; rel="alternate"; hreflang="de", <https://example.com/fr/product/>; rel="alternate"; hreflang="fr"';
}

HTTP-Header werden vor dem HTML-Body geparst, was sie für Crawler etwas effizienter macht, aber der praktische Ranking-Unterschied ist vernachlässigbar.

Methode 3: XML-Sitemap

Für große Websites mit Tausenden von URLs bieten XML-Sitemaps eine zentralisierte Alternative. Googles Sitemap-Spezifikation unterstützt hreflang über das xhtml:link-Element innerhalb jedes <url>-Blocks.

<?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">

  <!-- Englische Variante -->
  <url>
    <loc>https://example.com/en/product/</loc>
    <xhtml:link rel="alternate" hreflang="en"       href="https://example.com/en/product/" />
    <xhtml:link rel="alternate" hreflang="de"       href="https://example.com/de/product/" />
    <xhtml:link rel="alternate" hreflang="fr"       href="https://example.com/fr/product/" />
    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/product/" />
  </url>

  <!-- Deutsche Variante — gleicher Satz von xhtml:link-Elementen -->
  <url>
    <loc>https://example.com/de/product/</loc>
    <xhtml:link rel="alternate" hreflang="en"       href="https://example.com/en/product/" />
    <xhtml:link rel="alternate" hreflang="de"       href="https://example.com/de/product/" />
    <xhtml:link rel="alternate" hreflang="fr"       href="https://example.com/fr/product/" />
    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/product/" />
  </url>

  <!-- Französische Variante — gleicher Satz von xhtml:link-Elementen -->
  <url>
    <loc>https://example.com/fr/product/</loc>
    <xhtml:link rel="alternate" hreflang="en"       href="https://example.com/en/product/" />
    <xhtml:link rel="alternate" hreflang="de"       href="https://example.com/de/product/" />
    <xhtml:link rel="alternate" hreflang="fr"       href="https://example.com/fr/product/" />
    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/product/" />
  </url>

</urlset>

Die Bidirektionalitätsanforderung gilt auch hier: Jede URL im Set muss als <url>-Eintrag erscheinen, und jeder Eintrag muss den vollständigen Satz von xhtml:link-Elementen einschließlich einer Selbstreferenz auflisten.

Gängige hreflang-Muster

Gleiche Sprache, verschiedene Regionen

Verwenden Sie Sprache-plus-Region-Tags, wenn Sie für dieselbe Sprache in verschiedenen Ländern sinnvoll unterschiedliche Inhalte haben — unterschiedliche Preise, unterschiedliche rechtliche Texte, unterschiedliche Produktverfügbarkeit.

<!-- Amerikanisches Englisch -->
<link rel="alternate" hreflang="en-US" href="https://example.com/us/checkout/" />

<!-- Britisches Englisch -->
<link rel="alternate" hreflang="en-GB" href="https://example.com/uk/checkout/" />

<!-- Australisches Englisch -->
<link rel="alternate" hreflang="en-AU" href="https://example.com/au/checkout/" />

<!-- Fallback für alle anderen englischsprachigen Nutzer -->
<link rel="alternate" hreflang="en" href="https://example.com/en/checkout/" />

Der x-default-Tag

x-default bezeichnet die Seite, die Google Nutzern zeigen soll, deren Sprache mit keiner Ihrer deklarierten Varianten übereinstimmt.

<!-- Sprachspezifische Varianten -->
<link rel="alternate" hreflang="en" href="https://example.com/en/" />
<link rel="alternate" hreflang="de" href="https://example.com/de/" />
<link rel="alternate" hreflang="ja" href="https://example.com/ja/" />

<!-- x-default: wird angezeigt, wenn keine Variante der Sprache des Nutzers entspricht -->
<link rel="alternate" hreflang="x-default" href="https://example.com/" />

x-default ist kein Sprachcode. Verwenden Sie es nicht als Synonym für Englisch.

Selbstreferenzierungsanforderung

Jede Seite in einem hreflang-Set muss einen Tag enthalten, der auf sich selbst zeigt. Das ist nicht optional.

<!-- Auf der /de/-Seite ist die Selbstreferenz der hreflang="de"-Tag -->
<link rel="alternate" hreflang="de" href="https://example.com/de/about/" />
<link rel="alternate" hreflang="en" href="https://example.com/en/about/" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/about/" />

Wenn Seite A Seite B als Alternativversion deklariert, muss Seite B Seite A als Alternativversion deklarieren. Das ist der häufigste stille Fehler bei hreflang-Implementierungen: eine Seite der Beziehung fehlt, weil das Template für diese Sprachvariante nie aktualisiert wurde.

Implementierung in gängigen Frameworks

Next.js (App Router)

Im Next.js App Router verwenden Sie die alternates-Eigenschaft in der generateMetadata-Funktion.

// app/[locale]/product/[slug]/page.tsx
import type { Metadata } from 'next';

type Props = {
  params: { locale: string; slug: string };
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { locale, slug } = params;
  const baseUrl = 'https://example.com';

  return {
    alternates: {
      canonical: `${baseUrl}/${locale}/product/${slug}/`,
      languages: {
        'en': `${baseUrl}/en/product/${slug}/`,
        'de': `${baseUrl}/de/product/${slug}/`,
        'fr': `${baseUrl}/fr/product/${slug}/`,
        'x-default': `${baseUrl}/en/product/${slug}/`,
      },
    },
  };
}

Nuxt 3

Nuxts @nuxtjs/i18n-Modul generiert hreflang-Tags automatisch wenn seo: true gesetzt ist. Für manuelle Steuerung verwenden Sie das useHead-Composable.

// composables/useHreflang.ts
export function useHreflang(slug: string) {
  const baseUrl = 'https://example.com';
  const locales = ['en', 'de', 'fr'];

  useHead({
    link: [
      ...locales.map((locale) => ({
        rel: 'alternate' as const,
        hreflang: locale,
        href: `${baseUrl}/${locale}/${slug}/`,
      })),
      {
        rel: 'alternate' as const,
        hreflang: 'x-default',
        href: `${baseUrl}/en/${slug}/`,
      },
    ],
  });
}

Astro

---
// src/layouts/BaseLayout.astro
interface Props {
  hreflangLinks: Array<{ hreflang: string; href: string }>;
}
const { hreflangLinks } = Astro.props;
---
<html>
  <head>
    {hreflangLinks.map((link) => (
      <link rel="alternate" hreflang={link.hreflang} href={link.href} />
    ))}
  </head>
  <body>
    <slot />
  </body>
</html>

---
// src/pages/[locale]/[slug].astro
export async function getStaticPaths() {
  const baseUrl = 'https://example.com';
  const locales = ['en', 'de', 'fr'];
  const slugs = ['about', 'pricing', 'contact'];

  return locales.flatMap((locale) =>
    slugs.map((slug) => ({
      params: { locale, slug },
      props: {
        hreflangLinks: [
          ...locales.map((l) => ({
            hreflang: l,
            href: `${baseUrl}/${l}/${slug}/`,
          })),
          { hreflang: 'x-default', href: `${baseUrl}/en/${slug}/` },
        ],
      },
    }))
  );
}
const { hreflangLinks } = Astro.props;
---
<BaseLayout hreflangLinks={hreflangLinks}>
  <!-- Seiteninhalt -->
</BaseLayout>

TanStack Start

TanStack Start verwendet dateibasiertes Routing mit createFileRoute. Fügen Sie hreflang-Tags mithilfe des head-Exports ein.

// routes/$locale.product.$slug.tsx
import { createFileRoute } from '@tanstack/start';

const locales = ['en', 'de', 'fr'] as const;
const baseUrl = 'https://example.com';

export const Route = createFileRoute('/$locale/product/$slug')({
  head: ({ params }) => {
    const { locale, slug } = params;

    const hreflangLinks = [
      ...locales.map((l) => ({
        tag: 'link' as const,
        attrs: {
          rel: 'alternate',
          hreflang: l,
          href: `${baseUrl}/${l}/product/${slug}/`,
        },
      })),
      {
        tag: 'link' as const,
        attrs: {
          rel: 'alternate',
          hreflang: 'x-default',
          href: `${baseUrl}/en/product/${slug}/`,
        },
      },
    ];

    return { links: hreflangLinks };
  },
  component: ProductPage,
});

function ProductPage() {
  const { locale, slug } = Route.useParams();
  return <div>{/* Seiteninhalt */}</div>;
}

Frameworks mit eingebautem i18n-Routing, wie Next.js mit @formatjs/intl oder Plattformen wie Better i18n, können hreflang-Output beim Build oder zur Laufzeit automatisch generieren.

Häufige Fehler

Fehlende Selbstreferenz

Jede Seite muss sich selbst deklarieren. Die Selbstreferenz muss exakt dieselbe URL wie der <loc>-Wert in Ihrer Sitemap verwenden.

<!-- FALSCH: /de/-Seite referenziert sich selbst nicht -->
<link rel="alternate" hreflang="en" href="https://example.com/en/about/" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/about/" />

<!-- RICHTIG: /de/-Seite enthält ihre eigene Selbstreferenz -->
<link rel="alternate" hreflang="de" href="https://example.com/de/about/" />
<link rel="alternate" hreflang="en" href="https://example.com/en/about/" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/about/" />

Wenn Sie ein neues Locale hinzufügen, müssen Sie jede vorhandene Seite im Set aktualisieren, um einen Link zur neuen Variante einzuschließen.

Falsche Sprachcodes

Häufige Fehler:

  • en_US statt en-US (Unterstrich vs. Bindestrich)
  • zh wenn Sie zh-Hans (Vereinfacht) oder zh-Hant (Traditionell) meinen
  • pt wenn Sie zwischen pt-PT (Portugal) und pt-BR (Brasilien) unterscheiden müssen
  • Dreistellige ISO 639-2-Codes (zho, deu) statt zweistelliger ISO 639-1-Codes (zh, de)

Vermischen von hreflang mit falschen Canonical-Tags

Der Canonical und die hreflang-Selbstreferenz müssen auf dieselbe URL zeigen.

<!-- FALSCH: Canonical und hreflang-Selbstreferenz stimmen nicht überein -->
<link rel="canonical" href="https://example.com/product/" />
<link rel="alternate" hreflang="en" href="https://example.com/en/product/" />

<!-- RICHTIG: Canonical und Selbstreferenz zeigen auf dieselbe URL -->
<link rel="canonical" href="https://example.com/en/product/" />
<link rel="alternate" hreflang="en" href="https://example.com/en/product/" />

Verwendung von hreflang für nicht gleichwertige Seiten

hreflang deklariert, dass zwei Seiten Übersetzungen oder regionale Varianten voneinander sind. Es für nicht wirklich gleichwertige Seiten zu verwenden lässt Google Ihre Site-Struktur falsch interpretieren.

Validierungstools

Google Search Console

Der Coverage-Bericht zeigt hreflang-Fehler direkt an. Häufige Fehlertypen:

  • Alternate page with proper canonical tag: Korrektes Verhalten, kein echter Fehler.
  • Return tag missing: Die Zielseite verlinkt nicht zurück. Fehlenden Return-Tag hinzufügen.
  • No hreflang tag: Eine Seite wird als Alternativversion referenziert, enthält aber keine hreflang-Tags.

hreflang-Checker-Tools

  • hreflang.org Tag Checker: Überprüft alle Annotationen und Return-Links für eine URL.
  • Aleyda Solis's hreflang Tags Testing Tool: Kostenloses Tool für einzelne URLs.
  • Merkle's hreflang Tag Generator: Generiert korrektes HTML-, HTTP-Header- oder Sitemap-Markup.

Screaming Frog SEO Spider

Für groß angelegte Audits crawlt Screaming Frog die gesamte Website und markiert fehlende Return-Links, ungültige Sprachcodes und nicht übereinstimmende Canonicals.

FAQ

Beeinflusst hreflang Rankings direkt?

Nein. hreflang verhindert Duplicate-Content-Probleme und stellt sicher, dass die richtige Seite für die richtige Zielgruppe konkurriert, was indirekt Click-Through-Rates und Engagement-Signale verbessern kann.

Kann ich hreflang auf einer Site mit einer einzigen Sprache, aber mehreren Ländervarianten verwenden?

Ja. Wenn Sie separate Seiten für englischsprachige Nutzer in den USA, im UK und in Australien mit wirklich unterschiedlichen Inhalten haben, ist die Verwendung von en-US-, en-GB- und en-AU-Tags korrekt.

Wie lange dauert es, bis Google hreflang-Änderungen verarbeitet?

Für die meisten Sites dauert es Tage bis Wochen. Das Einreichen einer aktualisierten XML-Sitemap über die Search Console beschleunigt den Prozess.

Sollte ich hreflang auf jeder Seite implementieren?

Ja. Partielle Implementierungen verursachen Inkonsistenzen, die zu unvorhersehbarem Verhalten führen.

Was passiert, wenn ich hreflang-Fehler habe und nichts unternehme?

Google behandelt fehlerhafte Annotationen als nicht vorhanden und fällt auf seine eigenen Signale zurück. Typischerweise erscheint dann die falsche regionale Variante in Suchergebnissen.

Fazit

hreflang-Tags erfordern Konsistenz auf jeder Seite, jeder Variante und jeder gewählten Methode. Ein einziger fehlerhafter Return-Link oder eine fehlende Selbstreferenz kann Teile Ihres internationalen Targetings lautlos ungültig machen.

Die praktische Checkliste: BCP 47-Codes mit Bindestrichen, immer Selbstreferenz, immer bidirektionale Links, Canonical-Tags abstimmen, mit Screaming Frog und Search Console vor dem Launch validieren.

Für neue Projekte: Framework oder Plattform wählen, das hreflang automatisch als Teil seines i18n-Routings generiert. Für bestehende Sites ist eine XML-Sitemap-Implementierung in der Regel die reibungsloseste Nachrüstung.

Referenzen

Comments

Loading comments...

Ähnliche Beiträge

SEO16m

Wie Suchmaschinen mehrsprachige Inhalte indexieren (und wie AI dabei hilft)

Eray Gündoğmuş
SEO11m

Google Translate Alternativen: Wann Sie ein besseres Tool brauchen

Eray Gündoğmuş
SEO10m

Kostenlose Übersetzungssoftware 2026: Tools, Grenzen und wann sich ein Upgrade lohnt

Eray Gündoğmuş
SEO12m

Online-Übersetzungstools 2026: Kostenlose und kostenpflichtige Optionen im Vergleich

Eray Gündoğmuş

Mehr entdecken

Für Entwickler

Git-first-Lokalisierungstools und SDK-Integrationen

Für Übersetzer

KI-Übersetzung mit Kontext und Glossaren

Für Produktteams

Lokalisierte Produkte schneller ausliefern – ohne Engineering-Aufwand

Alle Funktionen

Vollständiger Überblick über die Möglichkeiten von Better I18N