Jak vypadá Váš web, když ho někdo sdílí

Zkuste si to

Otevřete si WhatsApp nebo Messenger. Pošlete si odkaz na svůj web. Co se zobrazí?

Pokud máte správně nastavené Open Graph tagy, uvidíte pěkný náhled: obrázek, nadpis, popis. Vypadá to profesionálně — jako odkaz na článek z novin nebo na produkt z e-shopu.

Pokud OG tagy nemáte? Zobrazí se holá URL adresa. Nebo se aplikace pokusí najít nějaký obrázek na stránce a vytáhne logo, reklamní banner nebo nic. Nadpis bude „Úvod" nebo „Home". Popis bude kus textu z navigačního menu.

Přesně tak to vidí i Vaši zákazníci, když někdo Váš web sdílí nebo doporučí.

Co jsou Open Graph tagy

Open Graph je standard vytvořený Facebookem v roce 2010. Je to sada značek v kódu stránky, které říkají sociálním sítím a aplikacím: „Takhle tento web vypadá, když ho někdo sdílí."

Základní tagy:

• og:title — nadpis, který se zobrazí v náhledu
• og:description — krátký popis pod nadpisem
• og:image — obrázek v náhledu (nejdůležitější prvek)
• og:url — adresa stránky
• og:type — typ obsahu (web, článek, firma…)

Tyto tagy čte každá velká platforma: Facebook, Instagram, WhatsApp, Messenger, LinkedIn, Twitter/X, Telegram, Discord, Slack, iMessage. Jeden standard — všude funguje.

Proč na tom záleží — čísla

Sdílený odkaz s pěkným náhledem dostane výrazně víc pozornosti:

• Příspěvky s obrázkem mají na Facebooku o 100 % vyšší engagement a o 114 % víc zobrazení než příspěvky bez obrázku
• Správně nastavené OG tagy přinášejí o 40–60 % víc kliků na sdílený odkaz
• Tumblr po zavedení OG tagů zaznamenal +250 % návštěvnosti z Facebooku

Představte si, že spokojený zákazník sdílí Váš autoservis kamarádovi na WhatsAppu. S OG tagy: hezký obrázek, název firmy, popis služeb. Bez OG tagů: https://autoservis-dvorak.cz — holý text, žádný kontext.

Kde všude se náhledy zobrazují

A tady je to zajímavé — nejde jen o sociální sítě. V Česku jsou to hlavně:

• Facebook — 7,2 milionu uživatelů v ČR (67 % populace)
• WhatsApp — přes 7,8 milionu uživatelů, nejpoužívanější messengerová aplikace v ČR
• Messenger — 5,25 milionu uživatelů
• Instagram — 4,43 milionu uživatelů (zobrazuje náhledy v DM a ve stories)
• LinkedIn — 3,27 milionu uživatelů (důležité pro B2B služby)
• iMessage — na každém iPhonu, automaticky generuje náhled
• Telegram, Discord, Slack — oblíbené v tech komunitách

Prakticky každá komunikační aplikace, kterou Vaši zákazníci používají, generuje náhled z OG tagů. A 67 % Čechů používá sociální sítě denně.

Obrázek je nejdůležitější

Tag og:image má největší vliv na to, jestli někdo na sdílený odkaz klikne. Doporučení:

• Rozměr: 1200 × 630 pixelů — funguje na všech platformách
• Formát: JPG nebo PNG — ne SVG, ne GIF
• Velikost: do 300 KB — kvůli rychlosti a kompatibilitě s Pinterestem
• Důležitý obsah uprostřed — různé platformy ořezávají okraje jinak
• Vždy absolutní HTTPS URL — relativní cesty nefungují, HTTP obrázky některé platformy odmítnou

Ideální og:image pro firemní web: název firmy, stručný popis služeb, vizuálně odpovídá designu webu. Ne fotka z fotobance — vlastní, cílený obrázek.

Co se stane, když OG tagy chybí

Platformy se pokusí uhádnout. Výsledek je téměř vždy špatný:

• Nadpis: Vytáhne obsah tagu <title> — často „Úvod", „Home" nebo název CMS systému
• Popis: Vezme prvních 200 znaků textu na stránce — může to být navigační menu, cookie lišta nebo patička
• Obrázek: Hledá největší obrázek na stránce — často najde logo, reklamní banner nebo dekorativní prvek. Nebo nic — a zobrazí šedý obdélník

Výsledek: sdílený odkaz vypadá amatérsky nebo je zcela nečitelný. Zákazník, který ho vidí ve svém feedu, ho přeskočí.

Twitter/X potřebuje jednu věc navíc

Twitter/X čte OG tagy jako všechny ostatní platformy, ale má jednu výjimku: bez tagu twitter:card nezobrazí žádný náhled, i když máte všechny OG tagy perfektní.

Stačí přidat jeden řádek:

<meta name="twitter:card" content="summary_large_image" />

Hodnota summary_large_image zobrazí velký obdélníkový obrázek nad nadpisem — výrazně lepší než malý čtvereček u varianty summary.

Nejčastější chyby

• Obrázek s relativní cestou — /images/og.jpg nefunguje. Musí být https://vasefirma.cz/images/og.jpg
• Příliš malý obrázek — pod 600×315 px Facebook zobrazí malý čtvereček místo velkého náhledu
• HTTP obrázek na HTTPS webu — smíšený obsah, některé platformy obrázek nenačtou
• Chybí twitter:card — na Twitteru/X žádný náhled
• Zastaralý cache — změnili jste obrázek, ale platformy stále zobrazují starý. Použijte debugger nástroje (viz níže) k vynucení aktualizace
• Chybí og:image úplně — platforma vybere náhodný obrázek ze stránky

Jak zkontrolovat náhled svého webu

Jak to řešíme u WebNaNovo

Každý web, který stavíme, má kompletní OG tagy od prvního dne — spolu s rychlostí, mobilní optimalizací, HTTPS a strukturovanými daty:

• Vlastní og:image — profesionální obrázek 1200×630 navržený na míru, ne generický placeholder
• og:title a og:description — cílené na Vaši firmu a služby
• Twitter Card — tag summary_large_image pro velký náhled na X/Twitteru
• Otestováno — před předáním ověříme náhled ve Facebook Debuggeru a LinkedIn Post Inspectoru

Když Váš spokojený zákazník pošle odkaz na Váš web kamarádovi, uvidí profesionální náhled — ne šedý obdélník. A to je reklama, za kterou neplatíte.