# Link-in-Bio-Seite gestalten: eine Landingpage fürs Profil

[Canonical HTML page](https://gradiently.design/de/guide/instagram-bio-link-page)

Der eine Link in deinem Profil ist dort, wo Neugier zu einer Buchung, einem Kauf oder einem Abonnenten wird. Behandle ihn als winzige Landingpage: ein Look, ein paar Buttons, nichts zu entschlüsseln.

## The short version

- Eine Link-in-Bio-Seite ist eine kleine mobile Landingpage, die die wenigen Ziele bündelt, zu denen du Profilbesucher als Nächstes führen willst.
- Das beste Link-in-Bio-Seitendesign nutzt drei bis fünf Buttons, geordnet danach, was diese Woche am wichtigsten ist.
- Besucher kommen vom Handy, gestalte die Seite also zuerst für einen schmalen vertikalen Bildschirm und prüfe sie in Handybreite.
- Die Seite sollte denselben Hintergrund, dieselben Farben und Schriften wie dein Feed tragen, damit sich der Tipp anfühlt, als beträte man denselben Laden.
- Wird der Link in einer Nachricht geteilt, ist sein Vorschaubild eine eigene Grafik in 1200×630, die sich ebenfalls zu gestalten lohnt.

Eine gute **Link-in-Bio-Seite** ist eine kurze mobile Landingpage: dein Name, eine Zeile dazu, was du tust, drei bis fünf Buttons nach Wichtigkeit und ein Hintergrund, der zu deinem Feed passt, damit sich der Besuch zusammenhängend anfühlt. Fast alle kommen vom Handy, direkt aus deinem Profil, mit ein paar Sekunden Aufmerksamkeit. Jede Entscheidung unten folgt daraus.

## Was eine Link-in-Bio-Seite braucht, der Reihe nach

Lies die Seite von oben nach unten, wie ein Besucher es tut. Er will bestätigen, dass er richtig ist, sehen, was er tun kann, und es tun. Alles, was diese drei Schritte bremst, kann weg.

| Teil | Was hineingehört | Beschränke dich auf |
| --- | --- | --- |
| Identität | Logo oder Foto und dein Name, wie er in deinem Profil steht | Ein Bild, eine Zeile |
| Versprechen | Was du tust, für wen, in einfachen Worten | Unter 12 Wörtern |
| Hauptbutton | Das, was du diese Woche am meisten willst: Buchen, Drop shoppen, Tickets holen | Einer, sichtbar stärker |
| Weitere Buttons | Zwei bis vier weitere Ziele | Verben, keine Seitennamen |
| Fußzeile | Kleine Social-Icons und Kontakt | Dezent, ganz unten |

Der Aufbau einer Seite, die Leute wirklich nutzen. Seiten scheitern meist am zehnten Button, nicht an einem fehlenden.

Schreibe Buttons als Handlungen. Tisch buchen schlägt Reservierungen; Neue Ausgabe lesen schlägt Newsletter. Dieselben Prinzipien gelten für jeden kurzen Text in Social Media, den [Social-Media-Texte](https://gradiently.design/de/guide/writing-copy-for-visuals) ausführlicher behandelt.

## Den Hintergrund gestalten

Der Hintergrund ist das, was ein Besucher am meisten sieht, und hier sieht eine Seite entweder nach dir aus oder wie jede andere kostenlose Vorlage. Gestalte ihn zuerst für einen Handybildschirm. Ein vertikaler Rahmen in 1080×1920, wie bei einer Story, ist eine sinnvolle Arbeitsgröße für das Bild, und eine einfarbige Fläche dahinter deckt höhere Bildschirme und Desktop ab.

Eine vertikale Link-in-Bio-Seite für ein Keramikstudio mit Namen, einer kurzen Zeile und drei Aktionen auf einem Verlaufshintergrund

Eine Link-in-Bio-Seite in Handygröße gezeichnet: Identität oben, Versprechen, dann die Aktionen, mit dem Hintergrund als Markenträger.

Halte den belebtesten, hellsten Teil des Hintergrunds von dort fern, wo die Buttons sitzen, meist Richtung oben oder in eine Ecke. Buttons brauchen dahinter eine ruhige, gleichmäßige Fläche, sonst konkurrieren ihre Beschriftungen mit der Farbe.

Heller Kopf, ruhige untere Hälfte: `linear-gradient(180deg, #2b1055 0%, #4c1d95 30%, #1e1b4b 65%, #0b0a1a 100%)`

Farbe und Licht im oberen Drittel, wo der Name sitzt, beruhigt zu einem tiefen, gleichmäßigen Grund hinter den Buttons.

## Buttons, die antippbar aussehen

### Besser nicht

- Jeder Button gleich, sodass nichts führt
- Dünne Konturen, die auf einem Verlauf verschwinden
- Beschriftungen in Großbuchstaben mit weiter Laufweite, schwer zu überfliegen
- Winzige Buttons dicht an dicht
- Emojis, die die Arbeit von Worten tun

### Besser so

- Ein gefüllter Hauptbutton, die übrigen leiser
- Vollflächen aus deiner Palette
- Beschriftungen in normaler Schreibweise, je ein Verb
- Buttons in voller Breite mit großzügigem Abstand
- Schlichte Worte, ein Icon nur, wenn es hilft

Ein gefüllter Button in deiner Akzentfarbe, mit den anderen in einem weicheren Ton des Grundes, gibt dem Auge einen offensichtlichen ersten Tipp. Prüfe, dass jede Beschriftung Kontrast gegen ihre eigene Füllung hat, nicht gegen die Seite: [Farbkontrast und Barrierefreiheit](https://gradiently.design/de/guide/color-contrast-accessibility) nennt die Verhältnisse.

## Deine eigene Link-in-Bio-Seite bauen

Link-in-Bio-Dienste sind schnell, aber eine Seite auf deiner eigenen Domain ist leicht gebaut und hält Besucher auf deiner Website. Dies ist eine vollständige, minimale Version: ein Verlaufshintergrund in voller Höhe, eine zentrierte Spalte und ein Hauptbutton. Tausche deine Farben und Links ein.

```html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Studio Nine</title>
  <meta property="og:image" content="https://example.com/og.png">
  <style>
    html { background: #0b0a1a; }
    body {
      margin: 0;
      min-height: 100vh;
      font-family: system-ui, sans-serif;
      color: #f5f3ff;
      background: linear-gradient(180deg, #2b1055 0%, #4c1d95 30%, #1e1b4b 65%, #0b0a1a 100%);
    }
    main { max-width: 26rem; margin: 0 auto; padding: 4rem 1.25rem; text-align: center; }
    img { width: 96px; height: 96px; border-radius: 50%; }
    p { opacity: 0.85; margin: 0.5rem 0 2rem; }
    a {
      display: block;
      padding: 1rem;
      margin: 0 0 0.75rem;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.12);
      color: inherit;
      text-decoration: none;
      font-weight: 600;
    }
    a.main { background: #fbbf24; color: #1c1917; }
  </style>
</head>
<body>
  <main>
    <img src="logo.png" alt="Studio Nine">
    <h1>Studio Nine</h1>
    <p>Handmade ceramics and weekend classes in Bristol.</p>
    <a class="main" href="/classes">Book a class</a>
    <a href="/shop">Shop the new pots</a>
    <a href="/visit">Visit the studio</a>
  </main>
</body>
</html>
```

Eine Datei, keine Skripte. Die einfarbige Fläche auf html zeigt sich beim Überscrollen und auf Bildschirmen, die höher sind als der Verlauf.

Möchtest du einen reicheren Button, zeigt [CSS-Verlaufsbutton](https://gradiently.design/de/guide/css-gradient-button), wie du dem Hauptbutton etwas Tiefe gibst, ohne dass er schreit.

## Die Seite an deinen Feed anpassen

Der Tipp vom Profil zur Seite sollte sich anfühlen, als öffne man eine Tür im selben Gebäude. Nutze die Farben, Schriften und den Hintergrund aus deinen Beiträgen, und der Besucher fragt sich nie, ob er etwas verlassen hat. [Einheitliches Branding über Social Media](https://gradiently.design/de/guide/brand-consistency-across-platforms) behandelt das größere System.

- Nachtgrund: #0b0a1a
- Violett: #4c1d95
- Indigo: #1e1b4b
- Hauptbutton: #fbbf24
- Schrift: #f5f3ff

Dieselben fünf Farben auf Feed, Seite und Buttons. Das Bernstein erscheint nur auf dem Hauptbutton, deshalb wird er getippt.

Hier zahlt sich ein eigener Hintergrund aus. Ein Gradiently Mark ist ein lebendiger Verlauf, der in jeder Größe gerendert wird, die du gestaltest, sodass deine Beiträge, Stories und der Seitenhintergrund genau denselben Look tragen können, und niemand sonst kann mit ihm exportieren, sobald du ihn dir gesichert hast. Exportiere den Mark mit Pro in 1080×1920, das ihn in voller Größe und ohne Wasserzeichen behält, und die Seite passt konstruktionsbedingt zu deinem Feed.

## Das Vorschaubild, das Leute sehen, wenn du den Link teilst

Wenn jemand deinen Link in einer Nachricht verschickt, zeigen Apps eine Vorschaukarte, die aus dem Open-Graph-Bild der Seite gebaut wird. Eine leere oder zufällige Vorschau macht die Arbeit oben zunichte. Gestalte eine in 1200×630 mit deinem Namen und dem Versprechen, auf demselben Hintergrund. Die Details stehen in [OG-Bildgröße](https://gradiently.design/de/guide/open-graph-image-size).

Eine breite Linkvorschau-Karte für ein Keramikstudio mit Namen und einer kurzen Zeile auf demselben Verlaufshintergrund

Die Linkvorschau auf dem eigenen Hintergrund der Seite, damit ein geteilter Link schon nach dir aussieht.

1. **In Handybreite prüfen** Öffne die Seite auf deinem eigenen Handy aus deinem Profil, wie es Besucher tun, nicht in einem Desktop-Browser.
2. **Buttons wöchentlich neu ordnen** Schiebe nach oben, was jetzt zählt, und streiche, was vorbei ist.
3. **Die Vorschau testen** Schick dir den Link in einer Messenger-App selbst und sieh dir die Karte an, die daraus entsteht.

## FAQ

### Was sollte auf einer Link-in-Bio-Seite stehen?

Dein Name und Logo, eine Zeile dazu, was du tust, drei bis fünf Aktions-Buttons mit dem wichtigsten zuerst und kleine Kontaktlinks ganz unten.

### Welche Größe sollte ein Link-in-Bio-Hintergrund haben?

Gestalte ihn zuerst fürs Handy. Ein vertikales Bild in 1080×1920 funktioniert gut, mit einer einfarbigen Fläche dahinter für höhere Bildschirme und Desktop.

### Sollte ich einen Link-in-Bio-Dienst oder meine eigene Website nutzen?

Ein Dienst ist schneller eingerichtet. Eine Seite auf deiner eigenen Domain hält Besucher auf deiner Website und gibt dir volle Kontrolle über das Design, und sie kann eine einzige HTML-Datei sein.

### Wie viele Links sollte eine Link-in-Bio-Seite haben?

Drei bis fünf genügen den meisten. Mehr Buttons machen es unwahrscheinlicher, dass jeder einzelne getippt wird.

### Kann ich meiner Instagram Bio mehr als einen Link hinzufügen?

Ja, Instagram erlaubt bis zu fünf Links im Profil, aber nur der erste ist vor einem Tipp sichtbar. Eine gut gestaltete Seite bleibt der klarste Weg.

### Wie passe ich meinen Link in Bio an meinen Instagram Feed an?

Nutze denselben Hintergrund, dieselben Farben und Schriften wie in deinen Beiträgen und gib dem Hauptbutton deine Akzentfarbe.
