Karty pre sociálne siete: značky Open Graph a obrázok

Čo je náhľad odkazu

Keď niekto zdieľa odkaz na sociálnej sieti alebo v messengeri, platforma prečíta stránku a zostaví malú kartu: obrázok, titulok, krátky text a doménu. Väčšina platforiem na to číta značky protokolu Open Graph, čo sú elementy meta v hlavičke (head) stránky. X, predtým Twitter, číta aj vlastné značky, ktoré sa začínajú na twitter:. Každá platforma si kartu navrhuje sama a rozhoduje, koľko textu ukáže. Ty rozhoduješ o tom, čo stránka platformám oznámi.

Základné značky

Protokol Open Graph, zverejnený na ogp.me, uvádza štyri vlastnosti, ktoré by mala mať každá stránka: og:title, og:type, og:image a og:url. og:url je kanonická adresa stránky. Voliteľné, ale užitočné sú og:description, og:site_name a og:locale, jazyk a región značiek, napríklad de_DE.

<meta property="og:title" content="Letný výpredaj: všetky hrnčeky zlacnené">
<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="Šesť modrých hrnčekov na drevenom stole">
<meta property="og:description" content="Do 31. augusta: nižšie ceny hrnčekov a tanierov.">
<meta property="og:site_name" content="Ukážkový obchod">
<meta name="twitter:card" content="summary_large_image">

Každú adresu píš celú, s https://. Protokol definuje adresu ako URL, ktorá používa http:// alebo https://, takže cesta ako /img/sale.jpg nie je platná hodnota. og:url by mala zodpovedať kanonickému odkazu stránky. Ak sa značka objaví dvakrát s rôznymi hodnotami, protokol dáva prednosť prvej z nich.

Obrázok na zdieľanie

Väčšina náhľadov zobrazuje obrázok na šírku. Bežne sa odporúča obrázok v pomere približne 1,91 : 1, napríklad 1 200 × 630 pixelov, ktorý sa zmestí do väčšiny kariet bez orezania. Štvorcové obrázky bývajú orezané hore a dole, preto drž dôležitý obsah v strede. Pre Google Discover Google odporúča obrázky široké aspoň 1 200 pixelov, veľký náhľad povolený nastavením max-image-preview:large a obrázok nastavený pomocou og:image alebo označenia schema.org. Google tiež neodporúča všeobecné obrázky, ako je logo webu.

og:image:width a og:image:height uvádzajú veľkosť obrázka v pixeloch. og:image:alt opisuje, čo je na obrázku, nejde o popis pod obrázkom. Protokol hovorí, že stránka s og:image by mala uvádzať aj og:image:alt.

Titulok a popis

og:title sa môže líšiť od elementu title. Nepotrebuje názov webu, pretože ten nesie og:site_name. Platformy skracujú dlhé texty na vlastnú dĺžku, preto daj dôležité slová na začiatok. Značky Open Graph majú význam aj mimo sociálnych sietí. Google uvádza obsah og:title ako jeden zo zdrojov pre odkazy s titulkami vo výsledkoch vyhľadávania, pri názve webu zohľadňuje og:site_name a og:image uvádza ako jeden zo spôsobov, ako určiť preferovaný obrázok.

Značky pre X

Značka twitter:card volí typ karty. Hodnota summary_large_image žiada veľký obrázok na šírku, summary malý. Ak tvoja stránka už má značky Open Graph, často stačí pridať twitter:card. Stránky pre vývojárov X sa pre tohto sprievodcu nepodarilo prečítať, preto si tam aktuálne pravidlá over, skôr ako sa na nejaký detail spoľahneš.

Jedna karta na stránku

Veľa webov nastavuje rovnaký titulok a obrázok pre všetky stránky, často cez šablónu. Potom každý zdieľaný odkaz vyzerá rovnako. Daj každej dôležitej stránke vlastné og:title, og:description a og:image: stránke produktu fotku produktu, článku jeho hlavný obrázok. Pre og:type protokol okrem iného používa website pre všeobecnú stránku a article pre článok. Systém obchodu alebo obsahu môže tieto značky vypĺňať automaticky z titulku, zhrnutia a hlavného obrázka každej stránky. Po zmene skontroluj jednu stránku z každej šablóny.

Prečo sa náhľad nemení

Veľa platforiem si kartu po zostavení uloží. Ak neskôr zmeníš obrázok alebo titulok, ľudia môžu ešte nejaký čas vidieť starú kartu. Pomôže nový názov súboru pre nový obrázok, pretože platforma potom vidí novú adresu. Niektoré platformy ponúkajú nástroj, ktorý stránku načíta znova.

Skôr ako stránku zdieľaš

• Sú k dispozícii og:title, og:type, og:image a og:url a je og:url kanonická adresa?
• Je každá adresa úplná, s https://?
• Je obrázok dosť široký, načíta sa a je dôležitý obsah v strede?
• Sú nastavené og:image:alt, og:image:width a og:image:height?
• Je tu značka twitter:card a je titulok dosť krátky?

Práca s Do4U

Kontrola náhľadu na sociálnych sieťach ukáže, ako stránka vyzerá, keď sa jej odkaz zdieľa, a skontroluje značky za náhľadom. Zadáš jednu adresu. Do4U prečíta stránku a začiatok jej obrázka na zdieľanie. Kód zozbiera značky Open Graph, značky kariet Twitter/X a záložné údaje, teda titulok, meta popis a prvý obrázok, a tiež kanonický odkaz a jazyk. Zo súboru prečíta skutočný formát a veľkosť obrázka a porovná ich so značkami. Dostaneš neutrálny náhľad, tabuľku všetkých značiek, zistenia s krátkym zdôvodnením a navrhované značky na skopírovanie. Značky, ktoré stránka nastavuje len pomocou JavaScriptu, nevidí. AI sa nepoužíva a kontrola je zadarmo, s denným limitom.

Do4U nájde upozornenia, ty skontroluješ a rozhodneš. Náhľad je neutrálny náčrt: ako platforma odkaz zobrazí, rozhoduje platforma.