Uvod: Zašto je važno kako link izgleda?

Kada neko podeli link vašeg sajta na Facebook-u, Twitter-u ili LinkedIn-u, društvena mreža automatski generiše preview karticu. Ova kartica može biti razlika između klikova i ignorisanja.

U praksi: postovi sa optimizovanim OG tagovima po pravilu dobijaju osetno više klikova od onih sa generičkim ili nedostajućim tagovima.

Šta su OpenGraph tagovi?

OpenGraph (OG) protokol je nastao 2010. godine kada ga je Facebook kreirao kao način da web sajtovi kontrolišu kako se njihov sadržaj prikazuje na društvenim mrežama.

OG tagovi su meta tagovi koji se dodaju u <head> sekciju HTML stranice:

<meta property="og:title" content="Naslov stranice" />
<meta property="og:description" content="Opis stranice" />
<meta property="og:image" content="https://example.com/slika.jpg" />
<meta property="og:url" content="https://example.com/stranica" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Ime sajta" />

Osnovni OG tagovi

og:title - Naslov koji će se prikazati (do 60 karaktera)
og:description - Kratak opis sadržaja (do 160 karaktera)
og:image - URL slike za preview (1200x630px preporučeno)
og:url - Kanonički URL stranice
og:type - Tip sadržaja (website, article, product...)

Šta su Twitter Card tagovi?

Twitter koristi svoj sistem meta tagova koji je sličan OG-u, ali ima neke specifičnosti:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Naslov" />
<meta name="twitter:description" content="Opis" />
<meta name="twitter:image" content="https://example.com/slika.jpg" />

Tipovi Twitter kartica

summary - Mala kartica sa kvadratnom slikom
summary_large_image - Velika kartica sa horizontalnom slikom (preporučeno)
player - Za video sadržaj

Preporučene dimenzije slika

Platforma	Dimenzije	Aspect Ratio
Facebook	1200 x 630px	1.91:1
Twitter	1200 x 628px	1.91:1
LinkedIn	1200 x 627px	1.91:1

Pro tip: Koristite 1200x630px za sve platforme - univerzalno funkcioniše!

Česte greške i kako ih izbeći

1. Relativni URL-ovi za slike

❌ Pogrešno: <meta property="og:image" content="/images/slika.jpg" />

✅ Ispravno: <meta property="og:image" content="https://example.com/images/slika.jpg" />

2. Slike sa HTTP umesto HTTPS

Većina platformi zahteva HTTPS za slike. HTTP slike se često neće prikazati.

3. Previše dugački tekstovi

Title: maksimum 60-70 karaktera
Description: maksimum 160-200 karaktera

4. Nedostaje og:image

Bez slike, preview je generički i privlači manje pažnje.

Testirajte vaše OG tagove

Pre objavljivanja, uvek proverite kako će link izgledati. Koristite naš besplatan OG Checker alat da vidite:

Koje tagove vaš sajt ima
Koje tagove nedostaju
Kako će link izgledati na Facebook-u, Twitter-u i LinkedIn-u
Generisan HTML kod koji možete kopirati

Zaključak

Implementacija OpenGraph i Twitter Card tagova je jednostavna, ali često zanemarena praksa koja može značajno poboljšati CTR vaših deljenih linkova.

Ne zaboravite: Prvi utisak se ne može ponoviti - a na društvenim mrežama, OG kartica JE vaš prvi utisak.

Proverite OG tagove vašeg sajta →

SEO

OpenGraph i Twitter Card tagovi: kako podeljen link izgleda

SEO

OpenGraph i Twitter Card tagovi: kako podeljen link izgleda