tigtools

Náhled Open Graph

Zadejte, co obsahují vaše Open Graph značky, abyste viděli přibližně, jak může sdílený odkaz vypadat a zda má obrázek správnou velikost.

Běží ve vašem prohlížeči Bez registrace

Prohlížeč načte tento obrázek přímo z vámi zadané adresy.

Doporučeno: 1200 × 630 px (1,91:1), JPG nebo PNG, do několika megabajtů. Důležitý obsah umístěte dál od okrajů, protože některé aplikace ořezávají na čtverec.

Velká karta odkazu
Bez obrázku
example.com
—
Malá karta odkazu
Bez obrázku
example.com
—

Tyto karty jsou obecné přiblížení. Každá aplikace má vlastní rozvržení, písma a ořezávání a ukládá náhledy do mezipaměti.

Jak používat

  1. Zadejte og:title a og:description, které na stránce používáte nebo plánujete použít.
  2. Vložte úplnou URL adresu obrázku og:image. Nástroj ji načte a zobrazí její skutečnou velikost v pixelech.
  3. Přidejte URL adresu stránky nebo doménu, poté porovnejte náhledy velké a malé karty a opravte případná upozornění.

Jak to funguje

Když někdo sdílí odkaz, většina sociálních sítí a chatovacích aplikací stránku načte a přečte si její Open Graph značky: og:title, og:description, og:image a og:url. Z nich pak vytvoří kartu. Široký obrázek s poměrem přibližně 1,91:1 obvykle vytvoří velkou kartu s obrázkem nahoře; malý nebo čtvercový obrázek často vytvoří kompaktní kartu s miniaturou vedle textu.

Tento nástroj zobrazuje dva obecné styly karet, aby vám pomohl posoudit délku a kompozici obrázku. Po načtení obrázku v prohlížeči kontroluje jeho přirozenou velikost: pod 200 × 200 px mnoho aplikací obrázek přeskočí, pod 600 × 315 px obvykle použijí malé rozvržení a poměr výrazně odlišný od 1,91:1 znamená oříznutí. Rozměr 1200 × 630 px je široce doporučovaný, protože zůstává ostrý i na displejích s vysokým rozlišením.

Náhled nemůže přesně ukázat, co zobrazí konkrétní aplikace. Aplikace se liší v počtu řádků titulku a popisku, některé popisek ignorují a většina si náhled po prvním sdílení nějakou dobu ukládá do mezipaměti, takže změny značek se nemusí projevit ihned. Mnoho platforem nabízí vlastní nástroj pro ladění, kterým lze tuto mezipaměť obnovit.

Příklady

Snímek obrazovky použitý jako og:image

Snímek obrazovky 1440 × 900 má poměr stran 1,6:1. Nástroj na tento poměr upozorní: u velké karty by se ořízly horní a dolní okraje. Export verze 1200 × 630 předejde překvapením.

Logo jako jediný obrázek

Logo 180 × 180 je menší než 200 × 200 px, takže mnoho aplikací by nezobrazilo žádný obrázek. Místo toho použijte větší široký banner, který logo obsahuje.

Kontrola délky titulku

og:title o 90 znacích se v náhledu velké karty zalomí na tři řádky. Zkrácení na přibližně 60 znaků udrží kartu ve většině aplikací přehlednou.

Časté dotazy

Proč můj odkaz vypadá na Facebooku, LinkedInu a X jinak?

Každá platforma vykresluje karty podle vlastního rozložení, ořezu a limitů pro text a některé zobrazují popis, zatímco jiné ne. Tento náhled je obecné přiblížení, nikoli kopie designu žádné platformy.

Proč se po změně og:image stále zobrazuje starý obrázek?

Platformy ukládají náhledy odkazů do mezipaměti. Znovu načtěte stránku pomocí vlastního ladicího nástroje platformy pro sdílení nebo počkejte, až platnost mezipaměti vyprší. Pomůže také změnit název souboru obrázku.

Mohu použít obrázek ve formátu SVG nebo WebP?

SVG většina platforem nepodporuje. WebP funguje v mnoha aplikacích, ale ne ve všech; nejbezpečnější volbou je JPG nebo PNG.

Proč nástroj nemůže načíst můj obrázek?

URL může vyžadovat přihlášení, odkazovat na HTML stránku místo obrázku nebo server může blokovat požadavky z jiných stránek. Pokud jej zde prohlížeč nedokáže načíst, nemusí jej načíst ani prohledávač sociální platformy.

Soukromí

Zadaný text zůstává ve vašem prohlížeči. Pro kontrolu obrázku jej váš prohlížeč načte přímo z vámi zadané adresy URL (bez odeslání referreru), takže server uvidí běžný požadavek na obrázek. Na servery TIG Tools se nic neodesílá.