Skip to content
Search

Open Graph meta tagovi: šta trebate znati

Praktičan vodič za Open Graph meta tagove: čemu služe, ključni tagovi i primeri, fallback po platformama, koraci za testiranje i kontrolna lista za ispravne prikaze na društvenim mrežama.

Open Graph Meta Tags - What You Need to Know

Šta Open Graph radi i zašto je važan

Open Graphmeta tagoviobaveštavaju društvene platforme koji naslov, opis i sliku da prikažu kada neko podeli URL. Postavljeni u HTML head, ti tagovi standardizuju kako se stranice prikazuju na uslugama koje podržavaju protokol. Kada ih postavite, Vi kontrolišete isječke koje ljudi vide u feedovima, privatnim porukama i chat preview-ima, umesto da izbor ostavite platforminim heuristikama.

Nekoliko tehničkih napomena koje utiču na implementaciju i rešavanje problema: Google koristi mobilnu verziju stranice kao primarnu osnovu za crawling and indexing; od jula 2024. Google podrazumevano crawluje Search koristeći Googlebot Smartphone. Facebook, Twitter/X i drugi social scrapers mogu dohvatiti stranicu sa različitim user-agents i keširati prikaze. Takođe imajte na umu da je Google početkom 2024. uklonio tradicionalne cached stranice, što ne menja kako Open Graph funkcioniše već utiče na to kako search enginesprikazuju starije snimke stranica.

Key Open Graph tags and example markup

Osnovni Open Graph tagovi koje bi trebalo da uključite u head svake stranice koja se deli su og:title, og:description, og:image, og:url i og:type. Dodajte ih pored standardnog meta description i structured data; social crawleri čitaju samo head, zato uključite potpuno renderovane tagove upravo tamo.

Example HTML (place inside <head>):

<meta property="og:title" content="Naslov vaše stranice">
<meta property="og:description" content="Kratak sažetak koji dopunjuje naslov">
<meta property="og:image" content="https://yourdomain.com/wp-content/uploads/your-image.png">
<meta property="og:url" content="https://yourdomain.com/your-page">
<meta property="og:type" content="article">

Ako objavljujete sadržaj programatski (CMS šabloni ili server-side rendering), obavezno generišite te tagove server-side kako bi ih scraperi dobili bez oslanjanja na client-side JavaScript.

Razlike među platformama i fallback rešenja

Open Graph je široko podržan protokol, ali svaka platforma primenjuje sopstvena pravila i fallback rešenja.

Pošto platforme različito keširaju prikaze, uvek testirajte svoju stranicu na uslugama na kojima očekujete deljenje. Koristite platformske debuggere da proverite šta svaka usluga izdvaja i da obrišete keširane snimke kada ažurirate metapodatke.

Smernice za slike i pristupačnost

Vizuelni elementi su najvidljiviji deo social preview-a. Ciljajte slike dovoljno velike da budu oštre na uređajima sa visokim DPI i da budu vizuelno centrirane za uobičajene odnose sečenja. Često korišćen pristup je da obezbedite sliku horizontalne orijentacije i uključite eksplicitne width/height metapodatke gde je podržano (og:image:width i og:image:height) kako bi scrapers znali dimenzije bez preuzimanja cele datoteke.

Takođe proverite sledeće praktične stavke:

Primer: proverite image headere komandom poput curl -I https://yourdomain.com/wp-content/uploads/your-image.png da potvrdite 200 odgovor i Content-Type.

Kako testirati i rešavati probleme sa Open Graph

Kada preview izgleda pogrešno, sledite sistematsku kontrolnu listu umesto nagađanja. Počnite sa sirovim HTML head-om da potvrdite da tagovi postoje, zatim proverite kako scrapers dohvaćaju stranicu i da li proxy-i ili keševi vraćaju zastareli sadržaj.

Za stranice koje posedujete, Google Search Console — URL Inspection ostaje koristan za provere indeksacije i mobilnog renderovanja, ali nije zamena za debuggere društvenih platformi pri dijagnostikovanju problema sa social preview-ima.

Uobičajene greške i brza kontrolna lista za implementaciju

Brza kontrolna lista za implementaciju:

Ako želite dublji tehnički audit kako se Vaše stranice serviraju i renderuju, pogledajte Pročitajte Technical SEO vodič za layout, rendering i server-side razmatranja.

FAQ: Šta ako platforma ignoriše moj og:image?

Platforme primenjuju sopstvene heuristike i keširanje. Potvrdite da image URL vraća 200 status i ispravan Content-Type, da je dovoljno velik i ima odgovarajući aspect ratio, i da nije blokiran od strane robots.txt. Koristite debugger platforme da vidite tačno šta je scraper izvukao i da naterate re-scrape.

FAQ: Mogu li koristiti drugačiji tekst za Twitter/X i Facebook?

Da. Twitter/X podržava twitter:* tagove za naslov, opis i sliku. Ako Vam treba drugačiji naslov ili slika na Twitter/X, uključite i og:* i twitter:* tagove — platforma će preferirati svoje tagove kada su prisutni.

FAQ: Treba li dodavati Open Graph tagove za svaku stranicu?

Prioritet dajte stranicama koje se dele: blog postovi, landing pages i stranice proizvoda obično imaju najviše koristi. Za stranice celog sajta (pravno, admin) koristi su manje ali bezopasne. Ako stranica verovatno neće biti deljena, tagovi dodaju malu vrednost ali i mali trošak.

FAQ: Da li Open Graph tagovi utiču na SEO rangiranje?

Open Graph tagovi kontrolišu social previews i direktno ne menjaju kako search engines rangiraju stranice. Međutim, bolji preview-i mogu povećati click-throughs sa social kanala, što može indirektno uticati na signale angažovanja korisnika. Imajte na umu razliku između crawl, index i ranking: OG tagovi utiču na ono što društvene platforme prikazuju, ne na pravila indexacije search engine-a.

Related articles