Sdílíte článek na Facebooku a místo správného obrázku se ukáže logo webu, starý titulek nebo vůbec nic? Nejdřív zkontrolujte, co si Facebook z vaší stránky skutečně načetl. K tomu slouží Facebook Sharing Debugger. Pro LinkedIn existuje podobný nástroj Post Inspector.
Nástroje rovnou k použití: Facebook Sharing Debugger a LinkedIn Post Inspector.
Jak zkontrolovat a obnovit náhled na Facebooku
- Otevřete Sharing Debugger. Pokud vás Facebook vyzve, přihlaste se.
- Vložte přesnou URL, kterou chcete sdílet, a spusťte Debug. Kontrolujte konkrétní článek, ne jen homepage.
- Prohlédněte si náhled a načtené tagy. Sedí obrázek, titulek a cílová adresa? Zkontrolujte i čas posledního načtení. Starý výsledek nemusí odpovídat tomu, co máte právě na webu.
- Opravte údaje na webu. Upravte nastavení článku, obrázek nebo šablonu. Potom vymažte příslušnou cache webu a případně CDN, pokud ji používáte.
- Klikněte na Scrape Again. Facebook požádáte o nové načtení stránky. Znovu porovnejte náhled i hodnoty tagů. Když jsou stále špatně, hledejte příčinu níže.
Debugger neopravuje web. Ukazuje, co z něj Facebook získal. Pokud mu server pořád posílá starý obrázek, samotné opakování testu nic nevyřeší. Postup pro obnovení dat ve Facebook Sharing Debuggeru popisuje také dokumentace Yoastu.
Co je Open Graph a které tagy kontrolovat?
Open Graph je protokol pro popis sdílené stránky pomocí metadat. Zjednodušeně sociální síti říkáte: tohle je titulek, tohle obrázek a sem odkaz vede. Nejde ale o pevnou šablonu vzhledu. Výsledné zobrazení řídí konkrétní platforma.
| Tag | Co má obsahovat |
|---|---|
og:title | Titulek konkrétní stránky, ne univerzální název webu. |
og:type | Typ obsahu. Pro článek article, pro běžnou webovou stránku website. |
og:url | Kanonickou URL, která daný obsah jednoznačně identifikuje. |
og:image | Adresu obrázku pro sdílení. Použijte úplnou HTTPS adresu dostupného souboru. |
og:description | Krátké shrnutí obsahu. Nenechávejte síť hádat, kterou část stránky má použít. |
První čtyři vlastnosti tvoří povinný základ protokolu. og:description je v samotné specifikaci volitelný, ale pro běžné sdílení ho doporučuji vyplnit. LinkedIn ho ve svých požadavcích uvádí přímo.
Ukázka Open Graph metadat
Takhle může vypadat základ pro článek. Adresy na example.com jsou ilustrační. Při implementaci je nahraďte skutečnou adresou stránky a existujícího obrázku.
<meta property="og:type" content="article" />
<meta property="og:title" content="Jak opravit náhled odkazu na Facebooku" />
<meta property="og:description" content="Kontrola metadat, obrázku a cache při sdílení článku." />
<meta property="og:url" content="https://example.com/clanek/" />
<meta property="og:image" content="https://example.com/obrazky/nahled-1200x630.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Ukázka náhledu sdíleného článku" />
<meta property="og:locale" content="cs_CZ" />
<meta property="og:site_name" content="Název webu" />Tyto tagy patří do <head> stránky, ne do textu článku. Ve WordPressu je nechte generovat pluginem nebo šablonou. Rozměry a typ obrázku musí odpovídat skutečnému souboru. Přepsáním čísel v metadatech obrázek nezvětšíte.
Jaký obrázek připravit?
Pro běžný náhled odkazu bych připravil JPG nebo PNG o rozměrech 1200 × 630 px. Je to praktická výchozí volba, ne univerzální požadavek protokolu Open Graph. LinkedIn pro sdílení odkazů uvádí minimum 1200 × 627 px, doporučený poměr 1,91 : 1 a maximálně 5 MB.
Soubor bych držel ideálně ve stovkách kB, pokud tím neutrpí kvalita. Důležitý text a logo nedávejte těsně k okrajům a výsledek zkontrolujte i na mobilu. Obrázek má dávat smysl i jako malý náhled. Zmenšený screenshot celé stránky bývá spíš test zraku.
Proč se pořád zobrazuje špatný náhled?
1. Web už je opravený, ale někde zůstala stará verze
Oddělte cache webu, cache CDN a data uložená sociální sítí. Nejdřív ověřte, že web opravdu vrací nová metadata i nepřihlášenému návštěvníkovi. Až potom obnovujte náhled v debuggeru. Na cache serveru, pluginu a CDN upozorňuje i Yoast.
Pokud jste přepsali obrázek pod stejným názvem a dál se vrací starý, zkuste nový soubor, například nahled-clanku-v2.jpg, a aktualizujte og:image. Nová adresa obrázku není totéž co nová adresa článku. URL článku kvůli výměně náhledu měnit nepotřebujete.
2. Vám stránka funguje, robot sociální sítě se k ní nedostane
Ověřte dostupnost článku i samotného obrázku. Přihlášení, ochrana proti botům, blokace v robots.txt, přesměrování nebo chyba serveru mohou načtení zkomplikovat. Anonymní okno je dobrý první test, ale nenahrazuje požadavek ze serverů sociální sítě. LinkedIn výslovně upozorňuje i na obrázky v chráněných adresářích.
Pro náhledy sdílených odkazů Meta používá crawler facebookexternalhit. Při potížích nechte správce projít serverové a bezpečnostní logy. Nevypínejte kvůli tomu ochranu celého webu. Nejdřív zjistěte, který konkrétní požadavek se blokuje a proč.
3. Tagy vidíte v prohlížeči, ale ne v HTML pro crawler
Nespoléhejte jen na záložku Elements v DevTools. Ta ukazuje i změny provedené JavaScriptem. Kontrolujte HTML odpověď, kterou dostane crawler. Metadata doplněná až skriptem v prohlížeči nebo přes GTM nejsou spolehlivá cesta pro náhledy sdílení. U JavaScriptových webů ověřte i způsob doručení metadat; například Next.js řeší zvlášť doručení metadat robotům, kteří nespouštějí JavaScript.
4. Open Graph generuje několik pluginů zároveň
Jeden titulek ze šablony, druhý ze SEO pluginu a třetí z pluginu na sdílení. Více tagů tady neznamená lepší výsledek. Určete jeden zdroj metadat a vypněte konfliktní výstupy. Na tento problém upozorňuje i dokumentace Yoastu k duplicitním Open Graph tagům.
Pozor na rozdíl: několik záměrně uvedených og:image protokol dovoluje. To není stejný problém jako dva různé titulky nebo dvě konfliktní adresy stránky.
5. Nesedí adresa stránky
Porovnejte sdílenou URL, adresu po přesměrování, og:url a rel="canonical". Nemusejí být doslova stejné, třeba kvůli měřicím parametrům. Musejí ale dávat smysl pro tentýž obsah. Článek by neměl omylem identifikovat homepage nebo jiný článek.
6. Debugger hlásí chybějící fb:app_id
Kvůli běžnému náhledu odkazu nemusíte zakládat Facebook aplikaci. Samotné chybějící fb:app_id není důvod, proč by se nemohl zobrazit obrázek a titulek. Yoast vysvětluje, proč tento tag není pro sdílení vyžadovaný. Nejdřív řešte dostupnost stránky, obrázek a skutečný obsah metadat. Ne každé varování si zaslouží nový plugin.
Jak Open Graph upravit ve WordPressu
Začněte v pluginu, který už používáte pro SEO. Ověřte, že má zapnuté generování Open Graph dat, a u konkrétního článku nastavte sociální titulek, popis a obrázek. Například v Yoastu najdete tyto možnosti v části Social media appearance.
Nespoléhejte na to, že náhledový obrázek článku musí být automaticky i výsledným og:image. Zkontrolujte, co se skutečně vygenerovalo. Pro články bez vlastního obrázku doporučuji nastavit rozumný výchozí obrázek webu, ale u důležitých stránek připravit vlastní.
Po uložení znovu projděte celý postup: HTML stránky, cache webu, debugger a náhled při novém sdílení. Samotné správně vyplněné políčko v administraci ještě není důkaz, že je všechno v pořádku.
Bonus: kontrola náhledu na LinkedInu
Otevřete LinkedIn Post Inspector, vložte URL a spusťte Inspect. Prohlédněte si náhled a informace o načtení. Facebook a LinkedIn testujte zvlášť. Úspěšný test na jedné síti není kontrolou té druhé.
Důležité: obnovení náhledu na LinkedInu nezmění už zveřejněné příspěvky. Podle oficiální nápovědy LinkedInu se aktualizované údaje použijí pro nové příspěvky. Opravu proto ověřujte při vytváření nového příspěvku, ne jen pohledem na ten starý.
Rychlá technická kontrola přes curl
Pro technické kolegy: následující příkaz v curl stáhne HTML a HTTP hlavičky. Nahraďte ukázkovou URL testovanou stránkou. Ve Windows podle prostředí použijte curl.exe.
curl -sS -L --max-time 20 --max-redirs 5 -A "facebookexternalhit/1.1" -D og-headers.txt -o og-page.html "https://example.com/clanek/"V souboru og-page.html vyhledejte og: a ověřte, že jste místo článku nestáhli přihlašovací stránku nebo bezpečnostní výzvu. V og-headers.txt uvidíte i odpovědi při přesměrování.
Změna User-Agentu z vás neudělá skutečný crawler Facebooku. Test může odhalit rozdílnou odpověď serveru, ale nepotvrzuje dostupnost z infrastruktury Mety. K tomu potřebujete výsledek debuggeru a případně logy webu.
Co si odnést
Nejdřív správná metadata na webu. Potom dostupný obrázek. Pak cache a nové načtení v debuggeru. A nakonec kontrola skutečného náhledu před publikací.
Cílem není mít zelený debugger. Cílem je, aby lidé při sdílení vašeho obsahu viděli správný obrázek, srozumitelný titulek a funkční odkaz.