Open Graph -metatagien generaattori

Open Graph -tagit ovat pieniä HTML-koodinpätkiä, jotka määrittävät, miltä sivusi näyttää, kun joku jakaa sen Facebookissa, LinkedInissä, Slackissa, Discordissa tai X:ssä (Twitterissä). Täytä alle otsikko, kuvaus, URL, kuva ja muutama lisäasetus, katso jakokortin esikatselun päivittyvän välittömästi ja kopioi luodut <meta>-tagit suoraan sivusi <head>-osioon. Kaikki tapahtuu selaimessasi — mitään ei lähetetä palvelimelle.

Mikä tämä työkalu on?

Open Graph on alun perin Facebookin luoma protokolla, jonka avulla mikä tahansa verkkosivu voi kuvata itseään pienellä joukolla <meta property="og:..."> -tageja, jotka sijaitsevat HTML:n <head>-osiossa. Kun joku liittää linkkisi some-sovellukseen, chat-asiakkaaseen tai viestisovellukseen, sovellus lukee nämä tagit rakentaakseen esikatselukortin — otsikon, kuvauksen ja pikkukuvan — sen sijaan että se arvaisi sivun sisällön perusteella.

Twitter (X) käyttää samankaltaista mutta erillistä tagijoukkoa, <meta name="twitter:...">, joka määrittää nimenomaan sen, miltä linkin esikatselu näyttää kyseisellä alustalla. Useimmat sivustot asettavat molemmat: Open Graph -tagit laajaa yhteensopivuutta varten ja Twitter Card -tagit X:n esikatselun hienosäätöön (esimerkiksi valitsemalla suuren kuvan kortin pienen yhteenvetokortin sijaan).

Ilman näitä tageja jaettu linkki joko ei näytä esikatselua lainkaan, tai alusta yrittää arvata otsikon ja kuvan sivun raa'asta sisällöstä — valiten usein väärän otsikon, satunnaisen upotetun kuvan tai ei mitään. og:title-, og:description- ja og:image-tagien selkeä asettaminen antaa sinulle täyden hallinnan siihen, miltä sisältösi näyttää ennen kuin kukaan klikkaa sitä.

Miksi käyttää sitä?

Reaaliaikainen esikatselu — näe tarkalleen, miltä jakokortti näyttää jo kirjoittaessasi, ennen kuin julkaiset mitään.
Luo kertaheitolla sekä Open Graph -tagit (og:title, og:description, og:image, og:url, og:type, og:site_name) että Twitter Card -tagit.
Kattaa kentät, joita alustat oikeasti lukevat: otsikko, kuvaus, kanoninen URL, kuva, sivuston nimi, sisältötyyppi ja Twitter Card -tyyli.
Toimii kokonaan selaimessasi — otsikkosi, kuvauksesi ja URL-osoitteesi eivät koskaan poistu selaimestasi.
Ilmainen, ei kirjautumista, ei käyttörajoitusta — kopioi tulos ja liitä se HTML-koodiisi.

Käyttöohje

Syötä sivusi otsikko ja lyhyt kuvaus (tavoittele alle ~60 merkkiä otsikolle ja ~155–160 merkkiä kuvaukselle).
Syötä sivun kanoninen URL ja esikatselukuvan absoluuttinen URL (kuvien URL-osoitteiden on oltava täysin määriteltyjä, esim. https://example.com/image.jpg, ei suhteellinen polku).
Halutessasi aseta sivuston nimi, valitse og:type (website, article, product, profile, video, music) ja Twitter Card -tyyppi (summary tai summary_large_image).
Tarkista reaaliaikainen esikatselukortti varmistaaksesi, että otsikko, kuvaus ja kuva sopivat yhteen.
Klikkaa "Kopioi" ja liitä luodut <meta>-tagit sivusi <head>-osioon, ennen sulkevaa </head>-tagia.

Esimerkki

Syöte

Otsikko: "10 ilmaista kehittäjätyökalua, joita oikeasti käytät"
Kuvaus: "Valikoitu lista selainpohjaisia työkaluja JSON:lle, säännöllisille lausekkeille, UUID:lle ja muulle — ei asennusta tarvita."
URL: https://example.com/blog/dev-tools
Kuva: https://example.com/images/dev-tools-cover.jpg

Tuloste

<meta property="og:title" content="10 Free Developer Tools You'll Actually Use" />
<meta property="og:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta property="og:url" content="https://example.com/blog/dev-tools" />
<meta property="og:image" content="https://example.com/images/dev-tools-cover.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Free Developer Tools You'll Actually Use" />
<meta name="twitter:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta name="twitter:image" content="https://example.com/images/dev-tools-cover.jpg" />

Tulokseen sisältyvät vain täyttämäsi kentät, joten sivuston nimen jättäminen tyhjäksi jättää og:site_name-tagin yksinkertaisesti pois tuloksesta.

Yleisiä virheitä, joita kannattaa välttää

og:image puuttuu kokonaan — ilman sitä useimmat alustat joko eivät näytä esikatselukuvaa lainkaan tai käyttävät sivulta poimittua satunnaista kuvaa, mikä näyttää yleensä rikkinäiseltä ja epäammattimaiselta.
Suhteellisen kuvapolun, kuten /images/cover.jpg, käyttäminen täyden URL:n, kuten https://example.com/images/cover.jpg, sijaan — sosiaalisen median botit eivät yleensä pysty ratkaisemaan suhteellisia polkuja.
Väärä kuvasuhde — neliömäinen tai pystysuuntainen kuva rajautuu kömpelösti, kun alustat pakottavat sen 1,91:1-vaakasuuntaiseen kehykseen; suunnittele jakokuvasi aina lähelle kokoa 1200×630.
Otsikot tai kuvaukset, jotka katkeavat — pidä og:title alle ~60 merkin ja og:description alle ~155–160 merkin, jotta niitä ei katkaista kolmella pisteellä useimmilla alustoilla.
Välimuistissa olevien esikatselujen päivittämisen unohtaminen — kun muutat og-tageja julkaistulla sivulla, vanha esikatselu voi säilyä Facebookin tai LinkedInin välimuistissa, kunnes pakotat manuaalisesti uuden haun heidän vianetsintätyökaluillaan.

Missä kutakin tagia käytetään

og:title, og:description ja og:image ovat kolme tagia, joita lähes jokainen alusta lukee esikatselun rakentamiseen. og:url kertoo boteille, mihin kanoniseen linkkiin esikatselu tulee liittää, mikä on tärkeää, jos sama sisältö on saatavilla useiden URL-osoitteiden kautta. og:site_name näyttää joillakin alustoilla, kuten Facebookissa, pienen otsikon yläpuolella olevan tunnisteen (esimerkiksi julkaisun tai brändin nimen).

og:type muuttaa, minkä tyyppistä objektia sivu edustaa boteille, jotka tukevat Open Graphin rikkaampaa objektimallia — esimerkiksi article ottaa käyttöön og:article:published_time- ja og:article:author-tagit alustoilla, jotka lukevat ne, vaikka useimmat somen esikatselut jättävät nämä lisäkentät huomiotta ja käyttävät vain perustrioa otsikko/kuvaus/kuva.

twitter:card ohjaa asettelua nimenomaan X:ssä: summary näyttää pienen neliömäisen pikkukuvan tekstin vieressä, kun taas summary_large_image näyttää täysleveän kuvan tekstin yläpuolella — jälkimmäinen on lähes aina parempi valinta sisällölle, jolla on merkityksellinen kansikuva.

Usein kysytyt kysymykset

Minkä kokoinen minun og:image-kuvani pitäisi olla?

Suositeltu koko on 1200×630px — se on tarpeeksi suuri korkean pikselitiheyden näytöille ja vastaa noin 1,91:1-kuvasuhdetta, johon Facebook, LinkedIn ja X rajaavat kuvan. Pidä tiedosto alle 5–8 Mt:n, käytä JPG- tai PNG-muotoa ja varmista, että kuvan URL on täysi absoluuttinen osoite eikä suhteellinen polku — useimmat botit eivät ratkaise suhteellisia kuvapolkuja oikein.

Miksi esikatseluni ei näy, kun jaan linkin?

Yleisimmät syyt ovat: puuttuva og:image, suhteellinen (ei absoluuttinen) kuvan URL, robots.txt estää botin, tai alusta näyttää välimuistiin tallennettua vanhaa esikatselua. Facebook ja LinkedIn tallentavat haetut esikatselut aggressiivisesti välimuistiin — käytä Facebookin Sharing Debuggeria tai LinkedInin Post Inspectoria pakottaaksesi uuden haun tagien päivittämisen jälkeen.

Mikä ero on og:-tageilla ja twitter:-tageilla?

og:-tagit (og:title, og:description, og:image jne.) ovat Open Graph -standardi, jota Facebook, LinkedIn, Slack, Discord, WhatsApp ja useimmat muut alustat lukevat. twitter:-tagit ovat Twitterin/X:n oma muoto. Jos twitter:title tai twitter:image puuttuvat, X käyttää automaattisesti vastaavaa og:-tagia — mutta molempien asettaminen selkeästi antaa sinulle enemmän hallintaa, mukaan lukien mahdollisuuden valita summary_large_image suurta esikatselukuvaa varten.

Mitä og:type-arvoa minun pitäisi käyttää?

"website" on turvallinen oletusarvo useimmille sivuille, mukaan lukien etusivut ja yleinen sisältö. Käytä "article"-arvoa blogikirjoituksille ja uutisartikkeleille (se avaa lisätageja, kuten julkaisuajan, jotka ovat artikkelikohtaisia), "product"-arvoa verkkokauppasivuille ja "profile"-arvoa henkilökohtaisille tai käyttäjäprofiilisivuille. Tyyppi vaikuttaa lähinnä siihen, mitkä lisä-Open Graph-ominaisuudet ovat kelvollisia, ei siihen, miltä peruskortti näyttää.

Tallentaako tai lähettääkö tämä työkalu tietojani minnekään?

Ei. Kaikki luominen tapahtuu paikallisesti selaimessasi tavallisella JavaScriptillä. Mitään kirjoittamaasi ei lähetetä, kirjata lokiin tai tallenneta — välilehden sulkeminen tyhjentää kaiken.