Skip to content
BlogDripBlogDrip home
Search

Open Graph meta oznake: što trebate znati

Praktičan vodič za Open Graph meta oznake: što rade, ključne oznake i primjeri, zamjene za platforme, koraci testiranja i kontrolna lista za ispravne social previewe.

Michael
Open Graph Meta Tags - What You Need to Know

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

Open Graph meta oznake govore društvenim platformama koji naslov, opis i sliku prikazati kada netko podijeli URL. Smještene u HTML head, ove oznake standardiziraju način na koji se stranice pregledavaju na servisima koji podržavaju protokol. Kada ih postavite, Vi kontrolirate isječke koje ljudi vide u feedovima, privatnim porukama i pregledima chata, umjesto da izbor prepustite heuristikama platforme.

Nekoliko tehničkih napomena koje utječu na implementaciju i otklanjanje poteškoća: Google koristi mobilnu verziju stranice kao primarnu osnovu za crawling i indeksiranje; od srpnja 2024. Google prema zadanim postavkama crawla Search koristeći Googlebot Smartphone. Facebook, Twitter/X i drugi social scraperi mogu dohvatiti stranicu s različitim user-agentima i keširati previewe. Također imajte na umu da je Google početkom 2024. uklonio tradicionalne keširane stranice, što ne mijenja kako Open Graph radi, ali utječe na to kako tražilice prikazuju starije snimke stranica.

Ključne Open Graph oznake i primjer markupa

Osnovne Open Graph oznake koje biste trebali uključiti u head svake stranice koju planirate dijeliti su og:title, og:description, og:image, og:url i og:type. Dodajte ih uz standardni meta description i strukturirane podatke; social crawleri čitaju samo head, stoga tamo uključite potpuno renderirane oznake.

Primjer HTML-a (stavite unutar <head>):

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

Ako objavljujete sadržaj programski (CMS predlošci ili server rendering), osigurajte da se te oznake generiraju na strani poslužitelja tako da ih scraperi dobiju bez oslanjanja na klijentski JavaScript.

Razlike među platformama i fallbacki

Open Graph je široko podržani protokol, ali svaka platforma primjenjuje vlastita pravila i fallbacke.

Budući da platforme keširaju previewe različito, uvijek testirajte svoju stranicu na servisima na kojima očekujete dijeljenja. Koristite platformske debuggere da provjerite što svaki servis ekstrahira i da očistite keširane snimke kad ažurirate metadata.

Smjernice za slike i pristupačnost

Vizuali su najvidljiviji element social previewa. Ciljajte slike koje su dovoljno velike da se oštro prikažu na uređajima s visokim DPI i koje su vizualno centrirane za uobičajene omjere obrezivanja. Često korišten pristup je osigurati sliku u pejzažnoj orijentaciji i uključiti eksplicitne width/height metapodatke gdje je podržano (og:image:width i og:image:height) kako bi scraperi znali dimenzije bez preuzimanja cijele datoteke.

Provjerite i ove praktične točke:

Primjer: provjerite zaglavlja slike naredbom poput curl -I https://yourdomain.com/wp-content/uploads/your-image.png kako biste potvrdili 200 odgovor i Content-Type.

Kako testirati i otklanjati probleme s Open Graph

Kad preview izgleda pogrešno, slijedite sustavnu kontrolnu listu umjesto nagađanja. Počnite s sirovim HTML headom da potvrdite postojanje oznaka, zatim provjerite kako scraperi dohvaćaju stranicu i vraćaju li proxyji ili cache zastarjeli sadržaj.

Za stranice koje posjedujete, Google Search Console’s URL Inspection i dalje je koristan za provjere indexacije i mobilnog renderiranja, ali nije zamjena za vlastite debuggere društvenih platformi pri dijagnosticiranju problema s social previewima.

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

Brza kontrolna lista za implementaciju:

Ako želite detaljniji tehnički audit kako se Vaše stranice poslužuju i renderiraju, pogledajte Pročitajte Technical SEO vodič za pitanja rasporeda, renderiranja i razmatranja na strani poslužitelja.

FAQ: Što ako platforma ignorira moj og:image?

Platforme primjenjuju vlastite heuristike i keširanje. Potvrdite da image URL vraća status 200 i ispravan Content-Type, da je dovoljno velik i ima odgovarajući omjer stranica te da nije blokiran od strane robots.txt. Koristite debugger platforme da vidite točno što je scraper ekstrahirao i da prisilite ponovno skeniranje.

FAQ: Mogu li koristiti različit tekst za Twitter/X i Facebook?

Da. Twitter/X podržava twitter:* oznake za naslov, opis i sliku. Ako trebate drugačiji naslov ili sliku na Twitter/X, uključite i og:* i twitter:* oznake — platforma će preferirati svoje oznake kad su prisutne.

FAQ: Trebaju li se Open Graph oznake dodati na svaku stranicu?

Dajte prioritet stranicama koje se dijele: blog objave, landing stranice i stranice proizvoda obično imaju najviše koristi. Za stranice koje su site-wide (pravne, admin) korist je manja, ali bezopasna. Ako stranica vjerojatno neće biti dijeljena, oznake donose malo vrijednosti, ali i mali trošak.

FAQ: Utječu li Open Graph oznake na SEO rangiranje?

Open Graph oznake kontroliraju social previewe i ne mijenjaju izravno kako tražilice rangiraju stranice. Međutim, bolji previewi mogu povećati CTR s društvenih kanala, što posredno može utjecati na signale angažmana korisnika. Imajte na umu razlike između crawlanja, indeksiranja i rangiranja: OG oznake utječu na to što platforme pokazuju, a ne na pravila indexacije tražilica.

Related articles