# Linkkisivun suunnittelu Instagram-profiiliisi

[Canonical HTML page](https://gradiently.design/fi/guide/instagram-bio-link-page)

Profiilisi linkissä uteliaisuus muuttuu varaukseksi, myynniksi tai tilaajaksi. Käsittele sitä pienenä laskeutumissivuna: yksi ilme, muutama painike, ei tulkittavaa.

## The short version

- Linkkisivu on pieni mobiililaskeutumissivu, joka kokoaa kohteet, joihin haluat profiilikävijöiden siirtyvän seuraavaksi.
- Paras linkkisivun suunnittelu käyttää kolmesta viiteen painiketta tämän viikon tärkeysjärjestyksessä.
- Kävijät tulevat puhelimella, joten suunnittele ensin kapealle pystynäytölle ja tarkista sivu puhelimen leveydessä.
- Sivun taustan, värien ja fonttien kannattaa olla samat kuin syötteessäsi, jotta napautus tuntuu samaan kauppaan astumiselta.
- Viestissä jaetun linkin esikatselukuva on erillinen 1200×630-grafiikka, joka kannattaa myös suunnitella.

Hyvä **linkkisivun suunnittelu** tarkoittaa lyhyttä mobiililaskeutumissivua: nimesi, yksi lause toiminnastasi, kolmesta viiteen painiketta tärkeysjärjestyksessä ja syötteeseesi sopiva tausta, joka jatkaa vierailua luontevasti. Lähes kaikki tulevat puhelimella suoraan profiilistasi ja antavat sinulle muutaman sekunnin huomiota. Jokainen alla oleva valinta seuraa tästä.

## Linkkisivun tarvittavat osat järjestyksessä

Lue sivu ylhäältä alas kuten kävijä. Hän haluaa varmistaa olevansa oikeassa paikassa, nähdä mahdolliset toimet ja toimia. Kaikki näitä kolmea vaihetta hidastava voi lähteä.

| Osa | Sisältö | Rajaa tähän |
| --- | --- | --- |
| Identiteetti | Logo tai valokuva ja nimi samassa muodossa kuin profiilissa | Yksi kuva, yksi rivi |
| Lupaus | Mitä teet ja kenelle selkein sanoin | Alle 12 sanaa |
| Pääpainike | Tämän viikon tärkein asia: Varaa, Tutustu uutuuksiin, Hanki liput | Yksi, selvästi vahvempi |
| Muut painikkeet | Kahdesta neljään muuta kohdetta | Verbit, eivät sivujen nimet |
| Alatunniste | Pienet somekuvakkeet ja yhteystiedot | Hillittynä alhaalla |

Sellaisen sivun rakenne, jota ihmiset todella käyttävät. Sivu menee yleensä pieleen kymmenennestä painikkeesta, ei yhden puuttumisesta.

Kirjoita painikkeet toimiksi. Varaa pöytä toimii paremmin kuin Varaukset. Lue uusi numero toimii paremmin kuin Uutiskirje. Samat periaatteet koskevat kaikkia lyhyitä sometekstejä. [Tekstin kirjoittaminen somekuviin](https://gradiently.design/fi/guide/writing-copy-for-visuals) käsittelee niitä tarkemmin.

## Taustan suunnittelu

Tausta on suurin osa kävijän näkemästä. Se ratkaisee, näyttääkö sivu sinulta vai kaikilta ilmaisilta pohjilta. Suunnittele se ensin puhelimen näytölle. Tarinan kokoinen 1080×1920-pystykuva on järkevä työskentelykoko, ja sen takana oleva yksivärinen pohja kattaa korkeammat näytöt ja tietokoneet.

Keramiikkastudion pystysuuntainen linkkisivu, jossa on nimi, lyhyt lause ja kolme toimintoa liukuväritaustalla

Linkkisivu puhelimen koossa: identiteetti ylhäällä, lupaus ja sitten toiminnot. Tausta rakentaa brändiä.

Pidä taustan vilkkain ja kirkkain kohta poissa painikkeiden takaa, yleensä yläosassa tai kulmassa. Painikkeet tarvitsevat rauhallisen ja tasaisen pinnan, muuten niiden teksti alkaa kilpailla värin kanssa.

Kirkas yläosa, rauhallinen alaosa: `linear-gradient(180deg, #2b1055 0%, #4c1d95 30%, #1e1b4b 65%, #0b0a1a 100%)`

Väri ja valo ylimmässä kolmanneksessa nimen kohdalla asettuvat syväksi, tasaiseksi pohjaksi painikkeiden taakse.

## Napautettavilta näyttävät painikkeet

### Vältä

- Kaikki painikkeet samanlaisia, mikään ei johda
- Ohuet ääriviivat, jotka katoavat liukuväriin
- Isot kirjaimet väljällä merkkivälillä, vaikea silmäillä
- Pienet painikkeet tiiviisti vieretysten
- Emojit korvaamassa sanat

### Tee näin

- Yksi täytetty pääpainike, muut hillitympiä
- Yksiväriset täytöt omasta paletista
- Normaali kirjainkoko, yksi verbi kussakin
- Koko palstan levyiset painikkeet väljillä väleillä
- Selkeät sanat, kuvake vain jos se auttaa

Korostusvärillä täytetty pääpainike ja muut pohjan pehmeämmässä sävyssä antavat silmälle selvän ensimmäisen napautuksen. Tarkista jokaisen painiketekstin kontrasti sen omaa täyttöä vasten, ei sivua vasten. [Värikontrasti ja saavutettavuus](https://gradiently.design/fi/guide/color-contrast-accessibility) kertoo suhdeluvut.

## Oman linkkisivun rakentaminen

Linkkisivupalvelut ovat nopeita, mutta omalle verkkotunnukselle on helppo rakentaa sivu, joka pitää kävijät sivustollasi. Tämä on valmis pelkistetty versio: koko näytön korkuinen liukuväritausta, keskitetty palsta ja yksi pääpainike. Vaihda omat värit ja linkit.

```html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Studio Nine</title>
  <meta property="og:image" content="https://example.com/og.png">
  <style>
    html { background: #0b0a1a; }
    body {
      margin: 0;
      min-height: 100vh;
      font-family: system-ui, sans-serif;
      color: #f5f3ff;
      background: linear-gradient(180deg, #2b1055 0%, #4c1d95 30%, #1e1b4b 65%, #0b0a1a 100%);
    }
    main { max-width: 26rem; margin: 0 auto; padding: 4rem 1.25rem; text-align: center; }
    img { width: 96px; height: 96px; border-radius: 50%; }
    p { opacity: 0.85; margin: 0.5rem 0 2rem; }
    a {
      display: block;
      padding: 1rem;
      margin: 0 0 0.75rem;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.12);
      color: inherit;
      text-decoration: none;
      font-weight: 600;
    }
    a.main { background: #fbbf24; color: #1c1917; }
  </style>
</head>
<body>
  <main>
    <img src="logo.png" alt="Studio Nine">
    <h1>Studio Nine</h1>
    <p>Handmade ceramics and weekend classes in Bristol.</p>
    <a class="main" href="/classes">Book a class</a>
    <a href="/shop">Shop the new pots</a>
    <a href="/visit">Visit the studio</a>
  </main>
</body>
</html>
```

Yksi tiedosto, ei skriptejä. Html-elementin pohjaväri näkyy ylivierityksessä ja liukuväriä korkeammilla näytöillä.

Jos haluat runsaamman painikkeen, [CSS-liukuväripainike](https://gradiently.design/fi/guide/css-gradient-button) näyttää, miten pääpainikkeeseen saa hieman syvyyttä ilman huutavaa ilmettä.

## Sivun sovittaminen syötteeseen

Profiilista sivulle siirtymisen pitäisi tuntua saman rakennuksen oven avaamiselta. Käytä julkaisujesi värejä, fontteja ja taustaa, niin kävijä ei mieti, lähtikö hän pois. [Yhtenäinen brändäys somekanavissa](https://gradiently.design/fi/guide/brand-consistency-across-platforms) käsittelee laajempaa järjestelmää.

- Yön tumma pohja: #0b0a1a
- Violetti: #4c1d95
- Indigo: #1e1b4b
- Pääpainike: #fbbf24
- Muste: #f5f3ff

Samat viisi väriä syötteessä, sivulla ja painikkeissa. Meripihka näkyy vain pääpainikkeessa, minkä vuoksi sitä napautetaan.

Tässä oma tausta maksaa vaivan takaisin. Gradientlyn Mark on elävä liukuväri, joka piirtyy kaikissa suunnittelemissasi ko’oissa. Julkaisut, tarinat ja sivun tausta voivat jakaa täsmälleen saman ilmeen, eikä kukaan muu voi viedä sillä tehtyjä töitä lunastuksen jälkeen. Vie Mark Prolla koossa 1080×1920 ilman vesileimaa ja täydellä tarkkuudella, niin sivu vastaa syötettäsi rakenteensa ansiosta.

## Esikatselukuva linkkiä jaettaessa

Kun joku lähettää linkkisi viestissä, sovellus näyttää sivun Open Graph -kuvasta tehdyn esikatselukortin. Tyhjä tai satunnainen esikatselu kumoaa edellisen työn. Suunnittele 1200×630-kuva nimelläsi ja lupauksellasi käyttäen samaa taustaa. Yksityiskohdat löytyvät oppaasta [OG-kuvan koko](https://gradiently.design/fi/guide/open-graph-image-size).

Keramiikkastudion leveä linkkiesikatselukortti, jossa on nimi ja lyhyt lause samalla liukuväritaustalla

Linkkiesikatselu sivun omalla taustalla, jotta jaettu linkki näyttää jo sinulta.

1. **Tarkista puhelimen leveydessä** Avaa sivu omalla puhelimellasi profiilistasi kuten kävijät, älä tietokoneen selaimessa.
2. **Järjestä painikkeet viikoittain** Nosta tämän hetken tärkein asia ylimmäksi ja poista päättyneet.
3. **Testaa esikatselu** Lähetä linkki itsellesi viestisovelluksessa ja katso syntyvää korttia.

## FAQ

### Mitä linkkisivulla pitäisi olla?

Nimi ja logo, yksi lause toiminnastasi, kolmesta viiteen toimintopainiketta tärkein ensin sekä pienet yhteystietolinkit alhaalla.

### Minkä kokoinen linkkisivun taustan pitäisi olla?

Suunnittele ensin puhelimelle. 1080×1920-pystykuva toimii hyvin, kun sen takana on yksivärinen pohja korkeammille näytöille ja tietokoneille.

### Kannattaako käyttää linkkisivupalvelua vai omaa verkkosivua?

Palvelun saa käyttöön nopeammin. Oman verkkotunnuksen sivu pitää kävijät sivustollasi ja antaa täyden hallinnan suunnitteluun. Se voi olla yksi HTML-tiedosto.

### Kuinka monta linkkiä linkkisivulla pitäisi olla?

Kolmesta viiteen riittää useimmille. Painikkeiden lisääminen vähentää jokaisen napauttamisen todennäköisyyttä.

### Voinko lisätä Instagram-bioon useamman linkin?

Kyllä, Instagram sallii profiiliin enintään viisi linkkiä, mutta vain ensimmäinen näkyy ennen napautusta. Yksi hyvin suunniteltu sivu on silti selkein reitti.

### Miten sovitan linkkisivun Instagram-syötteeseeni?

Käytä julkaisujesi taustaa, värejä ja fontteja ja anna pääpainikkeelle korostusvärisi.