Open Graph -metatunnisteiden generaattori

Tagit, joista linkkiesikatselu rakennetaan

Kun joku liittää linkkisi julkaisuun tai viestiin, sovellus lähettää sivulle indeksointirobotin, joka lukee muutaman <meta>-tagin sivun <head>-osiosta. Nämä tagit perustuvat Open Graph -protokollaan, joka listaa niistä neljä pakollisiksi:

• og:title: otsikko sellaisena kuin se tulisi näkyä esikatselussa.
• og:type: mikä sivu on. website sopii useimpiin sivuihin ja article blogikirjoitukseen. Protokolla määrittää myös tyyppejä kuten profile, book, video.movie ja music.song.
• og:image: sivua edustavan kuvan URL.
• og:url: kanoninen URL, jota protokolla kutsuu objektin pysyväksi tunnisteeksi.

Protokolla määrittää myös valinnaisia tageja, ja generaattori kirjoittaa hyödylliset: og:description, og:site_name sekä kuvan tiedot og:image:width, og:image:height ja og:image:alt. Vaihtoehtoisesta tekstistä protokolla on suorasanainen: jos sivu määrittää og:image-arvon, sen tulisi määrittää myös og:image:alt, ja tuo teksti kuvailee kuvan sisällön, ei toimi kuvatekstinä.

Mitä X lisää: twitter:card

X lukee myös Open Graphia. Sen korttimerkintöjen ohjeet (X:n kehittäjädokumentaatio, johon linkitetään tässä Internet Archiven kautta, koska alkuperäinen sivu ohjaa nyt uudelleen) listaavat varatoiminnon jokaiselle tagille: twitter:title käyttää varana arvoa og:title, twitter:description arvoa og:description, twitter:image arvoa og:image ja twitter:image:alt arvoa og:image:alt. Niinpä ainoa lisäämisen arvoinen tagi on twitter:card, joka valitsee asettelun. Jätä se pois, ja samojen ohjeiden mukaan X voi käyttää varana pientä yhteenvetokorttia, vaikka olisit halunnut suuren:

• summary_large_image: koko leveydeltä otsikon yläpuolella oleva kuva. X:n suuren kuvakortin sivun mukaan sen kuvat tukevat kuvasuhdetta 2:1, vähimmäiskoko on 300 × 157 ja enimmäiskoko 4096 × 4096 pikseliä, alle 5 Mt, muodossa JPG, PNG, WEBP tai GIF. SVG:tä ei tueta.
• summary: pienempi kortti neliömäisellä kuvalla. X:n yhteenvetokortin sivun mukaan kuva tukee suhdetta 1:1, kooltaan 144 × 144 pikselistä aina 4096 × 4096 pikseliin, ja se rajataan neliöksi kaikilla alustoilla.

Sama ohje luettelee myös app- ja player-kortit, jotka vaativat lisäkenttiä sovelluskaupasta tai videosoittimesta, joten ne on jätetty tästä pois. Siinä kerrotaan myös yllä olevien tarkistusten käyttämät rajat: 70 merkkiä otsikolle, 200 kuvaukselle ja 420 alt-tekstille.

Kuvakoot, jotka alustat ilmoittavat

• LinkedIn: sen opas sivuston jakokelpoiseksi tekemisestä pyytää og:title-, og:image-, og:description- ja og:url-tiedot ja ilmoittaa enimmäistiedostokooksi 5 Mt, vähimmäiskooksi 1200 × 627 pikseliä ja suositelluksi suhteeksi 1,91:1.
• Meta: sen jakamisen parhaat käytännöt kehottavat käyttämään vähintään 1080 pikseliä leveitä kuvia korkearesoluutioisille näytöille ja vähintään 600 pikseliä leveitä kuvalinkkimainosten näyttämiseen. Samalla sivulla pyydetään og:image:width- ja og:image:height-tiedot, jotta indeksointirobotti voi renderöidä kuvan heti ilman, että sen pitää ensin ladata ja käsitellä se.

1200 × 630 kuva täyttää kaikki nämä: se on vähintään 1200 × 627 LinkedIniä varten, yli 1080 leveä Metaa varten ja 1,905:1, eli 5 %:n sisällä X:n 2:1-suhteesta.

Tarkista se ja päivitä vanhat esikatselut

Sovellukset tallentavat välimuistiin sen, minkä ne noutivat, joten tunnisteiden korjaaminen ei korjaa esikatselua, joka oli jo tallennettu. Molemmat suuret verkostot antavat sinulle työkalun tähän:

• Metan Sharing Debugger näyttää tunnisteet, jotka sen indeksointirobotti noutaa, sekä mahdolliset virheet tai varoitukset, ja käynnistää uuden noudon. Metan verkkovastaavan opas kuvaa sen, ja parhaiden käytäntöjen sivulla todetaan, että noudettu sisältö muuten päivittyy tavanomaisella 24 tunnin jaksolla.
• LinkedInin Post Inspector päivittää välimuistiin tallennetun URL-osoitteen. LinkedInin ohjesivulla todetaan, että päivitys koskee vain uusia julkaisuja: julkaisut, jotka jo sisältävät URL-osoitteen, säilyttävät vanhan esikatselun.

Mitä tämä työkalu ei tee

Se ei nouda sivuasi tai kuvaasi, joten se ei näe, mikä on oikeasti julkaistuna, ja yllä oleva esikatselu on tekstiluonnos eikä renderöinti. Se kirjoittaa tunnisteet; sivustosi pitää silti tarjota ne sivun <head>-osassa, siinä HTML:ssä, jonka indeksointirobotti vastaanottaa. JavaScriptin myöhemmin lisäämiä tunnisteita ei ehkä koskaan nähdä. Eikä se kirjoita app- tai player-kortteja tai niitä lisäominaisuuksia, joita tyypit kuten book tai video.movie määrittelevät.

Jos et halua kirjoittaa tätä käsin

Hermoso on markkinointia automaattiohjauksella: se tutkii markkinoillasi jo toimivat mainokset, tekee brändin mukaisia kuva- ja videomainoksia, ajastaa julkaisut ja pyörittää maksettuja kampanjoita omilla mainostileilläsi. Se toimii verkkosovelluksessa tai Clauden, ChatGPT:n ja Cursorin sisällä sen MCP-palvelimen kautta.

Ilmaiset työkalut: UTM-linkin rakentaja · QR-koodin generaattori · Sosiaalisen median kokojen opas

Usein kysytyt kysymykset

Mitkä Open Graph -tunnisteet ovat pakollisia?

Open Graph -protokolla listaa neljä pakollista ominaisuutta: og:title, og:type, og:image ja og:url. og:description, og:site_name sekä og:image-tunnisteiden leveys, korkeus ja alt ovat valinnaisia mutta kannattaa lisätä.

Tarvitsenko twitter:title- ja twitter:image-tunnisteita, jos minulla on og:-tunnisteet?

Et. X:n cards-merkinnän ohjeistus kertoo, että twitter:title, twitter:description, twitter:image ja twitter:image:alt palautuvat niiden og:-vastineisiin. Lisäämisen arvoinen tunniste on twitter:card, joka valitsee kortin asettelun.

Minkä kokoinen Open Graph -kuvan pitäisi olla?

LinkedIn pyytää vähintään 1200 × 627 pikseliä suhteessa 1.91:1 ja alle 5 MB. Meta suosittelee vähintään 1080 pikselin leveyttä. X:n suuren kuvan kortti tukee suhdetta 2:1 kokovälillä 300 × 157 – 4096 × 4096. 1200 × 630 -kuva sopii kaikkiin kolmeen.

Miksi linkkini näyttää yhä vanhaa kuvaa tunnisteiden muuttamisen jälkeen?

Sovellus tallensi vanhan skrapauksen välimuistiin. Aja URL Metan Sharing Debuggerin tai LinkedInin Post Inspectorin läpi noutaaksesi sen uudelleen. LinkedIn huomauttaa, että julkaisut jotka jo jakavat URL:n säilyttävät vanhan esikatselun.

Miksi lainausmerkit ja et-merkit muuttuvat tulosteessa?

Ne on HTML-escapattu jotta tunniste pysyy kelvollisena. Otsikosta kuten Tom & Jerry's "Sale" tulee content-attribuutin sisällä Tom & Jerry's "Sale", ja selaimet ja indeksoijat lukevat sen takaisin alkuperäisenä tekstinä.

Lataako työkalu kuvani?

Ei. Mitään kirjoittamaasi ei lähetetä minnekään eikä kuvan URL:ää koskaan noudeta, minkä vuoksi esikatselu näyttää paikkamerkin kuvan sijaan.