Open Graph metasiltide generaator

Open Graph sildid on väikesed HTML-koodi tükid, mis määravad, kuidas su leht välja näeb, kui keegi jagab seda Facebookis, LinkedInis, Slackis, Discordis või X-is (Twitteris). Täida allpool pealkiri, kirjeldus, URL, pilt ja mõned valikud, jälgi, kuidas jagamiskaardi eelvaade koheselt uueneb, ning kopeeri loodud <meta>-sildid otse oma lehe <head> sektsiooni. Kõik toimub sinu brauseris — midagi ei saadeta serverisse.

Mis see tööriist on?

Open Graph on algselt Facebooki loodud protokoll, mis võimaldab igal veebilehel ennast kirjeldada väikese hulga <meta property="og:..."> siltidega, mis paiknevad HTML-i <head> sektsioonis. Kui keegi kleebib su lingi sotsiaalmeediarakendusse, jututoasse või sõnumirakendusse, loeb see rakendus need sildid, et koostada eelvaatekaart — pealkiri, kirjeldus ja pisipilt —, selle asemel et lehe sisu põhjal arvata.

Twitter (X) kasutab seotud, kuid eraldiseisvat siltide kogumit, <meta name="twitter:...">, et juhtida spetsiaalselt seda, kuidas lingi eelvaade platvormil välja näeb. Enamik saite määrab mõlemad: Open Graph sildid laia ühilduvuse tagamiseks ja Twitter Card sildid X-i eelvaate täpsustamiseks (näiteks suure pildiga kaardi valimiseks väikese kokkuvõttekaardi asemel).

Ilma nende siltideta ei näita jagatud link üldse eelvaadet või proovib platvorm arvata pealkirja ja pildi lehe töötlemata sisu põhjal — valides sageli vale pealkirja, juhusliku sisemise pildi või mitte midagi. og:title, og:description ja og:image otsene määramine annab sulle täieliku kontrolli selle üle, kuidas su sisu enne kliki nähtavaks tehakse.

Miks seda kasutada?

Otseeelvaade — näe täpselt, milline jagamiskaart välja näeb juba kirjutamise ajal, enne kui midagi avaldad.
Loob korraga nii Open Graph sildid (og:title, og:description, og:image, og:url, og:type, og:site_name) kui ka Twitter Card sildid.
Katab väljad, mida platvormid tegelikult loevad: pealkiri, kirjeldus, kanooniline URL, pilt, saidi nimi, sisutüüp ja Twitter Card'i stiil.
Töötab täielikult brauseris — sinu pealkiri, kirjeldus ja URL-id ei lahku kunagi su brauserist.
Tasuta, ei nõua sisselogimist, piiranguid pole — kopeeri tulemus ja kleebi see oma HTML-i.

Kuidas kasutada

Sisesta oma lehe pealkiri ja lühike kirjeldus (pealkiri võiks jääda alla ~60 tähemärgi, kirjeldus ~155–160 tähemärgi juurde).
Sisesta lehe kanooniline URL ja eelvaatepildi absoluutne URL (pildi URL peab olema täielikult kirjutatud, nt https://example.com/image.jpg, mitte suhteline tee).
Soovi korral määra saidi nimi, vali og:type (website, article, product, profile, video, music) ja Twitter Card'i tüüp (summary või summary_large_image).
Kontrolli otseeelvaate kaarti, et veenduda, et pealkiri, kirjeldus ja pilt sobivad omavahel hästi kokku.
Klõpsa „Kopeeri“ ja kleebi loodud <meta>-sildid oma lehe <head> sektsiooni, enne sulgevat </head> silti.

Näide

Sisend

Pealkiri: „10 tasuta arendustööriista, mida sa päriselt kasutad“
Kirjeldus: „Valik brauseripõhiseid tööriistu JSON-i, regulaaravaldiste, UUID-de ja muu jaoks — installimist pole vaja.“
URL: https://example.com/blog/dev-tools
Pilt: https://example.com/images/dev-tools-cover.jpg

Tulemus

<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" />

Tulemusse jõuavad ainult väljad, mille oled täitnud, seega kui jätad saidi nime tühjaks, jäetakse og:site_name tulemusest lihtsalt välja.

Levinud vead, mida vältida

og:image täielikult puudu — ilma selleta enamik platvorme kas ei näita eelvaatepilti üldse või kasutab lehelt juhuslikult leitud pilti, mis tavaliselt näeb välja katkine või ebaprofessionaalne.
Suhtelise pilditee kasutamine, nagu /images/cover.jpg, täieliku URL-i asemel, nagu https://example.com/images/cover.jpg — sotsiaalmeedia roomajad üldjuhul suhtelisi teid ei lahenda.
Vale pildi kuvasuhe — ruudukujuline või püstine pilt kärbitakse kohmakalt, kui platvormid suruvad selle 1,91:1 laiuskuvasse; kujunda jagamispilt alati võimalikult lähedale 1200×630-le.
Pealkirjad või kirjeldused, mis lõigatakse ära — hoia og:title alla ~60 tähemärgi ja og:description alla ~155–160 tähemärgi, et neid enamikul platvormidel kolme punktiga ära ei lõigataks.
Vahemällu salvestatud eelvaadete uuendamise unustamine — pärast og-siltide muutmist juba avaldatud lehel võib vana eelvaade Facebooki või LinkedIni vahemälus püsida, kuni sunnid nende silumistööriistadega käsitsi uue läbivaatuse.

Kus iga silti kasutatakse

og:title, og:description ja og:image on kolm silti, mida peaaegu iga platvorm loeb eelvaate koostamiseks. og:url ütleb roomajatele, millise kanoonilise lingiga eelvaade siduda, mis on oluline, kui sama sisu on kättesaadav mitme URL-i kaudu. og:site_name kuvab mõnel platvormil, näiteks Facebookis, pealkirja kohal väikese sildi (näiteks väljaande või brändi nime).

og:type muudab, millist tüüpi objekti leht esindab nende roomajate jaoks, mis toetavad Open Graphi rikkalikumat objektimudelit — näiteks article aktiveerib og:article:published_time ja og:article:author neil platvormidel, mis neid loevad, kuigi enamik sotsiaalmeedia eelvaateid ignoreerib neid lisavälju ja kasutab ainult põhilist pealkirja/kirjelduse/pildi kolmikut.

twitter:card juhib paigutust spetsiaalselt X-is: summary näitab teksti kõrval väikest ruudukujulist pisipilti, samas kui summary_large_image näitab teksti kohal täislaiuses pilti — teine variant on peaaegu alati parem valik sisu jaoks, millel on sisukas kaanepilt.

Korduma kippuvad küsimused

Millise suurusega peaks olema minu og:image?

Soovituslik suurus on 1200×630px — see on piisavalt suur kõrge pikslitihedusega ekraanidele ja vastab kuvasuhtele umbes 1,91:1, milleks Facebook, LinkedIn ja X pildi kärbivad. Hoia fail alla 5–8 MB, kasuta JPG- või PNG-formaati ning veendu, et pildi URL on täielik absoluutne aadress, mitte suhteline tee — enamik roomajaid ei suuda suhtelisi pildi teid korrektselt lahendada.

Miks minu eelvaade ei ilmu, kui lingi jagan?

Kõige levinumad põhjused on: puuduv og:image, suhteline (mitte absoluutne) pildi URL, robots.txt poolt blokeeritud roomaja või asjaolu, et platvorm näitab vana eelvaate vahemällu salvestatud versiooni. Nii Facebook kui LinkedIn talletavad läbitöödeldud eelvaateid agressiivselt — kasuta pärast siltide uuendamist uue läbivaatuse sundimiseks Facebooki Sharing Debuggerit või LinkedIni Post Inspectorit.

Mis vahe on og: siltidel ja twitter: siltidel?

og: sildid (og:title, og:description, og:image jne) kuuluvad Open Graph standardi juurde, mida loevad Facebook, LinkedIn, Slack, Discord, WhatsApp ja enamik teisi platvorme. twitter: sildid on Twitteri/X-i enda formaat. Kui twitter:title või twitter:image puuduvad, kasutab X automaatselt vastavat og: silti — kuid mõlema siltide komplekti sõnaselge määramine annab sulle rohkem kontrolli, sealhulgas võimaluse valida suure eelvaatepildi jaoks summary_large_image.

Millist og:type väärtust peaksin kasutama?

„website“ on ohutu vaikeväärtus enamiku lehtede jaoks, sealhulgas avalehed ja üldine sisu. Kasuta „article“ blogipostituste ja uudisartiklite jaoks (see avab lisasildid nagu avaldamisaeg, mis on artiklitele omased), „product“ e-poe lehtede jaoks ning „profile“ isiklike või kasutajaprofiili lehtede jaoks. Tüüp mõjutab peamiselt seda, millised lisatud Open Graph omadused on kehtivad, mitte seda, milline põhilise eelvaatekaardi väljanägemine on.

Kas see tööriist salvestab või saadab mu andmeid kuhugi?

Ei. Kogu genereerimine toimub kohapeal sinu brauseris tavalise JavaScripti abil. Miski, mida sisestad, ei liigu edasi, ei logita ega salvestata — vahekaardi sulgemine kustutab kõik.