Lyhyesti
- 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.
Tällä sivulla
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.
<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>og:titleTehtävä
Vinkit
og:descriptionTehtävä
Vinkit
og:imageTehtävä
Vinkit
og:urlSivun ensisijainen osoiteVinkit
og:typeTehtävä
Vinkit
website, julkaisuissa articleog:site_nameTehtävä
Vinkit
og:image:altTehtävä
Vinkit
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. 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
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 selittää valinnan, ja kuvien optimointi verkkoon käsittelee pakkausta.
Esikatseluun tehty jakokuva: lyhyet sanat, keskitettynä ja riittävän suurina syötteessä luettaviksi.
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.
twitter:cardArvot
summary_large_image tai summaryHuomio
twitter:siteArvot
@yourbrandHuomio
twitter:creatorArvot
@authorHuomio
twitter:image:altArvot
Huomio
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.
<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" />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.
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' },
}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 tyhjentääksesi niiden välimuistit.
- 4
Versioi kuva
Jos vanha kuva jää näkyviin, vaihda tiedostonimi tai lisää kyselyparametri kuten
?v=2ja 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.
Usein kysyttyä
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ä.
Kirjoittanut Gradiently
Gradientlyn tiimi. Gradiently on Markien ympärille rakennettu suunnittelutyökalu: eläviä liukuvärejä, joiden ansiosta kaikki suunnittelemasi näyttää omaltasi.
Katso profiilimme