Karty pro sociální sítě: značky Open Graph a obrázek

Co je náhled odkazu

Když někdo sdílí odkaz na sociální síti nebo v messengeru, platforma přečte stránku a sestaví malou kartu: obrázek, titulek, krátký text a doménu. Většina platforem k tomu čte značky protokolu Open Graph, což jsou elementy meta v hlavičce (head) stránky. X, dříve Twitter, čte také vlastní značky, které začínají na twitter:. Každá platforma si kartu navrhuje sama a rozhoduje, kolik textu ukáže. Ty rozhoduješ o tom, co stránka platformám sdělí.

Základní značky

Protokol Open Graph, zveřejněný na ogp.me, uvádí čtyři vlastnosti, které by měla mít každá stránka: og:title, og:type, og:image a og:url. og:url je kanonická adresa stránky. Volitelné, ale užitečné jsou og:description, og:site_name a og:locale, jazyk a region značek, například de_DE.

<meta property="og:title" content="Letní výprodej: všechny hrnky zlevněné">
<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 modrých hrnků na dřevěném stole">
<meta property="og:description" content="Do 31. srpna: nižší ceny hrnků a talířů.">
<meta property="og:site_name" content="Ukázkový obchod">
<meta name="twitter:card" content="summary_large_image">

Každou adresu piš celou, s https://. Protokol definuje adresu jako URL, která používá http:// nebo https://, takže cesta jako /img/sale.jpg není platná hodnota. og:url by měla odpovídat kanonickému odkazu stránky. Pokud se značka objeví dvakrát s různými hodnotami, protokol dává přednost první z nich.

Obrázek pro sdílení

Většina náhledů zobrazuje obrázek na šířku. Běžně se doporučuje obrázek v poměru zhruba 1,91 : 1, například 1 200 × 630 pixelů, který se vejde do většiny karet bez oříznutí. Čtvercové obrázky bývají oříznuté nahoře a dole, proto drž důležitý obsah uprostřed. Pro Google Discover Google doporučuje obrázky široké alespoň 1 200 pixelů, velký náhled povolený nastavením max-image-preview:large a obrázek nastavený pomocí og:image nebo označení schema.org. Google také nedoporučuje obecné obrázky, jako je logo webu.

og:image:width a og:image:height uvádějí velikost obrázku v pixelech. og:image:alt popisuje, co je na obrázku, nejde o popisek. Protokol říká, že stránka s og:image by měla uvádět také og:image:alt.

Titulek a popis

og:title se může lišit od elementu title. Nepotřebuje název webu, protože ten nese og:site_name. Platformy zkracují dlouhé texty na vlastní délku, proto dej důležitá slova na začátek. Značky Open Graph mají význam i mimo sociální sítě. Google uvádí obsah og:title jako jeden ze zdrojů pro odkazy s titulky ve výsledcích vyhledávání, u názvu webu zohledňuje og:site_name a og:image uvádí jako jeden ze způsobů, jak určit preferovaný obrázek.

Značky pro X

Značka twitter:card volí typ karty. Hodnota summary_large_image žádá velký obrázek na šířku, summary malý. Pokud tvá stránka už má značky Open Graph, často stačí přidat twitter:card. Stránky pro vývojáře X se pro tohoto průvodce nepodařilo přečíst, proto si tam aktuální pravidla ověř, než se na nějaký detail spolehneš.

Jedna karta na stránku

Mnoho webů nastavuje stejný titulek a obrázek pro všechny stránky, často přes šablonu. Pak každý sdílený odkaz vypadá stejně. Dej každé důležité stránce vlastní og:title, og:description a og:image: stránce produktu fotku produktu, článku jeho hlavní obrázek. Pro og:type protokol mimo jiné používá website pro obecnou stránku a article pro článek. Systém obchodu nebo obsahu může tyto značky vyplňovat automaticky z titulku, shrnutí a hlavního obrázku každé stránky. Po změně zkontroluj jednu stránku od každé šablony.

Proč se náhled nemění

Mnoho platforem si kartu po sestavení uloží. Pokud později změníš obrázek nebo titulek, lidé mohou ještě nějakou dobu vidět starou kartu. Pomůže nový název souboru pro nový obrázek, protože platforma pak vidí novou adresu. Některé platformy nabízejí nástroj, který stránku načte znovu.

Než stránku sdílíš

• Jsou k dispozici og:title, og:type, og:image a og:url a je og:url kanonická adresa?
• Je každá adresa úplná, s https://?
• Je obrázek dost široký, načítá se a je důležitý obsah uprostřed?
• Jsou nastaveny og:image:alt, og:image:width a og:image:height?
• Je tu značka twitter:card a je titulek dost krátký?

Práce s Do4U

Kontrola karty pro sociální sítě ukáže, jak stránka vypadá, když se její odkaz sdílí, a zkontroluje značky za náhledem. Zadáš jednu adresu. Do4U přečte stránku a začátek jejího obrázku pro sdílení. Kód posbírá značky Open Graph, značky karet Twitter/X a záložní údaje, tedy titulek, meta popis a první obrázek, a také kanonický odkaz a jazyk. Ze souboru přečte skutečný formát a velikost obrázku a porovná je se značkami. Dostaneš neutrální náhled, tabulku všech značek, zjištění s krátkým zdůvodněním a navržené značky ke zkopírování. Značky, které stránka nastavuje jen pomocí JavaScriptu, nevidí. AI se nepoužívá a kontrola je zdarma, s denním limitem.

Do4U najde upozornění, ty zkontroluješ a rozhodneš. Náhled je neutrální skica: jak platforma odkaz zobrazí, rozhoduje platforma.