# SaaS Comparison Page: fair vergleichen und konvertieren > So baust du eine SaaS Comparison Page, die rankt und konvertiert: faires Fazit, datierte Feature-Tabelle, Zeilen für den Rivalen, Wechselweg und React-Vorlagen. - Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI - Veröffentlicht: 5. Nov. 2026 - Kategorie: [Praxis: Screens und Apps](https://wingo-ui.com/de/blog/category/build) - Lesezeit: 10 Min. - Kanonische URL: https://wingo-ui.com/de/blog/saas-comparison-page - Englische Fassung: https://wingo-ui.com/blog/saas-comparison-page ## Kurz gesagt Eine SaaS Comparison Page konvertiert, wenn sie sich wie ein fairer Test liest: ein Fazit in einem Satz, das sagt, wem welches Produkt passt, eine gruppierte Feature-Tabelle mit datierten Quellen, die Zeilen, in denen der Rivale gewinnt, ein Preis für eine echte Teamgröße und die Schritte für den Wechsel. Die Vs-Seite baust du mit der Vorlage Compare Page von Wingo UI, eine statische Route pro Wettbewerber, die Alternativ-Seite mit der Vorlage Switch Page und ihrem Import-Assistenten. Halte die Fakten in einer Datendatei mit Prüfdatum, damit die Seite wahr bleibt. Auf einer SaaS Comparison Page entscheidet sich ein Käufer, der deinen Namen schon kennt, zwischen dir und dem Tool, das er gerade nutzt. Die meisten dieser Seiten schreibt das Marketing, und man merkt es: in jeder Zeile ein Haken für dich und ein Kreuz für die anderen, kein Datum, keine Quelle. Entwickler und Ops-Leads öffnen die Preisseite des Wettbewerbers im nächsten Tab, finden eine falsche Zeile und sind weg. Dieses Tutorial baut die zwei Seiten für genau diesen Käufer: eine Seite „Acme vs Rival“ und eine Seite „Rival Alternative“, die Leute zum Wechsel bewegt. Beides in Next.js 16 mit zwei React-Vorlagen, und jede Behauptung bekommt eine Quelle und ein Datum. ## Was ist der Unterschied zwischen einer Vs-Seite und einer Alternativ-Seite? Sie beantworten verschiedene Suchanfragen und brauchen deshalb verschiedene Seiten. Eine Vs-Seite beantwortet „acme vs rival“: Der Leser wägt zwei Produkte ab und will einen fairen Direktvergleich. Eine Alternativ-Seite beantwortet „rival alternative“: Der Leser hat sich entschieden zu gehen und sucht Optionen und einen Ausweg. Eine dritte Seite, die Wechselseite (im Englischen die „switch from competitor page“), ist für alle, die sich schon für dich entschieden haben und ihre Daten umziehen müssen. | Seite | Typische Suche | Leser | Muss enthalten | Vorlage | |---|---|---|---|---| | Vs-Seite | „acme vs rival“ | Wählt zwischen zwei Tools | Fazit, Feature-Tabelle, Preis für die eigene Teamgröße, FAQ | [Compare Page](https://wingo-ui.com/templates/compare-page) | | Alternativ-Seite | „rival alternative“ | Verlässt ein Tool | Warum Leute wechseln, ehrliche Passung, was mitkommt, wie lange es dauert | [Switch Page](https://wingo-ui.com/templates/switch-page) | | Wechselseite | „import from rival“ | Hat sich schon entschieden | Import-Schritte, Feldzuordnung, was nicht mitkommt | [Switch Page](https://wingo-ui.com/templates/switch-page) | Leg alle in einen gemeinsamen Ordner wie `/compare/` und `/switch/`, eine URL pro Wettbewerber. Eine einzige Seite, die dich mit fünf Tools vergleicht, rankt für keinen ihrer Namen. ## Was gehört auf eine ehrliche SaaS Comparison Page? Sieben Teile, in der Reihenfolge, in der ein Käufer seine Fragen stellt: 1. **Ein Fazit in einem Satz**, das sagt, für wen welches Produkt das richtige ist, auch wenn es der Rivale ist. 2. **Kurzfakten**: der Preis pro Nutzer und die zwei oder drei Unterschiede, an denen die meisten Entscheidungen hängen. 3. **Eine Feature-Tabelle, gruppiert so, wie Käufer denken** (Planung, Docs, Sicherheit, Preise), mit einer Anmerkung an jedem Wert, der eine braucht. 4. **Die Zeilen, in denen der Rivale gewinnt**, und zwar in der Tabelle. 5. **Ein Preis für eine echte Teamgröße**, mit dem Plan des Wettbewerbers, benannt und verlinkt. 6. **Die Schritte für den Wechsel**: was mitkommt, wie lange es dauert, was zurückbleibt. 7. **Ein FAQ** zum Wechsel und genau ein Call to Action. Das liegt nah an dem, was Google von Rezensionen verlangt. Der Leitfaden zum [Schreiben hochwertiger Rezensionen](https://developers.google.com/search/docs/specialty/ecommerce/write-high-quality-reviews) (gelesen im November 2026) fordert, Vor- und Nachteile zu besprechen, zu erklären, was jede Option abhebt, und zu sagen, welche zu welchem Einsatz passt. In den USA befürwortet die [Erklärung der FTC zu vergleichender Werbung](https://www.ftc.gov/legal-library/browse/statement-policy-regarding-comparative-advertising) (veröffentlicht im August 1979, gelesen im November 2026), Wettbewerber beim Namen zu nennen, solange der Vergleich klar ist und nicht irreführt. Nicht jeder behält die Tabelle. Der [Guide von Unbounce zu SaaS-Vergleichsseiten](https://unbounce.com/landing-page-examples/saas-comparison-pages/) (aktualisiert am 14. April 2026) hält die meisten Tabellen für B2B-Käufer für nutzlos: Gemeinsame Features erzeugen Rauschen, kleine Lücken verdrängen die, an denen Entscheidungen hängen, und die Auswahl der Zeilen neigt zu dem, was der Anbieter zeigen will. Wir behalten die Tabelle und beheben diese drei Schwächen: Der Schalter Only show differences blendet gleiche Zeilen aus, eine Anmerkung erklärt jeden Wert, der Kontext braucht, und die Zeilen, in denen du verlierst, bleiben drin. Käufer suchen in der Tabelle nach dem einen Feature, das sie brauchen, und glaubwürdig wird sie in dem Moment, in dem sie eine Zeile zeigt, in der der Rivale gewinnt. ## Wie installiere ich die Vorlagen für Vergleich und Wechsel? Beide sind Seitenvorlagen: Der Quellcode wird in dein Projekt kopiert, also kannst du jeden Abschnitt und jeden Text ändern. ```bash npx wingo-ui@latest add compare-page switch-page ``` Das legt `components/templates/compare-page.tsx` und `compare-page-data.ts` an, dazu die Switch Page mit ihrer Datendatei und die Abschnitte, aus denen sie bestehen: die [FAQ Section](https://wingo-ui.com/components/faq-section), das [Feature Grid](https://wingo-ui.com/components/feature-grid) für die Gründe zum Wechsel, den [Slider](https://wingo-ui.com/components/slider) für die Teamgröße, die [Steps](https://wingo-ui.com/components/steps) des Import-Assistenten sowie Marketing-Header und -Footer. Falls du nach einem Competitor Comparison Page Template gesucht hast: Das hier ist eins im Sinne von shadcn, mit den Daten in einer einfachen TypeScript-Datei und dem Layout in einer Komponente, die dir gehört. Probier zuerst das Vs Page Template aus. Es kommt mit drei fiktiven Rivalen. > Live-Demo (Compare Page): Wähl im Umschalter Boardify, schalte Only show differences ein und zieh dann am Regler für die Teamgröße: Beide Jahreskosten rollen auf neue Summen, und auf dem Smartphone wird die Tabelle zu einer Karte pro Feature. Probier sie unter [Compare Page](https://wingo-ui.com/templates/compare-page) aus und installier sie mit `npx wingo-ui@latest add compare-page`. ## Wie bilde ich einen echten Wettbewerber in der Datendatei ab? Die Vorlage liest ein `Competitor`-Objekt: `{ id, name, icon, tagline, verdict, facts, reasons, groups, pricing, steps, quotes, faq }`. Schreib eins pro Rivale und ergänze zwei eigene Felder: das Datum, an dem du ihre öffentlichen Seiten geprüft hast, und die Links, die du geprüft hast. ```ts // app/(marketing)/compare/[competitor]/competitors.ts import { FileText, Layers } from "lucide-react"; import type { Competitor } from "@/components/templates/compare-page-data"; export type SourcedCompetitor = Competitor & { checked: string; sources: { label: string; href: string }[]; }; export const competitors: SourcedCompetitor[] = [ { id: "rival", name: "Rival", // ein neutrales Symbol, nie ihr Logo icon: Layers, tagline: "Projektverwaltung für Agenturen", verdict: "Rival ist bei mehr als 12 Personen günstiger und hat Zeiterfassung eingebaut. Acme passt zu kleineren Teams, die Docs und Aufgaben an einem Ort wollen.", facts: [ { label: "Preis pro Nutzer", acme: "$12", competitor: "$8 + $49 / Monat" }, { label: "Zeiterfassung", acme: "Integration", competitor: "Eingebaut" }, { label: "Docs eingebaut", acme: "Ja", competitor: "Nein" }, ], reasons: [ { icon: FileText, title: "Docs direkt bei der Arbeit", description: "Specs und Meeting-Notizen liegen neben den Aufgaben, die sie beschreiben.", }, ], groups: [ { id: "planning", label: "Planung", rows: [ { id: "boards", label: "Boards und Listen", acme: true, competitor: true }, { id: "time", label: "Zeiterfassung", acme: { value: "partial", note: "Über die Harvest-Integration." }, competitor: true, }, { id: "offline", label: "Offline-Bearbeitung auf dem Smartphone", acme: false, competitor: { value: true, note: "Die Apps von Rival synchronisieren, sobald du wieder online bist." }, }, ], }, ], pricing: { plan: "Team", perSeat: 8, platformFee: 49 }, steps: [ { title: "Aus Rival exportieren", description: "Einstellungen, Export, CSV mit Kommentaren.", duration: "1 Min." }, { title: "Spalten zuordnen", description: "Prüf die Felder, die Acme nicht zuordnen konnte.", duration: "2 Min." }, { title: "Team einladen", description: "Alle behalten ihre Aufgaben und ihren Verlauf.", duration: "30 Sek." }, ], quotes: [], faq: [ { question: "Wann ist Rival die bessere Wahl?", answer: "Für Teams mit mehr als 12 Personen, die nach Stunden abrechnen: Bei dieser Größe ist Rival günstiger und erfasst Zeiten ohne Integration.", }, ], checked: "2026-11-01", sources: [{ label: "Preisseite von Rival", href: "https://rival.example/pricing" }], }, ]; ``` Eine Zelle ist `true`, `false`, `"partial"`, ein kurzer String oder `{ value, note }`. Geh großzügig mit Anmerkungen um: „Nur im Enterprise-Plan“ ist ein Fakt, ein Kreuz ohne Erklärung ist bloß eine Behauptung. Schreib das Fazit, die Tabellenzeilen und die FAQ-Antwort zu den Stärken des Rivalen, bevor du deine eigenen Gründe schreibst. Wenn du keine Zeile findest, in der der Rivale gewinnt, ist deine Recherche nicht fertig. Das Preismodell ist von Haus aus ehrlich. Die Jahreskosten sind `(perSeat + add-ons) × max(seats, minSeats) × 12`, plus die Plattformgebühr mal 12. Mit Acme bei $12 pro Platz kostet Rival mit $8 plus $49 im Monat für 10 Personen $1,548 im Jahr gegenüber $1,440 bei Acme, und für 25 Personen $2,988 gegenüber $3,600 bei Acme. Ab 13 Personen ist Rival günstiger, und bei 25 steht im Band unter den Preiskarten „Rival costs $612 less a year at this size“. Lass das drin: Der Leser rechnet sowieso selbst nach. Lass `quotes` leer, bis echte Kunden, die gewechselt sind, einem Zitat zustimmen. Die Beispielzitate der Vorlage sind Platzhalter, und ein erfundenes Testimonial auf einer Vergleichsseite ist der schnellste Weg, den Leser zu verlieren. ## Wie bekommt jeder Wettbewerber in Next.js seine eigene Route? Gib jedem Rivalen eine statisch generierte Seite, deren Titel zur Suchanfrage passt. Die Wettbewerber-Objekte enthalten Icon-Komponenten, und die Label-Overrides sind Funktionen. Beides kann eine Server-Komponente nicht als Props weitergeben. Deshalb rendert eine kleine Client-Datei die Vorlage, und die Server-Seite drumherum kümmert sich um die Metadaten und die Quellenliste. ```tsx // app/(marketing)/compare/[competitor]/page.tsx import type { Metadata } from "next"; import { notFound } from "next/navigation"; import { competitors } from "./competitors"; import { CompareView } from "./compare-view"; export const dynamicParams = false; export function generateStaticParams() { return competitors.map((c) => ({ competitor: c.id })); } type Props = { params: Promise<{ competitor: string }> }; export async function generateMetadata({ params }: Props): Promise { const { competitor } = await params; const rival = competitors.find((c) => c.id === competitor); if (!rival) return {}; return { title: `Acme vs ${rival.name}: Features, Preise und Umzug`, description: rival.verdict, alternates: { canonical: `/compare/${rival.id}` }, }; } export default async function ComparePageRoute({ params }: Props) { const { competitor } = await params; const rival = competitors.find((c) => c.id === competitor); if (!rival) notFound(); return ( <>

Quellen, geprüft am {rival.checked}

); } ``` ```tsx // app/(marketing)/compare/[competitor]/compare-view.tsx "use client"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { ComparePage } from "@/components/templates/compare-page"; import { competitors } from "./competitors"; export function CompareView({ id }: { id: string }) { const router = useRouter(); const rival = competitors.find((c) => c.id === id)!; return ( router.push(`/compare/${next}`)} showSwitcher={competitors.length > 1} showTestimonials={rival.quotes.length > 0} acmePricing={{ plan: "Pro", perSeat: 12 }} getImportHref={(c) => `/switch?from=${c.id}`} labels={{ tableDescription: (name) => `Abgeglichen mit den öffentlichen Preisen und der Doku von ${name}, Stand ${rival.checked}. Wo ${name} vorne liegt, sagt es die Tabelle.`, }} /> ); } ``` Ersetz Acme durch deinen Produktnamen, und zwar über `labels.brand`, `labels.switcher` und jede Label-Funktion, in der der Name vorkommt: `title`, `reasonsDescription`, `tableTitle`, `pricingDescription`, `save` und `ctaTitle`. Schreib auch die Beispielaussagen um, denn sobald die Seite live ist, sind es deine Aussagen: `migrationTitle` verspricht einen Import in 3 Minuten, `migrationDescription` sagt, dass jeder Kommentar und jeder Anhang mitkommt, `reasonsDescription` spricht von sechs Gründen, und `ctaDescription` sagt, dass Acme für bis zu 10 Personen kostenlos ist. Das FAQ in der Vorlage gibt keine strukturierten Daten aus. Du kannst in der Server-Seite ein `FAQPage`-Script aus `rival.faq` ergänzen, damit Maschinen es lesen können, aber rechne nicht mit Sternen in der Suche: Google hat [FAQ-Rich-Results im August 2023 eingeschränkt](https://developers.google.com/search/blog/2023/08/howto-faq-changes), auf bekannte Websites von Behörden und aus dem Gesundheitsbereich. ## Wie baue ich die Alternativ-Seite und den Wechsel-Ablauf? Die Alternativ-Seite hat eine Aufgabe mehr als die Vs-Seite: Sie muss den Abschied klein wirken lassen. Die Vorlage Switch Page ist genau als diese Seite gebaut und taugt auch als Alternative Page Template: ein Hero, der den Import zeigt, während er läuft, Kacheln für die Tools, von denen Leute kommen, ein Assistent in vier Schritten (Verbinden, Felder zuordnen, Daten auswählen, Importieren), eine Matrix „What moves over“ mit Markierungen für vollständig, teilweise und nicht unterstützt, und ein Übersetzer von den Begriffen des alten Tools zu deinen. > Live-Demo (Switch Page): Geh zum Schritt Map fields: Ändere das Acme-Feld einer Spalte, und die drei Vorschaukarten aktualisieren sich; Continue bleibt gesperrt, bis eine Spalte Title zugeordnet ist. Probier sie unter [Switch Page](https://wingo-ui.com/templates/switch-page) aus und installier sie mit `npx wingo-ui@latest add switch-page`. Verbinde den Assistenten mit deinem Import-Endpunkt und gib nur die Quellen weiter, die du wirklich unterstützt. `SWITCH_SOURCES` enthält fiktive Beispiel-Tools (Tasklane, Boardly, Notebase, Sheetwise, CSV). In Produktion schreibst du also deine eigenen `SwitchSource`-Objekte, eine `matrix` und ein `faq`; das Beispiel-FAQ beantwortet Fragen zu Rückgängig, Limits und Sicherheit im Namen von Acme. ```tsx // app/(marketing)/switch/switch-view.tsx "use client"; import Link from "next/link"; import { SwitchPage } from "@/components/templates/switch-page"; import { SWITCH_SOURCES } from "@/components/templates/switch-page-data"; export function SwitchView() { return ( s.id === "tasklane" || s.id === "csv")} showOffer={false} showTestimonials={false} hrefs={{ signUp: "/sign-up?from=switch", contact: "/contact" }} onImport={async (config) => { const res = await fetch("/api/import", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(config), }); if (!res.ok) throw new Error("Import fehlgeschlagen"); }} /> ); } ``` `onImport` bekommt `{ source, origin, fileName?, mapping, options, totals }`; ein abgelehntes Promise zeigt Try again an. Die Konfiguration enthält die Spaltenzuordnung und die Optionen, nicht die Zeilen. Ein OAuth-Import liest also auf deinem Server aus der API der Quelle, und für einen CSV-Import muss die Datei auf deine eigene Route hochgeladen werden. Die Matrix zeigt nur Spalten für die Quellen, die du übergibst, also markier jedes nicht unterstützte Feature als `"none"` mit einer Anmerkung. „Kommentare kommen aus CSV nicht mit“ in der Tabelle ist besser als ein Support-Ticket eine Woche später. Zeig auf einer Alternativ-Seite deine eigenen Pläne direkt dort mit der [Pricing Table](https://wingo-ui.com/components/pricing-table), damit ein Leser, der sich entschieden hat, nicht danach suchen muss. Das [Tutorial zur shadcn pricing page](https://wingo-ui.com/de/blog/shadcn-pricing-page) behandelt die Pläne und die Vergleichszeilen. ## Wie werden Vergleichsseiten gefunden und bringen Registrierungen? Gefunden werden sie, wenn beide Produktnamen im Title-Tag, in der h1 und in der URL stehen und der erste Screen die Frage beantwortet. Und sie konvertieren, wenn Käufer von Seiten kommen, die sie ohnehin schon lesen. Verlinke sie von diesen Stellen: - **Die Preisseite**: eine Zeile „Du kommst von Rival?“ unter den Plänen. - **Der Footer**: eine Spalte Vergleich mit einem Link pro Rivale. - **Doku und Changelog**: Der Import-Guide verlinkt auf die Wechselseite, und der Changelog-Eintrag zu einem neuen Importer verlinkt auf beide. - **Antworten im Vertrieb**: Wenn ein Interessent einen Wettbewerber nennt, schick ihm die Seite. Für die Conversion behältst du eine Hauptaktion und formulierst sie konkret. „Aus Rival importieren“ überzeugt einen Leser, der bereit ist, und „Kostenlos starten“ fängt den Rest auf; Hero und Abschlussband der Vorlage tragen beide, und `getImportHref` zeigt auf deine Wechselseite. Erfasse, von welcher Seite eine Registrierung kam, dann weißt du, welchen Vergleich du zuerst aktualisieren solltest. Unser eigener [Vergleich Wingo UI vs shadcn/ui](https://wingo-ui.com/de/blog/wingo-ui-vs-shadcn) hält sich an diese Regeln, inklusive eines Abschnitts dazu, wann du shadcn/ui nehmen und dabei bleiben solltest. Für den Rest der Marketing-Website um diese Seiten herum behandelt der [Guide zum SaaS Website Template](https://wingo-ui.com/de/blog/saas-website-template) Preise, About, Changelog, Kontakt und Rechtliches, und weitere Screens findest du in der [Kategorie Praxis: Screens und Apps](https://wingo-ui.com/de/blog/category/build). ## Wie geht es weiter? Installier die Vorlagen mit `npx wingo-ui@latest add compare-page switch-page`, schreib eine Wettbewerber-Datei mit Quellen und Prüfdatum und bring die Vs-Seite vor der Alternativ-Seite live. Compare Page, Switch Page und Pricing Table gehören zu Wingo UI Pro, Stand November 2026 für $8 im Monat, $80 im Jahr oder einmalig $150 ([Preise](https://wingo-ui.com/de/pricing)); die FAQ Section ist kostenlos, und mit einem kostenlosen Konto bekommst du ihren Quellcode und die 74 anderen kostenlosen Elemente. ## Komponenten in diesem Artikel - [Compare Page](https://wingo-ui.com/templates/compare-page) (Pro): A React comparison page template (Acme vs a competitor): a verdict hero, a feature table, price comparison, migration steps and FAQ. Installation: `npx wingo-ui@latest add compare-page` - [Switch Page](https://wingo-ui.com/templates/switch-page) (Pro): A migration page for teams leaving other tools: an import visual, source tiles, a working 4-step import wizard, a support matrix and offers. Installation: `npx wingo-ui@latest add switch-page` - [Pricing table](https://wingo-ui.com/components/pricing-table) (Pro): A React pricing table: plans side by side with a monthly / yearly switch whose prices roll, a featured plan and a full comparison table. Installation: `npx wingo-ui@latest add pricing-table` - [FAQ Section](https://wingo-ui.com/components/faq-section) (Free): A React FAQ section for marketing pages: an accordion, a split layout, an open grid or expandable cards, with topics and live search. Installation: `npx wingo-ui@latest add faq-section` ## Häufige Fragen ### Was ist eine SaaS Comparison Page? Eine Seite, die dein Produkt mit genau einem namentlich genannten Wettbewerber vergleicht, meist unter /compare/, für Käufer, die sich zwischen beiden entscheiden. Sie enthält ein Fazit, eine Feature-Tabelle, einen Preisvergleich, die Schritte für den Wechsel und ein FAQ. ### Was ist der Unterschied zwischen einer Vs-Seite und einer Alternativ-Seite? Eine Vs-Seite ist für jemanden, der zwei Produkte abwägt und einen fairen Direktvergleich will. Eine Alternativ-Seite ist für jemanden, der ein Produkt verlassen will und Optionen und einen Ausweg sucht. Sie setzt deshalb auf den Umzug: was mitkommt, wie lange es dauert und was nicht mitkommt. ### Sollte eine Vergleichsseite zugeben, wo der Wettbewerber besser ist? Ja. Käufer prüfen deine Angaben auf der Preisseite des Wettbewerbers nach, und eine falsche Zeile kostet dich die ganze Tabelle. Auch Googles Leitfaden für hochwertige Rezensionen verlangt Vor- und Nachteile und die Aussage, welche Option zu welchem Einsatz passt. ### Wie oft sollte ich eine Vergleichsseite zu einem Wettbewerber aktualisieren? Prüf die Preisseite und das Changelog des Wettbewerbers mindestens einmal im Quartal und immer dann, wenn er eine Preisänderung ankündigt. Zeig das Datum deiner letzten Prüfung auf der Seite und halte es in der Datendatei neben den Quellenlinks. ### Ist die Compare-Page-Vorlage von Wingo UI kostenlos? Nein. Die Vorlagen Compare Page und Switch Page und die Pricing Table gehören zu Wingo UI Pro; die FAQ Section, die sie nutzen, ist kostenlos. Du installierst sie mit npx wingo-ui@latest add. --- Quelle: https://wingo-ui.com/de/blog/saas-comparison-page