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 |
|---|---|---|
| 1200 x 630px | 1.91:1 | |
| 1200 x 628px | 1.91:1 | |
| 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.
