Creador de pàgina d'enllaços per a la bio

Com crear la teva pàgina d’enllaços per a la bio

1. A Perfil, escriu el Nom o marca i una Biografia breu. Els salts de línia de la biografia es conserven.
2. Si vols, afegeix una Foto de perfil (opcional): deixa anar una imatge a la zona indicada o fes-hi clic per triar un fitxer. El navegador llegeix la imatge i la incrusta a la pàgina; no es puja mai a cap servidor.
3. A Enllaços, omple el Text de l’enllaç i l’Adreça (URL) de cada botó. Fes clic a Afegeix un enllaç per afegir-ne més, fes servir els botons ↑ i ↓ (Mou amunt i Mou avall) per canviar l’ordre i × per eliminar-ne un.
4. A Disseny, tria un Tema (Clar, Fosc, Oceà, Posta de sol, Bosc) o defineix tu mateix els quatre colors, i després tria la Forma dels botons i el Tipus de lletra.
5. Mira la Previsualització i fes clic a Baixa index.html. Copia l’HTML copia el mateix codi, per si prefereixes enganxar-lo en un lloc web que ja tinguis.

Carrega un exemple omple un perfil de mostra perquè vegis com queda la pàgina, i Esborra torna a començar de zero.

Què obtens

El resultat és un únic fitxer HTML amb tot a dins: els estils són en línia en un bloc <style>, la foto s’incrusta com a URI de dades, i no hi ha JavaScript, ni scripts de seguiment, ni tipus de lletra web, ni cap petició externa. Això fa que la pàgina sigui molt ràpida (normalment uns quants quilobytes més la foto), privada per als teus visitants i fàcil de conservar durant anys: no depèn de cap servei que pugui tancar, canviar els preus o afegir-hi la seva marca.

La pàgina s’adapta a qualsevol pantalla: els botons ocupen tota l’amplada en un telèfon intel·ligent i mantenen una amplada còmoda en un ordinador. Inclou un atribut lang, l’etiqueta viewport, un títol (el teu nom) i una meta descripció (la teva biografia), de manera que es veu bé als resultats de cerca i a les previsualitzacions d’enllaços. Els enllaços a llocs web s’obren amb rel="noopener", i les adreces de correu es converteixen automàticament en enllaços mailto:.

Les comprovacions

La llista de Comprovacions assenyala els enllaços l’adreça dels quals no és una adreça web, mailto: o tel: vàlida. Aquests enllaços s’ometen en lloc de publicar-los trencats, i qualsevol cosa com javascript: es rebutja sempre. També t’avisa quan el contrast del text dels botons o de la pàgina és inferior a 4,5:1, el nivell WCAG per a text normal, i quan la foto pesa massa. Una foto de 300 × 300 píxels és més que suficient per a un avatar rodó de 104 píxels, fins i tot en pantalles d’alta densitat.

Com publicar la pàgina

El fitxer necessita una adreça web abans de poder-lo posar a la bio d’Instagram, TikTok o YouTube. Tres opcions habituals:

• GitHub Pages (gratuït): crea un repositori públic, puja-hi index.html i, a Settings → Pages, tria desplegar des de la branca principal. La pàgina apareix a https://el-teu-usuari.github.io/nom-del-repositori/.
• Netlify Drop (gratuït): posa index.html en una carpeta i arrossega-la a la pàgina de Netlify Drop. Obtens una adreça aleatòria a l’instant; crea un compte gratuït per conservar el lloc i triar un nom més bonic o connectar-hi el teu domini.
• El teu allotjament: puja el fitxer amb el gestor de fitxers o l’FTP del teu proveïdor, per exemple a una carpeta links, per obtenir https://el-teu-domini.cat/links/.

Per actualitzar la pàgina més endavant, canvia el formulari, torna a baixar el fitxer i substitueix l’antic.