Link-in-bio-pagina: een landingspagina voor je profiel

Een goede link-in-bio-pagina is een korte mobiele landingspagina: je naam, één regel over wat je doet, drie tot vijf knoppen in volgorde van belang en een achtergrond die bij je feed past, zodat het bezoek doorlopend voelt. Bijna iedereen komt van een telefoon, rechtstreeks van je profiel, met een paar seconden aandacht. Elke keuze hieronder volgt daaruit.

Wat een link-in-bio-pagina nodig heeft, op volgorde

Lees de pagina van boven naar beneden zoals een bezoeker. Die wil bevestigd zien dat hij op de juiste plek is, zien wat hij kan doen en het doen. Alles wat die drie stappen vertraagt mag weg.

Schrijf knoppen als acties. Reserveer een tafel wint van Reserveringen; Lees het nieuwe nummer wint van Nieuwsbrief. Dezelfde principes gelden voor elke korte tekst op social, wat socialmediacopywriting dieper behandelt.

De achtergrond ontwerpen

De achtergrond is het grootste deel van wat een bezoeker ziet en daar ziet een pagina er wel of niet uit als jij, of als elk ander gratis sjabloon. Ontwerp hem eerst voor een telefoonscherm. Een verticaal kader van 1080×1920, gelijk aan een story, is een verstandig werkformaat voor de afbeelding en een effen kleur erachter dekt hogere schermen en desktop.

Houd het drukste, helderste deel van de achtergrond weg van waar de knoppen staan, meestal naar boven of een hoek. Knoppen hebben een rustig, egaal oppervlak erachter nodig, anders gaan hun labels met de kleur concurreren.

Knoppen die aantikbaar ogen

Een gevulde knop in je accentkleur, met de andere in een zachtere tint van de ondergrond, geeft het oog een duidelijke eerste tik. Check of elk label voldoende contrast heeft tegen zijn eigen vulling, niet tegen de pagina: kleurcontrast en toegankelijkheid heeft de verhoudingen.

Je eigen link-in-bio-pagina bouwen

Link-in-bio-diensten zijn snel, maar een pagina op je eigen domein is makkelijk te bouwen en houdt bezoekers op je site. Dit is een complete, minimale versie: een achtergrond met een gradiënt over de volle hoogte, een gecentreerde kolom en één hoofdknop. Vervang de kleuren en links door de jouwe.

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

Heb je liever een rijkere knop, dan laat CSS-gradiëntknop zien hoe je de hoofdknop wat diepte geeft zonder dat hij schreeuwt.

De pagina laten aansluiten op je feed

De tik van profiel naar pagina moet aanvoelen als een deur openen in hetzelfde gebouw. Gebruik de kleuren, fonts en achtergrond die je in je posts gebruikt en de bezoeker vraagt zich nooit af of hij weg is. Consistente branding op social media behandelt het bredere systeem.

Hier loont een eigen achtergrond. Een Gradiently Mark is een levende gradiënt die rendert op elk formaat dat je ontwerpt, dus je posts, stories en de achtergrond van de pagina kunnen precies dezelfde look dragen en niemand anders kan ermee exporteren zodra jij hem hebt geclaimd. Exporteer de Mark met Pro op 1080×1920, wat hem op volledig formaat en zonder watermerk houdt, en de pagina sluit per constructie aan op je feed.

De voorbeeldafbeelding die mensen zien als je de link deelt

Stuurt iemand je link in een bericht, dan tonen apps een voorbeeldkaart die is gebouwd uit de Open Graph-afbeelding van de pagina. Een lege of willekeurige voorvertoning maakt het werk hierboven ongedaan. Ontwerp er een op 1200×630 met je naam en de belofte, op dezelfde achtergrond. De details staan in OG-afbeeldingsformaat.

1. 1

   Check hem op telefoonbreedte

   Open de pagina op je eigen telefoon vanaf je profiel, zoals bezoekers doen, niet in een desktopbrowser.

2. 2

   Sorteer de knoppen wekelijks opnieuw

   Zet wat nu telt bovenaan en haal weg wat voorbij is.

3. 3

   Test het voorbeeld

   Stuur de link naar jezelf in een berichtenapp en bekijk de kaart die het maakt.