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

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.

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

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.

Des boutons qui donnent envie de toucher

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

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

Si vous préférez un bouton plus riche, le CSS de bouton dégradé 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 couvre le système plus large.

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.

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

   Réordonnez les boutons chaque semaine

   Mettez en haut ce qui compte maintenant et retirez ce qui est terminé.

3. 3

   Testez l’aperçu

   Envoyez-vous le lien dans une app de messagerie et regardez la carte qu’il produit.