# Page de lien en bio : l’atterrissage de votre profil

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

Le seul lien de votre profil est l’endroit où la curiosité devient une réservation, une vente ou un abonné. Traitez-le comme une minuscule page d’atterrissage : un look, quelques boutons, rien à déchiffrer.

## The short version

- Une page de lien en bio est une petite page d’atterrissage mobile qui rassemble les quelques endroits où vous voulez envoyer ensuite les visiteurs du profil.
- La meilleure page de lien en bio utilise trois à cinq boutons, classés par ce qui compte le plus cette semaine.
- Les visiteurs arrivent depuis un téléphone : concevez d’abord la page pour un écran étroit en hauteur et vérifiez-la à largeur de téléphone.
- La page doit porter le même fond, les mêmes couleurs et les mêmes polices que votre feed : le toucher donne l’impression d’entrer dans la même boutique.
- Quand le lien est partagé dans un message, son image d’aperçu est un visuel distinct de 1200×630 qui mérite aussi d’être conçu.

Une bonne **page de lien en bio** est une courte page d’atterrissage mobile : votre nom, une ligne sur ce que vous faites, trois à cinq boutons par ordre d’importance, et un fond assorti à votre feed pour que la visite paraisse continue. Presque tout le monde arrive depuis un téléphone, directement depuis votre profil, avec quelques secondes d’attention. Chaque choix ci-dessous en découle.

## Ce qu’une page de lien en bio doit contenir, dans l’ordre

Lisez la page de haut en bas comme le fait un visiteur. Il veut confirmer qu’il est au bon endroit, voir ce qu’il peut faire, et le faire. Tout ce qui ralentit ces trois étapes peut disparaître.

| Élément | Quoi y mettre | Limite |
| --- | --- | --- |
| Identité | Logo ou photo, et votre nom tel qu’il apparaît sur votre profil | Une image, une ligne |
| Promesse | Ce que vous faites, pour qui, en mots simples | Moins de 12 mots |
| Bouton principal | Ce que vous voulez le plus cette semaine : Réserver, Voir la collection, Prendre des places | Un seul, visiblement plus fort |
| Autres boutons | Deux à quatre autres destinations | Des verbes, pas des noms de pages |
| Pied de page | Petites icônes sociales et contact | Discret, en bas |

L’anatomie d’une page que l’on utilise vraiment. Les pages se perdent en ajoutant un dixième bouton, pas en en oubliant un.

Écrivez les boutons comme des actions. Réserver une table vaut mieux que Réservations ; Lire le nouveau numéro vaut mieux que Newsletter. Les mêmes principes valent pour tout court texte sur les réseaux, que [la rédaction pour les réseaux sociaux](https://gradiently.design/fr/guide/writing-copy-for-visuals) couvre plus en profondeur.

## Concevoir le fond

Le fond est l’essentiel de ce que voit un visiteur, et c’est là qu’une page ressemble à vous ou à tous les autres modèles gratuits. Concevez-le d’abord pour un écran de téléphone. Un cadre vertical de 1080×1920, comme une story, est une taille de travail sensée pour l’image, et une couleur unie derrière couvre les écrans plus hauts et le bureau.

Une page verticale de lien en bio pour un atelier de céramique avec son nom, une courte ligne et trois actions sur un fond dégradé

Une page de lien en bio dessinée à taille de téléphone : l’identité en haut, la promesse, puis les actions, le fond faisant le travail de marque.

Gardez la partie la plus chargée et la plus lumineuse du fond loin de l’emplacement des boutons, en général vers le haut ou un coin. Les boutons ont besoin d’une surface calme et régulière derrière eux, sinon leurs libellés entrent en concurrence avec la couleur.

Haut lumineux, moitié basse calme: `linear-gradient(180deg, #2b1055 0%, #4c1d95 30%, #1e1b4b 65%, #0b0a1a 100%)`

Couleur et lumière dans le tiers haut, où se trouve le nom, qui se posent en un fond profond et régulier derrière les boutons.

## Des boutons qui donnent envie de toucher

### À éviter

- Tous les boutons identiques, donc rien ne guide
- Des contours fins qui disparaissent sur un dégradé
- Des libellés en capitales très espacées, difficiles à parcourir
- De minuscules boutons collés les uns aux autres
- Des emojis qui font le travail des mots

### À faire

- Un bouton principal plein, les autres plus discrets
- Des aplats pris dans votre palette
- Des libellés en casse de phrase, un verbe chacun
- Des boutons pleine largeur bien espacés
- Des mots simples, une icône seulement si elle aide

Un bouton plein dans votre couleur d’accent, les autres dans une teinte plus douce du fond, donne à l’œil un premier toucher évident. Vérifiez que chaque libellé respecte le contraste avec son propre fond de bouton, et non avec la page : [le contraste des couleurs et l’accessibilité](https://gradiently.design/fr/guide/color-contrast-accessibility) donne les ratios.

## Construire votre propre page de lien en bio

Les services de lien en bio sont rapides, mais une page sur votre propre domaine est facile à construire et garde les visiteurs sur votre site. Voici une version complète et minimale : un fond dégradé pleine hauteur, une colonne centrée et un bouton principal. Remplacez par vos couleurs et vos liens.

```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 fichier, aucun script. La couleur unie sur html apparaît au défilement excessif et sur les écrans plus hauts que le dégradé.

Si vous préférez un bouton plus riche, [le CSS de bouton dégradé](https://gradiently.design/fr/guide/css-gradient-button) montre comment donner un peu de relief au principal sans qu’il crie.

## Assortir la page à votre feed

Le passage du profil à la page doit ressembler à l’ouverture d’une porte dans le même immeuble. Utilisez les couleurs, polices et fonds de vos posts : le visiteur ne se demande jamais s’il est parti. [Une marque cohérente sur les réseaux sociaux](https://gradiently.design/fr/guide/brand-consistency-across-platforms) couvre le système plus large.

- Fond de nuit: #0b0a1a
- Violet: #4c1d95
- Indigo: #1e1b4b
- Bouton principal: #fbbf24
- Encre: #f5f3ff

Les mêmes cinq couleurs sur le feed, la page et les boutons. L’ambre n’apparaît que sur le bouton principal, c’est pourquoi on le touche.

C’est là qu’un fond que l’on possède est payant. Un Mark Gradiently est un dégradé vivant qui se rend à chaque taille que vous créez : vos posts, stories et le fond de la page portent exactement le même look, et personne d’autre ne peut exporter avec une fois que vous l’avez réservé. Exportez le Mark en 1080×1920 avec Pro, qui le garde en pleine taille sans filigrane, et la page est assortie à votre feed par construction.

## L’image d’aperçu que l’on voit quand vous partagez le lien

Quand quelqu’un envoie votre lien dans un message, les apps affichent une carte d’aperçu bâtie à partir de l’image Open Graph de la page. Un aperçu vide ou aléatoire défait le travail ci-dessus. Créez-en un en 1200×630 avec votre nom et la promesse, sur le même fond. Les détails sont dans [la taille d’image OG](https://gradiently.design/fr/guide/open-graph-image-size).

Une large carte d’aperçu de lien pour un atelier de céramique avec son nom et une courte ligne sur le même fond dégradé

L’aperçu du lien, sur le fond de la page, pour qu’un lien partagé vous ressemble déjà.

1. **Vérifiez à largeur de téléphone** Ouvrez la page sur votre propre téléphone depuis votre profil, comme le font les visiteurs, pas dans un navigateur de bureau.
2. **Réordonnez les boutons chaque semaine** Mettez en haut ce qui compte maintenant et retirez ce qui est terminé.
3. **Testez l’aperçu** Envoyez-vous le lien dans une app de messagerie et regardez la carte qu’il produit.

## FAQ

### Que doit contenir une page de lien en bio ?

Votre nom et votre logo, une ligne sur ce que vous faites, trois à cinq boutons d’action avec le plus important en premier, et de petits liens de contact en bas.

### Quelle taille pour le fond d’un lien en bio ?

Concevez-le d’abord pour un téléphone. Une image verticale de 1080×1920 convient bien, avec une couleur unie derrière pour les écrans plus hauts et le bureau.

### Faut-il un service de lien en bio ou mon propre site ?

Un service se met en place plus vite. Une page sur votre propre domaine garde les visiteurs sur votre site et vous donne un contrôle total du design, et elle peut tenir en un seul fichier HTML.

### Combien de liens pour une page de lien en bio ?

Trois à cinq suffisent à la plupart des gens. Plus il y a de boutons, moins chacun a de chances d’être touché.

### Puis-je ajouter plusieurs liens dans ma bio Instagram ?

Oui, Instagram permet d’ajouter jusqu’à cinq liens à votre profil, mais seul le premier est visible avant un toucher. Une page bien conçue reste la voie la plus claire.

### Comment assortir mon lien en bio à mon feed Instagram ?

Utilisez le même fond, les mêmes couleurs et les mêmes polices que vos posts, et donnez au bouton principal votre couleur d’accent.
