Náhledy při sdílení: značky Open Graph a co s nimi na Facebooku

Když odkaz na váš web někdo sdílí, síť si vezme náhled ze značek Open Graph. Když tam nejsou, poskládá si ho sama z toho, co najde, a výsledkem bývá logo v patičce a text z navigace. Nastavení je práce na deset minut a ovlivní každý sdílený odkaz do budoucna.

Co musí na stránce být

Pravidla pro obrázek

• Úplná adresa. Relativní cesta nefunguje, sítě si ji nedoplní.
• Rozměr 1200 na 630. Menší obrázek než 600 na 315 se zobrazí jako miniatura vedle textu.
• Velikost pod 1 MB. Větší soubory některé sítě nenačtou.
• Text v obrázku velkým písmem. Náhled se na mobilu zmenší na několik centimetrů.
• Dostupný bez přihlášení. Obrázek za přihlášením se nenačte.
• Uvedené rozměry v og:image:width a og:image:height. Síť pak náhled vykreslí hned, bez čekání na stažení.

Kde se to nastavuje

1. WordPress. Většina SEO pluginů má u každého článku pole pro obrázek sdílení. Když plugin nepoužíváte, značky se přidávají do šablony do hlavičky.
2. Shoptet. V nastavení šablony je pole pro výchozí obrázek sdílení, u produktů se použije hlavní fotografie.
3. Vlastní řešení. Značky patří do hlavičky HTML. Musí se vypsat na serveru, doplnění JavaScriptem sítě nezachytí.

Jak náhled otestovat

1. Facebook Sharing Debugger. Zadejte adresu a klikněte na Scrape Again, ať se načte aktuální verze.
2. LinkedIn Post Inspector. Má vlastní mezipaměť, takže se výsledek může lišit.
3. Na Slacku a v Messengeru stačí odkaz vložit do konceptu zprávy, náhled se ukáže hned.
4. Zkontrolujte i to, jak náhled vypadá na mobilu. Obrázek se zmenší a text v něm může být nečitelný.

Nejčastější chyby

• Stejný obrázek u všech stránek. Logo u každého sdílení nikoho nezaujme.
• Adresa obrázku bez protokolu. Zápis začínající dvěma lomítky nebo jen lomítkem sítě nezpracují.
• Chybějící og:url. Sdílení s parametry kampaní pak sítě počítají jako různé odkazy a čísla se rozpadnou.
• Popis delší než 200 znaků. Ořízne se uprostřed věty.

Časté dotazy

Změnil jsem obrázek, ale při sdílení se pořád ukazuje ten starý. Proč?

Sítě si náhledy ukládají do mezipaměti, obvykle na týdny. Facebook má nástroj Sharing Debugger, kde se dá načtení vynutit tlačítkem Scrape Again. LinkedIn má Post Inspector. U ostatních sítí pomůže přidat na konec adresy parametr, který vytvoří novou adresu, například otazník a číslo verze.

Musím mít kromě Open Graph i značky pro Twitter?

Stačí jedna, a to twitter:card s hodnotou summary_large_image. Zbytek si síť dopočítá z Open Graph. Přidávat kompletní sadu twitter značek je zbytečná práce, protože se používají jen jako záloha, když Open Graph chybí.

Jaký rozměr má mít obrázek pro sdílení?

1200 na 630 pixelů je poměr, se kterým si poradí všechny sítě. Menší než 600 na 315 se zobrazí jako malá miniatura vedle textu místo velkého náhledu. Soubor by měl zůstat pod 1 MB, jinak ho některé sítě odmítnou načíst.