# Open Graph -tagit: kattava opas linkin esikatseluun

[Canonical HTML page](https://gradiently.design/fi/guide/open-graph-tags)

Jokainen jaettu linkki muuttuu sivusi pieneksi julisteeksi muutaman metatagin avulla. Oikeilla tageilla esikatselu näyttää suunnitellulta, puuttuvilla alustat arvaavat. Tässä koko sarja kopioitavana koodina.

## The short version

- Open Graph -tagit ovat sivun head-osan metatageja, jotka kertovat somealustoille ja viestisovelluksille jaetun linkin otsikon, kuvauksen ja kuvan.
- Open Graph -protokollan pakolliset perustagit ovat og:title, og:type, og:image ja og:url. Myös og:description ja og:site_name ovat vahvasti suositeltavia.
- 1200×630 pikselin og:image absoluuttisella https-osoitteella toimii hyvin Facebookissa, LinkedInissä, X:ssä, Slackissa, iMessagessa ja useimmissa muissa sovelluksissa.
- X valitsee esikatselun asettelun twitter:card-tagilla ja käyttää otsikkoon, kuvaukseen ja kuvaan Open Graph -tageja, jos omat tagit puuttuvat.
- Alustat tallentavat esikatselut välimuistiin, joten tagien muutoksen jälkeen URL pitää hakea uudelleen esimerkiksi Facebookin Sharing Debuggerissa tai LinkedInin Post Inspectorissa.

**Open Graph -tagit** ovat sivun `<head>`-osassa olevia `<meta>`-tageja, jotka määrittävät jaetun linkin ulkoasun: otsikon, lyhyen kuvauksen, kuvan ja linkin. Facebook loi protokollan, ja nykyisin LinkedIn, X, Slack, Discord, WhatsApp, iMessage ja useimmat muut sovellukset lukevat sitä. Ydin on neljä tagia: `og:title`, `og:type`, `og:image` ja `og:url`. Kuvaus, kuvakoko ja Twitter-korttitag täydentävät tuen lähes kaikille alustoille.

## Jokaisen sivun tarvitsemat Open Graph -tagit

Liitä tämä sivun head-osaan ja vaihda arvot. Kukin tag käyttää `property`-attribuuttia `name`-attribuutin sijaan, ja jokainen URL on absoluuttinen.

```html
<head>
  <title>Spring menu at Harbour Kitchen</title>
  <meta name="description" content="Twelve new plates for spring, from wild garlic soup to rhubarb tart." />

  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://harbourkitchen.example/spring" />
  <meta property="og:title" content="Spring menu at Harbour Kitchen" />
  <meta property="og:description" content="Twelve new plates for spring, from wild garlic soup to rhubarb tart." />
  <meta property="og:site_name" content="Harbour Kitchen" />
  <meta property="og:locale" content="en_GB" />
  <meta property="og:image" content="https://harbourkitchen.example/og/spring.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="The spring menu title over a soft green gradient" />

  <!-- X (Twitter) -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@harbourkitchen" />
</head>
```

Täydellinen toimiva sarja. X lainaa otsikon, kuvauksen ja kuvan yllä olevista Open Graph -tageista.

| Tag | Tehtävä | Vinkit |
| --- | --- | --- |
| `og:title` | Esikatselun lihavoitu otsikko | Alle noin 60 merkkiä, sivuston nimeä ei tarvita |
| `og:description` | Yksi tai kaksi riviä otsikon alla | Noin 110-160 merkkiä, osa sovelluksista piilottaa sen |
| `og:image` | Esikatselukuva | Absoluuttinen https-URL, 1200×630 |
| `og:url` | Sivun ensisijainen osoite | Sama kuin canonical-linkki, ilman seurantaparametreja |
| `og:type` | Sivun tyyppi | Useimmiten `website`, julkaisuissa `article` |
| `og:site_name` | Brändisi pienellä | Sama jokaisella sivulla |
| `og:image:alt` | Kuvan kuvaus | Ruudunlukijat lukevat sen joillakin alustoilla |

Käytännössä tärkeät tagit. Koko lista on protokollan omalla sivulla ogp.me.

## og:image: koko ja muoto

Ihmiset huomaavat ennen kaikkea kuvan. Käytä **1200×630 pikseliä**, eli noin 1,91:1-kuvasuhdetta. Tätä kokoa alustat odottavat suurilta esikatseluilta, ja se löytyy oppaasta [Open Graph -kuvan koko](https://gradiently.design/fi/guide/open-graph-image-size). Pidä tärkeät sanat ja logo poissa reunoilta, koska osa sovelluksista rajaa neliöksi tai pyöristää kulmia.

- Open Graph 1200×630: 1200 × 630
- LinkedIn-linkkikuva 1200×627: 1200 × 627
- Neliörajaus 1200×1200: 1200 × 1200

Suuren esikatselun muoto ja neliö, johon jotkin viestisovellukset ja X:n summary-kortti rajaavat. Keskitä viesti niin, että se säilyy molemmissa.

Tallenna PNG:nä, kun kuvassa on enimmäkseen tekstiä ja liukuväriä, tai laadukkaana JPEG:nä valokuville. Pidä tiedosto pienenä, mieluiten muutamassa sadassa kilotavussa. Alustoilla on omat kokorajansa ja suuret tiedostot latautuvat syötteessä hitaasti. [PNG vai JPG](https://gradiently.design/fi/guide/png-vs-jpeg) selittää valinnan, ja [kuvien optimointi verkkoon](https://gradiently.design/fi/guide/lighthouse-image-performance) käsittelee pakkausta.

Leveä 1200×630-jakokuva, jossa on ravintolan nimi, kevätmenua koskeva otsikko ja varausrivi pehmeällä liukuvärillä

Esikatseluun tehty jakokuva: lyhyet sanat, keskitettynä ja riittävän suurina syötteessä luettaviksi.

> **Kuvan pitää olla saavutettavissa** Alustat hakevat `og:image`-kuvan omilta palvelimiltaan. Suhteellinen polku, kirjautumisen takana oleva sivu, tuntemattomat botit estävä palomuuri tai vanhentunut allekirjoitettu URL jättävät esikatselun tyhjäksi.

## Twitter-korttitagit X:lle

X käyttää omia `twitter:`-tagejaan, joissa on `name` eikä `property`. Tärkein on `twitter:card`. Kun `twitter:title`, `twitter:description` tai `twitter:image` puuttuu, X käyttää vastaavia Open Graph -tageja, joten niitä tarvitsee harvoin toistaa.

| Tag | Arvot | Huomio |
| --- | --- | --- |
| `twitter:card` | `summary_large_image` tai `summary` | Suuri kuva tai pieni neliöpienoiskuva |
| `twitter:site` | `@yourbrand` | Sivuston tili |
| `twitter:creator` | `@author` | Artikkelin kirjoittaja |
| `twitter:image:alt` | Teksti | Käytä, kun kuva eroaa og-versiosta |

Lisää vain nämä ja anna Open Graphin toimittaa muut tiedot.

## Open Graph -tagit artikkeleille

Blogi- ja uutissivut voivat kertoa lisää itsestään asettamalla `og:type`-arvoksi `article` ja lisäämällä muutaman ominaisuuden. Osa sovelluksista näyttää päivän tai tekijän, ja tiedot auttavat alustoja ymmärtämään sivua.

```html
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-10-01T09:00:00Z" />
<meta property="article:modified_time" content="2026-10-03T14:30:00Z" />
<meta property="article:author" content="https://harbourkitchen.example/about/ana" />
<meta property="article:section" content="Menus" />
```

Päivämäärät käyttävät ISO 8601 -muotoa. Pidä modified_time rehellisenä: päivitä vain, kun sisältö muuttuu olennaisesti.

## Open Graph -tagien asettaminen sovelluskehyksessä

Useimmat sovelluskehykset luovat tagit tiedoista. Vie Next.js:ssä sivusta tai asettelusta metadata-olio, niin kehys kirjoittaa tagit puolestasi. Aseta `metadataBase` kerran, jotta suhteelliset kuvapolut muuttuvat absoluuttisiksi.

```ts
export const metadata = {
  metadataBase: new URL('https://harbourkitchen.example'),
  title: 'Spring menu at Harbour Kitchen',
  description: 'Twelve new plates for spring, from wild garlic soup to rhubarb tart.',
  openGraph: {
    type: 'website',
    url: '/spring',
    title: 'Spring menu at Harbour Kitchen',
    description: 'Twelve new plates for spring, from wild garlic soup to rhubarb tart.',
    siteName: 'Harbour Kitchen',
    images: [{ url: '/og/spring.png', width: 1200, height: 630, alt: 'The spring menu title over a soft green gradient' }],
  },
  twitter: { card: 'summary_large_image', site: '@harbourkitchen' },
}
```

Tarkista käyttämäsi kehysversion ohjeet, koska metadata-rajapinnat muuttuvat julkaisujen välillä. Sivukohtaisesti luotuja kuvia käsittelee [dynaamiset OG-kuvat](https://gradiently.design/fi/guide/dynamic-og-images).

## Esikatselujen testaaminen ja korjaaminen

1. **Katso lähdekoodia** Avaa sivun lähdekoodi, älä elementtitarkastinta, ja varmista tagien olevan palvelimen HTML:ssä. Monet indeksoijat eivät suorita JavaScriptiä.
2. **Tarkista kuvan URL** Liitä og:image-osoite yksityiseen ikkunaan. Sen pitää latautua ilman kirjautumista.
3. **Hae uudelleen** Aja URL Facebookin Sharing Debuggerissa ja [LinkedInin Post Inspectorissa](https://www.linkedin.com/post-inspector/) tyhjentääksesi niiden välimuistit.
4. **Versioi kuva** Jos vanha kuva jää näkyviin, vaihda tiedostonimi tai lisää kyselyparametri kuten `?v=2` ja hae uudelleen.
5. **Jaa yksityisesti** Lähetä linkki itsellesi Slackissa tai viestisovelluksessa nähdäksesi todellisen esikatselun.

### Tyhjä tai väärä esikatselu

- Asiakaspuolen JavaScriptin lisäämät tagit
- Suhteellinen og:image-polku
- og:url osoittaa eri sivulle
- Pieni tai oudonmuotoinen kuva
- Tagit muuttuivat, esikatselu ei

### Korjaus

- Piirrä tagit palvelimella
- Käytä täyttä https-osoitetta
- Aseta og:url samaksi kuin canonical-osoite
- Vie koossa 1200×630
- Hae uudelleen tai nimeä kuva uudelleen

Tagit ovat helppo osa. Kuva on suunnittelutyö, ja sen pitää toimia pienoiskoossa. Gradientlyssä linkin esikatselu on yksi valmiista ko’oista, 1200×630. Mark pitää rauhallisimman alueensa sanojen takana, ja Designer voi tehdä sivun jakokuvan yhdestä lauseesta ja sitten siihen sopivat julkaisukoot [jokaiselle alustalle](https://gradiently.design/fi/guide/social-media-image-sizes).

## FAQ

### Mitä Open Graph -tagit ovat?

Sivun head-osan metatageja, kuten og:title ja og:image, jotka kertovat somealustoille ja viestisovelluksille, mitä linkkiä jaettaessa näytetään.

### Mitkä Open Graph -tagit ovat pakollisia?

Protokollan perustagit ovat og:title, og:type, og:image ja og:url. Lisää og:description ja og:site_name täydelliseen esikatseluun.

### Minkä kokoinen og:image-kuvan pitää olla?

1200×630 pikseliä toimii Facebookissa, LinkedInissä, X:ssä ja useimmissa viestisovelluksissa. Käytä absoluuttista https-osoitetta ja pidä keskeinen sisältö keskellä.

### Tarvitsenko Twitter-korttitageja, jos minulla on Open Graph -tagit?

Lisää `twitter:card`, yleensä arvolla `summary_large_image`. X käyttää Open Graphia otsikkoon, kuvaukseen ja kuvaan.

### Miksi linkin esikatselu ei päivity?

Alustat tallentavat esikatselut välimuistiin. Hae URL uudelleen Facebookin Sharing Debuggerissa tai LinkedInin Post Inspectorissa tai vaihda kuvatiedoston nimi.

### Käytänkö og-tageissa property- vai name-attribuuttia?

Open Graph -tagit käyttävät `property`-attribuuttia, Twitter-tagit `name`-attribuuttia. Useimmat jäsentimet hyväksyvät molemmat, mutta käytännön noudattaminen ehkäisee yllätyksiä.