Link-in-bio-pagina maken

Zo maak je je link-in-bio-pagina

1. Typ onder Profiel je Naam of merk en een Korte bio. Regeleinden in de bio blijven behouden.
2. Voeg eventueel een Profielfoto toe: sleep een afbeelding naar het vak of klik erop om een bestand te kiezen. Je browser leest de afbeelding en sluit haar in de pagina in; ze wordt nooit geüpload.
3. Vul onder Links voor elke knop de Linktekst en het Adres (URL) in. Klik op Link toevoegen voor meer links, gebruik de knoppen ↑ en ↓ om de volgorde te wijzigen en × om er een te verwijderen.
4. Kies onder Ontwerp een Thema (Licht, Donker, Oceaan, Zonsondergang, Bos) of stel de vier kleuren zelf in, en kies daarna de Vorm van de knoppen en het Lettertype.
5. Bekijk het Voorbeeld en klik op index.html downloaden. HTML kopiëren kopieert dezelfde code, als je die liever in een bestaande site plakt.

Voorbeeld laden vult een voorbeeldprofiel in, zodat je ziet hoe de pagina eruitziet, en met Wissen begin je opnieuw.

Wat je krijgt

Het resultaat is één HTML-bestand waar alles in zit: de stijlen staan in een <style>-blok, de foto is als data-URI ingesloten, en er is geen JavaScript, geen trackingscript, geen webfont en geen extern verzoek. Daardoor is de pagina erg snel (meestal een paar kilobyte plus de foto), privé voor je bezoekers en makkelijk jarenlang te bewaren: er is geen dienst die kan stoppen, zijn prijzen kan veranderen of zijn eigen logo kan toevoegen.

De pagina is responsive: de knoppen vullen de breedte van een telefoon en houden op een computer een prettige breedte. Er zit een lang-attribuut in, een viewport-tag, een titel (je naam) en een metabeschrijving (je bio), zodat de pagina er goed uitziet in zoekresultaten en linkvoorbeelden. Links naar websites openen met rel="noopener", en e-mailadressen worden automatisch mailto:-links.

De controles

De lijst Controles meldt links waarvan het adres geen geldig web-, mailto:- of tel:-adres is. Zulke links worden weggelaten in plaats van kapot gepubliceerd, en iets als javascript: wordt altijd geweigerd. De tool waarschuwt ook als het tekstcontrast van de knoppen of de pagina lager is dan 4,5:1, het WCAG-niveau voor gewone tekst, en als de foto zwaar is. Een foto van 300 × 300 pixels is ruim genoeg voor een ronde avatar van 104 pixels, ook op schermen met een hoge pixeldichtheid.

Zo zet je de pagina online

Het bestand heeft een webadres nodig voordat je het in je bio op Instagram, TikTok of YouTube kunt plakken. Drie gangbare manieren:

• GitHub Pages (gratis): maak een openbare repository, upload index.html en kies onder Settings → Pages om vanaf de main-branch te publiceren. De pagina verschijnt op https://je-gebruikersnaam.github.io/repositorynaam/.
• Netlify Drop (gratis): zet index.html in een map en sleep die map naar de pagina van Netlify Drop. Je krijgt meteen een willekeurig adres; maak een gratis account om de site te bewaren en een mooiere naam te kiezen of je eigen domein te koppelen.
• Je eigen hosting: upload het bestand met het bestandsbeheer van je hostingpartij of via FTP, bijvoorbeeld in een map links, zodat je https://jouw-domein.nl/links/ krijgt.

Wil je de pagina later bijwerken? Pas het formulier aan, download het bestand opnieuw en vervang het oude.