Generator Open Graph meta oznaka

Open Graph oznake mali su dijelovi HTML-a koji određuju kako vaša stranica izgleda kada je netko podijeli na Facebooku, LinkedInu, Slacku, Discordu ili X-u (Twitteru). Ispod unesite naslov, opis, URL, sliku i nekoliko opcija, pratite kako se pregled kartice za dijeljenje odmah ažurira te kopirajte generirane <meta> oznake izravno u <head> svoje stranice. Sve se odvija u vašem pregledniku — ništa se ne šalje na poslužitelj.

Što je ovaj alat?

Open Graph je protokol, izvorno kreiran od strane Facebooka, koji omogućuje svakoj web stranici da se opiše pomoću malog skupa oznaka <meta property="og:..."> smještenih u <head> HTML-a. Kada netko zalijepi vašu poveznicu u društvenu aplikaciju, chat klijent ili alat za razmjenu poruka, ta aplikacija čita te oznake kako bi izgradila karticu pregleda — naslov, opis i sličicu — umjesto da nagađa na temelju sadržaja stranice.

Twitter (X) koristi srodan, ali zaseban skup oznaka, <meta name="twitter:...">, kako bi kontrolirao izgled pregleda poveznice specifično na svojoj platformi. Većina stranica postavlja oboje: Open Graph oznake radi šire kompatibilnosti i Twitter Card oznake za fino podešavanje pregleda na X-u (na primjer, odabir kartice s velikom slikom umjesto male kartice sažetka).

Bez ovih oznaka, podijeljena poveznica ili uopće ne prikazuje pregled, ili platforma pokušava pogoditi naslov i sliku iz sirovog sadržaja stranice — često birajući pogrešan naslov, nasumičnu ugrađenu sliku ili ništa. Izričito postavljanje og:title, og:description i og:image daje vam potpunu kontrolu nad tim kako se vaš sadržaj prikazuje prije nego netko klikne.

Zašto ga koristiti?

Pregled uživo — vidite točno kako će kartica za dijeljenje izgledati dok tipkate, prije nego što išta objavite.
Generira odjednom i Open Graph oznake (og:title, og:description, og:image, og:url, og:type, og:site_name) i Twitter Card oznake.
Pokriva polja koja platforme stvarno čitaju: naslov, opis, kanonski URL, sliku, naziv stranice, vrstu sadržaja i stil Twitter kartice.
Radi u potpunosti na strani klijenta — vaš naslov, opis i URL-ovi nikad ne napuštaju vaš preglednik.
Besplatno, bez prijave, bez ograničenja — kopirajte rezultat i zalijepite ga u svoj HTML.

Kako ga koristiti

Unesite naslov svoje stranice i kratak opis (ciljajte na manje od ~60 znakova za naslov, ~155–160 za opis).
Unesite kanonski URL stranice i apsolutni URL slike za pregled (URL-ovi slika moraju biti potpuno kvalificirani, npr. https://example.com/image.jpg, a ne relativna putanja).
Opcionalno postavite naziv stranice, odaberite og:type (website, article, product, profile, video, music) i odaberite vrstu Twitter kartice (summary ili summary_large_image).
Provjerite karticu pregleda uživo kako biste potvrdili da naslov, opis i slika dobro izgledaju zajedno.
Kliknite "Kopiraj" i zalijepite generirane <meta> oznake u <head> svoje stranice, prije zatvarajuće oznake </head>.

Primjer

Ulaz

Naslov: "10 besplatnih alata za programere koje ćete zaista koristiti"
Opis: "Odabrani popis alata koji rade u pregledniku 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

Izlaz

<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 stranice jednostavno izostavlja og:site_name iz rezultata.

Uobičajene pogreške koje treba izbjegavati

Potpuni izostanak og:image — bez njega većina platformi ili ne prikazuje sliku pregleda ili se oslanja na nasumičnu sliku dohvaćenu sa stranice, što obično izgleda loše i neprofesionalno.
Korištenje relativne putanje slike poput /images/cover.jpg umjesto potpunog URL-a poput https://example.com/images/cover.jpg — alati za indeksiranje na društvenim mrežama općenito ne mogu razriješiti relativne putanje.
Pogrešan omjer slike — kvadratna ili portretna slika neugodno se obrezuje kada je platforme prisilno smjeste u vodoravni okvir 1,91:1; sliku za dijeljenje uvijek dizajnirajte blizu 1200×630.
Naslovi ili opisi koji se skraćuju — držite og:title ispod ~60 znakova, a og:description ispod ~155–160 znakova kako se ne bi skratili trima točkicama na većini platformi.
Zaboravljanje ažuriranja predmemoriranih pregleda — nakon promjene og oznaka na objavljenoj stranici, stari pregled može ostati u Facebookovoj ili LinkedInovoj predmemoriji dok ručno ne prisilite ponovno skeniranje njihovim alatima za otklanjanje pogrešaka.

Gdje se svaka oznaka koristi

og:title, og:description i og:image tri su oznake koje gotovo svaka platforma čita za izgradnju pregleda. og:url govori alatima za indeksiranje s kojom kanonskom poveznicom povezati 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 marke) iznad naslova na nekim platformama, poput Facebooka.

og:type mijenja kakvu vrstu objekta stranica predstavlja alatima za indeksiranje koji podržavaju bogatiji objektni model Open Grapha — na primjer, 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 kontrolira izgled specifično na X-u: summary prikazuje malu kvadratnu sličicu pored teksta, dok summary_large_image prikazuje sliku pune širine iznad teksta — potonje je gotovo uvijek bolji izbor za sadržaj sa smislenom naslovnom slikom.

Često postavljana pitanja

Koje veličine treba biti moj og:image?

1200×630px je preporučena veličina — dovoljno je velika za zaslone visoke gustoće piksela i odgovara omjeru širine i visine od otprilike 1,91:1 na koji Facebook, LinkedIn i X obrezuju sliku. Držite datoteku 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 razriješiti relativne putanje slika.

Zašto se moj pregled ne prikazuje kad podijelim poveznicu?

Najčešći uzroci su: nedostajući og:image, relativan umjesto apsolutan URL slike, alat za indeksiranje blokiran datotekom robots.txt, ili platforma prikazuje predmemoriranu verziju starog pregleda. Facebook i LinkedIn oboje agresivno predmemoriraju skenirane preglede — koristite Facebookov Sharing Debugger ili LinkedInov Post Inspector kako biste prisilili ponovno skeniranje nakon što ažurirate svoje oznake.

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

og: oznake (og:title, og:description, og:image itd.) dio su Open Graph standarda kojeg čitaju Facebook, LinkedIn, Slack, Discord, WhatsApp i većina drugih platformi. twitter: oznake vlastiti su format Twittera/X-a. Ako twitter:title ili twitter:image nedostaju, X se automatski vraća na odgovarajuću og: oznaku — no izričito postavljanje oboje daje vam veću kontrolu, uključujući mogućnost odabira summary_large_image za veliku sliku pregleda.

Koji og:type trebam koristiti?

"website" je sigurna zadana vrijednost za većinu stranica, uključujući početne stranice i opći sadržaj. Koristite "article" za blog objave i vijesti (otključava dodatne oznake specifične za članke, poput vremena objave), "product" za e-trgovinske stranice, a "profile" za osobne stranice ili profile korisnika. Vrsta uglavnom utječe na to koja su dodatna Open Graph svojstva valjana, a ne na to kako izgleda osnovna kartica pregleda.

Pohranjuje li ili šalje li ovaj alat moje podatke negdje?

Ne. Cijelo generiranje odvija se lokalno u vašem pregledniku pomoću običnog JavaScripta. Ništa što upišete se ne prenosi, ne zapisuje niti pohranjuje — zatvaranje kartice sve briše.