Kartice za društvene mreže: Open Graph i slika za dijeljenje

Što je pregled poveznice

Kada netko podijeli poveznicu na društvenoj mreži ili u aplikaciji za razmjenu poruka, platforma čita stranicu i izrađuje malu karticu: sliku, naslov, kratak tekst i domenu. Većina platformi za to čita oznake protokola Open Graph, a to su meta elementi u head dijelu stranice. X, prije Twitter, čita i vlastite oznake koje počinju s twitter:. Svaka platforma sama oblikuje svoju karticu i odlučuje koliko teksta prikazuje. Ti odlučuješ što stranica govori platformama.

Osnovne oznake

Protokol Open Graph, objavljen na ogp.me, navodi četiri svojstva koja bi svaka stranica trebala imati: og:title, og:type, og:image i og:url. og:url je kanonska adresa stranice. Neobavezni, ali korisni su og:description, og:site_name i og:locale, jezik i regija oznaka, na primjer de_DE.

<meta property="og:title" content="Ljetno sniženje: sve šalice snižene">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/summer-sale">
<meta property="og:image" content="https://example.com/img/summer-sale-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Šest plavih šalica na drvenom stolu">
<meta property="og:description" content="Do 31. kolovoza: niže cijene šalica i tanjura.">
<meta property="og:site_name" content="Primjer Trgovina">
<meta name="twitter:card" content="summary_large_image">

Svaku adresu napiši u cijelosti, s https://. Protokol adresu definira kao URL koji koristi http:// ili https://, pa putanja poput /img/sale.jpg nije valjana vrijednost. og:url treba odgovarati kanonskoj poveznici stranice. Ako se oznaka pojavi dvaput s različitim vrijednostima, protokol daje prednost prvoj.

Slika za dijeljenje

Većina pregleda prikazuje sliku široko. Slika u omjeru od oko 1,91 : 1, na primjer 1200 × 630 piksela, često se preporučuje i stane u većinu kartica bez obrezivanja. Kvadratne slike često se obrežu na vrhu i dnu, pa važan sadržaj drži u sredini. Za Google Discover Google preporučuje slike široke najmanje 1200 piksela, veliki pregled dopušten postavkom max-image-preview:large i sliku postavljenu s og:image ili oznakama schema.org. Google također savjetuje da ne koristiš generičke slike kao što je logotip web-mjesta.

og:image:width i og:image:height navode veličinu slike u pikselima. og:image:alt opisuje što je na slici, a nije opis ispod slike. Protokol kaže da stranica s og:image treba navesti i og:image:alt.

Naslov i opis

og:title može se razlikovati od elementa title. Ne treba naziv web-mjesta, jer njega nosi og:site_name. Platforme skraćuju duge tekstove na vlastitu duljinu, pa važne riječi stavi na početak. Open Graph oznake važne su i izvan društvenih mreža. Google navodi sadržaj og:title kao jedan od izvora za naslovne poveznice u rezultatima pretraživanja, uzima u obzir og:site_name za naziv web-mjesta i navodi og:image kao jedan od načina za određivanje željene slike.

Oznake za X

Oznaka twitter:card bira vrstu kartice. Vrijednost summary_large_image traži veliku, široku sliku, a summary malu. Ako tvoja stranica već ima Open Graph oznake, često je dovoljno dodati twitter:card. Stranice za razvojne programere platforme X nisu se mogle pročitati za ovaj vodič, pa ondje provjeri aktualna pravila prije nego što se osloniš na neku pojedinost.

Jedna kartica po stranici

Mnoga web-mjesta postavljaju isti naslov i sliku za svaku stranicu, često putem teme. Tada svaka podijeljena poveznica izgleda isto. Svakoj važnoj stranici daj vlastiti og:title, og:description i og:image: stranici proizvoda fotografiju proizvoda, članku njegovu glavnu sliku. Za og:type protokol, među ostalim vrstama, koristi website za opću stranicu i article za članak. Sustav trgovine ili sadržaja može te oznake automatski popuniti iz naslova, sažetka i glavne slike svake stranice. Nakon promjene provjeri po jednu stranicu svakog predloška.

Zašto se pregled ne mijenja

Mnoge platforme spremaju karticu nakon što je izrade. Ako kasnije promijeniš sliku ili naslov, ljudi još neko vrijeme mogu vidjeti staru karticu. Pomaže novi naziv datoteke za novu sliku, jer platforma tada vidi novu adresu. Neke platforme nude alat koji ponovno dohvaća stranicu.

Prije nego što podijeliš stranicu

• Postoje li og:title, og:type, og:image i og:url i je li og:url kanonska adresa?
• Je li svaka adresa potpuna, s https://?
• Je li slika dovoljno široka, učitava li se i je li važan sadržaj u sredini?
• Jesu li postavljeni og:image:alt, og:image:width i og:image:height?
• Postoji li oznaka twitter:card i je li naslov dovoljno kratak?

Rad s Do4U-om

Provjera kartice za društvene mreže pokazuje kako stranica izgleda kada se podijeli njezina poveznica i provjerava oznake iza pregleda. Upisuješ jednu adresu. Do4U čita stranicu i početak njezine slike za dijeljenje. Kod prikuplja Open Graph oznake, oznake kartice Twitter/X i zamjene, odnosno naslov, meta opis i prvu sliku, te kanonsku poveznicu i jezik. Stvarni format i veličinu slike čita iz datoteke i uspoređuje ih s oznakama. Dobivaš neutralan pregled, tablicu svih oznaka, nalaze s kratkim obrazloženjem i predložene oznake za kopiranje. Oznake koje stranica postavlja samo JavaScriptom ne vide se. AI se ne koristi, a provjera je besplatna, uz dnevno ograničenje.

Do4U pronalazi naznake, a ti provjeravaš i odlučuješ. Pregled je neutralna skica: kako platforma prikazuje poveznicu, odlučuje platforma.