Generátor Open Graph tagů sestaví kód pro sdílecí náhledy během chvilky, ale samotné vygenerování tagů je jen první krok, protože sociální sítě si obsah stránky ukládají do vlastní mezipaměti. Předchozí článek o OG tag generátoru a Twitter Cards vysvětlil, v čem se oba systémy liší a jak je nastavit najednou, tenhle text se věnuje tomu, co se děje po zveřejnění tagů, tedy proč se aktualizace někdy neprojeví a jaké technické nároky platformy na obrázek i kód kladou.
Proč se změna OG tagů hned neprojeví ve sdíleném náhledu
Facebook, LinkedIn i další platformy si při prvním sdílení odkazu stáhnou hodnoty z OG tagů a uloží si je do vlastní databáze, aby při každém dalším sdílení stejné adresy nemusely stránku znovu načítat. Pokud později změníte titulek, popisek či obrázek, platforma bude dál nabízet starou verzi, dokud si sama neuvědomí, že je čas na aktualizaci, nebo dokud si stažení dat nevyžádáte ručně. Víte, že správná práce se SEO obrázků může zvýšit váš traffic?
Jak vynutit nové stažení tagů
Podle tohoto přehledu meta značek pro sociální sítě se k ověření i vynucení nového stažení hodí validátory jednotlivých platforem, konkrétně Facebook Sharing Debugger, X Card Validator, LinkedIn Post Inspector či Pinterest Rich Pins Validator. Vložení adresy do příslušného validátoru donutí platformu stránku znovu načíst a zobrazí zároveň přesně to, jaké hodnoty si z OG tagů přečetla, a tahle kontrola pomůže odhalit i překlepy nebo chybějící údaje.
Proč OG tagy vložené jen přes JavaScript často nefungují
Roboti sociálních sítí při načítání odkazu obvykle stahují jen surový HTML kód stránky a nečekají na to, až prohlížeč doběhne JavaScript a doplní do stránky obsah dynamicky. Pokud tedy OG tagy do hlavičky stránky vkládá až klientský skript po načtení, řada platforem je vůbec neuvidí a použije záložní hodnoty odvozené z jiných částí stránky. U webů postavených čistě na klientském JavaScriptu je proto potřeba OG tagy generovat už na serveru, přímo do zdrojového kódu, který robot dostane při prvním požadavku. Týká se to hlavně jednostránkových aplikací, kde se veškerý obsah stránky tradičně skládá až v prohlížeči, a proto je pro ně obvykle potřeba samostatné řešení typu předvykreslení stránky na serveru nebo alespoň té části kódu, jež obsahuje hlavičku s OG tagy.
Proč se Open Graph tagy pletou se strukturovanými daty
Open Graph tagy se dají snadno zaměnit se strukturovanými daty pro Google, ačkoli jde o dva samostatné systémy s jiným určením. Structured data ve formátu JSON-LD popisují sémantický obsah stránky především pro vyhledávače a mohou ovlivnit vzhled výsledku ve vyhledávání, zatímco Open Graph tagy cílí na sociální sítě a chatovací aplikace a starají se výhradně o podobu sdíleného náhledu. Web tedy v praxi potřebuje obojí zvlášť, protože jeden systém ten druhý nenahrazuje ani nedoplňuje automaticky.
Jak typ obsahu ovlivní podobu náhledu
Hodnota og:type určuje, jaký druh obsahu stránka představuje, například website, article či product, a pokud se nevyplní, prohlížeč i platformy počítají s výchozí hodnotou website. U typu article navíc dává smysl doplnit značky jako article:published_time či article:section, které některé platformy dokážou zobrazit jako součást náhledu, třeba datum publikace vedle titulku.
Dva náhledové obrázky pro různé situace sdílení
Do stránky lze vložit i víc značek og:image za sebou, takže platforma nebo přímo uživatel při ručním sdílení dostane na výběr, který obrázek se má v náhledu použít. Tahle možnost se hodí hlavně u obecnějšího obsahu, kde jeden univerzální náhled nemusí sedět úplně na každou příležitost sdílení.
Jaké nároky mají platformy na náhledový obrázek
Požadavky na náhledový obrázek se mezi platformami liší, ale existuje rozumný průnik. Facebook doporučuje poměr stran 1,91:1 s rozměrem alespoň 600×315 pixelů, ideálně kolem 1200×630 a širší, s maximální velikostí souboru 8 megabajtů. X pracuje s poměrem 2:1, minimem 300×157 pixelů a limitem 4096×4096 pixelů či 5 megabajtů. Obrázek s rozměrem 1200×630 pixelů proto funguje dobře na obou platformách najednou, jen počítejte s tím, že ho X mírně ořízne na výšku.
Co se stane, když náhledový obrázek chybí nebo je moc velký
Bez platného obrázku se při sdílení zpravidla zobrazí jen holý odkaz bez náhledu či obecný výchozí obrázek webu, a tahle situace citelně sníží šanci na proklik. Pokud je soubor větší než limit dané platformy nebo se nepodaří stáhnout v rozumném čase, dopadne to podobně, i když technicky OG tag na stránce existuje a odkazuje na správnou adresu.
Co generátor Open Graph tagů usnadní
Nástroj po vyplnění titulku, popisku, adresy obrázku a typu obsahu sestaví kompletní sadu tagů pro Open Graph i doplňkové Twitter Cards najednou, takže odpadá ruční hlídání správné syntaxe a shody mezi oběma systémy. Vygenerovaný kód stačí vložit do hlavičky šablony a přes validátor ověřit, že si ho platforma přečetla přesně tak, jak bylo zamýšleno.
Co se děje s vyplněnými údaji
Generátor pracuje jen s textem a adresami, které do formuláře zadáte, žádný soubor se nikam nenahrává ani neukládá na serveru nástroje. Přesto se do titulku ani popisku nevyplácí vkládat citlivé provozní údaje, protože tahle textová pole se po vygenerování stanou veřejně čitelnou součástí zdrojového kódu stránky.
Stojí za to čas od času projít starší stránky webu validátorem a ověřit, že jim OG tagy pořád odpovídají aktuálnímu obsahu, ne jen tomu, jak stránka vypadala v den prvního sdílení.
