Proč se na Facebooku zobrazuje špatný popisek při sdílení mého webu?

Frustruje vás, že se při sdílení webu na Facebooku zobrazuje nesmyslný popisek či obrázek? Ukážeme vám, jak tento častý problém vyřešit krok za krokem a zajistit perfektní prezentaci.

Proč k tomu dochází?

Představte si, že sdílíte odkaz na svůj nový, krásný web na Facebooku s nadšením, a místo lákavého nadpisu a profi obrázku se objeví útržek textu z patičky webu a logo Facebooku. Známá situace, že? Důvod je jednodušší, než si myslíte, a nespočívá v tom, že by Facebook chtěl váš web sabotovat.

Když někdo sdílí odkaz na váš web, Facebook (a další sociální sítě jako LinkedIn nebo Twitter) se snaží "pochopit", co sdílený obsah představuje. Nespoléhá se ale na umělou inteligenci, která by hádala. Místo toho hledá ve zdrojovém kódu vašeho webu konkrétní instrukce, takzvané Open Graph (OG) tagy. Jde o speciální meta data, která říkají sociálním sítím, jaký titulek, popisek, obrázek a typ obsahu mají zobrazit.

Pokud tyto Open Graph tagy na vašem webu chybí, jsou neúplné, nebo špatně nastavené, Facebook nemá jasné instrukce. V takovém případě si vezme, co je po ruce – často první text z titulku stránky, náhodný obrázek (třeba z postranního panelu nebo loga) a kus textu, který v danou chvíli vyhodnotí jako "nejrelevantnější". Často se stane, že vybere kus textu, který pro sdílení není vůbec vhodný, například "Všechna práva vyhrazena" nebo část navigačního menu.

Dalším častým viníkem je cache Facebooku. I když chybu na svém webu opravíte, Facebook si může pamatovat starou, špatnou verzi z doby, kdy byl odkaz poprvé sdílen. Proto je potřeba mu "říct", aby si data stáhnul znovu.

Jak to opravit krok za krokem

Oprava problému s nesprávným popiskem při sdílení webu na Facebooku je naštěstí poměrně jednoduchá. Pojďme na to!

1. Pochopte Open Graph tagy: Tyto meta tagy se vkládají do <head> sekce HTML kódu vašeho webu. Mezi ty nejdůležitější patří:

   • og:title: Titulek, který se zobrazí (ideálně 60-90 znaků).
   • og:description: Popisek obsahu (ideálně 150-200 znaků).
   • og:image: URL obrázku, který se zobrazí.
   • og:url: Kanonická URL sdílené stránky.
   • og:type: Typ obsahu (např. website, article, product). Cílem je dát Facebooku přesně to, co chcete, aby zobrazil.

2. Pro uživatele WordPressu (nejčastější řešení): Pokud máte web na WordPressu, což je pro malé firmy a freelancery velmi časté, je řešení elegance a snadné. Nepotřebujete sahat do kódu:

   • Nainstalujte a aktivujte SEO plugin: Nejpoužívanější a nejlepší volbou jsou Yoast SEO nebo Rank Math. Oba jsou k dispozici zdarma ve své základní verzi.
   • Nastavte globální Open Graph data: Po aktivaci pluginu jděte do jeho nastavení (obvykle "Yoast SEO" nebo "Rank Math" v levém menu WordPressu). Vyhledejte sekci "Sociální sítě" nebo "Sdílení" a zde "Facebook". Zde můžete nastavit výchozí obrázek a popisek pro váš web. To se použije, pokud na konkrétní stránce nenastavíte nic jiného.
   • Nastavte Open Graph data pro konkrétní stránky/příspěvky: Při úpravě každé stránky nebo příspěvku uvidíte pod editorem blok od Yoast SEO nebo Rank Math. Zde najdete záložku "Sociální sítě" (nebo "Facebook"). Sem můžete nahrát unikátní obrázek pro sdílení (doporučené rozměry 1200x630px), napsat poutavý titulek a popisek, který se zobrazí právě při sdílení této konkrétní stránky na Facebooku. Nezapomeňte to udělat pro všechny klíčové stránky! Tím změníte popisek sdíleného odkazu na Facebooku pro každou vaši důležitou podstránku.

3. Pro weby bez WordPressu / s vlastním kódem: Pokud máte web postavený na jiném CMS nebo ručně kódovaný, budete muset Open Graph tagy přidat přímo do <head> sekce HTML kódu každé stránky. Příklad:

   <meta property="og:title" content="Název vaší stránky, který chcete sdílet" />
   <meta property="og:description" content="Poutavý popisek, který láká kliknout" />
   <meta property="og:image" content="https://vasweb.cz/obrazek_pro_facebook.jpg" />
   <meta property="og:url" content="https://vasweb.cz/konkretni-stranka" />
   <meta property="og:type" content="website" />
   

   Dbejte na to, aby content atribuce byly správně vyplněné a URL obrázku byla platná a veřejně dostupná.

4. Klíčový nástroj: Facebook Sharing Debugger: I když Open Graph tagy správně nastavíte, Facebook si může pamatovat starou verzi. Proto je nezbytné použít nástroj Facebook Sharing Debugger pro weby.

   • Jděte na: developers.facebook.com/tools/debug/
   • Vložte URL stránky, kterou jste opravili, a klikněte na tlačítko "Debug" (Ladit).
   • Nástroj vám ukáže, co Facebook "vidí". Pokud stále vidíte stará data nebo chyby, klikněte na tlačítko "Scrape Again" (Znovu stáhnout). Tím se Facebooku vynutí nové stažení dat z vašeho webu.
   • Zkontrolujte sekci "Link Preview" – zde uvidíte přesně, jak se na Facebooku sdílení webu s novým náhledem bude jevit.

5. Optimalizace obrázku: Obrázek je klíčový pro přilákání pozornosti. Doporučené rozměry pro Facebook jsou 1200x630px. Minimálně by měl mít 600x315px. Dbejte také na to, aby měl obrázek rozumnou velikost souboru (ideálně pod 300KB) pro rychlé načítání. URL obrázku musí být plně přístupná, bez přesměrování nebo ochran.

6. Vyprázdněte cache webu: Pokud používáte na svém webu (např. na WordPressu) nějaký caching plugin, je dobré po změnách vyprázdnit jeho cache. Někdy může tato cache bránit Facebooku v přístupu k nejnovější verzi kódu.

Kdy je lepší svěřit to odborníkovi?

Chápu, že ne každý má čas nebo chuť se ponořit do technických detailů webdesignu a kódu. I když se snažíte nastavit Open Graph pro WordPress podle návodu, někdy se může stát, že problém přetrvává, nebo se jednoduše v technických záležitostech necítíte jistě.

V takových případech je rozumné zvážit pomoc odborníka:

• Pokud se necítíte komfortně se správou pluginů, kódem, nebo vás frustruje, že i po opakovaných pokusech s Facebook Debuggerem se problém nedaří vyřešit.
• Máte-li komplexnější webovou strukturu, například vícejazyčný web, kde je potřeba zajistit správné zobrazení pro různé jazykové mutace.
• Když potřebujete zajistit nejen správné zobrazení na Facebooku, ale i na dalších sociálních sítích (Twitter Cards, LinkedIn, Pinterest apod.) a chcete mít jistotu, že vaše online prezentace je konzistentní a bezchybná.
• Jednoduše chcete-li ušetřit drahocenný čas a věnovat se tomu, co umíte nejlépe – svému podnikání. Profesionalita ve všech aspektech webu je vaše vizitka.

Závěr

Správné zobrazení vašeho webu na Facebooku je zásadní pro důvěryhodnost a úspěch vašeho digitálního marketingu. Věřím, že s tímto průvodcem problém vyřešíte a vaše odkazy se budou sdílet s perfektním náhledem. Pokud byste si s optimalizací nevěděli rady nebo potřebovali komplexní pomoc s webdesignem a online prezentací, neváhejte se obrátit na Vítka Hoška. Rád vám pomůže zajistit, aby váš web vždy vypadal profesionálně a lákal nové zákazníky.

Máte dotaz k vlastnímu webu? Napište mi a ozvu se vám.