Nettisivujen tekniikka

Open Graph -tagit: miltä sivusi näyttää, kun linkki jaetaan?

Kun joku jakaa sivusi linkin Facebookissa, WhatsAppissa tai LinkedInissä, palvelu rakentaa linkistä esikatselukortin: otsikon, lyhyen kuvauksen ja kuvan. Open Graph on tekniikka, jolla päätät itse, mitä siinä kortissa lukee ja näkyy. Ilman sitä palvelu arvaa sisällön, ja arvaus on usein ruma: väärä kuva, katkennut otsikko tai pelkkä harmaa laatikko.

Tämän oppaan jälkeen osaat asettaa jokaiselle sivullesi oman some-otsikon, kuvauksen ja kuvan sekä testata lopputuloksen ennen jakamista. Hyvin tehty esikatselukortti on käytännössä ilmainen mainos: sama linkki kerää selvästi enemmän klikkauksia, kun se näyttää viimeistellyltä.

Tarvitset:

  • pääsyn sivustosi hallintaan (ohjeet on kirjoitettu WordPressille, mutta periaate on sama kaikilla alustoilla)
  • SEO-lisäosan, esimerkiksi ilmaisen Yoast SEO:n
  • kuvankäsittelyohjelman tai Canvan kaltaisen työkalun jakokuvien tekemiseen

Mitä Open Graph -tagit ovat

Open Graph -tagit ovat HTML-sivun head-osioon sijoitettavia meta-tageja, jotka kertovat somepalveluille sivun keskeiset tiedot koneluettavassa muodossa. Protokollan kehitti alun perin Facebook, mutta nykyään samoja tageja lukevat lähes kaikki: Facebook, Instagram, WhatsApp, LinkedIn, X, Telegram, Slack ja Discord.

Tärkeimmät tagit ovat:

<meta property="og:title" content="Sivun otsikko jaettuna" />
<meta property="og:description" content="Lyhyt kuvaus, joka houkuttelee klikkaamaan." />
<meta property="og:image" content="https://esimerkki.fi/jakokuva.jpg" />
<meta property="og:url" content="https://esimerkki.fi/sivu/" />
<meta property="og:type" content="article" />

Virallisen määrityksen mukaan pakollisia ovat og:title, og:type, og:image ja og:url. Käytännössä kannattaa aina täyttää myös og:description, koska useimmat palvelut näyttävät sen otsikon alla.

Huomaa, että Open Graph -otsikko voi olla eri kuin hakukoneille tarkoitettu title-tagi. Googlea varten otsikkoon kannattaa saada avainsana, mutta somejaossa toimii usein vapaampi ja uteliaisuutta herättävä muotoilu. Tämä on yksi Open Graphin parhaista puolista: voit optimoida saman sivun erikseen hakukoneelle ja somelle.

X (entinen Twitter) käyttää lisäksi omia twitter:card-tagejaan, mutta jos niitä ei löydy, se lukee Open Graph -tagit. SEO-lisäosat tulostavat yleensä molemmat automaattisesti, joten asiaa ei tarvitse murehtia erikseen.

Miksi oletusnäkymä on usein ruma

WordPress ei itsessään tulosta Open Graph -tageja lainkaan. Jos sivustollasi ei ole SEO-lisäosaa tai teemaa, joka lisää ne, somepalvelu poimii sivulta jotain: usein ensimmäisen vastaan tulevan kuvan (vaikkapa logon tai mainosbannerin) ja pätkän leipätekstiä kuvaukseksi.

Tyypillisiä seurauksia:

  • kuvana näkyy logo venytettynä tai rajattuna oudosti, tai kuvaa ei näy ollenkaan
  • otsikkona on sivun tekninen title, joka katkeaa kesken
  • kuvauksena on evästeilmoituksen tai valikon tekstiä

Jokainen näistä syö jaetun linkin uskottavuutta. Kun kortti sen sijaan näyttää harkitulta, linkki erottuu virrasta ja kerää klikkauksia. Sama pätee myös silloin, kun lukijat jakavat sivujasi itse: jos sivuillasi on jakopainikkeet, Open Graph -tagit määräävät, miltä nuo jaot näyttävät.

Näin asetat Open Graph -tiedot WordPressissä

Helpoin tapa hallita Open Graph -tageja on SEO-lisäosa. Esimerkit alla käyttävät ilmaista Yoast SEO -lisäosaa, mutta vastaavat asetukset löytyvät myös Rank Mathista ja muista SEO-lisäosista.

  1. Asenna ja aktivoi Yoast SEO, jos sitä ei vielä ole. Lisäosa tulostaa Open Graph -tagit oletuksena kaikille sivuille.
  2. Avaa muokattava sivu tai artikkeli ja etsi Yoastin paneelista Social media appearance -osio (sivupalkissa tai editorin alla olevassa laatikossa).
  3. Kirjoita Social title -kenttään otsikko, joka toimii somessa: selkeä hyöty tai kiinnostava väite, ei pelkkä avainsanalista.
  4. Kirjoita Social description -kenttään 1–2 lausetta, jotka kertovat miksi linkkiä kannattaa klikata. Ajattele sitä lyhyenä mainoksena.
  5. Lataa Social image -kohtaan sivulle tehty jakokuva (oikea koko seuraavassa luvussa).
  6. Tallenna sivu ja testaa lopputulos testaustyökalulla (ohjeet alempana).

Jos et täytä kenttiä, Yoast käyttää varalla sivun otsikkoa, metakuvausta ja artikkelikuvaa. Se on ihan kelvollinen oletus, joten kaikkia satoja sivuja ei tarvitse käydä käsin läpi. Panosta erikseen niihin sivuihin, joita oikeasti jaetaan: etusivu, suosituimmat artikkelit ja kampanjasivut. Ilmaisversio riittää tähän hyvin; maksullisessa Yoastissa saat lisäksi visuaalisen esikatselun, mutta saman näkee ilmaiseksi testaustyökaluilla.

Open Graph on vain yksi osa sivuston teknistä viilausta. Jos WordPress-sivustosi hakukonenäkyvyys on muutenkin työn alla, katso laajempi opas WordPressin hakukoneoptimointiin.

Oikea kuvakoko: 1200 × 630 pikseliä

Jakokuvan suositeltu koko on 1200 × 630 pikseliä (kuvasuhde 1,91:1). Se toimii sellaisenaan Facebookissa, LinkedInissä, X:ssä, WhatsAppissa ja käytännössä kaikissa muissakin palveluissa, joten yksi kuva per sivu riittää.

Muutama käytännön vinkki:

  • Tallenna kuva JPG- tai PNG-muodossa. Facebookin yläraja on 8 Mt, mutta pidä tiedosto mieluiten selvästi alle 1 Mt:n, jotta esikatselu latautuu nopeasti.
  • Pidä tekstit ja kasvot kuvan keskialueella. Osa palveluista rajaa reunoja, jolloin reunoihin sijoitettu teksti voi leikkautua pois.
  • Jos lisäät kuvaan tekstiä, käytä isoa fonttia. Mobiilivirrassa esikatselukuva on pieni.
  • Älä käytä pelkkää logoa valkoisella pohjalla. Se ei erotu virrasta eikä kerro sivun sisällöstä mitään.

Testaa ja päivitä esikatselun välimuisti

Somepalvelut tallentavat linkin esikatselun välimuistiinsa. Jos korjaat Open Graph -tageja, vanha ruma versio voi näkyä jaoissa vielä päivien ajan, ellet pakota päivitystä. Tähän on palvelukohtaiset työkalut:

  • Meta Sharing Debugger (developers.facebook.com/tools/debug): syötä sivusi osoite, niin näet miltä linkki näyttää Facebookissa ja mitä tageja Meta sivulta lukee. Scrape Again -painike hakee sivun tiedot uudelleen ja päivittää välimuistin. Sama päivitys vaikuttaa myös WhatsAppiin ja Instagramiin, koska ne kuuluvat Metan perheeseen. Työkalun käyttö vaatii Facebook-kirjautumisen.
  • LinkedIn Post Inspector (linkedin.com/post-inspector): näyttää LinkedIn-esikatselun ja virittää välimuistin päivityksen. Huomaa, että jo julkaistujen postausten esikatselu ei muutu, päivitys näkyy vasta uusissa jaoissa.
  • X: X lopetti oman Card Validator -työkalunsa, eikä virallista testauspalvelua enää ole. Esikatselun näet aloittamalla uuden postauksen kirjoittamisen ja liittämällä linkin viestikenttään.
  • Telegram: lähetä linkki Telegramin @WebpageBot-botille, niin se hakee sivun tiedot uudelleen ja päivittää esikatselun.

Nyrkkisääntö: aina kun muutat sivun otsikkoa, kuvausta tai jakokuvaa, käy ajamassa osoite vähintään Meta Sharing Debuggerin läpi ennen kuin jaat linkin.

Yleiset virheet

  • Kuva ei näy jaossa. Yleisin syy on välimuisti: aja osoite Sharing Debuggerin läpi ja paina Scrape Again. Tarkista myös, että kuvan osoite on kokonainen (https-alkuinen) ja että kuva on julkisesti saatavilla, ei esimerkiksi salasanasuojatun sivun takana.
  • Jaossa näkyy väärä kuva. Sivulta puuttuu og:image-tagi, jolloin palvelu arpoo kuvan itse. Aseta jakokuva SEO-lisäosan Social-kentissä.
  • Muutokset eivät päivity. Vanha versio on välimuistissa. Pakota päivitys kunkin palvelun omalla työkalulla; WhatsAppissa auttaa Metan Sharing Debugger.
  • Otsikko tai kuvaus katkeaa. Pidä some-otsikko noin 60 merkissä ja kuvaus parissa lyhyessä lauseessa. Palvelut katkaisevat pitkät tekstit ilmoittamatta.
  • Testisivu ei toimi debuggerissa. Työkalut eivät näe sivuja, jotka on piilotettu hakukoneilta tai suojattu salasanalla. Testaa julkaistulla sivulla.

Linkit