Hreflang in statischen Websites richtig einbinden

Statische Websites und Static Site Generators (Astro, Eleventy, Hugo, Gatsby) haben keine Plugin-Ökosysteme wie WordPress. Wer Hreflang in statischen Websites richtig und korrekt einbinden möchte, muss das manuell oder über Build-Prozesse umsetzen - dieser Artikel zeigt wie. Korrekt implementiert signalisiert Hreflang Google welche Sprachversion für welchen Nutzer relevant ist - und verhindert dass Seiten verschiedener Sprachen als Duplicate Content gewertet werden.

Was Hreflang macht

Hreflang-Tags teilen Suchmaschinen mit: „Diese Seite existiert auch in anderen Sprachen oder für andere Regionen - hier sind die URLs."

Ohne Hreflang: Google kann verschiedene Sprachversionen als Duplicate Content bewerten oder die falsche Version für bestimmte Nutzer ausliefern (z. B. deutsche Version für englischsprachige Nutzer).

Mit Hreflang: Google liefert die korrekte Sprachversion für jeden Nutzer basierend auf Spracheinstellung und Standort.

Mehrsprachige Websites ohne Hreflang riskieren, dass Google ähnliche Sprachversionen als Duplicate Content wertet oder Nutzern die falsche Version ausliefert. Korrektes Hreflang gibt jeder Version ein klares Zielgruppen-Signal.

Hreflang-Syntax

<!-- Im <head> jeder Sprachversion: -->
<link rel="alternate" hreflang="de" href="https://beispiel.de/de/seite/" />
<link rel="alternate" hreflang="en" href="https://beispiel.de/en/page/" />
<link rel="alternate" hreflang="x-default" href="https://beispiel.de/en/page/" />

Wichtige Regeln:

• Alle Sprachversionen verlinken auf ALLE anderen Sprachversionen (nicht nur auf die Hauptversion)
• x-default für die Standard-Seite wenn keine Sprachversion passt (oft Englisch)
• Selbst-Referenz: Jede Seite muss auch auf sich selbst zeigen
• Konsistenz: Wenn die DE-Seite auf die EN-Seite zeigt, muss die EN-Seite auf die DE-Seite zurückzeigen

Implementierung in Astro

Astro ist ein Static Site Generator mit nativer i18n-Unterstützung seit Astro 3:

---
// In layouts/Layout.astro:
interface Props {
  title: string;
  alternateUrls?: {lang: string, url: string}[];
}
const { title, alternateUrls } = Astro.props;
---
<html>
<head>
  <title>{title}</title>
  {alternateUrls?.map(alt => (
    <link rel="alternate" hreflang={alt.lang} href={alt.url} />
  ))}
  {alternateUrls && (
    <link rel="alternate" hreflang="x-default"
          href={alternateUrls.find(a => a.lang === 'en')?.url || alternateUrls[0].url} />
  )}
</head>

---
// In einer Seite:
import Layout from '../layouts/Layout.astro';

const alternateUrls = [
  { lang: 'de', url: 'https://beispiel.de/de/seo-agentur/' },
  { lang: 'en', url: 'https://beispiel.de/en/seo-agency/' },
];
---
<Layout title="SEO-Agentur" alternateUrls={alternateUrls}>
  ...
</Layout>

Implementierung in Hugo

Hugo hat eingebaute Multilingual-Unterstützung die Hreflang automatisch generiert:

# config.toml:
defaultContentLanguage = "de"

[languages]
  [languages.de]
    contentDir = "content/de"
    weight = 1
  [languages.en]
    contentDir = "content/en"
    weight = 2

Hugo generiert die Hreflang-Tags automatisch wenn Content in mehreren Sprach-Ordnern existiert.

Hreflang in der Sitemap

Als Alternative oder Ergänzung zu Head-Tags können Hreflang-Angaben in der XML-Sitemap stehen:

<?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://beispiel.de/de/seo-agentur/</loc>
    <xhtml:link rel="alternate" hreflang="de"
                href="https://beispiel.de/de/seo-agentur/"/>
    <xhtml:link rel="alternate" hreflang="en"
                href="https://beispiel.de/en/seo-agency/"/>
    <xhtml:link rel="alternate" hreflang="x-default"
                href="https://beispiel.de/en/seo-agency/"/>
  </url>
  <url>
    <loc>https://beispiel.de/en/seo-agency/</loc>
    <!-- Dieselben Links in umgekehrter Perspektive: -->
    <xhtml:link rel="alternate" hreflang="de"
                href="https://beispiel.de/de/seo-agentur/"/>
    <xhtml:link rel="alternate" hreflang="en"
                href="https://beispiel.de/en/seo-agency/"/>
    <xhtml:link rel="alternate" hreflang="x-default"
                href="https://beispiel.de/en/seo-agency/"/>
  </url>
</urlset>

Regionale Varianten: Wann nötig?

Hreflang unterstützt auch regionale Varianten:

• de - Deutsch allgemein
• de-DE - Deutsch für Deutschland
• de-AT - Deutsch für Österreich
• de-CH - Deutsch für Schweiz

Regionale Codes sind nur sinnvoll wenn der Content tatsächlich regional unterschiedlich ist (Preise, rechtliche Informationen, Dialekt/Formulierungen). Für die meisten deutschen Websites reicht de.

Mehrsprachige statische Websites die Hreflang korrekt implementieren, geben Google klare Signale über die Zielgruppe jeder Version - die richtige Sprachversion rankt im richtigen Markt, statt dass sich die Versionen gegenseitig Konkurrenz machen.

Für die korrekte Implementierung von Schema Markup auf mehrsprachigen statischen Websites gelten besondere Regeln - etwa separate JSON-LD-Blöcke pro Sprache. Mehr zu technischem SEO finden Sie in unserem Artikel über robots.txt erklärt. Prüfen Sie die korrekte Indexierung Ihrer Sprachversionen regelmäßig in der Google Search Console.