Open Graph je protokol koji je Facebook kreirao 2010. godine. Omogucava vam da kontrolisete kako vas link izgleda kad ga neko podeli na drustvenim mrezama — naslov, opis, slika i URL. Bez OG tagova, platforma bira nasumican tekst i sliku sa stranice.

Koja je optimalna velicina slike za Open Graph?

Preporucena dimenzija je 1200x630 piksela (odnos 1.91:1). Ovo radi optimalno na svim platformama — Facebook, LinkedIn, Twitter, WhatsApp, Telegram, Slack. Minimalna velicina je 600x315px. Format: JPG ili PNG, do 8MB.

Da li Open Graph tagovi uticu na SEO?

Ne direktno na Google rangiranje. Ali indirektno DA — postovi sa kvalitetnom slikom i naslovom dobijaju 2.3x vise engagement-a, vise deljenja, vise klikova ka sajtu, i potencijalno vise backlink-ova. Google takodje koristi OG tagove kao fallback za svoje rich snippets.

Koja je razlika izmedju Open Graph i Twitter Cards?

Open Graph je Facebook-ov protokol koji koriste i LinkedIn, WhatsApp, Telegram, Slack. Twitter Cards je Twitter-ov sopstveni format. Twitter TAKODJE cita OG tagove kao fallback — ako nemate twitter: tagove, koristice og: tagove. Preporuka: stavite oba za maksimalnu kontrolu.

Open Graph i Twitter Cards — Optimizacija deljenja

Kako kontrolisati izgled vaseg linka na Facebook-u, Twitter-u, LinkedIn-u i svim platformama

2.3x

Vise engagement-a sa slikom (BuzzSumo)

1200x630

Optimalna OG slika (px)

2010

Facebook kreirao Open Graph

87%

Top sajtova koristi OG tagove

1. Sta je Open Graph protokol

Open Graph (OG) je protokol koji je Facebook kreirao 2010. godine da omoguci web stranicama da kontrolisu kako se njihov sadrzaj prikazuje kad ga neko podeli na drustvenim mrezama.

Bez OG tagova, kad neko podeli vas link na Facebook-u, platforma sama bira nasumican naslov, opis i sliku sa stranice — sto je cesto pogresno, ruzno ili nepotpuno. Sa OG tagovima, vi tacno odredjujete sta se prikazuje.

Danas OG tagove koriste: Facebook, LinkedIn, WhatsApp, Telegram, Slack, Discord, Pinterest, iMessage i mnoge druge platforme. Twitter ima sopstveni format (Twitter Cards) ali takodje cita OG tagove kao fallback.

Cinjenica: Prema BuzzSumo studiji, postovi sa kvalitetnom slikom dobijaju 2.3x vise engagement-a od onih bez slike. OG tagovi su najlaksi nacin da kontrolisete tu sliku.

2. Obavezni OG tagovi

Cetiri taga koja SVAKA stranica mora imati:

<!-- OBAVEZNI Open Graph tagovi -->
<meta property="og:title" content="Naslov za drustvene mreze">
<meta property="og:description" content="Opis do 200 karaktera koji privlaci klikove">
<meta property="og:image" content="https://vasajt.rs/slika-1200x630.jpg">
<meta property="og:url" content="https://vasajt.rs/stranica">
<meta property="og:type" content="article">

Tag	Opis	Saveti
`og:title`	Naslov u prikazu deljenja	Do 60 karaktera. Moze se razlikovati od HTML title taga — prilagodite za social.
`og:description`	Opis ispod naslova	Do 200 karaktera. Privlacniji od meta description — dodajte emociju, CTA.
`og:image`	Slika u prikazu	1200x630px, apsolutni URL sa https://. JPG ili PNG, do 8MB.
`og:url`	Kanonski URL stranice	Apsolutni URL. Treba da se poklopi sa canonical tagom.
`og:type`	Tip sadrzaja	website (za pocetnu), article (za clanke), product (za proizvode).

3. Opcioni OG tagovi

<!-- Opcioni ali preporuceni -->
<meta property="og:site_name" content="Web Security Scanner">
<meta property="og:locale" content="sr_RS">
<meta property="og:locale:alternate" content="en_US">

<!-- Za video sadrzaj -->
<meta property="og:video" content="https://vasajt.rs/video.mp4">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="1280">
<meta property="og:video:height" content="720">

<!-- Za Article tip -->
<meta property="article:published_time" content="2026-04-09T10:00:00Z">
<meta property="article:modified_time" content="2026-04-09T15:30:00Z">
<meta property="article:author" content="https://vasajt.rs/autor">
<meta property="article:section" content="SEO">
<meta property="article:tag" content="Open Graph">

<!-- Dimenzije slike (pomaze platformama pre ucitavanja) -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Opis slike za pristupacnost">

4. Optimalne dimenzije slika

Razlicite platforme prikazuju slike u razlicitim formatima. Univerzalna dimenzija koja radi svuda:

Platforma	Preporucena velicina	Min. velicina	Odnos
Facebook	1200 x 630 px	600 x 315 px	1.91:1
Twitter (large)	1200 x 628 px	300 x 157 px	2:1
LinkedIn	1200 x 627 px	200 x 200 px	1.91:1
WhatsApp	1200 x 630 px	300 x 200 px	1.91:1
Telegram	1200 x 630 px	-	1.91:1
Discord	1200 x 630 px	-	1.91:1
Pinterest	1000 x 1500 px	600 x 900 px	2:3 (vertikalna!)

Univerzalna preporuka: 1200 x 630 px — radi na svim platformama osim Pinterest-a. Format JPG ili PNG. Velicina do 8MB (idealno ispod 300KB za brze ucitavanje). Tekst na slici: drzite u centralnih 60% jer platforme secaju ivice razlicito.

Saveti za OG slike

Jedna slika po stranici — ne koristite istu OG sliku za ceo sajt
Tekst na slici — naslov ili kljucna poruka, ali NE previse (Facebook ogranicava tekst na slikama za reklame)
Brend — logo u uglu za prepoznatljivost
Kontrast — tamna pozadina + svetao tekst (ili obrnuto) za citljivost na svim platformama
Ne koristite transparentne PNG — neke platforme dodaju belu pozadinu, sto izgleda ruzno

5. Twitter Cards

Twitter ima sopstveni format za bogate prikaze linkova. Ako nemate twitter: tagove, Twitter koristi og: tagove kao fallback. Preporuka: stavite oba za maksimalnu kontrolu.

Tipovi Twitter Cards

Tip	Opis	Kada koristiti
`summary`	Mala slika levo + naslov/opis desno	Blog clanci, stranice bez velike slike
`summary_large_image`	Velika slika gore + naslov/opis dole	Clanci sa cover slikom, landing stranice
`player`	Video/audio plejer u tvitu	Video sadrzaj, podcast epizode
`app`	Prikaz mobilne aplikacije	App Store/Google Play linkovi

Twitter Card tagovi

<!-- Osnovni Twitter Card tagovi -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Naslov za Twitter">
<meta name="twitter:description" content="Opis za Twitter do 200 karaktera">
<meta name="twitter:image" content="https://vasajt.rs/slika-1200x628.jpg">

<!-- Opciono: Twitter nalog sajta i autora -->
<meta name="twitter:site" content="@vasbrand">
<meta name="twitter:creator" content="@autor">

<!-- Opciono: alt tekst za sliku (pristupacnost) -->
<meta name="twitter:image:alt" content="Opis slike za screen readere">

Napomena: Twitter je preimenovan u X (2023), ali tagovi i dalje koriste twitter: prefix i Twitter Card Validator i dalje radi na cards-dev.twitter.com (sada x.com).

6. LinkedIn i ostale platforme

LinkedIn koristi Open Graph tagove za prikaz deljenih linkova. Specifcnosti:

Slika: 1200x627px za optimalan prikaz
Naslov: do 150 karaktera (duzi se sece)
Opis: do 160 karaktera u prikazu
LinkedIn kesira slike agresivno — koristite Post Inspector za refresh

WhatsApp / Telegram / Slack

Sve tri platforme citaju OG tagove. WhatsApp prikazuje malu sliku sa naslovom i opisom. Telegram prikazuje instant preview sa velikom slikom. Slack prikazuje unfurl sa kompletnim OG podacima.

Discord

Discord cita OG tagove i prikazuje embed sa slikom, naslovom, opisom i bojom (koristite <meta name="theme-color" content="#6c63ff"> za boju embed-a).

7. Kompletna implementacija

Evo kompletnog seta meta tagova za blog clanak koji pokriva SVE platforme:

<head>
  <!-- Osnovni HTML meta -->
  <title>Open Graph vodic — Optimizacija deljenja | Vas Brend</title>
  <meta name="description" content="Kako kontrolisati izgled linka na drustvenim mrezama...">

  <!-- Open Graph (Facebook, LinkedIn, WhatsApp, Telegram, Slack) -->
  <meta property="og:type" content="article">
  <meta property="og:title" content="Open Graph vodic — Kontrolisite kako izgleda vas link">
  <meta property="og:description" content="Naucite OG tagove, dimenzije slika i alate za testiranje.">
  <meta property="og:image" content="https://vasajt.rs/og-image-opengraph.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Open Graph vodic cover slika">
  <meta property="og:url" content="https://vasajt.rs/blog/opengraph">
  <meta property="og:site_name" content="Vas Brend">
  <meta property="og:locale" content="sr_RS">
  <meta property="article:published_time" content="2026-04-09T10:00:00Z">
  <meta property="article:author" content="https://vasajt.rs/autor">

  <!-- Twitter Cards -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Open Graph vodic — Kontrolisite kako izgleda vas link">
  <meta name="twitter:description" content="OG tagovi, dimenzije slika i alati za testiranje.">
  <meta name="twitter:image" content="https://vasajt.rs/og-image-opengraph.jpg">
  <meta name="twitter:site" content="@vasbrand">

  <!-- Discord boja -->
  <meta name="theme-color" content="#6c63ff">
</head>

8. Dobri vs losi primeri

Aspekt	Los primer ✘	Dobar primer ✔
og:title	"Pocetna stranica"	"SEO vodic 2026 — 12 provera za vas sajt"
og:description	"Dobrodosli na nas sajt"	"Besplatni SEO audit sa 12 automatskih provera. Rezultat za 30 sekundi."
og:image	Logo 100x100px	Custom cover slika 1200x630px sa naslovom
og:image	Ista slika za ceo sajt	Jedinstvena slika za svaku stranicu
og:url	Relativna putanja "/blog"	Apsolutni URL "https://vasajt.rs/blog"
og:type	Nedostaje	"article" za clanke, "website" za pocetnu

9. Alati za testiranje

Facebook Sharing Debugger — prikazuje kako ce vas link izgledati na Facebook-u. Takodje cisti Facebook-ov kes — koristite posle azuriranja OG tagova.
Twitter Card Validator — pregled Twitter Card prikaza. Proverite da li je card tip ispravan.
LinkedIn Post Inspector — testiranje i refresh LinkedIn prikaza. LinkedIn agresivno kesira — koristite ovo za azuriranje.
Web Security Scanner — proverava prisustvo OG i Twitter Card tagova na vasem sajtu.
metatags.io — real-time preview za Facebook, Twitter, LinkedIn, Google, Slack odjednom.
OpenGraph.xyz — brzi preview sa opcijom za generisanje tagova.

Kes problem: Sve platforme kesiraju OG podatke. Posle azuriranja tagova, morate rucno ocistiti kes za svaku platformu: Facebook Debugger → "Scrape Again", LinkedIn Post Inspector → "Inspect", Twitter → validatorom. Kes moze trajati satima do dana.

10. Najcesce greske

Nedostaje og:image — #1 greska. Bez slike, deljeni link je mali i neprimetan. Engagement pada 2.3x.
Premala slika — ispod 600x315px na Facebook-u se prikazuje kao mala sličica umesto velikog prikaza.
Relativni URL za sliku — /slika.jpg umesto https://vasajt.rs/slika.jpg. Platforme ne mogu resolovati relativne putanje.
Ista OG slika za ceo sajt — svaka stranica treba jedinstvenu sliku za prepoznatljivost.
Tekst na ivicama slike — platforme secaju ivice razlicito. Drzite bitan tekst u centralnih 60%.
Nedostaje og:url — bez njega platforme koriste URL iz address bara koji moze imati tracking parametre.
Ne testiraju pre objave — uvek proverite u Sharing Debugger pre nego sto podelite link.
Zaborave ocistiti kes — stare slike i naslovi ostaju danima posle azuriranja ako ne ocistite kes.

11. Reference i resursi

Proverite OG tagove vaseg sajta →

Open Graph & Twitter Cards — Sharing Optimization

How to control how your link looks on Facebook, Twitter, LinkedIn and all platforms

2.3x

More engagement with images (BuzzSumo)

1200x630

Optimal OG image (px)

2010

Facebook created Open Graph

87%

Top sites use OG tags

What is Open Graph
Required OG tags
Optional OG tags
Optimal image dimensions
Twitter Cards
LinkedIn and other platforms
Complete implementation
Good vs bad examples
Testing tools
Common mistakes
References

1. What is Open Graph protocol

Open Graph (OG) is a protocol created by Facebook in 2010 to let web pages control how their content appears when shared on social media. Without OG tags, platforms pick random text and images from your page.

Today OG tags are used by: Facebook, LinkedIn, WhatsApp, Telegram, Slack, Discord, Pinterest, iMessage and many more.

Fact: Posts with quality images get 2.3x more engagement than those without (BuzzSumo). OG tags are the easiest way to control that image.

2. Required OG tags

<meta property="og:title" content="Your social media title">
<meta property="og:description" content="Description up to 200 chars">
<meta property="og:image" content="https://yoursite.com/image-1200x630.jpg">
<meta property="og:url" content="https://yoursite.com/page">
<meta property="og:type" content="article">

Tag	Description	Tips
`og:title`	Share preview title	Up to 60 chars. Can differ from HTML title.
`og:description`	Description below title	Up to 200 chars. More engaging than meta desc.
`og:image`	Preview image	1200x630px, absolute URL, JPG/PNG, max 8MB.
`og:url`	Canonical page URL	Should match canonical tag.
`og:type`	Content type	website, article, or product.

3. Optional OG tags

Recommended: og:site_name, og:locale, og:image:width/height/alt, article:published_time, article:author. For video: og:video with type, width, height.

4. Optimal image dimensions

Platform	Recommended	Min size	Ratio
Facebook	1200 x 630	600 x 315	1.91:1
Twitter (large)	1200 x 628	300 x 157	2:1
LinkedIn	1200 x 627	200 x 200	1.91:1
WhatsApp/Telegram	1200 x 630	300 x 200	1.91:1
Pinterest	1000 x 1500	600 x 900	2:3 (vertical!)

Universal recommendation: 1200 x 630 px — works on all platforms except Pinterest. Keep important text in the center 60% as platforms crop edges differently.

5. Twitter Cards

Twitter has its own format but falls back to OG tags if twitter: tags are missing. Recommendation: include both.

Card type	Description	Use for
`summary`	Small image left + title/desc right	Articles without large cover
`summary_large_image`	Large image top + title/desc bottom	Articles with cover, landing pages
`player`	Video/audio player in tweet	Video content, podcasts

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Twitter title">
<meta name="twitter:description" content="Twitter description">
<meta name="twitter:image" content="https://yoursite.com/image.jpg">
<meta name="twitter:site" content="@yourbrand">

6. LinkedIn and other platforms

LinkedIn: Uses OG tags. Caches aggressively — use Post Inspector to refresh. WhatsApp/Telegram/Slack: All read OG tags. Discord: Reads OG tags + theme-color meta for embed color.

7. Complete implementation

Full set covering ALL platforms: HTML title + description, OG tags (5 required + locale + image dimensions + article times), Twitter Cards (5 tags), Discord theme-color.

8. Good vs bad examples

Aspect	Bad ✘	Good ✔
og:title	"Home page"	"SEO Guide 2026 — 12 Free Checks"
og:image	100x100 logo	Custom 1200x630 cover with title
og:url	Relative "/blog"	Absolute "https://yoursite.com/blog"

9. Testing tools

Facebook Sharing Debugger — preview + cache clearing
Twitter Card Validator — card preview
LinkedIn Post Inspector — preview + cache refresh
Web Security Scanner — checks OG and Twitter Card tags
metatags.io — real-time preview for all platforms at once

Cache issue: All platforms cache OG data. After updating tags, manually clear cache: Facebook Debugger → "Scrape Again", LinkedIn Post Inspector → "Inspect".

10. Common mistakes

Missing og:image — #1 mistake. Without image, shared link is tiny and unnoticeable.
Image too small — below 600x315 on Facebook shows as thumbnail
Relative image URL — platforms can't resolve relative paths
Same OG image for entire site — each page needs a unique image
Text on image edges — platforms crop differently, keep text in center 60%
Not testing before publishing — always check in Sharing Debugger first
Forgetting to clear cache — old data persists for hours/days

11. References and resources

Check your OG tags →

SEO vodicSEO Guide Meta TagoviMeta Tags Schema.orgSchema.org Sitemap.xmlSitemap.xml Heading strukturaHeading Structure Mobile SEOMobile SEO Lokalni SEOLocal SEO

Open Graph i Twitter Cards — Optimizacija deljenja

Sadrzaj

1. Sta je Open Graph protokol

2. Obavezni OG tagovi

3. Opcioni OG tagovi

4. Optimalne dimenzije slika

Saveti za OG slike

5. Twitter Cards

Tipovi Twitter Cards

Twitter Card tagovi

6. LinkedIn i ostale platforme

LinkedIn

WhatsApp / Telegram / Slack

Discord

7. Kompletna implementacija

8. Dobri vs losi primeri

9. Alati za testiranje

10. Najcesce greske

11. Reference i resursi

Open Graph & Twitter Cards — Sharing Optimization

Table of Contents

1. What is Open Graph protocol

2. Required OG tags

3. Optional OG tags

4. Optimal image dimensions

5. Twitter Cards

6. LinkedIn and other platforms

7. Complete implementation

8. Good vs bad examples

9. Testing tools

10. Common mistakes

11. References and resources