SEO optimizacija web stranica za društvene mreže

Pregled sadržaja

Želimo dijeliti sadržaj na društvenim mrežama, ili još bolje, da posjetitelji to čine umjesto nas. U trenutku kada u polje poruke unesemo adresu web stranice, društvena mreža će dohvatiti podatke o stranici i generirati njezin pregled. Kako možemo prilagoditi pregled te kartice?

Što su Open Graph tagovi

Open Graph su oznake koje definiraju način prikazivanja web stranica kada se dijele na društvenim mrežama. Definiraju se kao meta tagovi koji služe botovima dok posjetiteljima nisu vidljivi na ekranu.

OG tagove je prvi puta predstavio Facebook 2010. Danas ih osim Facebooka koriste još LinkedIn i Pinterest dok Twitter ima slične meta oznake ali s drugačijim prefiksom. Oznake je potrebno imati podešene unutar kôda u <head> sekciji dijela svake web stranice.

Zašto ih koristiti

Optimiziran pregled web stranice na društvenoj mreži može značajno utjecati na stopu klika korisnika. Drugim riječima, Open Graph podacima optimiziramo konverziju na društvenim mrežama. Pregled stranice korisniku daje informacije o njezinom sadržaju te čini da izgleda bogatije i vizualno privlačnije, tj. pomoću njih povećamo profesionalni izgled pregleda stranice. Također, Facebooku omogućuje da lakše shvati o čemu se radi u sadržaju što nam može pomoći u povećanju vidljivosti brenda kroz njihovo pretraživanje.

Vrste Open Graph oznaka

Premda u službenoj Facebook dokumentaciji navode znatno više meta oznaka, fokusirat ćemo se na one najvažnije. Pogledajmo koji su koje su to.

og:title

Označuje naslov stranice koji će se prikazati na društvenoj mreži, isto kao što meta naslov definira naslov na samoj web stranici. Često su oba meta podatka za naslov identična jer og:title automatski i uzima podatak iz baze prema meta naslovu. Jedna je od najvažnijih oznaka, naslov se uvijek prikazuje na istaknutom mjestu zajedno sa slikom i snažno utječe na stopu klika.

Naslov obično ne smije biti duži od 95 znakova jer se neće moći prikazati u cijelosti. Također, nakon prvih 50 znakova ostatak uvijek ide u novi redak. Konkretno, ne postoji službena dokumentacija koja precizira broj znakova dobro je ciljati da ih ima negdje između 40-60 znakova (40 za mobilne uređaje, do 60 za stolna računala).

<meta property=”og: title” content = “Neki naslov web stranice” />

og:description

Opis stranice, obično je identičan kao i meta opis. A slično kao i on, trebalo bi se fokusirati na pisanje opisa koji će korisnike dodatno informirati o tome što mogu saznati na stranici čime ćete ih potaknuti na klik. Optimalan opis nije onaj koji je click-bait, već istinit kako ne bi došlo do razočaranja korisnika što će rezultirati visokom stopom napuštanja stranice. Opis najviše može sadržavati 297 znakova.

<meta property=”og:description” content=”Neki opis web stranice” />

og:image

Slika je bitno jer smo svi vizualni ljudi, snažno utječe na odluku posjetitelja i privuče mu pažnju. Ako ova meta oznaka izostaje na stranici, prikazat će se prva slika koju društvena mreža uoči na dijeljenoj stranici. Poželjno je uvijek postaviti istaknutu sliku radi te optimizacije a isto i radi pravilnog rezanja slike u određeno omjeru.

Omjer slike za Facebook je u formatu 1,91:1. Poželjno je koristiti veličinu najmanje 1200 x 630 piksela kako bi bila prikladna na mobilnim uređajima i na stolnim ekranima gdje se prikazuje u većoj rezoluciji.

<meta property=”og:image” content=”https://web-stranica.hr/slika.jpg” />

og:image:alt

Alternativni opis slike.

og:url

Kanonična adresa koja upućuje na stranicu koju dijelimo, trebala bi biti čista adresa bez UTM parametara koji inače služe za praćenje kampanja.

og:type

Vrsta sadržaja koji se dijeli, obično se koristi article, website ili blog, premda mogu biti drugi tipovi npr. music, videos…

<meta property=”og:type” content=”article” />

og:locale

Definira jezik cijele web stranice. Ako su nam stranice izrađene na hrvatskom jeziku tada koristimo “hr” vrijednost, dok strani jezici imaju drugačije vrijednosti. Vrijednost se treba dinamički zrcaliti ovisno o odabranom jeziku ako na web stranici imamo implementiranu višejezičnost.

<meta property=”og:locale” content=”hr” />

Twitter Open Graph oznake

Kao što smo spomenuli, Twitter koristi svoju verziju Open Graph tagova i neka svojstva su specifična za njihovu platformu.

<meta name=”twitter:card” content=”summary” />

Naredne oznake nisu obavezne ali upućuju na Twitter profil web stranice kao autora.

<meta name=”twitter:site” content=”@”/>
<meta name=”twitter:creator” content=”@autor”/>

Alati

Kako bi imali lakši uvid u analizu tih oznaka, možemo koristiti službeni Facebook alat Facebook Debugger. Prikazuje informacije koje će Facebook koristiti i dobimo pregled objave. Facebook podatke spremi u priručnoj memoriji (eng. cache) kako bi se brže prikazali korisnicima, stoga ako smo neki od OG oznaka promijenili, ovaj alat možemo koristiti kako bi primorali Facebook da ih ponovno dohvati i osvježi novim podacima.

Osim validacije na Facebooku, možemo koristiti i validaciju za druge društvene mreže: