Miksi linkit näyttävät rikkinäisiltä LinkedInissä? OG-tagien korjaus

Kirjoitat LinkedIn-julkaisua tunnin, liität linkin ja odotat esikatselun ilmestymistä. Mitään ei tapahdu. Tai vielä pahempaa: näkyviin tulee väärä kuva, otsikko on sotkuinen ja kuvaus on satunnainen pätkä sivun tekstiä, josta ei saa irrallaan mitään tolkkua.

Et ole ainoa. Rikkinäiset linkkien esikatselut ovat digitaalisen markkinoinnin yleisimpiä ongelmia, ja ne on myös helpoimpia korjata. Tämä opas käy läpi kahdeksan tavallisinta syytä ja näyttää tarkalleen, mitä etsiä. Voit myös testata oman URL-osoitteesi alle upotetulla Open Graph -esikatselutyökalulla.

Mitä Open Graph -tagit ovat?

Kun jaat URL-osoitteen LinkedInissä, Facebookissa, Slackissa, Twitterissä/X:ssä, iMessagessa tai lähes missä tahansa sosiaalisen median palvelussa, palvelu ei näytä pelkkää linkkiä. Se hakee sivun taustalla, lukee joukon piilotettuja HTML-tageja, joita kutsutaan Open Graph (OG) -tageiksi, ja rakentaa niiden avulla esikatselukortin, jossa on otsikko, kuvaus ja kuva.

Open Graphin kehitti alun perin Facebook, joka julkaisi sen avoimena protokollana vuonna 2010.^[1] Siitä on sittemmin tullut linkkien esikatselujen yleinen standardi lähes kaikissa palveluissa. Tyypillinen OG-tagien joukko sivun HTML-koodin <head>-osassa näyttää tältä:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short description of this page." />
<meta property="og:image" content="https://example.com/images/preview.jpg" />
<meta property="og:url" content="https://example.com/your-page/" />
<meta property="og:type" content="website" />

Kun nämä tagit ovat paikallaan, oikein ja saatavilla, esikatselut toimivat moitteetta. Kun yksikin niistä puuttuu, on väärin tai estetty, esikatselu rikkoutuu, joskus huomaamatta.

Ovatko termit uusia? Lyhytlinkkien sanastosta löydät selkeät määritelmät Open Graph -tageille, sosiaalisen median esikatseluille, kanonisille URL-osoitteille ja muille niihin liittyville käsitteille.

Testaa URL-osoitteesi heti

Ennen kuin käydään läpi kahdeksan syytä, tarkista alla olevalla työkalulla mikä tahansa URL-osoite, jonka parissa työskentelet. Se hakee sivusi samalla tavalla kuin LinkedIn ja Facebook ja näyttää tarkalleen, mitkä tagit sivulla on, mitä puuttuu ja miltä esikatselu näyttää.

8 yleisintä syytä rikkinäiseen linkin esikatseluun

1. OG-tagit puuttuvat kokonaan

Tämä on yleisin syy. Monilla verkkosivustoilla, etenkin vanhoilla sivustoilla, itse rakennetuilla työkaluilla ja sovellusten sivuilla, ei yksinkertaisesti ole Open Graph -tageja HTML-koodissa. Kun sosiaalisen median palvelu ei löydä niitä, se improvisoi: se voi ottaa sivun <title>-otsikon, napata leipätekstin ensimmäisen kappaleen tai jättää kuvan kokonaan pois.

Mitä etsiä: Avaa sivun lähdekoodi (useimmissa selaimissa hiiren kakkospainikkeella → ”View Page Source”) ja hae merkkijonoa og:title. Jos mitään ei löydy, tageja ei ole.

Näin korjaat: Lisää yllä luetellut viisi perustagia sivun <head>-osaan. WordPressissä tämän hoitavat automaattisesti lisäosat, kuten Yoast SEO tai Rank Math. Useimmissa sivustotyökaluissa (Squarespace, Webflow, Wix) on jokaiselle sivulle oma hakukoneoptimoinnin tai sosiaalisen jakamisen asetuspaneeli.

2. OG-kuva on liian pieni

Palvelut vaativat kuville vähimmäismitat eivätkä näytä kuvia, jotka jäävät niiden alle. Esimerkiksi LinkedIn vaatii suuressa korttimuodossa vähintään 1200 × 627 pikselin kuvan.^[2] Facebook suosittelee samoja mittoja ja näyttää sen sijaan pelkän pikkukuvan tai jättää kuvan kokonaan pois, jos kuvasi on pienempi.

Tavallisia syyllisiä ovat yrityksen logo (yleensä neliön muotoinen ja pieni), favicon tai kuvapankin kuva, joka on pakattu pieneksi ennen lataamista.

Mitä etsiä: Esikatselutyökalu näyttää löydetyn kuvan ja sen mitat. Nykyisille palveluille sopivan kokoinen OG-kuva on 1200 × 630 pikseliä (kuvasuhde 1,91:1).

Näin korjaat: Tee erillinen sosiaalisen jakamisen kuva kokoon 1200 × 630 pikseliä. Se on eri asia kuin sivun pääkuva: se suunnitellaan nimenomaan näyttämään hyvältä vaakasuuntaiseen korttiin rajattuna. Esimerkiksi Canvassa on valmiita pohjia juuri tähän kokoon.

3. Palvelu on tallentanut vanhan esikatselun välimuistiin

LinkedIn, Facebook ja muut palvelut säilyttävät linkkien esikatseluja välimuistissa pitkään, joskus päiviä tai jopa viikkoja. Siksi vanha, rikkinäinen esikatselu näkyy edelleen senkin jälkeen, kun olet korjannut OG-tagit, koska palvelu ei ole hakenut sivua uudelleen.

Tilanne on yksi turhauttavimmista, koska korjaus on jo julkaistu, mutta mikään ei näytä muuttuneen.

Näin korjaat: Jokainen suuri palvelu tarjoaa työkalun, joka pakottaa sivun uudelleenhaun:

• LinkedIn: Käytä työkalua LinkedIn Post Inspector. Liitä URL-osoite ja napsauta painiketta ”Inspect”, niin työkalu hakee tuoreet tiedot ja tyhjentää kyseisen osoitteen välimuistin.
• Facebook / Meta: Käytä työkalua Meta Sharing Debugger. Liitä URL-osoite ja napsauta painiketta ”Scrape Again”.
• Twitter/X: Välimuisti tyhjenee useammin, mutta päivityksen voi käynnistää lisäämällä osoitteeseen ensimmäisellä kerralla harmittoman kyselyparametrin (esim. ?v=2) ja poistamalla sen sitten.

Tee välimuistin ohittamisesta ensimmäinen vaihe aina, kun muutat OG-tageja.

4. Uudelleenohjaus on tiellä

Jos URL-osoitteesi ohjaa toiseen osoitteeseen ennen lopullisen sivun latautumista, jotkin palvelut lukevat OG-tagit välissä olevasta osoitteesta eivätkä lopullisesta kohteesta, tai ne eivät seuraa uudelleenohjausta lainkaan.^[3]

Ongelma on erityisen yleinen, kun kyseessä on jokin näistä:

• Lyhytlinkit (jotka ohjaavat pitkään kohdeosoitteeseen)
• Vanhat URL-osoitteet, jotka ohjataan 301-uudelleenohjauksella uusiin
• Seurantaparametreja sisältävät linkit, jotka kulkevat uudelleenohjauskerroksen kautta
• Kumppanilinkit, jotka kulkevat usean välivaiheen kautta

Uudelleenohjausketju, jossa URL A ohjaa URL B:hen ja se edelleen URL C:hen, pahentaa ongelmaa huomattavasti. Jokainen välivaihe on uusi tilaisuus sille, että hakubotti luovuttaa tai lukee väärän sivun.

Näin korjaat: Käytä mahdollisimman lyhyttä uudelleenohjauspolkua (mieluiten yksi välivaihe suoraan lopulliselle sivulle). Varmista, että lopullisella kohdesivulla on oikeat OG-tagit. Jos käytät lyhytlinkkipalvelua, tarkista, välittääkö palvelu OG-tagit tai voiko siinä määrittää omat esikatselutiedot. Monissa linkkienhallintapalveluissa OG-tiedot voi asettaa suoraan itse lyhytlinkille, jolloin kohdesivun tiedoilla ei ole merkitystä.

5. OG-kuva on liian suuri (tiedostokoko)

Mittojen lisäksi myös tiedostokoolla on merkitystä. Facebookin virallinen ohje suosittelee, että OG-kuvat ovat alle 8 Mt,^[4] mutta käytännössä yli 1–2 Mt:n kuvat aiheuttavat usein aikakatkaisuja, kun hakubotit yrittävät hakea niitä, etenkin hitaammilla palvelimilla tai jaetussa webhotellissa.

4K-kuvakaappaus, suunnitteluohjelmasta viety pakkaamaton PNG tai kameran raakakuva voi helposti olla 5–15 Mt, vaikka sen pikselimitat olisivat oikeat.

Näin korjaat: Pakkaa OG-kuva ennen lataamista. Esimerkiksi Squoosh (Googlen ilmainen selaimessa toimiva kuvanpakkaaja) tai TinyPNG voi pienentää tiedostokokoa 60–80 % ilman näkyvää laadun heikkenemistä. Tavoittele alle 500 kt:n kokoa, jotta kuva latautuu nopeasti ja luotettavasti kaikissa palveluissa.

6. Palvelin ilmoittaa väärän MIME-tyypin

MIME-tyyppi on merkintä, jonka palvelin liittää tiedostoon kertoakseen selaimelle (tai hakubotille), millainen tiedosto on kyseessä. Jos palvelin lähettää kuvan väärällä MIME-tyypillä, esimerkiksi merkitsee JPEG-kuvan tyypiksi text/html, hakubotit hylkäävät sen eivätkä näytä kuvaa, vaikka itse tiedosto olisi täysin kelvollinen.^[5]

Tämä kuulostaa harvinaiselta, mutta sitä tapahtuu odotettua useammin, erityisesti seuraavissa tilanteissa:

• Kuvat tarjoillaan CDN:stä, jonka otsakkeet on määritetty väärin
• Tiedostot on ladattu ilman kunnollista tiedostopäätettä (esim. preview eikä preview.jpg)
• Palvelimet merkitsevät kaikki tuntemattomat tiedostot oletuksena tyypiksi application/octet-stream

Mitä etsiä: Open Graph -esikatselutyökalu näyttää OG-kuvalle palautetun sisältötyypin. Sen pitäisi olla image/jpeg, image/png, image/gif tai image/webp. Mikä tahansa muu aiheuttaa ongelmia ainakin osassa palveluista.

Näin korjaat: Jos hallitset palvelinta, määritä se lähettämään kuvat oikealla Content-Type-otsakkeella. Jos käytät sisällönhallintajärjestelmää tai CDN:ää, lataa kuva uudelleen oikealla tiedostopäätteellä ja tarkista lähetetyt otsakkeet selaimen kehittäjätyökaluista (välilehti ”Network” → napsauta kuvan pyyntöä → ”Headers”).

7. OG-tagit ja Twitter Card -tagit ovat ristiriidassa

LinkedIn ja Facebook käyttävät Open Graph -tageja. Twitter/X käyttää omaa järjestelmäänsä, Twitter Cardsia.^[6] Useimmat palvelut käyttävät OG-tageja, jos Twitter Card -tageja ei ole, mutta kun sivulla on molemmat tagijoukot ja ne ovat ristiriidassa keskenään (eri otsikot, eri kuvat), jotkin palvelut hämääntyvät ja näyttävät väärän version tai vaihtelevat niiden välillä arvaamattomasti.

Tavallinen ristiriitatilanne: kehittäjä lisäsi OG-tagit, jotka osoittavat vaakasuuntaiseen bannerikuvaan, ja myöhemmin markkinointitiimin jäsen lisäsi Twitter Card -tagit, jotka osoittavat neliön muotoiseen logoon. Nyt LinkedIn näyttää bannerin sijaan neliön muotoisen logon.

Näin korjaat: Tarkista molemmat tagijoukot yhdessä. Useimmilla sivuilla og:- ja twitter:-vastineiden pitäisi olla samat, ellei sinulla ole tarkoituksellista syytä näyttää eri palveluissa eri sisältöä. Jos haluat yhtenäisyyttä, aseta Twitter Card -tagit nimenomaisesti vastaamaan OG-tageja:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A short description." />
<meta name="twitter:image" content="https://example.com/images/preview.jpg" />

8. LinkedInin tarkistustyökalulla on omat erikoisuutensa

LinkedInin hakubotti eroaa Facebookin ja Twitterin boteista muutamassa tärkeässä kohdassa:

• Se ei seuraa kaikkia uudelleenohjauksia. LinkedInin hakubotti pysähtyy joskus ensimmäiseen uudelleenohjaukseen ja lukee tagit välissä olevasta osoitteesta eikä lopulliselta sivulta.^[2]
• Se noudattaa otsaketta X-Frame-Options ja joitakin robots.txt-sääntöjä. Jos robots.txt-tiedostosi estää LinkedInin indeksointibotin (Linkedinbot), esikatselut epäonnistuvat.
• Kuvien CDN:n tunnistautuminen. Jos OG-kuvasi on minkä tahansa tunnistautumisen, tunnisteen tai vanhenevan allekirjoitetun URL-osoitteen takana, LinkedIn hakee sen onnistuneesti ensimmäisellä kerralla, mutta epäonnistuu myöhemmillä kerroilla, kun tunniste on vanhentunut.
• Se tyhjentää välimuistinsa hitaammin. Vaikka pakottaisit uudelleenhaun Post Inspectorilla, LinkedIn-julkaisut, jotka on jo julkaistu vanhalla esikatselulla, eivät välttämättä päivity. Tämä on tarkoituksellista.

Näin korjaat: Aja URL-osoite LinkedIn Post Inspectorin läpi ennen julkaisua, ei sen jälkeen. Pidä sitä lähtötarkastuksena aina, kun jaat tärkeän linkin. Varmista, että robots.txt-tiedostosi sallii botin Linkedinbot. Tarjoile OG-kuvat julkisesta, pysyvästä URL-osoitteesta ilman tunnistautumista tai vanhenevia tunnisteita.

Miten sovellukset rakentavat esikatselukortin

Jokainen linkin esikatselu syntyy samassa järjestyksessä riippumatta siitä, mihin sovellukseen linkin liität.

1. Haku. Palvelun hakubotti pyytää URL-osoitettasi omalla käyttäjäagentillaan, seuraa uudelleenohjauksia ja lukee palvelimen palauttaman HTML-koodin. Se ei suorita JavaScriptiäsi samalla tavalla kuin selain, ja siksi selaimessa lisätyt tagit usein puuttuvat.
2. Tagien lukeminen. Botti etsii tageja og:title, og:description ja og:image (X tarkistaa ensin tagit twitter:* ja turvautuu sitten Open Graphiin, ja Discord ja Slack lukevat myös oEmbed-tiedot, jos sivusto julkaisee niitä). Jos tagi puuttuu, botti käyttää sivun otsikkoa, metakuvausta tai ei mitään.
3. Kuvan haku. Kuvan URL-osoite pyydetään erikseen, ja sen koko ja mitat tarkistetaan. Suhteellinen polku, uudelleenohjaus tai liian suuri tai liian pieni tiedosto on yleisin syy siihen, että kortti näkyy ilman kuvaa.
4. Välimuisti ja piirtäminen. Tulos tallennetaan välimuistiin palvelusta riippuen tunneiksi tai päiviksi ja piirretään palvelun omaan asetteluun: iso kuva ylhäällä X:n summary_large_image-kortissa ja LinkedInissä, tiivis kortti iMessagessa ja värijuovallinen upotus Discordissa.

Linkin esikatselun tarkistustyökalu tekee vaiheet yhdestä kolmeen puolestasi ja näyttää valmiin kortin kahdeksassa palvelussa rinnakkain. Open Graph -tarkistustyökalu näyttää kortin taustalla olevat raakatagit. Jos kortti näyttää oikealta työkalussa mutta väärältä sovelluksessa, syy on lähes aina vaiheessa neljä: välimuistissa on kopio ajalta ennen korjaustasi.

Pikatarkistuslista

Käy tämä läpi ennen kuin jaat tärkeän linkin:

Miksi kyse on muustakin kuin ulkonäöstä

Rikkinäinen esikatselu on muutakin kuin kauneusvirhe. Tutkimukset osoittavat johdonmukaisesti, että julkaisut, joissa on kuvallinen esikatselu, saavat huomattavasti enemmän reaktioita kuin pelkkää tekstiä sisältävät linkkijulkaisut. LinkedInin omien tietojen mukaan kuvalliset julkaisut saavat 98 % enemmän kommentteja kuin kuvattomat.^[2] Facebookissa linkkijulkaisut, joiden esikatselu on kunnossa, menestyvät johdonmukaisesti paremmin kuin muut sekä orgaanisessa näkyvyydessä että maksetuissa mainoksissa.

Jos jaat mitä tahansa sisältöä, kuten blogikirjoituksia, laskeutumissivuja, tuotesivuja tai tiedotteita, Open Graph -tagien korjaaminen on yksi tuottoisimmista 30 minuutin panostuksista, joita voit tehdä.

Lähteet

[1] Meta Platforms, Inc. (2010, jatkuvasti päivitetty). The Open Graph Protocol. ogp.me. https://ogp.me/

[2] LinkedIn. (2024). Share on LinkedIn — Developer Documentation: Best Practices. LinkedIn Developer Platform. https://learn.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/share-on-linkedin

[3] Fielding, R., Nottingham, M., & Reschke, J. (2022). RFC 9110: HTTP Semantics, §15.4 (Redirection). Internet Engineering Task Force (IETF). https://www.rfc-editor.org/rfc/rfc9110#section-15.4

[4] Meta for Developers. (2024). Sharing Best Practices for Websites & Mobile Apps. https://developers.facebook.com/docs/sharing/best-practices/

[5] Freed, N., & Borenstein, N. (1996). RFC 2046: MIME Part Two — Media Types. IETF. https://www.rfc-editor.org/rfc/rfc2046

[6] X Corp. (2024). Cards — X Developer Platform. https://developer.x.com/en/docs/twitter-for-websites/cards/overview/abouts-cards

Päivitetty viimeksi toukokuussa 2026. Katso myös lyhytlinkkien sanasto: Open Graph / OG-tagit, sosiaalisen median esikatselu, kanoninen URL-osoite, uudelleenohjausketju.