← Blog

Mikä on Open Graph? Täydellinen aloittelijan opas

Jaa linkki sosiaalisessa mediassa. Esikatselu näyttää kamalalta. Tässä on syy – ja miten Open Graph-tunnisteet korjaavat sen.

Haluatko nähdä, miltä linkkisi todella näyttävät?

Tarkista Open Graph-tunnisteet vapaana käyttämällä Proovd — liitä URL-osoite ja katso esikatselu kohdista X, LinkedIn, Slack, Discord, WhatsApp ja Reddit ennen jakamista.

Pikavastaus

  • Open Graph on joukko HTML-sisällönkuvauskenttiä, jotka ohjaavat sitä, miltä linkit näyttävät sosiaalisessa mediassa
  • Ydintunnisteet: og:title, og:description, og:image, og:url⟦11⟦
  • Ilman OG-tageja alustat arvaavat – ja arvaavat huonosti
  • Aseta OG-tunnisteet + Twitter Card -tunnisteet saadaksesi täyden kattavuuden

Mikä Open Graph oikeastaan ​​on

Open Graph on protokolla, jonka Facebook keksi vuonna 2010. Ennen vuotta Open Graph, kun joku jakoi linkin osoitteessa Facebook, esikatselu oli arvaamaton. Facebook kaavisi sivua etsiessään kuvia ja tekstiä, ja tulos oli usein satunnainen – joskus pieni favicon, joskus satunnainen kuva sivulta, joskus ei ollenkaan.

Facebook sanoi: "Annetaan verkkovastaaville tavallinen tapa kertoa meille, mitä näyttää." He esittelivät joukon sisällönkuvauskenttiä, jotka mikä tahansa verkkosivusto voisi lisätä HTML-koodiinsa. Muut alustat – X, LinkedIn, Slack, Discord, WhatsApp, Reddit – ottivat käyttöön saman standardin. Nykyään Open Graph on yleinen kieli linkkien esikatseluun Internetissä.

Se ei ole sinun asentamasi tekniikka. Se on vain HTML-sisällönkuvauskenttiä sivusi -osiossa. Siinä se.

Core Open Graph -tunnisteet

Jokaisella sivulla, joka jaetaan sosiaalisessa mediassa, tulee olla vähintään nämä neljä tagia:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling one-sentence summary." />
<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page" />

Tässä on mitä kukin tekee:

  • og:title — Esikatselukortissa näkyvä otsikko. Yleensä sivun otsikko tai artikkelin otsikko.
  • og:description — lyhyt yhteenveto (2–3 lausetta), joka näkyy otsikon alla.
  • og:image — Esikatselukuva. Suositeltu koko: 1200 × 630 pikseliä (suhde 1,91:1).
  • og:url — Sivun ensisijainen URL-osoite. Auttaa alustoja tunnistamaan oikean URL-osoitteen.

Muita valinnaisia ​​tunnisteita ovat esimerkiksi og:type (yleensä "verkkosivusto" tai "artikkeli"), og:site_name (tuotemerkkisi) ja og:locale. Mutta edellä mainitut neljä ovat tärkeimpiä linkkien esikatselussa.

Kuinka Open Graph toimii – askel askeleelta

Näin tapahtuu, kun joku jakaa linkin:

  1. Joku liittää URL-osoitteen kohtaan X, LinkedIn, Slack, Discord tai minne tahansa.
  2. Alustan robotti hakee URL-osoitteen ja lukee HTML:n ylhäältä alas.
  3. Se etsii og: tags osiosta .
  4. Se rakentaa esikatselukortin käyttämällä arvoja og:title, og:description ja og:image.
  5. Kortti näytetään kaikille, jotka näkevät jaetun linkin.

Jos alusta ei löydä og:-tunnisteita, se palaa omaan heuristiikkaansa – valitsee satunnaisia ​​kuvia, käyttää tagia </code> jne. Tämä varakäyttäytyminen johtuu siitä, miksi niin monet jaetut linkit näyttävät kamalilta.</p> <h2 data-i18n="b.what-is-open-graph.31">Open Graph vs. Twitter Cards</h2> <p data-i18n="b.what-is-open-graph.32" data-i18n-html>Twitter loi oman tunnistejärjestelmän nimeltä "Twitter Cards" ennen kuin Open Graph oli olemassa. Twitter Cards käytä attribuutteja <code>twitter:card</code>, <code>twitter:title</code>, <code>twitter:description</code> ja <code>⟦10⟟⟧⟟⟟ <code>og:</code> etuliitteet.</p> <p data-i18n="b.what-is-open-graph.33" data-i18n-html>Nykyään useimmat alustat tukevat molempia. Mutta X/Twitter suosii edelleen <code>twitter:card</code>-tageja OG-tunnisteiden sijaan. Siksi paras käytäntö on asettaa <strong>molemmat</strong>:</p> <pre><code><!-- Open Graph (works on LinkedIn, Discord, Slack, WhatsApp, Reddit) --> <meta property="og:title" content="Your Title" /> <meta property="og:image" content="https://yoursite.com/image.jpg" /> <!-- Twitter/X (works on X/Twitter) --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Your Title" /> <meta name="twitter:image" content="https://yoursite.com/image.jpg" /></code></pre> <h2 data-i18n="b.what-is-open-graph.34">Miksi tällä on merkitystä verkkosivustollesi</h2> <p data-i18n="b.what-is-open-graph.35">Jos jaat sisältöäsi missä tahansa sosiaalisessa mediassa – minkä luultavasti teetkin, jos sinulla on verkkosivusto – linkkien esikatselut ovat ensivaikutelmasi. Hyvin muotoiltu esikatselu, jossa on selkeä otsikko, houkutteleva kuvaus ja hyvä kuva, lisää dramaattisesti napsautussuhdetta.</p> <p data-i18n="b.what-is-open-graph.36">Rikkinäinen esikatselu – puuttuva kuva, katkaistu otsikko tai sotkuinen kuvaus – saa sisältösi näyttämään epäammattimaiselta. Ihmiset rullaavat sen ohi.</p> <p data-i18n="b.what-is-open-graph.37">Open Graph -tunnisteet ovat ero näiden kahden välillä. Niiden käyttöönotto vie 5 minuuttia, ja niillä on suhteettoman suuri vaikutus sisältösi suorituskykyyn sosiaalisessa mediassa.</p> <h2 data-i18n="b.what-is-open-graph.38">Pikatarkistuslista</h2> <div class="checklist"> <ol> <li data-i18n="b.what-is-open-graph.39" data-i18n-html>Lisää <code>og:title</code>, <code>og:description</code>, <code>og:image</code> ja <code>og:url</code> jokaiselle sivulle</li> <li data-i18n="b.what-is-open-graph.40" data-i18n-html>Lisää <code>twitter:card</code> ja <code>twitter:image</code> X/Twitter-yhteensopivuuden varmistamiseksi</li> <li data-i18n="b.what-is-open-graph.41">Aseta kuvan kooksi 1200 × 630 pikseliä</li> <li data-i18n="b.what-is-open-graph.42">Käytä absoluuttisia URL-osoitteita (https://...) kaikille kuvapoluille</li> <li data-i18n="b.what-is-open-graph.43" data-i18n-html>Testaa <a href="https://proovd.in/fi/">Proovd</a> nähdäksesi miltä sivusi näyttää kaikilla alustoilla</li> </ol> </div> <h2 data-i18n="b.what-is-open-graph.44">Usein kysytyt kysymykset</h2> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.45">Tarvitsenko tunnisteita Open Graph, jos en jaa sosiaalisessa mediassa?</h3> <p data-i18n="b.what-is-open-graph.46">Jos et jaa linkkejä missään, et tarvitse niitä. Mutta jos sinulla on verkkosivusto ja jaat sen vaikka kerran sosiaalisessa mediassa, OG-tunnisteet ovat välttämättömiä.</p> </div> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.47">Vaikuttavatko tagit Open Graph Googlen sijoitukseen?</h3> <p data-i18n="b.what-is-open-graph.48">Ei suoraan. Google ei käytä OG-tageja sijoitustekijänä. Mutta ne voivat vaikuttaa hakutulosten ja sosiaalisten jakojen napsautussuhteisiin, mikä vaikuttaa epäsuorasti liikenteeseen ja näkyvyyteen.</p> </div> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.49">Voinko asettaa eri OG-tunnisteita eri sivuille?</h3> <p data-i18n="b.what-is-open-graph.50">Kyllä. Jokaisella sivulla tulee olla omat OG-tunnisteet, jotka vastaavat sen sisältöä. Koiria käsittelevässä blogikirjoituksessa tulee olla eri numerot og:title ja og:image kuin kissoja käsittelevällä sivulla.</p> </div> <div class="internal-links"> <h3 data-i18n="b.what-is-open-graph.51">Aiheeseen liittyvät artikkelit</h3> <ul style="margin:0; padding-left: 1.25rem;"><li data-i18n="b.what-is-open-graph.52" data-i18n-html><a href="/fi/blog/discord-link-preview-not-working">Discord Linkin esikatselu ei toimi? 7 korjausta kokeiltavaksi (2026)</a></li> <li data-i18n="b.what-is-open-graph.53" data-i18n-html><a href="/fi/blog/how-to-add-open-graph-tags">Tagien Open Graph lisääminen mille tahansa verkkosivustolle</a></li> <li data-i18n="b.what-is-open-graph.54" data-i18n-html><a href="/fi/blog/open-graph-vs-twitter-card">Open Graph vs Twitter Card: Mitä eroa on?</a></li> <li data-i18n="b.what-is-open-graph.55" data-i18n-html><a href="/fi/blog/og-image-size-guide">Open Graph Kuvan koko: The Complete 2026 Guide</a></li> </ul> </div> <div class="cta"> <p style="margin:0 0 0.5rem;" data-i18n="b.what-is-open-graph.56" data-i18n-html><strong>Tarkista Open Graph tunnisteet sekunneissa</strong></p> <p style="margin:0;" data-i18n="b.what-is-open-graph.57" data-i18n-html>Tarkista Open Graph-tunnisteet vapaana koodilla <a href="https://proovd.in/fi/">Proovd</a> — liitä URL-osoite ja katso esikatselu kohdissa X, LinkedIn, Slack, Discord, WhatsApp ja Reddit.</p> </div> </article> </div> <script src="/i18n/apply.js" defer></script> </body> </html>