Kdo z vás se s využitím metaobrázku ještě nesetkalo, nastražte uši. Jde o silný nástroj, který umožní podstrčit Facebooku přesně takový náhledový obrázek, jaký potřebujete. Jeho využití je snadné. Prostě jen do hlavičky stránek vložte následující kód:
<link rel="image_src" href="http://www.vasedomena.cz/nazev-obrazku.png" />
Jak to potom vypadá přímo na Facebooku zjistíte, když nasdílíte následující webovou adresu: http://www.profauna.cz
Napřipomíná vám to něco? Ano, podobným způsobem můžete dát vědět robotům vyhledávače Seznam, jaký obrázek mají ukázat jako náhledový na stránce výsledků hledání. V případě Seznamu pak zápis vypadá následovně:
<link rel="previewimage" href="http://www.vasedomena.cz/nazev-obrazku.png" />
A jak na popis stránky?
Facebook postupuje při výběru popisu sdílené nebo “lajkované” stránky několika způsoby. Nejprve se podívá do metaznačky Description, umístěné také v hlavičce stránky (podobně např. Google v některých případech sahá k popisu stránky ve výsledcích hledání):
<meta name="description" content="Nějaký chytlavý text..." />
Pokud značku Description (popis) nemáte vyplněnou, sáhne obvykle po prvním souvislejším textu v HTML značce <p> – odstavec.
Pamatujte na to, že robot Facebooku nepřistupuje na rozdíl od běžných uživatelů z běžného vybaveného prohlížeče, takže ignoruje veškeré javascripty na stránce. Mohlo by se vám tak stát, že jako v našem případě ukáže jako první podle něj smysluplný text ve skutečnosti nesmyslný obsah mezi značkami <noscript> a </nostript>, stejně jako se to stalo v našem případě:
A co dál?
Facebook pracuje vedle výše zmíněného mj. také s metaznačkami Open Graph. O nich se tentokrát rozepisovat nebudu, pokud vás to zajímá podrobněji, podívejte se tady a tady nebo v češtině trochu techničtěji zde.
Pingback: 10 cest, jak dostat váš obsah k zákazníkům bez nutnosti za to platit | Neoriginální blog
není lepší využít metody property=”og:” ?
Tak tahle věc mi udělala velkou radost díky. :) musím to tedy ještě otestovat pořádně ale díky :)
Opravdu to funguje? Dnes to již podruhé zkouším na dvou rozdílných WP webech a ani jednou mi to FB nevzal :/
Jinak je to super nápad. Díky!
dysm.: no a právě proto to nejde – já vim, Cpt. Obvious :)
Michal: díky za tip, vyzkouším. Občas si fakt facebook vybere za preview kraviny.
Yuhů: díky za info. U site: to skutečně funguje. Škoda, že to není i u fulltextu, dali by se s tím dělat divy :].
Yuhů: No, někdy si FB vybírá celkem jalové obrázky. Třeba když jsem sdílel tenhle článek, vybral si fotku stolu z levého menu (Instagram). Když jsem sdílel info o článku z http://www.setrimcas.cz, ukazala se ikonka Flattru…
A když se to tam nedá, tak Facebook použije nejlepší obrázek ze stránky. To je o tolik horší, než když přesně určím, který obrázek to má být?
Dysm.: previewimage by mělo fungovat jen při hledání s operátorem site:, taky to používáme třeba na encyklopedii.
Vzhledem k tomu, že Profauna není v indexu Seznamu, tak tvoje odpověď postrádá smysl :].
Vsak ti pise v textu. Profauna.cz
Michale, máš příklad nějaké stránky, u které Seznam zobrazuje náhled z previewimage? Mně se to totiž ještě nepoštěstilo :].
Díky za zajímavou informaci, jdu to vyzkoušet.