Generator Open Graph meta tagova

Open Graph tagovi su mali delovi HTML-a koji određuju kako vaša stranica izgleda kada je neko podeli na Facebook-u, LinkedIn-u, Slack-u, Discord-u ili X-u (Twitter-u). Ispod unesite naslov, opis, URL, sliku i nekoliko opcija, pratite kako se pregled kartice za deljenje odmah ažurira i kopirajte generisane <meta> tagove direktno u <head> vaše stranice. Sve se dešava u vašem pretraživaču — ništa se ne šalje na server.

Šta je ovaj alat?

Open Graph je protokol, koji je prvobitno napravio Facebook, koji omogućava svakoj veb stranici da opiše samu sebe pomoću malog skupa tagova <meta property="og:..."> smeštenih u <head> HTML-a. Kada neko nalepi vaš link u društvenu aplikaciju, chat klijent ili alat za razmenu poruka, ta aplikacija čita te tagove kako bi napravila karticu pregleda — naslov, opis i sličicu — umesto da nagađa na osnovu sadržaja stranice.

Twitter (X) koristi srodan, ali poseban skup tagova, <meta name="twitter:...">, kako bi kontrolisao izgled pregleda linka posebno na svojoj platformi. Većina sajtova podešava oboje: Open Graph tagove radi šire kompatibilnosti i Twitter Card tagove za fino podešavanje pregleda na X-u (na primer, izbor kartice sa velikom slikom umesto male kartice sa sažetkom).

Bez ovih tagova, podeljen link ili uopšte ne prikazuje pregled, ili platforma pokušava da pogodi naslov i sliku iz sirovog sadržaja stranice — često birajući pogrešan naslov, nasumičnu ugrađenu sliku ili ništa. Izričito podešavanje og:title, og:description i og:image daje vam potpunu kontrolu nad tim kako se vaš sadržaj prikazuje pre nego što neko klikne.

Zašto ga koristiti?

Pregled uživo — vidite tačno kako će kartica za deljenje izgledati dok kucate, pre nego što išta objavite.
Generiše odjednom i Open Graph tagove (og:title, og:description, og:image, og:url, og:type, og:site_name) i Twitter Card tagove.
Pokriva polja koja platforme zaista čitaju: naslov, opis, kanonski URL, sliku, naziv sajta, vrstu sadržaja i stil Twitter kartice.
Radi u potpunosti na strani klijenta — vaš naslov, opis i URL-ovi nikada ne napuštaju vaš pretraživač.
Besplatno, bez prijave, bez ograničenja — kopirajte rezultat i nalepite ga u svoj HTML.

Kako se koristi

Unesite naslov svoje stranice i kratak opis (ciljajte na manje od ~60 karaktera za naslov, ~155–160 za opis).
Unesite kanonski URL stranice i apsolutni URL slike za pregled (URL-ovi slika moraju biti potpuno kvalifikovani, npr. https://example.com/image.jpg, a ne relativna putanja).
Opciono podesite naziv sajta, izaberite og:type (website, article, product, profile, video, music) i izaberite vrstu Twitter kartice (summary ili summary_large_image).
Proverite karticu pregleda uživo kako biste potvrdili da naslov, opis i slika dobro izgledaju zajedno.
Kliknite na „Kopiraj” i nalepite generisane <meta> tagove u <head> vaše stranice, pre zatvarajuće oznake </head>.

Primer

Unos

Naslov: „10 besplatnih alata za programere koje ćete zaista koristiti”
Opis: „Odabrana lista alata koji rade u pretraživaču za JSON, regularne izraze, UUID-ove i još mnogo toga — bez instalacije.”
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" />

U rezultat su uključena samo polja koja ste popunili, tako da izostavljanje naziva sajta jednostavno izostavlja og:site_name iz rezultata.

Uobičajene greške koje treba izbegavati

Potpuni izostanak og:image — bez njega većina platformi ili ne prikazuje sliku pregleda ili se oslanja na nasumičnu sliku preuzetu sa stranice, što obično izgleda loše i neprofesionalno.
Korišćenje relativne putanje slike poput /images/cover.jpg umesto potpunog URL-a poput https://example.com/images/cover.jpg — alati za indeksiranje na društvenim mrežama uglavnom ne mogu da razreše relativne putanje.
Pogrešan odnos slike — kvadratna ili portretna slika se neugodno obrezuje kada je platforme prisilno smeste u vodoravni okvir 1,91:1; sliku za deljenje uvek dizajnirajte blizu 1200×630.
Naslovi ili opisi koji se skraćuju — držite og:title ispod ~60 karaktera, a og:description ispod ~155–160 karaktera kako se ne bi skratili trima tačkicama na većini platformi.
Zaboravljanje ažuriranja keširanih pregleda — nakon promene og tagova na objavljenoj stranici, stari pregled može ostati u Facebook-ovoj ili LinkedIn-ovoj keš memoriji dok ručno ne prisilite ponovno skeniranje njihovim alatima za otklanjanje grešaka.

Gde se svaki tag koristi

og:title, og:description i og:image su tri taga koje gotovo svaka platforma čita za izgradnju pregleda. og:url govori alatima za indeksiranje sa kojim kanonskim linkom da povežu pregled, što je važno ako je isti sadržaj dostupan preko više URL-ova. og:site_name prikazuje malu oznaku (poput naziva izdanja ili brenda) iznad naslova na nekim platformama, poput Facebook-a.

og:type menja kakvu vrstu objekta stranica predstavlja alatima za indeksiranje koji podržavaju bogatiji objektni model Open Graph-a — na primer, article otključava og:article:published_time i og:article:author na platformama koje ih čitaju, iako većina društvenih pregleda zanemaruje ta dodatna polja i koristi samo osnovni trojac naslov/opis/slika.

twitter:card kontroliše izgled posebno na X-u: summary prikazuje malu kvadratnu sličicu pored teksta, dok summary_large_image prikazuje sliku pune širine iznad teksta — potonje je gotovo uvek bolji izbor za sadržaj sa smislenom naslovnom slikom.

Često postavljana pitanja

Koje veličine treba da bude moj og:image?

1200×630px je preporučena veličina — dovoljno je velika za ekrane visoke gustine piksela i odgovara odnosu širine i visine od otprilike 1,91:1 na koji Facebook, LinkedIn i X obrezuju sliku. Držite fajl ispod 5–8MB, koristite JPG ili PNG i pobrinite se da URL slike bude potpuna apsolutna adresa, a ne relativna putanja — većina alata za indeksiranje neće ispravno razrešiti relativne putanje slika.

Zašto se moj pregled ne prikazuje kad podelim link?

Najčešći uzroci su: nedostajući og:image, relativan umesto apsolutan URL slike, alat za indeksiranje blokiran datotekom robots.txt, ili platforma prikazuje keširanu verziju starog pregleda. Facebook i LinkedIn oba agresivno keširaju skenirane preglede — koristite Facebook-ov Sharing Debugger ili LinkedIn-ov Post Inspector kako biste prisilili ponovno skeniranje nakon što ažurirate svoje tagove.

Koja je razlika između og: tagova i twitter: tagova?

og: tagovi (og:title, og:description, og:image itd.) deo su Open Graph standarda koji čitaju Facebook, LinkedIn, Slack, Discord, WhatsApp i većina drugih platformi. twitter: tagovi su sopstveni format Twitter-a/X-a. Ako twitter:title ili twitter:image nedostaju, X se automatski vraća na odgovarajući og: tag — ali izričito podešavanje oboje daje vam veću kontrolu, uključujući mogućnost izbora summary_large_image za veliku sliku pregleda.

Koji og:type treba da koristim?

„website” je bezbedna podrazumevana vrednost za većinu stranica, uključujući početne stranice i opšti sadržaj. Koristite „article” za blog objave i vesti (otključava dodatne tagove specifične za članke, poput vremena objave), „product” za e-trgovinske stranice, a „profile” za lične stranice ili profile korisnika. Vrsta uglavnom utiče na to koja su dodatna Open Graph svojstva validna, a ne na to kako izgleda osnovna kartica pregleda.

Da li ovaj alat čuva ili šalje moje podatke negde?

Ne. Celo generisanje se odvija lokalno u vašem pretraživaču pomoću običnog JavaScript-a. Ništa što unesete se ne prenosi, ne beleži niti čuva — zatvaranje kartice sve briše.