Generator meta oznak Open Graph

Oznake Open Graph so majhni delčki kode HTML, ki določajo, kako je videti vaša stran, ko jo nekdo deli na Facebooku, LinkedInu, Slacku, Discordu ali X-u (Twitterju). Spodaj izpolnite naslov, opis, URL, sliko in nekaj možnosti ter opazujte, kako se predogled kartice za deljenje takoj posodobi, nato pa kopirajte ustvarjene oznake <meta> neposredno v <head> vaše strani. Vse poteka v vašem brskalniku — na strežnik se ne pošlje nič.

Kaj je to orodje?

Open Graph je protokol, ki ga je prvotno ustvaril Facebook in ki vsaki spletni strani omogoča, da se opiše z majhnim naborom oznak <meta property="og:..."> v <head> dela HTML-ja. Ko nekdo prilepi vašo povezavo v družbeno aplikacijo, klepetalnik ali orodje za sporočanje, ta aplikacija prebere te oznake, da sestavi kartico predogleda — naslov, opis in sličico — namesto da bi ugibala na podlagi vsebine strani.

Twitter (X) uporablja sorodno, a ločeno skupino oznak, <meta name="twitter:...">, s katero posebej nadzoruje, kako je videti predogled povezave na njegovi platformi. Večina strani nastavi oboje: oznake Open Graph za širšo združljivost in oznake Twitter Card za natančnejšo prilagoditev predogleda na X-u (na primer izbiro kartice z veliko sliko namesto majhne povzetkovne kartice).

Brez teh oznak deljena povezava bodisi sploh ne prikaže predogleda bodisi platforma poskuša uganiti naslov in sliko iz surove vsebine strani — pri čemer pogosto izbere napačen naslov, naključno sliko iz besedila ali nič. Z izrecno nastavitvijo og:title, og:description in og:image imate popoln nadzor nad tem, kako je vaša vsebina predstavljena, preden kdorkoli klikne nanjo.

Zakaj ga uporabiti?

Živi predogled — natančno vidite, kako bo videti kartica za deljenje, medtem ko tipkate, še preden kaj objavite.
Hkrati ustvari tako oznake Open Graph (og:title, og:description, og:image, og:url, og:type, og:site_name) kot oznake Twitter Card.
Zajema polja, ki jih platforme dejansko berejo: naslov, opis, kanonični URL, sliko, ime strani, vrsto vsebine in slog kartice Twitter.
Deluje popolnoma na strani odjemalca — vaš naslov, opis in URL-ji nikoli ne zapustijo vašega brskalnika.
Brezplačno, brez prijave, brez omejitev — kopirajte rezultat in ga prilepite v svojo kodo HTML.

Kako ga uporabljati

Vnesite naslov svoje strani in kratek opis (ciljajte na manj kot ~60 znakov za naslov, ~155–160 za opis).
Vnesite kanonični URL strani in absolutni URL slike za predogled (URL-ji slik morajo biti povsem popolni, npr. https://example.com/image.jpg, ne relativna pot).
Po želji nastavite ime strani, izberite og:type (website, article, product, profile, video, music) in izberite vrsto Twitter Card (summary ali summary_large_image).
Preverite kartico živega predogleda, da se prepričate, da naslov, opis in slika skupaj dobro delujejo.
Kliknite »Kopiraj« in prilepite ustvarjene oznake <meta> v <head> vaše strani, pred zaključno oznako </head>.

Primer

Vnos

Naslov: »10 brezplačnih razvijalskih orodij, ki jih boste res uporabljali«
Opis: »Skrbno izbran seznam orodij, ki delujejo v brskalniku, za JSON, regularne izraze, UUID-je in več — brez nameščanja.«
URL: https://example.com/blog/dev-tools
Slika: https://example.com/images/dev-tools-cover.jpg

Rezultat

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

V rezultat so vključena samo polja, ki jih izpolnite, zato bo puščanje imena strani prazno preprosto izpustilo og:site_name iz rezultata.

Pogoste napake, ki se jim je treba izogniti

Popolnoma manjkajoč og:image — brez njega večina platform bodisi ne prikaže nobene predogledne slike bodisi se zateče k naključni sliki, pridobljeni s strani, kar običajno izgleda pokvarjeno in neprofesionalno.
Uporaba relativne poti do slike, kot je /images/cover.jpg, namesto popolnega URL-ja, kot je https://example.com/images/cover.jpg — družbeni pajki na splošno ne morejo razrešiti relativnih poti.
Napačno razmerje stranic slike — kvadratna ali pokončna slika se nerodno obreže, ko jo platforme prisilno vstavijo v ležeči okvir 1,91:1; sliko za deljenje vedno zasnujte blizu 1200×630.
Naslovi ali opisi, ki se prirežejo — og:title naj bo pod ~60 znaki, og:description pa pod ~155–160 znaki, da se na večini platform ne prirežejo s tremi pikami.
Pozaba na posodobitev predpomnjenih predogledov — po spremembi oznak og na živi strani lahko stari predogled ostane v Facebookovem ali LinkedInovem predpomnilniku, dokler ročno ne vsilite ponovnega pregledovanja z njihovimi orodji za razhroščevanje.

Kje se uporablja posamezna oznaka

og:title, og:description in og:image so tri oznake, ki jih skoraj vsaka platforma prebere za izdelavo predogleda. og:url pajkom pove, s katero kanonično povezavo naj povežejo predogled, kar je pomembno, če je ista vsebina dostopna prek več URL-jev. og:site_name na nekaterih platformah, kot je Facebook, nad naslovom prikaže majhno oznako (na primer ime publikacije ali blagovne znamke).

og:type spremeni, kakšno vrsto objekta stran predstavlja pajkom, ki podpirajo bogatejši objektni model Open Graph — na primer article odklene og:article:published_time in og:article:author na platformah, ki jih berejo, čeprav večina družbenih predogledov ta dodatna polja ignorira in uporablja samo osnovno trojico naslov/opis/slika.

twitter:card nadzoruje postavitev posebej na X-u: summary prikaže majhno kvadratno sličico ob besedilu, medtem ko summary_large_image prikaže sliko čez celotno širino nad besedilom — slednja je skoraj vedno boljša izbira za vsebino s pomembno naslovno sliko.

Pogosta vprašanja

Kolikšna naj bo velikost mojega og:image?

1200×630px je priporočena velikost — dovolj velika za zaslone z visoko gostoto slikovnih pik in ustreza razmerju stranic približno 1,91:1, na katerega Facebook, LinkedIn in X obrežejo sliko. Datoteko ohranite pod 5–8 MB, uporabite JPG ali PNG in poskrbite, da je URL slike popolna absolutna povezava in ne relativna pot — večina pajkov ne bo pravilno razrešila relativnih poti do slik.

Zakaj se moj predogled ne prikaže, ko delim povezavo?

Najpogostejši vzroki so: manjkajoč og:image, relativen namesto absolutnega URL-ja slike, pajek blokiran z datoteko robots.txt ali platforma prikazuje predpomnjeno različico starega predogleda. Facebook in LinkedIn oba agresivno predpomnita pregledane predoglede — po posodobitvi oznak uporabite Facebookov Sharing Debugger ali LinkedInov Post Inspector, da vsilite ponovno pregledovanje.

Kakšna je razlika med oznakami og: in twitter:?

Oznake og: (og:title, og:description, og:image itd.) so del standarda Open Graph, ki ga berejo Facebook, LinkedIn, Slack, Discord, WhatsApp in večina drugih platform. Oznake twitter: so lasten format Twitterja/X-a. Če twitter:title ali twitter:image manjkata, se X samodejno vrne na ustrezno oznako og: — vendar vam izrecna nastavitev obeh omogoča večji nadzor, vključno z možnostjo izbire summary_large_image za veliko sliko predogleda.

Katero vrsto og:type naj uporabim?

»website« je varna privzeta izbira za večino strani, vključno z domačimi stranmi in splošno vsebino. Uporabite »article« za objave v spletnem dnevniku in novičarske članke (odklene dodatne oznake, specifične za članke, kot je čas objave), »product« za strani e-trgovine in »profile« za osebne strani ali strani s profili uporabnikov. Vrsta v glavnem vpliva na to, katere dodatne lastnosti Open Graph so veljavne, ne pa na to, kako je videti osnovna kartica predogleda.

Ali to orodje shranjuje ali kam pošilja moje podatke?

Ne. Celotno ustvarjanje poteka lokalno v vašem brskalniku z navadnim JavaScriptom. Nič od tega, kar vtipkate, se ne prenaša, beleži ali shranjuje — zaprtje zavihka vse izbriše.