Open Graph

Open Graph su oznake u kodu stranice koje aplikacijama kažu koji naslov, opis i sliku da pokažu kad neko podijeli link. Facebook ih je uveo, a danas ih čitaju i LinkedIn, Viber, WhatsApp, Messenger i većina drugih aplikacija.

Link se kod nas dijeli više nego što se misli. Kupac pošalje vaš sajt supruzi na Viber, komercijalista stavi link u grupu kolega, neko podijeli oglas za posao na Facebooku. U svakom od tih slučajeva link izgleda kao mala kartica, i ta kartica odlučuje hoće li iko kliknuti. Bez Open Graph oznaka kartica je često prazna, s pogrešnom slikom ili s nazivom koji ništa ne govori.

Šta oznake zapravo kažu

Oznake stoje u zaglavlju stranice i posjetilac ih ne vidi. Četiri su osnovne.

• og:title. Naslov kartice. Meta savjetuje da bude bez imena sajta na kraju.
• og:description. Kratak opis ispod naslova, jedna do dvije rečenice.
• og:image. Adresa slike koja se pokazuje na kartici.
• og:url. Glavna adresa stranice, bez dodataka za praćenje, da se sva dijeljenja broje na istom mjestu.

Postoji i og:type, koji kaže je li stranica članak, proizvod ili obična stranica. Ako ga nema, uzima se obična stranica, i za većinu sajtova je to sasvim u redu.

Šta se dešava kad ih nema

Aplikacija tada pogađa. Za naslov uzme naslov stranice, za opis prvi tekst na koji naiđe, a za sliku prvu sliku iz koda. Ta prva slika je često logo partnera iz podnožja, ikona kolica ili baner za kolačiće.

Gore je kad se pogodi nešto što ne treba javno stajati. Sajt na probnoj adresi, stranica s naslovom “Početna” ili opis koji je ostao od teme koju je neko kupio pa nikad nije prepravio. Sve to se vidi u grupi od trideset ljudi u kojoj ste htjeli izgledati ozbiljno.

Open Graph opis je drugačija stvar od meta opisa. Meta opis piše se za rezultate pretrage, Open Graph opis za mreže i poruke. Mogu biti isti, a često je bolje da nisu: u pretrazi čovjek traži odgovor, na mreži ga treba zainteresovati.

Slika nosi karticu

Naslov i opis se na telefonu skrate. Slika ostaje. Zato se na nju troši najviše pažnje.

Meta preporučuje sliku široku bar 1080 piksela. Uobičajen format je 1200 x 630, isti onaj koji koriste i ostale mreže, pa jedna slika radi svugdje. Fajl se priprema kao i svaka druga slika za web, po pravilima optimizacije slika, da se kartica brzo učita i u poruci na slabom signalu.

Nekoliko pravila koja štede nerviranje:

• Tekst na slici drži se dalje od rubova, jer ga neke aplikacije režu na kvadrat.
• Slova moraju biti dovoljno velika da se pročitaju na kartici široj od palca.
• Logo da, ali ne kao jedini sadržaj slike. Kartica s logom na bijelom ništa ne govori o stranici.
• Slika mora odgovarati stranici. Oglas za posao s fotografijom proizvoda zbunjuje.

Ako je favicon mala ikona u kartici pregledača, Open Graph slika je plakat na zidu. Oboje pripada istom vizuelnom identitetu.

Zašto se stara slika ne mijenja

Ovo je najčešća muka. Slika je promijenjena, a Facebook i dalje pokazuje staru.

Razlog je pamćenje. Meta u dokumentaciji piše da sliku čuva po njenoj adresi i da je ne mijenja dok se adresa ne promijeni. Isto rade i druge aplikacije, svaka na svoj način. Viber i WhatsApp pregled često naprave jednom i drže ga.

Rješenje je u dva koraka. Nova slika se objavi pod novim imenom fajla, ne preko stare. Zatim se adresa stranice ubaci u Metin alat Sharing Debugger, koji stranicu pročita ponovo i pokaže tačno koje je oznake našao. LinkedIn ima svoj alat istog smisla, Post Inspector.

Debugger je dobar i prije objave. Kampanja čiji link vodi na stranicu s pogrešnom karticom gubi klikove od prvog dana, a provjera traje minut.

Kako se postavlja

Na WordPressu i sličnim sistemima to najčešće radi SEO dodatak. Daje polje za naslov, opis i sliku na svakoj stranici, a za stranice bez posebne slike koristi zadanu. Na sajtu bez takvog dodatka oznake dodaje onaj ko održava sajt.

Dobar redoslijed za firmu koja tek kreće:

1. Jedna zadana slika s logom i porukom firme, za sve stranice koje nemaju svoju.
2. Posebna slika za stranice koje se dijele: usluge, proizvodi, članci, oglasi za posao, akcije.
3. Provjera svake od njih u Sharing Debuggeru.

Web trgovine obično uzmu sliku proizvoda automatski. To radi dobro ako su fotografije u ispravnom omjeru, a loše ako je proizvod fotografisan uspravno, pa kartica pokaže samo sredinu.

Open Graph se ne miješa sa schema markupom. Schema opisuje sadržaj za pretraživače, Open Graph opisuje karticu za mreže. Stranica može i obično treba imati oboje.

Kada je ovo stvarno bitno

Za firmu čiji se linkovi dijele: trgovine, ugostiteljstvo, firme koje zapošljavaju, sve što ima akcije ili događaje. Kod njih je kartica dio prodaje.

Za proizvođača čiji sajt posjećuje nekoliko kupaca mjesečno, i to preko pretrage, Open Graph je posao od jednog popodneva. Zadana slika i ispravni naslovi su dovoljni. Nema smisla praviti posebnu sliku za svaku od pedeset stranica koje niko ne dijeli.

Greške koje najčešće viđamo

Ista slika na svim stranicama, i to logo na bijeloj pozadini. Kartice izgledaju isto i ništa ne kažu.

Slika koja je mala ili uspravna. Aplikacija je razvuče ili izreže, pa se vidi pola glave direktora.

Naslov kartice “Početna” ili naziv teme sajta, jer niko nije upisao pravi.

Stara slika poslije redizajna, jer je nova snimljena preko stare pod istim imenom.

Probna adresa u og:url, ostala od izrade. Dijeljenja se tada broje na stranici koja više ne postoji.

Lista za provjeru

• Imaju li najvažnije stranice svoj og:title, og:description i og:image?
• Postoji li zadana slika za sve ostale stranice?
• Je li slika široka bar 1080 piksela i u vodoravnom formatu?
• Je li tekst na slici čitljiv i dalje od rubova?
• Pokazuje li og:url pravu adresu, bez probne domene i parametara?
• Jeste li provjerili stranice u Sharing Debuggeru prije kampanje?
• Objavljujete li novu sliku pod novim imenom fajla?

Pojmovi koje ćete čuti uz Open Graph

• Kartica, pregled linka: ono što aplikacija napravi od oznaka.
• Sharing Debugger: Metin alat koji pokazuje koje je oznake našao i osvježava pregled.
• Twitter kartice: slične oznake za mrežu X. Ako ih nema, X uglavnom čita Open Graph.
• Zadana slika: slika koja se koristi za stranice bez svoje.