Proč váš náhled odkazu vypadá špatně a jak ho opravit pomocí Open Graph

Sdílíte odkaz na novou vstupní stránku a náhled se zobrazí bez obrázku, s titulkem vaší úvodní stránky nebo s bannerem ze dvou kampaní zpátky. Stránka sama je v pořádku. Náhled se skládá z něčeho jiného: z několika řádků kódu v hlavičce stránky, které většina lidí nikdy nevidí.

Tento článek popisuje šest příčin, které stojí za většinou rozbitých náhledů, v pořadí, v jakém je stojí za to kontrolovat. Pokud chcete značky napsat za vás, bezplatný generátor Open Graph je vytvoří, správně je escapuje a zkontroluje podle níže uvedených limitů.

Jak vzniká náhled odkazu

Když se odkaz vloží do příspěvku nebo zprávy, aplikace pošle na stránku crawler. Ten přečte značky <meta> v <head> a podle nich vykreslí kartu. Tyto značky pocházejí z protokolu Open Graph, který čtyři z nich označuje jako povinné:

• og:title: název stránky tak, jak má být zobrazen na kartě.
• og:type: o jaký typ stránky jde, obvykle website nebo article.
• og:image: obrázek.
• og:url: kanonická adresa stránky, kterou protokol nazývá jejím trvalým identifikátorem.

Přidejte og:description a máte kartu. Úplná minimální sada vypadá takto:

<meta property="og:title" content="Spring linen collection">
<meta property="og:description" content="Breathable shirts in three colours.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/spring">
<meta property="og:image" content="https://example.com/og/spring.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Three linen shirts on a rail">
<meta name="twitter:card" content="summary_large_image">

Příčina 1: značky chybí

Bez značek og: se každá aplikace musí spolehnout na to, co na stránce najde jinde, třeba <title> nebo první obrázek, a co vybere, záleží na konkrétní aplikaci. Proto jeden odkaz může vypadat v pořádku na jednom místě a na druhém rozbitě. Oprava spočívá v tom, že na každé stránce, kterou lidé pravděpodobně sdílejí, nejen na úvodní, uvedete čtyři povinné značky a popis. Produktová stránka sdílená se značkami úvodní stránky ukáže kartu úvodní stránky.

Příčina 2: adresa obrázku je relativní

Tuhle chybu snadno přehlédnete, protože stránka ve vašem vlastním prohlížeči vypadá v pořádku. content="/images/og.jpg" funguje v prohlížeči, který už je na vašem webu, ale crawler je mimo něj. Zapište plnou adresu začínající https:// a vaší doménou. Totéž platí pro og:url.

Příčina 3: obrázek má špatnou velikost nebo tvar

Každá platforma uvádí, co chce, a v širokém obrázku se shodnou:

• LinkedIn v průvodci, jak web připravit ke sdílení uvádí, že obrázek má mít alespoň 1200 × 627 pixelů, doporučený poměr 1,91:1 a nesmí být větší než 5 MB.
• Meta v osvědčených postupech pro sdílení doporučuje 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.
• Velká obrázková karta X podporuje poměr 2:1 od 300 × 157 až do 4096 × 4096 pixelů, méně než 5 MB, ve formátu JPG, PNG, WEBP nebo GIF, a nepodporuje SVG, podle její vývojářské dokumentace (původní stránka nyní přesměrovává, takže tento odkaz vede přes Internet Archive).

Jeden rozměr vyhovuje všem třem: 1200 × 630. Splňuje minimum LinkedIn 1200 × 627, je širší než 1080 od Meta a jeho poměr je 1200 ÷ 630 = 1,905, tedy v rozmezí 5 % od 2:1 u X. Čtvercový nebo vysoký obrázek se oříznou do široké karty, takže důležitou část držte uprostřed. Kalkulačka poměru stran ukáže, co zachová střední výřez.

Velikost uveďte i v značkách. Meta žádá og:image:width a og:image:height, aby její crawler mohl obrázek vykreslit hned a nemusel ho nejdřív stahovat a zpracovávat. Její průvodce pro webmastery to říká jednoduše: uveďte výšku a šířku, aby se obrázek při prvním sdílení stránky načetl správně.

Příčina 4: značky přidává JavaScript

Některé stavitelé webů a jednostránkové aplikace přidávají meta značky až po načtení stránky v prohlížeči. Crawler, který čte HTML posílané vaším serverem, ten kód nemusí nikdy spustit, takže značky neuvidí. Zkontrolujte zdroj stránky (Zobrazit zdroj, ne inspektor, který ukazuje stránku až po běhu skriptů). Pokud značky ve zdroji nejsou, crawler je pravděpodobně také nevidí. Oprava patří do nastavení vašeho webu nebo do jeho šablony na serveru.

Příčina 5: speciální znaky rozbily značku

Titulek s dvojitou uvozovkou, například The "only" linen you need, předčasně ukončí atribut content="..." a zbytek titulku se ztratí. Znaky, na kterých v atributu záleží, je třeba escapovat: " se změní na ", & na & a < na <. Prohlížeče a crawlery je při čtení značky vrátí zpět na původní znaky. Generátor to udělá za vás, a to je polovina důvodu, proč ho používat.

Příčina 6: aplikace si pamatuje starou verzi

Značky jste opravili, odkaz znovu sdílíte a stará karta je pořád tam. To je cache. Aplikace si uloží, co načetla, a znovu to použijí. Obě velké sítě nabízejí nástroj, kterým si vyžádáte nový pohled:

• Facebook: vložte URL do Sharing Debuggeru od Meta. Její průvodce pro webmastery říká, že ukáže, které značky crawler načetl, včetně chyb a varování, a spustí nové načtení. Osvědčené postupy Meta dále uvádějí, že načtený obsah se jinak obnovuje ve standardním 24hodinovém cyklu.
• LinkedIn: projděte URL přes Post Inspector. Nápověda LinkedIn na stránce nápovědy jasně říká, jaké je omezení: obnovení mění náhled jen u nových příspěvků. Příspěvky, které už URL obsahují, si podrží starý náhled.

Na tuto poznámku o LinkedIn nezapomeňte před spuštěním. Zkontrolujte náhled před odesláním prvního příspěvku, protože starý příspěvek nelze opravit opravou stránky.

Značka twitter:card: jeden řádek, ne čtyři

X čte i Open Graph. Jeho referenční příručka karet uvádí záložní hodnotu pro každou značku: twitter:title se přebírá z og:title, twitter:description z og:description, twitter:image z og:image a twitter:image:alt z og:image:alt. Nemusíte tedy všechno opakovat. Jediný řádek, který přidáte, je twitter:card: summary_large_image pro obrázek přes celou šířku, nebo summary pro malý čtvercový. Pokud ho vynecháte, táž příručka říká, že X může místo toho zobrazit malou souhrnnou kartu, a proto se velký obrázek někdy zobrazí jako miniatura. Stejná příručka omezuje titulek na 70 znaků, popis na 200 a alternativní text na 420.

Pětiminutová kontrola před spuštěním

1. Zobrazte zdroj stránky a najděte značky og:. Všechny čtyři povinné a popis.
2. Ověřte, že og:image a og:url začínají na https://.
3. Otevřete adresu obrázku samostatně v prohlížeči. Měl by se načíst ve velikosti 1200 × 630 nebo blízké.
4. Vložte URL do Sharing Debuggeru a Post Inspectoru a přečtěte si karty.
5. Teprve potom odkaz sdílejte.

Kde se Hermoso hodí

Hermoso je AI marketingový agent: zjistí, které reklamy už ve vašem trhu fungují, vytvoří obrazové a video reklamy v souladu se značkou, naplánuje příspěvky na vaše vlastní účty a spouští placené kampaně na vašich vlastních reklamních účtech. Dobrý náhled odkazu z těchto příspěvků dělá něco, na co se dá kliknout. Hermoso funguje ve webové aplikaci nebo uvnitř Claude, ChatGPT a Cursor přes svůj MCP server.

Časté dotazy

Proč můj odkaz na Facebooku nebo LinkedIn nezobrazuje obrázek?

Obvykle chybí značka og:image, používá relativní cestu místo plné adresy https://, nebo odkazuje na příliš malý obrázek. LinkedIn žádá alespoň 1200 × 627 pixelů. Po opravě projděte URL přes Sharing Debugger od Meta nebo Post Inspector od LinkedIn, aby ho znovu načetly.

Jak velký má být obrázek Open Graph?

1200 × 630 pixelů funguje u velkých sítí. Splňuje minimum 1200 × 627 od LinkedIn při poměru zhruba 1,91:1, je širší než 1080 pixelů doporučených Meta a je blízko poměru 2:1, který X podporuje u velkých obrázkových karet.

Jak aktualizuji náhled odkazu na LinkedIn?

Opravte značky na stránce a potom zadejte URL do Post Inspectoru na LinkedIn. Obnovený náhled se použije jen u nových příspěvků. Příspěvky, které už URL obsahují, si podrží starý náhled.

Potřebuji značky twitter:, když mám značky og:?

Jen twitter:card. X se vrací k og:title, og:description, og:image a og:image:alt, když verze twitter: chybí.