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

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

De ene link op je profiel is waar nieuwsgierigheid een boeking, een verkoop of een abonnee wordt. Behandel hem als een kleine landingspagina: één look, een paar knoppen, niets te ontcijferen.

## The short version

- Een link-in-bio-pagina is een kleine mobiele landingspagina die de paar plekken verzamelt waar je profielbezoekers daarna heen wilt hebben.
- Het beste ontwerp voor een link-in-bio-pagina gebruikt drie tot vijf knoppen, gesorteerd op wat deze week het meest telt.
- Bezoekers komen van een telefoon, dus ontwerp de pagina eerst voor een smal verticaal scherm en check hem op telefoonbreedte.
- De pagina draagt dezelfde achtergrond, kleuren en fonts als je feed, zodat de tik aanvoelt als dezelfde winkel binnenlopen.
- Wordt de link in een bericht gedeeld, dan is de voorbeeldafbeelding een aparte graphic van 1200×630 die ook een ontwerp waard is.

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.

| Onderdeel | Wat je erin zet | Houd het bij |
| --- | --- | --- |
| Identiteit | Logo of foto en je naam zoals die op je profiel staat | Eén afbeelding, één regel |
| Belofte | Wat je doet, voor wie, in gewone woorden | Minder dan 12 woorden |
| Hoofdknop | Waar je deze week het meest naar toe wilt: Boek, Shop de drop, Koop tickets | Eén, zichtbaar sterker |
| Andere knoppen | Twee tot vier andere bestemmingen | Werkwoorden, geen paginanamen |
| Voettekst | Kleine socialmediaiconen en contact | Rustig, onderaan |

De anatomie van een pagina die mensen echt gebruiken. Pagina’s gaan meestal mis door een tiende knop toe te voegen, niet door er een te missen.

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](https://gradiently.design/nl/guide/writing-copy-for-visuals) 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.

Een verticale link-in-bio-pagina voor een keramiekstudio met zijn naam, een korte regel en drie acties op een gradiëntachtergrond

Een link-in-bio-pagina op telefoonformaat getekend: bovenaan de identiteit, dan de belofte en dan de acties, met de achtergrond die het merkwerk doet.

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.

Heldere bovenkant, rustige onderste helft: `linear-gradient(180deg, #2b1055 0%, #4c1d95 30%, #1e1b4b 65%, #0b0a1a 100%)`

Kleur en licht in het bovenste derde, waar de naam staat, die uitloopt in een diepe, egale ondergrond achter de knoppen.

## Knoppen die aantikbaar ogen

### Vermijd

- Elke knop gelijk, zodat niets leidt
- Dunne omlijningen die op een gradiënt verdwijnen
- Labels in hoofdletters met brede spatiëring, moeilijk te scannen
- Kleine knoppen dicht op elkaar
- Emoji die het werk van woorden doen

### Doe

- Eén gevulde hoofdknop, de rest rustiger
- Effen vullingen uit je palet
- Labels met hoofdletter alleen aan het begin, elk één werkwoord
- Knoppen over de volle breedte met ruime tussenruimte
- Gewone woorden, alleen een icoon als het helpt

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](https://gradiently.design/nl/guide/color-contrast-accessibility) 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.

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

Eén bestand, geen scripts. De effen kleur op html verschijnt bij overscroll en op schermen die hoger zijn dan de gradiënt.

Heb je liever een rijkere knop, dan laat [CSS-gradiëntknop](https://gradiently.design/nl/guide/css-gradient-button) 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](https://gradiently.design/nl/guide/brand-consistency-across-platforms) behandelt het bredere systeem.

- Nachtondergrond: #0b0a1a
- Violet: #4c1d95
- Indigo: #1e1b4b
- Hoofdknop: #fbbf24
- Inkt: #f5f3ff

Dezelfde vijf kleuren op de feed, de pagina en de knoppen. Het amber komt alleen op de hoofdknop voor, daarom wordt die aangetikt.

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](https://gradiently.design/nl/guide/open-graph-image-size).

Een brede linkvoorbeeldkaart voor een keramiekstudio met zijn naam en een korte regel op dezelfde gradiëntachtergrond

Het linkvoorbeeld, op de eigen achtergrond van de pagina, zodat een gedeelde link er al uitziet als jij.

1. **Check hem op telefoonbreedte** Open de pagina op je eigen telefoon vanaf je profiel, zoals bezoekers doen, niet in een desktopbrowser.
2. **Sorteer de knoppen wekelijks opnieuw** Zet wat nu telt bovenaan en haal weg wat voorbij is.
3. **Test het voorbeeld** Stuur de link naar jezelf in een berichtenapp en bekijk de kaart die het maakt.

## FAQ

### Wat hoort er op een link-in-bio-pagina?

Je naam en logo, één regel over wat je doet, drie tot vijf actieknoppen met de belangrijkste eerst en kleine contactlinks onderaan.

### Welk formaat moet een link-in-bio-achtergrond hebben?

Ontwerp hem eerst voor een telefoon. Een verticale afbeelding van 1080×1920 werkt goed, met een effen kleur erachter voor hogere schermen en desktop.

### Moet ik een link-in-bio-dienst gebruiken of mijn eigen website?

Een dienst is sneller opgezet. Een pagina op je eigen domein houdt bezoekers op je site en geeft je volledige controle over het ontwerp, en kan één HTML-bestand zijn.

### Hoeveel links moet een link-in-bio-pagina hebben?

Drie tot vijf is voor de meeste mensen genoeg. Meer knoppen maken de kans kleiner dat elk wordt aangetikt.

### Kan ik meer dan één link in mijn Instagram-bio zetten?

Ja, Instagram laat je tot vijf links aan je profiel toevoegen, maar alleen de eerste is zichtbaar voor een tik. Eén goed ontworpen pagina blijft de duidelijkste weg.

### Hoe laat ik mijn link in bio aansluiten op mijn Instagram-feed?

Gebruik dezelfde achtergrond, kleuren en fonts als je posts en geef de hoofdknop je accentkleur.