# Pagina link in bio: una landing page per il tuo profilo

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

L’unico link del tuo profilo è dove la curiosità diventa una prenotazione, una vendita o un iscritto. Trattalo come una piccola landing page: un solo stile, pochi pulsanti, niente da decifrare.

## The short version

- Una pagina link in bio è una piccola landing page mobile che raccoglie i pochi posti dove vuoi che i visitatori del profilo vadano dopo.
- La migliore pagina link in bio usa da tre a cinque pulsanti, ordinati in base a ciò che conta di più questa settimana.
- I visitatori arrivano da un telefono, quindi progetta la pagina prima per uno schermo verticale stretto e controllala a larghezza da telefono.
- La pagina deve indossare lo stesso sfondo, gli stessi colori e gli stessi caratteri del feed, così il tocco sembra entrare nello stesso negozio.
- Quando il link viene condiviso in un messaggio, la sua immagine di anteprima è una grafica a parte di 1200×630 che vale la pena progettare.

Una buona **pagina link in bio** è una breve landing page mobile: il tuo nome, una riga su ciò che fai, da tre a cinque pulsanti in ordine d’importanza e uno sfondo coerente col feed, perché la visita sembri continua. Quasi tutti arrivano da un telefono, direttamente dal tuo profilo, con pochi secondi di attenzione. Ogni scelta qui sotto discende da questo.

## Cosa serve a una pagina link in bio, in ordine

Leggi la pagina dall’alto in basso come fa un visitatore. Vuole confermare di essere nel posto giusto, vedere cosa può fare e farlo. Tutto ciò che rallenta questi tre passi può andare.

| Parte | Cosa metterci | Limite |
| --- | --- | --- |
| Identità | Logo o foto, e il tuo nome come appare sul profilo | Un’immagine, una riga |
| Promessa | Cosa fai, per chi, in parole semplici | Meno di 12 parole |
| Pulsante principale | Ciò che vuoi di più questa settimana: Prenota, Scopri il drop, Compra i biglietti | Uno, visibilmente più forte |
| Altri pulsanti | Da due a quattro altre destinazioni | Verbi, non nomi di pagine |
| Piè di pagina | Piccole icone social e contatto | Discreto, in fondo |

L’anatomia di una pagina che la gente usa davvero. Le pagine di solito sbagliano aggiungendo un decimo pulsante, non perché ne manca uno.

Scrivi i pulsanti come azioni. Prenota un tavolo batte Prenotazioni; Leggi il nuovo numero batte Newsletter. Gli stessi principi valgono per ogni breve testo sui social, che [il copywriting per i social](https://gradiently.design/it/guide/writing-copy-for-visuals) tratta più a fondo.

## Progettare lo sfondo

Lo sfondo è gran parte di ciò che vede un visitatore, ed è dove una pagina o somiglia a te o somiglia a ogni altro template gratuito. Progettalo prima per lo schermo di un telefono. Un fotogramma verticale 1080×1920, come una story, è una misura di lavoro sensata per l’immagine, e un colore pieno dietro copre schermi più alti e desktop.

Una pagina verticale link in bio per uno studio di ceramica con nome, una breve riga e tre azioni su sfondo sfumato

Una pagina link in bio disegnata a misura di telefono: identità in alto, promessa, poi le azioni, con lo sfondo che fa il lavoro del brand.

Tieni la parte più affollata e luminosa dello sfondo lontana da dove stanno i pulsanti, di solito verso l’alto o un angolo. I pulsanti hanno bisogno di una superficie calma e uniforme dietro, altrimenti le etichette cominciano a competere col colore.

In alto luminoso, metà inferiore calma: `linear-gradient(180deg, #2b1055 0%, #4c1d95 30%, #1e1b4b 65%, #0b0a1a 100%)`

Colore e luce nel terzo superiore, dove sta il nome, che si assestano in un fondo profondo e uniforme dietro i pulsanti.

## Pulsanti che sembrano toccabili

### Da evitare

- Tutti i pulsanti uguali, quindi nessuno guida
- Contorni sottili che spariscono su un gradiente
- Etichette in maiuscolo con spaziatura larga, difficili da scorrere
- Pulsanti minuscoli ammassati
- Emoji che fanno il lavoro delle parole

### Da fare

- Un pulsante principale pieno, gli altri più discreti
- Riempimenti pieni presi dalla tua palette
- Etichette in minuscolo con la maiuscola iniziale, un verbo ciascuna
- Pulsanti a tutta larghezza con spaziatura generosa
- Parole semplici, un’icona solo se aiuta

Un pulsante pieno nel colore d’accento, con gli altri in una tinta più morbida del fondo, dà all’occhio un primo tocco ovvio. Verifica che ogni etichetta abbia il contrasto con il proprio riempimento, non con la pagina: [il contrasto dei colori e l’accessibilità](https://gradiently.design/it/guide/color-contrast-accessibility) ha i rapporti.

## Costruire la tua pagina link in bio

I servizi di link in bio sono rapidi, ma una pagina sul tuo dominio è facile da costruire e tiene i visitatori sul tuo sito. Questa è una versione completa e minimale: uno sfondo sfumato a tutta altezza, una colonna centrata e un pulsante principale. Sostituisci i tuoi colori e link.

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

Un solo file, nessuno script. Il colore pieno su html si vede nell’overscroll e sugli schermi più alti del gradiente.

Se preferisci un pulsante più ricco, [il CSS dei pulsanti sfumati](https://gradiently.design/it/guide/css-gradient-button) mostra come dare al principale un po’ di profondità senza farlo gridare.

## Far corrispondere la pagina al feed

Il passaggio dal profilo alla pagina deve sembrare aprire una porta nello stesso edificio. Usa i colori, i caratteri e lo sfondo che usi nei post e il visitatore non si chiede mai se è uscito. [La coerenza del brand sui social](https://gradiently.design/it/guide/brand-consistency-across-platforms) tratta il sistema più ampio.

- Fondo notte: #0b0a1a
- Viola: #4c1d95
- Indaco: #1e1b4b
- Pulsante principale: #fbbf24
- Inchiostro: #f5f3ff

Gli stessi cinque colori usati su feed, pagina e pulsanti. L’ambra compare solo sul pulsante principale, ed è per questo che viene toccato.

Qui uno sfondo di tua proprietà ripaga. Un Mark di Gradiently è un gradiente vivo che si renderizza a ogni misura in cui progetti, quindi post, story e sfondo della pagina possono indossare esattamente lo stesso stile, e nessun altro può esportarlo una volta che l’hai riservato. Esporta il Mark a 1080×1920 con Pro, che lo mantiene a piena misura senza filigrana, e la pagina combacia con il feed per costruzione.

## L’immagine di anteprima che la gente vede quando condividi il link

Quando qualcuno invia il tuo link in un messaggio, le app mostrano una scheda di anteprima costruita con l’immagine Open Graph della pagina. Un’anteprima vuota o casuale vanifica il lavoro fatto. Progettane una a 1200×630 con il tuo nome e la promessa, usando lo stesso sfondo. I dettagli sono nella [misura dell’immagine OG](https://gradiently.design/it/guide/open-graph-image-size).

Una larga scheda di anteprima di un link per uno studio di ceramica con nome e breve riga sullo stesso sfondo sfumato

L’anteprima del link, sullo sfondo della pagina stessa, così un link condiviso ti somiglia già.

1. **Controlla a larghezza da telefono** Apri la pagina sul tuo telefono dal tuo profilo, come fanno i visitatori, non in un browser desktop.
2. **Riordina i pulsanti ogni settimana** Porta in cima ciò che conta ora e togli ciò che è finito.
3. **Prova l’anteprima** Invia il link a te stesso in un’app di messaggi e guarda la scheda che crea.

## FAQ

### Cosa deve esserci in una pagina link in bio?

Il tuo nome e logo, una riga su ciò che fai, da tre a cinque pulsanti d’azione con il più importante per primo e piccoli link di contatto in fondo.

### Che misura deve avere lo sfondo di un link in bio?

Progettalo prima per il telefono. Un’immagine verticale 1080×1920 funziona bene, con un colore pieno dietro per gli schermi più alti e il desktop.

### Meglio un servizio di link in bio o il mio sito?

Un servizio è più rapido da configurare. Una pagina sul tuo dominio tiene i visitatori sul tuo sito e ti dà pieno controllo del design, e può essere un solo file HTML.

### Quanti link deve avere una pagina link in bio?

Da tre a cinque bastano alla maggior parte delle persone. Più pulsanti rendono ciascuno meno probabile da toccare.

### Posso aggiungere più di un link alla bio di Instagram?

Sì, Instagram permette di aggiungere fino a cinque link al profilo, ma solo il primo è visibile prima di un tocco. Una pagina ben progettata resta la via più chiara.

### Come faccio a far combaciare il mio link in bio con il feed di Instagram?

Usa lo stesso sfondo, gli stessi colori e caratteri dei post e dai al pulsante principale il tuo colore d’accento.
