OG-kuva

Kun liität linkin LinkedIniin, Slackiin tai WhatsAppiin, palvelu käy lukemassa sivun ja rakentaa siitä kortin, jossa on otsikko, kuvaus ja kuva. Tiedot se hakee sivun head-osion Open Graph -tageista. Lyhenne OG tulee juuri sieltä. Facebook julkaisi Open Graph -protokollan vuonna 2010.

Jos OG-kuvaa ei ole määritelty, palvelu arvaa. Joskus korttiin päätyy satunnainen kuva sivulta, joskus pelkkä teksti. Kumpikaan ei houkuttele klikkaamaan.

Minkä kokoinen OG-kuvan pitää olla?

1200 × 630 pikseliä eli kuvasuhde noin 1,91:1. Se on Facebookin suositus, ja sama muoto toimii hyvin LinkedInissä ja useimmissa viestisovelluksissa. Tiedostokoon yläraja on Facebookissa 8 Mt ja X:ssä 5 Mt.

Pidä otsikko ja logo kuvan keskiosassa. Osa sovelluksista näyttää koko kortin sijaan pienen, rajatun pikkukuvan, ja silloin reunat jäävät pois.

Mitä tageja OG-kuva tarvitsee?

Pakollinen on vain og:image, ja sen arvoksi tulee kuvan koko osoite https-alkuineen. Mitat kannattaa antaa tageilla og:image:width ja og:image:height ja kuvauksen og:image:alt-tagilla. Open Graph -määrittely suosittaa alt-tekstiä jokaiselle sivulle, jolla on OG-kuva.

X tarvitsee lisäksi twitter:card-tagin arvolla summary_large_image, mutta itse kuvan se osaa lukea og:image-tagista.

Isommalla sivustolla kuvia ei kannata tehdä käsin yksi kerrallaan. Next.js osaa generoida OG-kuvan koodista, ja tällä sivustolla yksi reitti piirtää kortin sivun otsikosta. Uusi blogikirjoitus saa siis esikatselukuvan heti julkaisun jälkeen, eikä kenenkään tarvitse muistaa tehdä sitä. Webflow'n CMS-sivuilla kuvan voi sitoa kokoelman kuvakenttään.

Miksi linkissä näkyy yhä vanha kuva?

Palvelut tallentavat esikatselun välimuistiin. Kun vaihdat kuvan, aja osoite Facebookin Sharing Debuggerin tai LinkedInin Post Inspectorin läpi, niin palvelu hakee sivun uudelleen. Kaikilla palveluilla tällaista työkalua ei ole, ja niissä vanha kuva voi näkyä vielä jonkin aikaa.