Конструктор сторінки «посилання в біо»

Як створити сторінку «посилання в біо»

1. У розділі Профіль введіть Ім’я або бренд і Короткий опис. Розриви рядків в описі зберігаються.
2. За бажанням додайте Фото профілю (необов’язково): перетягніть зображення в зону перетягування або натисніть її, щоб вибрати файл. Зображення читає ваш браузер і вбудовує в сторінку; на сервер воно ніколи не завантажується.
3. У розділі Посилання заповніть Текст посилання й Адреса (URL) для кожної кнопки. Натисніть Додати посилання, щоб додати ще, кнопками ↑ і ↓ змінюйте порядок, а Видалити прибирає посилання.
4. У розділі Оформлення виберіть Тема (Світла, Темна, Океан, Захід сонця, Ліс) або задайте чотири кольори самостійно, потім виберіть Форма кнопок і Шрифт.
5. Перегляньте Попередній перегляд, потім натисніть Завантажити index.html. Копіювати HTML копіює той самий код, якщо ви хочете вставити його в наявний сайт.

Завантажити приклад заповнює зразковий профіль, щоб ви побачили, як виглядає сторінка, а Очистити починає все заново.

Що ви отримуєте

Результат – один HTML-файл, у якому є все: стилі вбудовано в блок <style>, фото вбудовано як data URI, а JavaScript, скриптів відстеження, вебшрифтів і зовнішніх запитів немає. Тому сторінка дуже швидка (зазвичай кілька кілобайт плюс фото), приватна для ваших відвідувачів і її легко зберігати роками: немає сервісу, який може закритися, змінити ціни чи додати власний брендинг.

Сторінка адаптивна: кнопки заповнюють ширину екрана смартфона й залишаються зручної ширини на комп’ютері. Вона містить атрибут lang, тег viewport, заголовок (ваше ім’я) та мета-опис (ваш опис), тож добре виглядає у видачі й попередньому перегляді посилань. Посилання на сайти відкриваються з rel="noopener", а адреси ел. пошти автоматично стають посиланнями mailto:.

Перевірки

Список Перевірки позначає посилання, адреса яких не є коректною веб-адресою, mailto: або tel:. Такі посилання пропускаються, а не публікуються зламаними, а будь-що на кшталт javascript: завжди відхиляється. Також з’являється попередження, коли контраст тексту кнопок чи сторінки нижчий за 4,5:1 – рівень WCAG для звичайного тексту, і коли фото завелике. Фото 300 × 300 пікселів цілком достатньо для круглого аватара в 104 пікселі, навіть на екранах з високою щільністю.

Як розмістити сторінку в мережі

Файлу потрібна вебадреса, перш ніж ви вставите її в біо Instagram, TikTok чи YouTube. Три поширені варіанти:

• GitHub Pages (безкоштовно): створіть публічний репозиторій, завантажте index.html, потім у Settings → Pages виберіть розгортання з головної гілки. Сторінка з’явиться за адресою https://your-username.github.io/repository-name/.
• Netlify Drop (безкоштовно): покладіть index.html у теку й перетягніть цю теку на сторінку Netlify Drop. Ви одразу отримаєте випадкову адресу; створіть безкоштовний обліковий запис, щоб зберегти сайт і вибрати гарнішу назву чи підключити власний домен.
• Власний хостинг: завантажте файл через файловий менеджер хостингу або FTP, наприклад у теку links, щоб отримати https://your-domain.com/links/.

Щоб пізніше оновити сторінку, змініть форму, завантажте файл знову й замініть старий.