Criador de página de link na bio

Como criar a tua página de link na bio

1. Em Perfil, escreve o teu Nome ou marca e uma Bio curta. As mudanças de linha na bio são mantidas.
2. Se quiseres, acrescenta uma Fotografia de perfil (opcional): larga uma imagem na zona indicada ou clica nela para escolheres um ficheiro. A imagem é lida pelo teu navegador e incorporada na página; nunca é enviada.
3. Em Ligações, preenche o Texto da ligação e o Endereço (URL) de cada botão. Clica em Adicionar uma ligação para teres mais, usa os botões ↑ e ↓ para mudar a ordem e × para remover uma.
4. Em Design, escolhe um Tema (Claro, Escuro, Oceano, Pôr do sol, Floresta) ou define tu as quatro cores, e depois escolhe a Forma dos botões e o Tipo de letra.
5. Confere a Pré-visualização e clica em Transferir index.html. Copiar HTML copia o mesmo código, se preferires colá-lo num site que já tens.

Carregar exemplo preenche um perfil fictício para veres o aspeto da página, e Limpar recomeça do zero.

O que obténs

O resultado é um único ficheiro HTML com tudo lá dentro: os estilos estão num bloco <style> inline, a fotografia está incorporada como data URI, e não há JavaScript, scripts de rastreamento, tipos de letra web nem pedidos externos. Isso torna a página muito rápida (normalmente alguns kilobytes mais a fotografia), privada para os teus visitantes e fácil de manter durante anos: não há nenhum serviço que possa fechar, mudar os preços ou acrescentar a sua própria marca.

A página é responsiva: os botões ocupam a largura de um telemóvel e mantêm uma largura confortável num computador. Inclui um atributo lang com a língua da página (pt aqui), uma etiqueta viewport, um título (o teu nome) e uma meta description (a tua bio), por isso aparece bem nos resultados de pesquisa e nas pré-visualizações de ligações. As ligações para sites abrem com rel="noopener" e os endereços de email tornam-se automaticamente ligações mailto:.

As verificações

A lista de Verificações assinala ligações cujo endereço não é um endereço web, mailto: ou tel: válido. Essas ligações são deixadas de fora em vez de serem publicadas partidas, e algo como javascript: é sempre recusado. Também avisa quando o contraste do texto dos botões ou da página está abaixo de 4,5:1, o nível WCAG para texto normal, e quando a fotografia é pesada. Uma fotografia de 300 × 300 píxeis chega perfeitamente para um avatar redondo de 104 píxeis, mesmo em ecrãs de alta densidade.

Como pôr a página online

O ficheiro precisa de um endereço web antes de o poderes colar na tua bio do Instagram, do TikTok ou do YouTube. Três opções comuns:

• GitHub Pages (grátis): cria um repositório público, carrega o index.html e, em Settings → Pages, escolhe publicar a partir do ramo principal. A página fica em https://o-teu-utilizador.github.io/nome-do-repositorio/.
• Netlify Drop (grátis): põe o index.html numa pasta e arrasta essa pasta para a página do Netlify Drop. Recebes logo um endereço aleatório; cria uma conta gratuita para manteres o site e escolheres um nome melhor ou ligares o teu próprio domínio.
• O teu próprio alojamento: carrega o ficheiro com o gestor de ficheiros do teu alojamento ou por FTP, por exemplo para uma pasta links, e obténs https://o-teu-dominio.pt/links/.

Para atualizar a página mais tarde, altera o formulário, transfere de novo o ficheiro e substitui o antigo.