hreflang: Wann du es brauchst und wie du es richtig setzt

Brauchst du hreflang überhaupt?

Für die meisten lautet die Antwort nein. Eine Bäckerei in Passau oder ein Steuerbüro in Köln hat eine Sprache und ein Publikum. Google erkennt die Sprache am Inhalt, dafür braucht es keine Zusatzangabe. Wer hier hreflang einbaut, hat nur mehr Code, in dem sich Fehler verstecken können.

Sinnvoll wird es, sobald dieselbe Seite in mehreren Fassungen existiert:

• ·Deutsch und Englisch, etwa für ein Hotel mit vielen Gästen aus dem Ausland.
• ·Getrennte deutsche Fassungen für Deutschland, Österreich und die Schweiz mit unterschiedlichen Preisen, Währungen oder Versandbedingungen.
• ·Ein Shop, der in mehreren Ländern mit eigenen Adressen verkauft.

Was hreflang leistet und was nicht

hreflang sorgt dafür, dass ein Kunde in Zürich die Schweizer Fassung mit Franken-Preisen angezeigt bekommt und nicht die deutsche. Es ist ein Hinweis an Google. Google kann trotzdem eine andere Version zeigen, wenn es die für passender hält.

Das lang-Attribut im <html>-Element ersetzt hreflang nicht. Google nutzt es nach eigener Aussage nicht, um die Sprache einer Seite zu bestimmen. Für Screenreader ist es trotzdem Pflicht, siehe Sprachangabe.

So prüfst du es selbst

Such im Quelltext (Strg+U) nach hreflang. Jede Sprachversion muss auf alle anderen verweisen und auf sich selbst. Fehlt der Rückverweis, ignoriert Google die Angabe für dieses Paar. Kontrollier das auf zwei oder drei Seiten pro Sprache, bei großen Seiten hilft ein Crawler wie Screaming Frog.

Im kostenlosen Check zeigt checkfrei nur an, ob hreflang-Angaben gefunden wurden. Das fließt nicht in die Punktzahl ein, eine einsprachige Seite verliert also nichts. Rückverweise und Sprachcodes prüft der Check nicht.

So setzt du es richtig

Jede Fassung bekommt im <head> denselben Block mit allen Versionen, sich selbst eingeschlossen. x-default nennt die Seite für alle, die zu keiner Sprache passen, oft die englische Fassung oder eine Sprachauswahl.

<link rel="alternate" hreflang="de-DE" href="https://www.example.com/de-de/">
<link rel="alternate" hreflang="de-AT" href="https://www.example.com/de-at/">
<link rel="alternate" hreflang="de-CH" href="https://www.example.com/de-ch/">
<link rel="alternate" hreflang="en" href="https://www.example.com/en/">
<link rel="alternate" hreflang="x-default" href="https://www.example.com/en/">

export const metadata = {
  alternates: {
    canonical: 'https://www.example.com/de/',
    languages: {
      de: 'https://www.example.com/de/',
      en: 'https://www.example.com/en/',
      'x-default': 'https://www.example.com/en/',
    },
  },
};

Typische Fehler

Die Codes folgen festen Normen: zuerst die Sprache nach ISO 639-1 (de, en), optional dahinter das Land nach ISO 3166-1 (AT, CH). Ein Land allein ist ungültig, und Großbritannien heißt GB, nicht UK. Daneben sehe ich diese Fehler am häufigsten:

• ·Fehlende Rückverweise: Die deutsche Seite nennt die englische, die englische aber nicht die deutsche.
• ·Ein Canonical-Tag, das bei allen Sprachversionen auf die deutsche zeigt. Dann widersprechen sich die Angaben. Jede Fassung braucht ihr eigenes Canonical.
• ·hreflang zeigt auf Adressen, die weiterleiten, auf noindex stehen oder 404 liefern.
• ·Automatische Weiterleitung nach Browsersprache. Googlebot crawlt überwiegend aus den USA und sieht dann womöglich nie die deutsche Fassung.