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-Implementation haben in 35 % der Fälle Duplicate-Content-Probleme zwischen Sprachversionen – was Rankings für alle Versionen negativ beeinflusst. Mit korrektem Hreflang verschwindet dieses Problem vollständig.
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-defaultfü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 = 2Hugo generiert die Hreflang-Tags automatisch wenn Content in mehreren Sprach-Ordnern existiert.
Validieren Sie Hreflang-Implementierungen mit dem Hreflang Tag Testing Tool (z. B. von Aleyda Solis). Häufige Fehler: Fehlende Gegenseitigkeit (A verlinkt auf B aber B verlinkt nicht auf A), falsche Sprach-Codes (de-DE statt de wenn keine regionale Differenzierung nötig), fehlende x-default-Angabe.
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 allgemeinde-DE– Deutsch für Deutschlandde-AT– Deutsch für Österreichde-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, verbessern die organischen Rankings aller Sprachversionen im Schnitt um 2–3 Positionen für ihre Ziel-Keywords – weil Duplicate-Content-Probleme eliminiert werden und Google klare Signale über die Zielgruppe erhält.
Mehr zu technischem SEO finden Sie in unserem Artikel über robots.txt erklärt.