Generátor Open Graph meta tagů

Značky, ze kterých se sestavuje náhled odkazu

Když někdo vloží váš odkaz do příspěvku nebo zprávy, aplikace pošle na stránku prohledávač a přečte několik značek <meta> v <head>. Tyto značky pocházejí z protokolu Open Graph, který uvádí čtyři jako povinné:

• og:title: titulek tak, jak se má zobrazit v náhledu.
• og:type: co stránka je. website se hodí pro většinu stránek a article pro příspěvek na blogu. Protokol také definuje typy jako profile, book, video.movie a music.song.
• og:image: URL obrázku, který stránku reprezentuje.
• og:url: kanonická URL, kterou protokol nazývá trvalým ID objektu.

Protokol také definuje volitelné značky a generátor zapisuje ty užitečné: og:description, og:site_name a podrobnosti o obrázku og:image:width, og:image:height a og:image:alt. Ohledně alternativního textu je protokol přímý: pokud stránka uvádí og:image, měla by uvést i og:image:alt, a tento text popisuje, co je na obrázku, nikoli jeho titulek.

Co přidává X: twitter:card

X čte Open Graph také. Jeho referenční příručka ke značkám karet (vývojářská dokumentace X, odkazovaná zde přes Internet Archive, protože původní stránka nyní přesměrovává) uvádí záložní hodnotu pro každou značku: twitter:title se vrací na og:title, twitter:description na og:description, twitter:image na og:image a twitter:image:alt na og:image:alt. Jedinou značkou, kterou stojí za to přidat, je tedy twitter:card, která určuje rozvržení. Pokud ji vynecháte, stejná příručka říká, že X se může vrátit k malé souhrnné kartě, i když jste chtěli tu velkou:

• summary_large_image: obrázek na celou šířku nad titulkem. Stránka X o kartě s velkým obrázkem uvádí, že obrázky pro ni podporují poměr stran 2:1, s minimálními rozměry 300 × 157 a maximem 4096 × 4096 pixelů, do 5 MB, ve formátu JPG, PNG, WEBP nebo GIF. SVG není podporováno.
• summary: menší karta se čtvercovým obrázkem. Stránka X o souhrnné kartě uvádí, že obrázek podporuje poměr 1:1, od 144 × 144 až do 4096 × 4096 pixelů, a ořízne se na čtverec na všech platformách.

Stejná reference uvádí karty app a player, které potřebují další pole pro App Store nebo přehrávač videa, takže je zde vynecháváme. Dokumentuje také limity, které výše uvedené kontroly používají: 70 znaků pro titulek, 200 pro popis a 420 pro alternativní text.

Velikosti obrázků podle platforem

• LinkedIn: jeho průvodce sdílením webu vyžaduje og:title, og:image, og:description a og:url a uvádí maximální velikost souboru 5 MB, minimum 1200 × 627 pixelů a doporučený poměr 1,91:1.
• Meta: její osvědčené postupy sdílení doporučují používat obrázky široké alespoň 1080 pixelů pro obrazovky s vysokým rozlišením a alespoň 600 pixelů pro zobrazení reklam s obrázkovým odkazem. Stejná stránka vyžaduje og:image:width a og:image:height, aby crawler mohl obrázek vykreslit okamžitě bez nutnosti jej nejprve stáhnout a zpracovat.

Obrázek 1200 × 630 splňuje všechny tyto podmínky: má alespoň 1200 × 627 pro LinkedIn, je širší než 1080 pro Meta a má poměr 1,905:1, což je do 5 % od poměru 2:1 u X.

Zkontrolujte jej a obnovte staré náhledy

Aplikace si ukládají do mezipaměti to, co prošly, takže oprava značek neopraví náhled, který už byl uložen. Obě velké sítě vám k tomu nabízejí nástroj:

• Sharing Debugger od Meta ukazuje značky, které jeho crawler prochází, včetně případných chyb nebo varování, a spustí nové procházení. Průvodce pro webmastery od Meta jej popisuje a stránka osvědčených postupů uvádí, že se procházený obsah jinak aktualizuje ve standardním 24hodinovém intervalu.
• Post Inspector od LinkedInu obnoví adresu URL v mezipaměti. Stránka nápovědy LinkedInu uvádí, že obnovení se týká pouze nových příspěvků: příspěvky, které už adresu URL obsahují, si ponechají starý náhled.

Co tento nástroj nedělá

Nenačítá vaši stránku ani obrázek, takže nevidí, co je skutečně online, a náhled výše je spíš textový náčrt než vykreslení. Zapisuje značky; váš web je stále musí poskytovat v <head> stránky, v HTML, který crawler obdrží. Značky přidané později JavaScriptem nemusí být nikdy viděny. A nezapisuje karty app ani player, ani další vlastnosti, které definují typy jako book nebo video.movie.

Pokud nechcete psát toto vše ručně

Hermoso je marketing na autopilota: zkoumá reklamy, které už ve vašem trhu fungují, vytváří obrázkové a video reklamy odpovídající vaší značce, plánuje příspěvky a spouští placené kampaně na vašich vlastních reklamních účtech. Funguje ve webové aplikaci nebo v Claude, ChatGPT a Cursor prostřednictvím svého serveru MCP.

Bezplatné nástroje: Tvorba UTM odkazů · Generátor QR kódů · Průvodce velikostmi pro sociální sítě

Často kladené dotazy

Které Open Graph tagy jsou povinné?

Protokol Open Graph uvádí čtyři povinné vlastnosti: og:title, og:type, og:image a og:url. Tagy og:description, og:site_name a šířka, výška a alt u og:image jsou volitelné, ale stojí za to je přidat.

Potřebuji twitter:title a twitter:image, když mám tagy og:?

Ne. Referenční dokumentace karet na X říká, že twitter:title, twitter:description, twitter:image a twitter:image:alt se vrací ke svým ekvivalentům og:. Tag, který stojí za přidání, je twitter:card, který volí rozložení karty.

Jakou velikost by měl mít Open Graph obrázek?

LinkedIn požaduje alespoň 1200 × 627 pixelů v poměru 1.91:1 a pod 5 MB. Meta doporučuje šířku alespoň 1080 pixelů. Karta s velkým obrázkem na X podporuje poměr 2:1 od 300 × 157 do 4096 × 4096. Obrázek 1200 × 630 vyhoví všem třem.

Proč se u mého odkazu po změně tagů stále zobrazuje starý obrázek?

Aplikace si uložila starý sken do mezipaměti. Projeďte URL přes Sharing Debugger od Mety nebo Post Inspector od LinkedInu, aby se načetla znovu. LinkedIn upozorňuje, že příspěvky, které URL už sdílejí, si ponechají starý náhled.

Proč jsou ve výstupu změněné uvozovky a ampersandy?

Jsou HTML-escapované, aby tag zůstal platný. Titulek jako Tom & Jerry's "Sale" se v atributu content stane Tom & Jerry's "Sale" a prohlížeče i crawlery jej přečtou zpět jako původní text.

Načítá nástroj můj obrázek?

Ne. Nic, co napíšete, se nikam neodesílá a URL obrázku se nikdy nenačítá, proto náhled ukazuje zástupný obrázek místo samotné fotky.