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

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.

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

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.

Buttons, die antippbar aussehen

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

<!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>

Möchtest du einen reicheren Button, zeigt CSS-Verlaufsbutton, 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 behandelt das größere System.

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.

1. 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. 2

   Buttons wöchentlich neu ordnen

   Schiebe nach oben, was jetzt zählt, und streiche, was vorbei ist.

3. 3

   Die Vorschau testen

   Schick dir den Link in einer Messenger-App selbst und sieh dir die Karte an, die daraus entsteht.