Skapa en länk-i-bio-sida

Så bygger du din länk-i-bio-sida

1. Under Profil skriver du ditt Namn eller varumärke och en Kort presentation. Radbrytningar i presentationen bevaras.
2. Lägg vid behov till ett Profilfoto: släpp en bild på släppytan eller klicka på den för att välja en fil. Bilden läses av din webbläsare och bäddas in i sidan; den laddas aldrig upp.
3. Under Länkar fyller du i Länktext och Adress (URL) för varje knapp. Klicka på Lägg till en länk för fler, använd knapparna ↑ och ↓ för att ändra ordningen och × för att ta bort en.
4. Under Utseende väljer du ett Tema (Ljust, Mörkt, Hav, Solnedgång, Skog) eller ställer in de fyra färgerna själv, och väljer sedan Knappform och Typsnitt.
5. Kontrollera Förhandsvisning och klicka sedan på Ladda ner index.html. Kopiera HTML kopierar samma kod om du hellre vill klistra in den i en befintlig webbplats.

Läs in exempel fyller i en exempelprofil så att du ser hur sidan ser ut, och Rensa börjar om.

Det här får du

Resultatet är en enda HTML-fil med allt inuti: stilarna ligger direkt i ett <style>-block, fotot är inbäddat som en data-URI och det finns inget JavaScript, inget spårningsskript, inget webbtypsnitt och inga externa anrop. Det gör sidan mycket snabb (oftast några kilobyte plus fotot), privat för dina besökare och lätt att behålla i många år: det finns ingen tjänst som kan läggas ner, ändra sina priser eller lägga till sin egen märkning.

Sidan är responsiv: knapparna fyller bredden på en mobil och behåller en behaglig bredd på en dator. Den innehåller attributet lang, en viewport-tagg, en titel (ditt namn) och en metabeskrivning (din presentation), så att den ser bra ut i sökresultat och länkförhandsvisningar. Länkar till webbplatser öppnas med rel="noopener", och e-postadresser blir automatiskt mailto:-länkar. Sidans språkattribut följer sidans språk. Knapparnas texter skriver du själv.

Kontrollerna

Listan Kontroller markerar länkar vars adress inte är en giltig webb-, mailto:- eller tel:-adress. Sådana länkar utelämnas i stället för att publiceras trasiga, och allt som javascript: avvisas alltid. Den varnar också när textkontrasten för knapparna eller sidan understiger 4,5:1, WCAG-nivån för normal text, och när fotot är tungt. Ett foto på 300 × 300 pixlar räcker gott och väl för en rund avatar på 104 pixlar, även på skärmar med hög pixeltäthet.

Så lägger du sidan online

Filen behöver en webbadress innan du kan klistra in den i din bio på Instagram, TikTok eller YouTube. Tre vanliga alternativ:

• GitHub Pages (gratis): skapa ett publikt arkiv, ladda upp index.html och välj sedan under Settings → Pages att publicera från huvudgrenen. Sidan visas på https://ditt-anvandarnamn.github.io/arkivets-namn/.
• Netlify Drop (gratis): lägg index.html i en mapp och dra mappen till sidan Netlify Drop. Du får en slumpmässig adress direkt; skapa ett gratis konto för att behålla webbplatsen och välja ett snyggare namn eller koppla din egen domän.
• Eget webbhotell: ladda upp filen med webbhotellets filhanterare eller FTP, till exempel i en mapp som heter links, för att få https://din-domän.se/links/.

Vill du uppdatera sidan senare ändrar du formuläret, laddar ner filen igen och ersätter den gamla.