Kartice za družbena omrežja: Open Graph in slika za deljenje

Kaj je predogled povezave

Ko nekdo deli povezavo na družbenem omrežju ali v aplikaciji za sporočanje, platforma prebere stran in sestavi majhno kartico: sliko, naslov, kratko besedilo in domeno. Večina platform za to bere oznake protokola Open Graph, to so elementi meta v glavi (head) strani. X, prej Twitter, bere tudi lastne oznake, ki se začnejo s twitter:. Vsaka platforma svojo kartico oblikuje sama in odloči, koliko besedila prikaže. Ti odločiš, kaj stran pove platformam.

Osnovne oznake

Protokol Open Graph, objavljen na ogp.me, navaja štiri lastnosti, ki bi jih morala imeti vsaka stran: og:title, og:type, og:image in og:url. og:url je kanonični naslov strani. Neobvezne, a koristne so og:description, og:site_name in og:locale, jezik in regija oznak, na primer de_DE.

<meta property="og:title" content="Poletna razprodaja: vse skodelice znižane">
<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 modrih skodelic na leseni mizi">
<meta property="og:description" content="Do 31. avgusta: nižje cene skodelic in krožnikov.">
<meta property="og:site_name" content="Primer Trgovina">
<meta name="twitter:card" content="summary_large_image">

Vsak naslov napiši v celoti, s https://. Protokol naslov opredeljuje kot URL, ki uporablja http:// ali https://, zato pot, kot je /img/sale.jpg, ni veljavna vrednost. og:url naj se ujema s kanonično povezavo strani. Če se oznaka pojavi dvakrat z različnima vrednostma, protokol da prednost prvi.

Slika za deljenje

Večina predogledov prikaže sliko široko. Slika v razmerju približno 1,91 : 1, na primer 1200 × 630 slikovnih pik, se pogosto priporoča in se v večino kartic prilega brez obrezovanja. Kvadratne slike se pogosto obrežejo zgoraj in spodaj, zato pomembno vsebino ohrani na sredini. Za Google Discover Google priporoča slike, široke vsaj 1200 slikovnih pik, velik predogled, dovoljen z nastavitvijo max-image-preview:large, in sliko, nastavljeno z og:image ali označevanjem schema.org. Google tudi odsvetuje splošne slike, kot je logotip spletnega mesta.

og:image:width in og:image:height navajata velikost slike v slikovnih pikah. og:image:alt opisuje, kaj je na sliki, ni pa napis pod sliko. Protokol pravi, da naj stran z og:image navede tudi og:image:alt.

Naslov in opis

og:title se lahko razlikuje od elementa title. Ne potrebuje imena spletnega mesta, ker ga nosi og:site_name. Platforme dolga besedila skrajšajo na svojo dolžino, zato pomembne besede postavi na začetek. Oznake Open Graph so pomembne tudi zunaj družbenih omrežij. Google navaja vsebino og:title kot enega od virov za naslovne povezave v rezultatih iskanja, upošteva og:site_name za ime spletnega mesta in navaja og:image kot enega od načinov za določitev želene slike.

Oznake za X

Oznaka twitter:card izbere vrsto kartice. Vrednost summary_large_image zahteva veliko, široko sliko, summary pa majhno. Če ima tvoja stran že oznake Open Graph, pogosto zadošča, da dodaš twitter:card. Strani za razvijalce pri X za ta vodnik ni bilo mogoče prebrati, zato tam preveri aktualna pravila, preden se zaneseš na kakšno podrobnost.

Ena kartica na stran

Mnoga spletna mesta za vsako stran nastavijo enak naslov in sliko, pogosto prek teme. Potem je vsaka deljena povezava videti enako. Vsaki pomembni strani daj lasten og:title, og:description in og:image: strani izdelka fotografijo izdelka, članku njegovo glavno sliko. Za og:type protokol med drugimi vrstami uporablja website za splošno stran in article za članek. Sistem trgovine ali vsebin lahko te oznake samodejno izpolni iz naslova, povzetka in glavne slike vsake strani. Po spremembi preveri po eno stran vsake predloge.

Zakaj se predogled ne spremeni

Mnoge platforme kartico shranijo, ko jo sestavijo. Če pozneje spremeniš sliko ali naslov, ljudje morda še nekaj časa vidijo staro kartico. Pomaga novo ime datoteke za novo sliko, ker platforma nato vidi nov naslov. Nekatere platforme ponujajo orodje, ki stran ponovno pridobi.

Preden deliš stran

• Ali so og:title, og:type, og:image in og:url prisotni in ali je og:url kanonični naslov?
• Ali je vsak naslov popoln, s https://?
• Ali je slika dovolj široka, se naloži in je pomembna vsebina na sredini?
• Ali so nastavljeni og:image:alt, og:image:width in og:image:height?
• Ali obstaja oznaka twitter:card in ali je naslov dovolj kratek?

Delo z Do4U

Preverjanje kartic za družbena omrežja pokaže, kako je stran videti, ko nekdo deli njeno povezavo, in preveri oznake za predogledom. Vneseš en naslov. Do4U prebere stran in začetek njene slike za deljenje. Koda zbere oznake Open Graph, oznake kartic Twitter/X in nadomestke, torej naslov, metaopis in prvo sliko, ter kanonično povezavo in jezik. Dejanski format in velikost slike prebere iz datoteke in ju primerja z oznakami. Dobiš nevtralen predogled, tabelo vseh oznak, ugotovitve s kratko utemeljitvijo in predlagane oznake za kopiranje. Oznak, ki jih stran nastavi samo z JavaScriptom, ne vidi. UI se ne uporablja, preverjanje pa je brezplačno, z dnevno omejitvijo.

Do4U najde namige, ti preveriš in odločiš. Predogled je nevtralna skica: kako platforma prikaže povezavo, odloči platforma.