Case Study: Eine Partner-Website für drei Länder – Next.js, hreflang und ccTLDs in der Praxis

Die Ausgangslage

Angela ist selbstständige Partnerin von RINGANA, einem österreichischen Hersteller von Frischekosmetik. Ihr Wunsch: eine eigene, persönliche Website, über die Interessierte sie finden, kennenlernen und unkompliziert Kontakt aufnehmen können – und zwar nicht nur in Deutschland, sondern genauso in Österreich und der Schweiz.

Klingt nach einem klassischen Onepager? War es nicht. Das Projekt brachte drei Besonderheiten mit, die es technisch und konzeptionell spannend gemacht haben:

• Strenge Markenvorgaben. Der geschützte Herstellername darf in der Domain nicht vorkommen, offizielle Produktbilder und Logos sind tabu, Inhalte müssen aus der persönlichen Ich-Perspektive geschrieben sein. Die fertige Seite wurde vor Veröffentlichung vom Hersteller geprüft und freigegeben.
• Drei Zielländer mit einer Sprache. Deutschland, Österreich und die Schweiz sprechen (fast) dasselbe Deutsch – für Suchmaschinen ist das die perfekte Falle für Duplicate Content.
• SEO von absolut null. Neue Marke, neue Domain, keine Backlinks. Jede technische Entscheidung musste darauf einzahlen, dass die Seite es trotzdem in den Index und ins Ranking schafft.

Entstanden ist glow-with-angy.de – und dieser Beitrag erzählt, was unter der Haube steckt.

Marke ohne Markenname

Weil der Herstellername in der Adresse nicht auftauchen durfte, brauchte es zuerst einen eigenen, tragfähigen Namen. Die Lösung: eine persönliche Marke rund um den Spitznamen der Kundin. Aus „Glow" und „Angy" wurde glow-with-angy – kurz, einprägsam, markenrechtlich sauber und in allen drei Zielländern als Domain verfügbar: .de, .at und .ch.

Dieser Schritt wird bei solchen Projekten gern übersprungen, dabei entscheidet er über alles Weitere: Eine Domain, die man am Telefon buchstabieren kann, ist Marketing. Drei Länder-Domains sind, wie sich gleich zeigt, außerdem das stärkste Geo-Signal, das man Google geben kann.

Ein Repository, drei Länder-Domains

Eine .de-Domain rankt in Österreich und der Schweiz erfahrungsgemäß schwer – Google bevorzugt lokale Angebote und wertet die länderspezifische Top-Level-Domain (ccTLD) als eindeutiges Zugehörigkeitssignal. Deshalb fiel die Entscheidung gegen eine einzelne Domain mit Sprachpfaden (/at/, /ch/) und für drei echte ccTLDs.

Der Clou liegt im Deployment-Modell: Es gibt genau ein Next.js-Repository (App Router, statisch vorgerendert), das als drei separate Vercel-Projekte deployt wird. Jedes Projekt bekommt per Umgebungsvariable seine Identität:

• NEXT_PUBLIC_BASE_URL bestimmt die kanonische Domain des jeweiligen Projekts,
• NEXT_PUBLIC_SITE_COUNTRY (DE/AT/CH) steuert länderspezifische Inhalte.

Ein einziges git push auf main baut und veröffentlicht alle drei Länderseiten gleichzeitig. Kein Content-Sync, keine dreifache Pflege, keine Abweichungen – die Infrastruktur erledigt die Internationalisierung.

hreflang, Canonicals und die Duplicate-Content-Falle

Drei Domains mit ähnlichem Inhalt sind für Suchmaschinen zunächst ein Problem: Welche Version gehört in welchen Länderindex? Die technische Antwort besteht aus zwei Bausteinen:

• Selbstreferenzierende Canonicals. Jede Domain erklärt sich selbst zur kanonischen Version – möglich, weil metadataBase pro Vercel-Projekt aus der Umgebungsvariable gespeist wird.
• Cross-Domain-hreflang. Jede Seite verweist per hreflang auf ihre Schwester-URLs: de-DE auf die .de, de-AT auf die .at, de-CH auf die .ch, dazu x-default. So versteht Google die drei Domains als Länder-Varianten einer Einheit statt als Kopien.

In der Praxis kam trotzdem der Moment, den viele Internationalisierungs-Projekte kennen: Die Search Console meldete für .at und .ch zunächst „Duplikat – Google hat eine andere kanonische URL gewählt". Der Inhalt war schlicht zu identisch; hreflang allein hat Google nicht umgestimmt.

Die Lösung war inhaltlich statt technisch: länderspezifische Texte pro Domain. Titel, Descriptions, Überschriften, Intros und FAQ-Antworten variieren jetzt je nach NEXT_PUBLIC_SITE_COUNTRY – die österreichische Seite spricht über den Start „in Österreich", die Schweizer Seite „in der Schweiz". Ein hübsches Detail am Rande: Schweizer Hochdeutsch kennt kein „ß", also ersetzt eine kleine Helferfunktion auf der .ch-Domain automatisch jedes „ß" durch „ss". Seitdem wählt Google für jede Domain die eigene URL als kanonisch – genau wie geplant.

Content-Architektur: Landingpages und Themen-Cluster

Statt alles auf die Startseite zu packen, bekam jede Suchintention eine eigene, fokussierte Landingpage, ergänzt um einen Blog mit Themen-Clustern, deren Beiträge intern gezielt auf die Landingpages verlinken. Wer mag, kann sich das live ansehen – etwa die Landingpage für angehende Partnerinnen mit FAQ-Bereich und strukturierten Daten.

Apropos strukturierte Daten – die Seite liefert ein komplettes JSON-LD-Set:

• FAQPage auf den Landingpages (Grundlage für FAQ-Rich-Results),
• BreadcrumbList für saubere Snippet-Pfade,
• Person mit sameAs-Verweisen auf die Social-Profile – wichtig, weil bei einer Personenmarke die Identität hinter der Seite das eigentliche Trust-Signal ist,
• WebSite mit Publisher-Bezug.

Performance und Datenschutz

Die gesamte Seite ist statisch vorgerendert – es gibt schlicht keinen Grund, eine Marketing-Site zur Laufzeit zu rendern. Bilder laufen über die Next.js-Bildoptimierung mit AVIF/WebP und festen Dimensionen, JavaScript bleibt minimal. Das Ergebnis: durchgehend grüne Core Web Vitals, wie wir sie in unserem Beitrag zu Core Web Vitals als Standard beschreiben.

Das Kontaktformular verzichtet auf Drittanbieter-Dienste: Anfragen gehen serverseitig per SMTP direkt ins eigene Postfach – DSGVO-freundlich und ohne externe Formulardienste, an die Daten abfließen.

Stolpersteine aus der Praxis

Zwei Erkenntnisse, die wir aus diesem Projekt mitgenommen haben und die anderen Teams Zeit sparen können:

• Per CLI angelegte Vercel-Projekte haben kein Framework-Preset. Zwei der drei Projekte wurden über die Vercel-CLI erstellt – und standen auf framework: null. Die Folge: Der Next.js-Build lief grün durch, wurde aber als statische Dateien ausgeliefert, sämtliche Routen antworteten mit 404. Die Lösung ist eine repo-weite vercel.json mit explizitem "framework": "nextjs", die das Preset für alle verbundenen Projekte erzwingt.
• Preview-Deployments gehören auf noindex. Bei drei Produktions-Domains plus Previews entsteht schnell ein Zoo aus crawlbaren URLs. Indexierung ist deshalb strikt an die Produktionsumgebung gekoppelt – Previews bleiben für Suchmaschinen unsichtbar.

Das Ergebnis

Live sind heute drei Länderseiten aus einem einzigen Codebestand: glow-with-angy.de, glow-with-angy.at und glow-with-angy.ch – jede mit eigener kanonischer Identität, länderspezifischen Inhalten, vollständigen strukturierten Daten und einem Deployment, das sich mit einem einzigen Push aktualisiert. Die Freigabe durch die Marken-Compliance des Herstellers kam ohne Änderungswünsche an der Technik.

Für uns ist das Projekt ein schönes Beispiel dafür, dass „kleine" Websites die interessanteren Engineering-Entscheidungen verlangen können als manches große Portal: Internationalisierung, Markenrecht, SEO-Architektur und Deployment-Design – alles in einem Projekt, das sich für Besucher einfach nur leicht und persönlich anfühlt.

Du planst etwas Ähnliches?

Ob persönliche Marke, mehrsprachiger Auftritt oder Website mit echtem SEO-Fundament: Genau solche Projekte bauen wir gern. Schau dir an, wie wir Web-Projekte umsetzen, oder melde dich direkt – wir denken Naming, Technik und Sichtbarkeit von Anfang an zusammen.