Open Graph ja Twitter Cards – sivun jako someen näyttävästi

Open Graph ja Twitter Cards – sivun jako someen näyttävästi

Kun verkkosivun linkki jaetaan Facebookissa, LinkedInissä tai X:ssä, näkyykö siitä iso kuva, selkeä otsikko ja kuvaus – vai pelkkä ruma URL? Open Graph -metatagit ja Twitter Cards ratkaisevat tämän, ja niiden puuttuminen on yksi yleisimmistä kotisivujen piilovirheistä, joka maksaa näkyvyyttä päivittäin.

Joka päivä tuhansia suomalaisia yrityksiä jaetaan somessa, mutta osa näyttää jaettaessa pahimmillaan tyhjältä kortilta tai satunnaiselta kuvalta sivuston ylälaidasta. Se ei ole sattuma – kyse on puuttuvista tai väärin asetetuista metatageista, jotka ohjaavat sosiaalisen median alustojen tapaa esittää linkki.

Mitä Open Graph -metatagit tekevät

Open Graph on Facebookin kehittämä protokolla, joka kertoo sosiaalisen median alustoille, miten verkkosivun sisältö pitäisi esittää. Kun jaat linkin Facebookiin, LinkedIniin tai WhatsAppiin, alusta hakee sivulta OG-metatagit ja rakentaa niiden pohjalta linkkikortin – esikatselun, jossa näkyy kuva, otsikko ja kuvaus.

Ilman OG-tageja alusta arvaa sisällön itse. Tulos on usein sekalainen: logo saattaa vaihtua tuotekuvaan, otsikko on sivuston nimi eikä artikkelin otsikko, ja kuvaus puuttuu kokonaan. Tämä heikentää klikkausprosenttia huomattavasti jopa silloin, kun itse sisältö olisi erinomainen.

Twitter Cards – X-alusta käyttää omaa formaattiaan

X (entinen Twitter) ei suoraan nojaa Open Graph -protokollaan, vaan käyttää omia Twitter Cards -metatagejaan. Käytännössä useimmat tagit ovat rinnakkaisia, ja monet jakelu- ja seurantatyökalut lukevat molempia.

Twitter Cards -tyyppejä on useita: summary (pieni kuva ja teksti), summary_large_image (iso kuva dominoi) ja player (videolle). Pienyritykselle riittää useimmiten summary_large_image, joka näyttää visuaalisesti vaikuttavimmalta ja pysäyttää selaajan tehokkaimmin.

Oleellisimmat metatagit, jotka jokaisella sivulla pitää olla

Sekä Open Graphin että Twitter Cardsin osalta on joukko tageja, jotka kannattaa asettaa kuntoon jokaisella sivulla erikseen:

og:title – sivun otsikko, eri kuin selaimen title-tagi. Voi olla lyhyempi ja suorempi.
og:description – lyhyt kuvaus, ideaalisesti 100–150 merkkiä. Ei vaikuta hakukonenäkyvyyteen, mutta ratkaisee usein klikkauksen.
og:image – jaettava kuva. Suositeltu koko on 1200 × 630 pikseliä. Pienemmät kuvat näkyvät huonosti tai skaalautuvat rumasti.
og:url – sivun kanoninen osoite, joka estää saman sisällön esittymisen useilla eri URL-osoitteilla.
og:type – yleensä ”website” tai artikkeleille ”article”.

Twitter Cards täydentää näitä omilla vastaavuuksillaan: twitter:card, twitter:title, twitter:description ja twitter:image. Jos OG-tagit on asetettu, X lukee ne usein varmuuden vuoksi – mutta eksplisiittinen määrittely on luotettavampaa ja suositeltavaa.

Kuva ratkaisee – näin valitset toimivan OG-kuvan

Käytännön kokemus osoittaa, että kuva ratkaisee lähes aina sen, pysähtyykö käyttäjä linkkikortin kohdalle. Tekstiosuus voi olla erinomainen, mutta jos kuva on väärän kokoinen, liian tumma tai täysin epäolennainen, linkki ohitetaan.

Muutama ohjenuora: käytä kuvaa, jossa on ihminen tai selkeä tuote – abstraktit grafiikat toimivat huonosti. Lisää kuvaan lyhyt tekstielementti, esimerkiksi artikkelin otsikko – se auttaa, kun kuva näytetään pienenä. Vältä logoja yksin kuvana, sillä ne näyttävät pienessä koossa köyhältä. Lisätietoja kuvaformaateista ja teknisistä vaatimuksista löydät kuvien optimointia käsittelevästä oppaasta.

Väärinkäsitys: OG-tagit eivät paranna hakukonenäkyvyyttä suoraan

Moni yrittäjä uskoo, että Open Graph -tagit ovat osa hakukoneoptimointia. Ne eivät ole – Google ei käytä OG-tageja sivun rankingiin, eikä niiden lisääminen nosta sivustoa hakutuloksissa. Tämä on yleinen harhaluulo, jonka takia OG-tageja joko laiminlyödään (”ei ole SEO-juttu”) tai niihin kohdistetaan vääriä odotuksia.

Silti niiden merkitys on epäsuora ja todellinen: hyvä linkkikortti saa enemmän klikkauksia somessa, ihmiset jakavat sisältöä enemmän, ja tämä liikenne voi tuoda backlinkkejä sekä brändintunnettuutta. Open Graph on pikemminkin konversio-optimointia kuin teknistä SEO:ta – osa sitä kokonaisuutta, jolla sosiaalinen media integroidaan osaksi kotisivujen liikennestrategiaa. Jos sivulla on kunnossa myös schema markup -merkinnät, Googlen hakutulokset ja somen linkkikortit tukevat toisiaan – kumpikin omalla alustallaan.

Miten OG-tagit lisätään käytännössä

WordPress-sivustolla helpoin reitti on SEO-lisäosa: Yoast SEO, Rank Math tai All in One SEO sisältävät kaikki Open Graph -hallinnan. Kirjoittamisen yhteydessä voi määrittää erikseen some-otsikon, -kuvauksen ja -kuvan, jotka poikkeavat hakukoneotsikosta – ja usein kannattaakin. Some-otsikko saa olla provokatiivisempi, kuvaus houkuttelevampi.

Ilman lisäosaa tagit lisätään manuaalisesti sivuston head-osioon. Perusrakenne näyttää tältä:

<meta property=”og:title” content=”Palvelumme – Yritysnimi” />
<meta property=”og:description” content=”Lyhyt kuvaus, joka houkuttelee klikkaamaan.” />
<meta property=”og:image” content=”https://esimerkki.fi/kuvat/some-kuva.jpg” />
<meta property=”og:url” content=”https://esimerkki.fi/palvelut/” />
<meta name=”twitter:card” content=”summary_large_image” />
<meta name=”twitter:image” content=”https://esimerkki.fi/kuvat/some-kuva.jpg” />

Asettamisen jälkeen tulos kannattaa tarkistaa Facebookin Sharing Debugger -työkalulla ja X:n Card Validator -palvelulla. Facebookin debuggeri saattaa näyttää vanhan välimuistitetun version – uusi esikatselu pitää erikseen pyytää päivittymään painamalla ”Scrape Again”.

Usein kysytyt kysymykset

Toimivatko Open Graph -tagit automaattisesti kaikissa some-kanavissa?
Suurin osa alustoista – Facebook, LinkedIn, WhatsApp, Slack, Discord – tukee OG-tageja suoraan. X käyttää Twitter Cards -formaattia, mutta lukee usein myös OG-tageja varmuuden vuoksi. Pinterest ja muut erikoisalustat voivat hyödyntää omia metatunnisteita, joten tarkistaminen alustalta löytyvällä esikatselutyökalulla kannattaa aina.

Pitääkö OG-kuvaa varten luoda eri kuva kuin sivulle?
Ei välttämättä, mutta erillistä OG-kuvaa suositellaan. OG-kuva on optimoitu vaakasuuntaiseen 1200 × 630 -muotoon, kun taas sivuilla käytetyt kuvat voivat olla pystysuuntaisia tai neliömäisiä. Sama kuva toimii usein molemmissa, kunhan tarkistat, että se näyttää hyvältä some-kortin vaakakehyksessä eikä tärkeä sisältö jää reunojen ulkopuolelle.

Kuinka usein OG-tageja pitää päivittää?
Aina kun sivun pääsisältö, otsikko tai kuva muuttuu merkittävästi. Muuten alustat voivat näyttää vanhaa kuvaa tai otsikkoa, koska ne välimuistavat tiedot. Muutoksen jälkeen käy Facebookin Sharing Debugger -palvelussa pyytämässä uutta esikatselua – se pakottaa alustan hakemaan ajantasaiset tiedot.

Yhteenveto

Open Graph -metatagit ja Twitter Cards ovat yksinkertainen mutta vaikuttava tapa hallita sitä, miltä sivustosi näyttää jaettaessa sosiaalisessa mediassa. Niiden puuttuminen ei kaada sivustoa, mutta se jättää ensivaikutelman sattumalle. Kunnolliset OG-tagit parantavat klikkausprosenttia, lisäävät jakamista ja tekevät brändistä tunnistettavamman juuri silloin, kun joku muu esittelee yrityksesi linkin omalle verkostolleen. Kymmenen minuutin työ voi muuttaa sen, miten tuhannet ihmiset näkevät yrityksesi ensisilmäyksellä.