# Twitter-brändäys X:ssä: kansi, profiilikuva ja julkaisut

[Canonical HTML page](https://gradiently.design/fi/guide/x-branding)

X:ssä brändisi näkyy useimmiten pienenä ympyränä muutaman tekstirivin vieressä. Siksi hallitsemasi harvat visuaaliset elementit ovat erityisen tärkeitä.

## The short version

- Twitter-brändäys X:ssä nojaa neljään kuvaelementtiin: profiilikuvaan, 1500×500-kansikuvaan, julkaisukuviin ja verkkosivun tuottamiin linkkikortteihin.
- Profiilikuva näkyy jokaisen julkaisun ja vastauksen vieressä, joten sen pitäisi olla yksinkertainen symboli tai tiukasti rajattu muotokuva, joka erottuu pienenä.
- X:n julkaisukuvat toimivat parhaiten vaakakoossa 1600×900 tai pystykoossa 1080×1350.
- Linkkikortit syntyvät verkkosivusi metatunnisteista. Brändisi näköinen 1200×630 Open Graph -kuva tekee jokaisesta jaetusta linkistä tunnistettavan.
- Sama taustaperhe kansikuvassa, julkaisukuvissa ja linkkikorteissa yhdistää hajallaan olevat julkaisut yhdeksi näkyväksi brändiksi.

**Twitter-brändäys** X:ssä tarkoittaa neljää hallitsemaasi kuvaelementtiä: jokaisen julkaisun vieressä olevaa profiilikuvaa, profiilin 1500×500-kansikuvaa, julkaisuihin liittämiäsi kuvia ja linkkikortteja, jotka verkkosivusi tuottaa sitä jaettaessa. Useimmiten ihmiset kohtaavat sinut pienenä ympyränä ja muutamana tekstirivinä nopeassa syötteessä. Jokaisen kuvan on siis oltava yksinkertainen ja kaikkien neljän näytettävä samasta paikasta tulevilta.

## X-brändipaketti yhdellä silmäyksellä

| Kuvaelementti | Koko | Missä se näkyy |
| --- | --- | --- |
| Profiilikuva | Neliö, näkyy ympyränä | Jokaisen julkaisun, vastauksen ja maininnan vieressä |
| Kansikuva | 1500×500 | Profiilin yläreunassa |
| Vaakajulkaisun kuva | 1600×900 | Aikajanalla koko leveydellä |
| Pystyjulkaisun kuva | 1080×1350 | Aikajanalla korkeampana puhelimessa |
| Linkkikortti | 1200×630 | Aina kun joku jakaa verkkosivusi |

Viisi osaa. Suunnittele ne sarjaksi yhdelle taustalle, niin tili näyttää harkitulta myös arkisissa julkaisuissa.

## Aikajanalla erottuva profiilikuva

Profiilikuva on toistuvin kuvasi. Se näkyy jokaisen vastauksen vieressä, ilmoituksissa ja muiden lainausjulkaisuissa, usein kynttä pienempänä. Täysi logo tekstiosineen katoaa siinä koossa. Käytä yksittäistä symbolia, monogrammia tai tiukasti rajattua kasvokuvaa, jossa näkyvät myös hartiat, tasaisella tai pehmeästi valaistulla brändivärisellä taustalla. Pidä se samana kaikilla alustoilla, jotta muualla seuraavat tunnistavat sinut heti.

> **Vältä toistuvia muutoksia** Ihmiset selaavat muotojen ja värien perusteella, eivät nimiä lukemalla. Uusi profiilikuva muutaman viikon välein nollaa rakentamasi tunnistettavuuden.

## X:n kansikuvan suunnittelu

Kansikuva on 1500×500 eli 3:1-kaistale. Profiilikuva peittää sen vasenta alakulmaa, ja eri näytöt rajaavat ylä- ja alareunaa hieman. Pidä sanat keskikaistaleella ja poissa tuosta kulmasta. Yksi lause toimii parhaiten: mitä teet, mitä rakennat tai minkä yhden asian haluat vierailijan muistavan. Kiinnitä julkaisu, joka avaa aihetta. [X:n kansikuvan koko](https://gradiently.design/fi/guide/x-header-size) kertoo suoja-alueista tarkemmin.

X:n 1500×500-kansikuva, jossa liukuväritaustalla lukee Pieniä työkaluja isoihin taulukoihin

Yksi lause keskikohdan oikealla puolella samalla taustalla, jota tili käyttää kaikissa julkaisukuvissa.

Ajattele kiinnitettyä julkaisua kansikuvan toisena puolena. Vierailija lukee kansitekstin, vilkaisee esittelyä ja näkee kiinnitetyn julkaisun heti alla. Tee siitä paras lyhyt esittelysi samalla ilmeellä olevalla kuvalla ja päivitä se, kun sinulla on parempaa näytettävää. Muutama toimiva vaihtoehto:

- **Esittely yhdessä kuvassa:** kuka olet, mitä teet ja mitä seuraaja voi odottaa.
- **Paras ketjusi** numeroidulla kansikuvalla, jotta se näyttää sarjalta.
- **Nykyinen julkaisu tai tarjous**, joka vaihdetaan heti päättyessään, jotta sisältö ei vanhene.

## Julkaisukuvat, jotka näyttävät omiltasi

Useimmat X-julkaisut ovat sanoja, ja niin niiden kuuluukin olla. Lisää kuva, kun sillä on tehtävä: tärkeän lauseen kehystäminen, tuloksen näyttäminen, uutisen kertominen tai kaavion esittäminen. Käytä silloin pientä sommitteluvalikoimaa yhdellä taustaperheellä, jotta ihmiset oppivat tunnistamaan kuvasi selatessaan.

X:n vaakajulkaisun kuva kertoo kolminkertaisesta tuontinopeudesta versiossa 2,4 liukuväritaustalla

Vaakasuuntainen päivityskortti koossa 1600×900. Yksi luku, yksi taustoittava lause.

X:n pystyjulkaisun kuva, jossa lukee Julkaise tylsä versio ensin samalla liukuväritaustalla

Pystysuuntainen lainauskortti koossa 1080×1350 vie enemmän tilaa puhelimen näytöltä.

Pidä teksti suurena: ihmiset lukevat X:ää puhelimilla, ja aikajana näyttää kuvat suunnittelukokoa pienempinä. Kaksi tai kolme sanaa riville, yksi ajatus kuvaan. [X:n julkaisukuvien suunnittelu](https://gradiently.design/fi/guide/x-post-image-design) ja [X-ketjujen grafiikat](https://gradiently.design/fi/guide/x-thread-graphics) tarjoavat lisää sommitteluja, myös numeroituja kuvia pitkiin ketjuihin.

## Linkkikortit kuuluvat brändiisi

Aina kun joku jakaa verkkosivusi X:ssä, näkyvä kortti tulee sivusi metatunnisteista. Ilman niitä X näyttää pelkän linkin tai sattumanvaraisen rajauksen. Brändisi näköisellä 1200×630-kuvalla jokainen jako, myös ne joita et itse näe, vie ilmeesi aikajanalle. X lukee ensin omat `twitter:`-tunnisteensa ja käyttää sitten Open Graphia.

```html
<meta name="twitter:card" content="summary_large_image">
<meta property="og:title" content="Small tools for big spreadsheets">
<meta property="og:description" content="Import, clean and merge files in seconds.">
<meta property="og:image" content="https://example.com/og/home.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
```

Suuren kuvan kortin vähimmäistiedot. Käytä kuvalle täydellistä https-osoitetta ja eri kuvaa jokaisella tärkeällä sivulla.

Suunnittele linkkikuva kuin pieni juliste: sivun otsikko, lyhyt lause, bränditausta ja reilut marginaalit, koska X pyöristää kulmat. [Open Graph -kuvan koko](https://gradiently.design/fi/guide/open-graph-image-size) käsittelee testausta ja välimuistia.

## Vältä nämä Twitter-brändäyksen virheet

### Vältä

- Yksityiskohtainen logo profiilikuvana
- Kansikuva täynnä iskulausetta, käyttäjänimeä ja verkko-osoitetta
- Sanat kansikuvan vasemmassa alakulmassa
- Pientekstiset kuvakaappaukset julkaisukuvina
- Linkkikorttien jättäminen sattuman varaan

### Tee näin

- Yksinkertainen symboli tai muotokuva, joka säilyy vuosia
- Yksi selkeä lause bränditaustalla
- Teksti keskellä tai keskikohdan oikealla puolella
- Suuri teksti, kaksi tai kolme sanaa rivillä
- Suunniteltu 1200×630-kortti jokaiselle tärkeälle sivulle

Helpoin tapa pitää kaikki viisi osaa yhtenäisinä on tehdä ne yhdestä ulkoasusta. Gradientlyssä voit suunnitella kerran Markilla ja muuttaa Prolla kerralla kaikkiin kokoihin. Näin kansikuva, julkaisukortit ja linkkikuva jakavat saman valon ja värin. Mark antaa sanoille tilaa jokaisessa koossa, mikä on tärkeää ahtaalla 3:1-kaistaleella. Eri alustojen kokonaisuuden löydät oppaasta [johdonmukainen brändäys somessa](https://gradiently.design/fi/guide/brand-consistency-across-platforms).

## FAQ

### Mikä on X:n eli Twitterin kansikuvan koko?

1500×500 pikseliä, kuvasuhde 3:1. Pidä sanat keskikaistaleella ja poissa vasemmasta alakulmasta, jossa profiilikuva sijaitsee.

### Minkä kokoisia X:n julkaisukuvien pitäisi olla?

1600×900 vaakakuville tai 1080×1350 pystykuville. Pystykuvat vievät puhelimessa enemmän tilaa.

### Pitäisikö X-profiilikuvani olla logo vai valokuva?

Valitse se, joka erottuu pienenä ympyränä: yksinkertainen symboli, monogrammi tai tiukasti rajattu muotokuva. Vältä yksityiskohtaisia logoja ja pientä tekstiä.

### Miten hallitsen kuvaa, joka näkyy verkkosivuani jaettaessa X:ssä?

Lisää jokaisen sivun head-osaan `twitter:card`-tunniste arvolla `summary_large_image` sekä 1200×630 pikselin Open Graph -kuva.

### Miten teen X-profiilistani ammattimaisemman?

Käytä samaa yksinkertaista profiilikuvaa kaikkialla, yhtä selkeää lausetta kansikuvassa sekä julkaisukuvia, jotka jakavat saman taustaperheen ja kirjasimen.
