SaaS Comparison Page: fair vergleichen und konvertieren

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.

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 (opens in a new tab) (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 (opens in a new tab) (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 (opens in a new tab) (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.

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, das Feature Grid für die Gründe zum Wechsel, den Slider für die Teamgröße, die 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.

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.

// 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.

// 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<Metadata> {
  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 (
    <>
      <CompareView id={rival.id} />
      <section className="mx-auto max-w-3xl px-4 py-12 text-sm text-muted-foreground">
        <h2 className="text-base font-semibold text-foreground">Quellen, geprüft am {rival.checked}</h2>
        <ul className="mt-3 list-disc space-y-1 pl-5">
          {rival.sources.map((source) => (
            <li key={source.href}>
              <a className="underline underline-offset-4" href={source.href}>
                {source.label}
              </a>
            </li>
          ))}
        </ul>
      </section>
    </>
  );
}

// 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 (
    <ComparePage
      header={false}
      footer={false}
      linkComponent={Link}
      competitors={competitors}
      competitor={id}
      onCompetitorChange={(next) => 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 (opens in a new tab), 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.

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.

// 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 (
    <SwitchPage
      header={false}
      footer={false}
      linkComponent={Link}
      // Beispiel-Tools; ersetz sie durch deine eigenen SwitchSource-Objekte
      sources={SWITCH_SOURCES.filter((s) => 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, damit ein Leser, der sich entschieden hat, nicht danach suchen muss. Das Tutorial zur 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 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 Preise, About, Changelog, Kontakt und Rechtliches, und weitere Screens findest du in der Kategorie Praxis: Screens und Apps.

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); die FAQ Section ist kostenlos, und mit einem kostenlosen Konto bekommst du ihren Quellcode und die 74 anderen kostenlosen Elemente.

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.