Natrag na blog
Jeste li se ikada zapitali zašto vaši linkovi podijeljeni na Facebooku ili Twitteru ponekad izgledaju čudno? Znate li kako utjecati na izgled vaših blog postova kada se dijele na društvenim mrežama?
Ako niste sigurni jeste li učinili sve što možete kako biste optimizirali informacije o svom blog postu ili stranici koja se prikazuje na Facebooku i Twitteru, nastavite čitati. Pokazat ćemo vam kako korištenje ispravnih social media tagova može pomoći u osiguravanju boljeg izgleda i dojma previewa vaših postova.
Kada dijelite link na članak, želite da vaš post izgleda profesionalno nakon objave. Želite da sadrži kvalitetnu sliku, točan naslov, opis i URL. Facebook, Twitter i druge platforme te parametre povlače izravno s vaše web stranice.
Možete kontrolirati što te platforme povlače uključivanjem social media meta tagova (na primjer, open graph tagova) u HTML kod svojih objava.
Ako su Facebook meta tagovi (= Open Graph meta tagovi) prisutni, vi određujete što se prikazuje u Facebook postu. Ako ne uključite ova Open Graph (og) meta svojstva, Facebook će i dalje prikazati informacije o vašem blog postu, ali vjerojatno ne onako kako biste željeli. To analogno vrijedi i za Twitter meta tagove. Pogledajmo kako to funkcionira na primjeru dijeljenja linka na Facebooku.
Dijeljenje web sadržaja na Facebooku
Facebook je izvrsna platforma za dijeljenje novog sadržaja. Kreiranje novog posta iz članka na vašoj web stranici jednostavno je poput umetanja linka u okvir za novi Facebook post.
Pogledajmo taj proces. Kao primjer ćemo koristiti naš post o Facebook Marketing strategiji.
Nakon umetanja URL-a, Facebook povlači podatke s ciljane adrese i kreira lijepo formatiran post. Format se odmah vidi u previewu – i za desktop i za mobilne uređaje. Ako koristite Kontentino za upravljanje sadržajem na društvenim mrežama, preview je trenutno dostupan u Kontentino Content Calendaru.
Razumijevanje meta tagova u HTML kodu web stranice
Meta svojstva za tražilice
Na samom vrhu možemo vidjeti nekoliko svojstava koja definiraju parametre članka, poznatih kao meta tagovi ili meta svojstva. Neke od njih koriste tražilice kako bi razumjele sadržaj web stranice pružajući dodatne informacije koje nisu vidljive na samoj stranici. To uključuje tagove kao što su:
- Meta title – <title>
- Meta description – meta name=”description”
- Robots – meta name=”robots”
Slika ispod prikazuje HTML kod za ovaj Kontentino post. Ovi meta tagovi označeni su zelenom bojom.
Identifikacija meta tagova u HTML kodu posta Facebook Ads Target Audiences 101: The Ultimate Guide
Savjet: Niste sigurni kako prikazati HTML kod stranice? Jednostavno pritisnite CTRL+U u pregledniku na Windowsima ili Option + Command + U na Macu.
Zahvaljujući ovim meta tagovima, tražilice znaju da je indeksiranje stranice i njenih parametara postavljeno na “follow” (dofollow). Upisani meta title i meta description koriste tražilice za prikaz linka na ovaj post u rezultatima pretraživanja (na SERP stranici). Kao što vidite, meta title i meta description svojstva su postavljena na:
- Meta title: ‘Facebook Ads Target Audiences 101: The Ultimate Guide | Kontentino Blog – Pojednostavljeni workflow odobravanja sadržaja’
- Meta description: ‘Saznajte kako dosegnuti prave ljude uz pomoć targetiranja publike u Facebook oglasima.’
Znamo da ovi meta tagovi nemaju optimalnu duljinu, ali nismo ovdje da pričamo o SEO-u ili Googleu. Zato idemo izravno na meta tagove ispod koji sadrže tekst ‘og:’.
Ovi tagovi se ponekad nazivaju social meta tagovima, social media meta tagovima ili jednostavno og meta svojstvima.
Kao što vidite, u HTML kodu našeg blog posta postoji 7 različitih og meta svojstava:
- og: locale
- og: type
- og: title
- og: description
- og: url
- og: site_name
- og: image
Također postoje i dodatni Facebook meta tagovi povezani s og:image tagom, koji uključuju:
- og:image:width
- og:image:height
- og:image:alt
- og:image:type
Twitter meta tagovi
Osim ovih, u HTML kodu ćete pronaći i posebne social meta tagove za Twitter, kao što su:
- meta name=”twitter:card”
- meta name=”twitter:title”
- meta name=”twitter:description”
- meta name=”twitter:site”
- meta name=”twitter:image”
Vratimo se na primjer dijeljenja na Facebooku. Moramo razumjeti, dekodirati i urediti sadržaj ‘og:’ svojstava kako bismo utjecali na izgled našeg novog Facebook posta s ugrađenim linkom.
Nastavite čitati i saznajte više o: i) Dekodiranju og: meta svojstava; ii) Smjernicama za pisanje sadržaja za social meta tagove; i iii) Uređivanju sadržaja ovih meta svojstava u CMS-u vaše web stranice.
Objavljivanje na Facebooku i Twitteru uz Kontentino
Prijavite se za besplatni 14-dnevni trial Kontentina i savladajte social media meta tagove s nama. Pogledajte preview posta u Kontentinu prije nego što ga objavite.
Oznaka ‘og:’ u HTML kodu predstavlja ‘Open Graph’. To je protokol koji vam omogućuje da kažete Facebooku kako se vaš podijeljeni sadržaj treba prikazati. Kao što smo već spomenuli (a Facebook to navodi i u svojim uputama za developere), ‘bez ovih Open Graph tagova, Facebook Crawler koristi internu heuristiku kako bi najbolje procijenio naslov, opis i sliku za preview vašeg sadržaja.’ Eksplicitno definiranje ovih informacija pomoću Open Graph tagova pomaže u osiguravanju najviše kvalitete objava na Facebooku.
Kao što vidite, ovi og meta tagovi su iznimno važni za Facebook. Ako još niste čuli za njih ili mislite da su novi, iznenadit će vas činjenica da je Facebook lansirao Open Graph protokol još prije više od 10 godina (2010.). Danas ga podržava Open Web Foundation.
Open Graph protokol se temelji na različitim postojećim tehnologijama kako bi pomogao developerima da bogato predstave bilo koju web stranicu unutar društvenog grafa. Dosta s poviješću; prijeđimo na detalje različitih og meta tagova. Detaljno ćemo pogledati 4 taga koji su ključni za izgled linka na Facebooku: og:title, og:image, og:url i og:description.
Svojstvo og:title
Ovo je jedan od četiri osnovna metapodatka unutar Open Graph protokola (uz og:type, og:image i og:url). Navođenjem og:title tagom postavljamo naslov našeg objekta (u ovom slučaju – blog posta) onako kako bi se trebao pojaviti na društvenim mrežama. Facebook će potom povući ovaj naslov i prikazati ga kao naslov posta.
Svojstvo og:image
Ovdje umećemo URL slike koja bi trebala predstavljati članak na društvenim mrežama. Najbolje je uključiti link na istaknutu sliku (featured image). Navođenjem og:image taga osiguravamo da se baš ta slika prikaže na Facebooku.
U protivnom, Facebook bi mogao odabrati neku drugu sliku iz posta, bilo to iz galerije ili neku drugu nasumičnu vizualnu komponentu.
Svojstvo og:url
Ovaj meta tag sadrži kanonski URL vašeg objekta koji služi kao njegov trajni ID. U našem slučaju, to je https://www.kontentino.com/blog/facebook-ads-target-audiences/.
Svojstvo og:description
Konačno, og:description meta tag nam pomaže da imamo spreman opis prilikom dijeljenja posta. Kao što vidite u primjeru HTML koda, to je ‘Saznajte kako dosegnuti prave ljude uz pomoć targetiranja publike u Facebook oglasima.’
Twitter meta tagovi
Twitter meta tagovi rade analogno Open Graph tagovima i specificiraju sadržaj koji će Twitter povući prilikom dijeljenja web stranice na ovoj platformi.
Masteriranje og meta tagova
Facebook i Twitter nude smjernice o tome kako koristiti ove tagove. U tablici ispod saželi smo osnovne informacije o njima i preporuke.
Sada kada razumijemo vrste social meta tagova, vrijeme je da uđemo u CMS web stranice i saznamo gdje ih urediti. Pokazat ćemo vam primjere iz WordPressa, koji je uvjerljivo najpopularniji CMS na svijetu.
Ako koristite SEO plugin poput Yoast SEO, Rank Math ili All in One SEO, oni će vam uvelike olakšati posao. Gotovo svi dobri SEO dodaci omogućavaju zasebno mijenjanje meta tagova za Facebook i Twitter. U nastavku ćemo pokazati kako to postaviti u Rank Mathu.
Počinjemo uređivanjem posta i klikom na SEO karticu. Tamo treba otvoriti karticu ‘social’.
Pronalaženje mjesta za uređivanje social media tagova u CMS-u
Rank Math sadrži live preview koji vam omogućuje da vidite kako će promjene utjecati na ugrađivanje posta na Facebooku ili Twitteru. Kliknite na gumb ‘Preview & Edit Social Media’.
Uređivanje Facebook meta tagova
Prvo ćemo vidjeti preview za Facebook post, a ispod njega social media tagove koji se mogu prilagoditi.
Preview dijeljenja linka generiran u CMS-u (u ovom slučaju Rank Math plugin)
U našem slučaju, og:image, og:title i og:description svojstva još nisu navedena. Simulator (preview snippet editor) prikazuje vrijednosti iz osnovnih metapodataka koji se koriste za tražilice.
Uređivanje social media meta tagova: og:title i og:description
U našem primjeru, naslov koji nedostaje je najveći problem. Popunit ćemo i naslov i opis.
Nakon spremanja promjena, trebamo provjeriti kako ažurirani post izgleda kada se podijeli na Facebooku.
Novi social media meta tagovi popunjeni za post
Iako Facebook preporučuje korištenje 2 do 4 rečenice za og:description, za ovu demonstraciju ćemo koristiti samo jednu. Želimo vidjeti hoće li je Facebook uopće prikazati, nakon što smanjimo duljinu og:title parametra.
Prije provjere rezultata, vrijedi spomenuti druga rješenja u WordPressu. Ako ne koristite SEO plugin, možete koristiti namjenski plugin poput OG ili ručno umetnuti social metadata u HTML kod. Ovo zadnje je korisno i za druge CMS-ove. WIX ima ugrađeno rješenje za umetanje og tagova, kao i većina drugih velikih sustava.
Kada završite s uređivanjem, vrijeme je za test. Možete koristiti Facebook Debugger (službeno Facebook Sharing Debugger) za provjeru modificiranih objava. Prije toga, obavezno očistite cache ili privremene datoteke preglednika ako se nisu automatski očistile.
Open Graph meta tagovi u Facebook Link Sharing Debuggeru
Preview linka u Facebook Sharing Debuggeru pokazuje tagove u akciji
Kao što vidite, sve izgleda odlično i promjene su stupile na snagu.
Uobičajene zablude o social media meta tagovima
Mit 1: Social media meta tagovi služe samo za SEO.
Meta tagovi nisu tu samo za tražilice – oni igraju ključnu ulogu u tome kako se vaš sadržaj prikazuje na društvenim mrežama. Tagovi poput og:image i og:title optimiziraju vaše objave specifično za Facebook i Twitter, čime se poboljšava engagement.
Mit 2: Sve slike će se savršeno prikazati na društvenim mrežama.
Neće se svaka slika s vaše stranice prikazati ispravno. Bez specificiranja og:image taga ili korištenja Twitter carda, platforme mogu odabrati generičku sliku ili pogrešno formatirati vizual, što narušava izgled posta.
Mit 3: Meta tagovi su važni samo za single-page web stranice.
Meta tagovi su neophodni za sve web stranice. Bilo da imate blog ili web shop s popisima proizvoda, korištenje og:type i drugih tagova osigurava dosljedan i optimiziran prikaz na svim platformama.
Mit 4: Možete se pouzdati u platforme da će same ispravno prikazati sadržaj.
Oslanjanje na automatizaciju Facebooka ili Twittera je rizično. Bez ručnog postavljanja ključnih tagova poput og:url i og:description, platforme mogu povući netočne ili nepotpune podatke, što utječe na vizualnu privlačnost.
Mit 5: Social meta tagove je teško implementirati bez znanja kodiranja.
WordPress dodaci i alati poput Rank Matha maksimalno pojednostavljuju proces upravljanja tagovima. Ne morate biti web developer da biste osigurali da su vaši postovi optimizirani za sharing.
Mit 6: Twitter cardovi rade samo sa statičnim slikama.
Twitter cardovi podržavaju različite formate, uključujući GIF-ove i videozapise. Možete priložiti razne medije uz svoj summary card, čineći objave dinamičnijima i privlačnijima.
Mit 7: Meta tagovi su samo za vaš vlastiti sadržaj.
Meta tagovi pomažu i kada se vaš sadržaj dijeli na drugim web stranicama. Ispravno postavljena og:image i og:title svojstva osiguravaju da vaš sadržaj izgleda profesionalno gdje god se pojavio.
Zaključak
Nadamo se da vam je ovaj članak pomogao razumjeti og meta svojstva i njihovu važnost za dijeljenje linkova. Ako želite podići svoj social media marketing na višu razinu, isprobajte Kontentino. To je alat jednostavan za korištenje koji podržava učinkovitu timsku suradnju i odobravanje sadržaja.
Naš Content Calendar integrira feature previewa, pa ne morate ići nigdje drugdje kako biste vidjeli kako će vaš link izgledati, štedeći dragocjeno vrijeme za provjeru i optimizaciju vaših meta tagova.
A što može biti bolje od postavljanja UTM tagova za praćenje izvedbe u analitici, zakazivanja budućih objava ili dodjeljivanja budžeta za boosting izravno iz sustava?
FAQ
Što je social media meta tag?
Social media meta tag pruža ključne podatke poput naslova, slika i opisa platformama društvenih mreža prilikom dijeljenja web stranica. Neophodan je za poboljšanje angažmana korisnika.
Koji su primjeri meta tagova?
Primjeri uključuju meta property=”og:title”, meta property=”og:image” i meta property=”og:url”, koji optimiziraju dijeljenje na mrežama poput Facebooka i Twittera.
Što su social media metapodaci?
Social media metapodaci uključuju Open Graph podatke poput naslova, opisa i visokokvalitetnih slika koji poboljšavaju vizualni izgled objava.
Što su social media tagovi?
To su identifikatori poput twitter:card tagova ili og tagova ugrađeni u HTML datoteku kako bi utjecali na prikaz web stranica i povećali izloženost na mrežama.
Kako kreirati meta tagove?
Developer umeće nekoliko linija koda u HTML datoteku stranice, uključujući title tag, description tag i sliku koja predstavlja sadržaj.
Koje društvene mreže koriste meta tagove?
Meta tagove koriste glavne platforme poput Facebooka, Twittera i LinkedIna kako bi optimizirale izgled objava i povećale engagement.
Je li meta tag nužan?
Da, meta tagovi su ključni za digitalni marketing jer kontroliraju izgled sadržaja, osiguravajući da se prikazuju prava slika i naslov, što potiče dijeljenje.
Kako pronaći meta tagove?
Možete pregledati HTML kod stranice (Inspect) ili koristiti alate poput Facebook Debuggera za pregled specifičnih svojstava poput og:image.
Koliko meta tagova trebam koristiti?
Koristite osnovne tagove: og:title, og:image, og:url i Twitter card tagove. Dajte prioritet kvaliteti i najutjecajnijim tagovima za sharing.
Što je Facebook meta tag?
Facebook meta tag, kao što je meta property=”og:title”, dio je Open Graph protokola i određuje kako će se vaša stranica ili post pojaviti na Facebooku.
Što je svojstvo og:title?
Svojstvo og:title definira naslov vaše web stranice onako kako će se pojaviti kada se podijeli na platformama poput Facebooka.
Što je svojstvo og:image?
Svojstvo og:image određuje URL slike koja će se pojaviti uz vaš podijeljeni sadržaj na društvenim mrežama.
Što je svojstvo og:type?
Svojstvo og:type definira tip sadržaja koji se dijeli (npr. članak, web stranica), pomažući platformama da ga ispravno kategoriziraju.
Što su metapodaci? 3 primjera?
Primjeri metapodataka uključuju description tag, varijable sesije za identifikaciju korisnika i og:image tag za odabir ispravne slike.
