Není týdne, aby se v mailu nebo na Facebooku neobjevil dotaz někoho, komu „nejde sdílet“ stránka z webu na Facebook. V drtivé většině případů to vede k zjištění, že autoři webu nemysleli vůbec na to, že dnes je potřeba weby dělat sdílitelné. Takže ignorují potřebu tam dát META značky, které pro sociální sítě (ale i další aplikace či software) říkají o stránce ty podstatné věci. Mimo to ještě stále není zvykem, že každá stránka na Internetu by měla mít obrázek(alespoň jeden) aby ji bylo možné vhodně sdílet.
Téma Open Graph jsme trochu nakousli v Co dělat když Facebook odmítá vložit odkaz na web a K čemu je Facebook Debugger (Sharing Debugger) a kde ho najdu?, kde se dočtete hlavně i o URL Debuggeru (o kterém je navíc řeč v Užitečné odkazy pro správce i nesprávce Stránek na Facebooku) ale o samotném Open Graph a nutných značkách tam je toho málo, takže to napravíme.
Open Graph protokol – ogp.me – není nic složitého, v zásadě jde o kolekci HTML značek (tag), které umožní jednu konkrétní stránku popsat tak, aby ji bylo možné správně zařadit a identifikovat v sociálním grafu. Open Graph je velmi intenzivně používán Facebookem, ale značky používané Facebookem využívá i Google (pro Google+, Google News,atd) i další software.
Open Graph funguje takže, že do kódu stránky jsou vkládány META značky, které popisují vše potřebné. Některé z nich jsou důležité, některé méně, některé můžete kompletně vynechat. Některé mají i ekvivalent v jiné HTML značce (třeba chybějící og:title lze snadno nahradit klasickou značkou TITLE, byť byste to takto dělat neměli).
Nutné (požadované) Open Graph značky
og:title – titulek, název, jak se váš „objekt“ (stránka, článek, web, atd) má jmenovat, pod jakým názvem má být vidět.
og:type – jaký typ objektu to je. Přičemž tady je zrovna dost důležité dodat, že určité objekty mohou vyžadovat některé další značky. A jsou zde jistá další pravidla. Jako že třeba og:type nastavený „web“ by měl být jenom na hlavní stránce webu a jenom jednou. Další stránky by měly mít jiné og:type (třeba article pokud jde o článek)
Pro nás obsahově orientované tvůrce jsou nejdůležitější typy article (článek), book (kniha), profile (profil) a website (web, ale také prostě obecně jakákoliv stránka).
og:image – ukazuje (jde o URL, adresu) na obrázek, který reprezentuje daný objekt. Tady narazíte hlavně na to, že Facebook či Google mají různorodé představy o velikostech těchto obrázků. A dnes to hlavně musí být obrázky poměrně velké aby je Facebook/Google opravdu správně použili. Pokud nedokážete ve vašem CMS (redakčním systému) automaticky poskytovat správné og:image, tak je lepší tento údaj vynechat. U og:image byste měli vědět, že můžete takto uvést více obrázků, ne pouze jeden. Každý bude mít vlastní META značku.
og:url – je další co vlastně můžete vynechat, byť jde o požadovaný údaj – jde vlastně o adresu objektu (třeba adresa tohoto tipu) – ale můžete to využít o to, že v grafu bude váš objekt mít jinou URL než na klasickém webu.
Open Graph ale zná řadu dalších značek
S předchozími čtyřmi údaji pro Open Graph si dost dobře vystačíte v případě Facebooku (ještě budete potřebovat og:description), byť z výše uvedeného příkladu můžete vidět, že jich je používaných daleko více – ale ne všechny jsou součástí Open Graph „normy“. Ta zná například ještě
og:audio – URL (odkaz) na zvukovou informaci spojenou s objektem
og:video – URL (odkaz) na video, které souvisí s objektem
og:description – perex, popisek objektu, v případě Facebooku je to dost nutná věc, protože tímhle určíte co se použije jako podtitulek (perex, popisek) při sdílení. Tady je ještě dobře vědět o co je to META DESCRIPTION.
og:locale – určení jazyky (locale), bez uvedení se chápe jako en_US, čistě teoreticky ba tak pro český obsah bylo dobré používat cs_CZ
og:site_name – jak se jmenuje web, pod který objekt patří, v případě Facebooku tím můžete ovlivnit další část informace, která se stane součástí sdílení
Kde najdete další informace?
Pokud hledáte více informace o tom jak Open Graph využívá Facebook, tak aktuálně v Open Graph Stories a Open Graph Reference Documentation a konkrétní informace týkající se sdílení a Open Graph záležitosti najdete v A Guide to Sharing for Webmasters kde zjistíte i nějaká ta specifika. Například to, že pro Facebook ještě budete případně potřebovat zvládnout fb:app_id (vazba na aplikaci), fb:page_id (vazba na Stránku), fb:admins (seznam správců, kteří pak mohou spravovat například komentáře).
TIP: Jaké sdílecí prvky umístit na web? Proč musí být web sociální? je poměrně zásadní čtení, které se týká všech těch To se mi líbí, Tweet, Pin či G+ knoflíků pro vaše webové stránky.
Co se Google týče, tak tam hledejte informace v dokumentaci pod názvem Snippet, žádné jiné stránky tomuto tématu věnované nejspíš nemají.
Twitter má vlastní věc jménem Twitter Cards. Pinterest také vlastní řešení jménem Rich Pins.
Pro testování zda máte Open Graph správně můžete použít
- Debugger od Facebooku (developers.facebook.com/tools/debug)
- Structured Data Testing Tool od Google (developers.google.com/structured-data/testing-tool)
- Twitter Card Validator (https://cards-dev.twitter.com/validator), více informací viz Jak zjistit, proč mi Twitter špatně sdílí odkazy a jak aktualizovat co si z mých odkazů pamatuje?
- Pinterest Rich Pins Validator (https://developers.pinterest.com/rich_pins/validator)
Co je skutečně nutné uvést ve stránce?
Pokud na tohle všechno koukáte zmateně, tak vám možná pomůže, že je možné určit minimalistickou sadu informací, které musíte ve Stránce uvést. Ta vypadá v zásadě takto:
<title>Titulek vaší stránky, obecně doporučeno 60 až 70 znaků</title>
<meta name=“description“ content=“Popis stránky, často se doporučuje aby nebyl delší než 155 znaků“ />
<meta name=“twitter:card“ value=“Souhrn“ />
<meta property=“og:title“ content=“Titulek stránky, může být stejný jako ten co je uvedená výše“ />
<meta property=“og:type“ content=“article“ />
<meta property=“og:url“ content=“URL adresa stránky, čístá, bez další dodatků“ />
<meta property=“og:image“ content=“URL adresa obrázku co je dostatečně velký“ />
<meta property=“og:description“ content=“Popis, podtitulek, perex, může být shodný s výše uvedeným meta description “ />
Tohle by mělo v zásadě stačit. A jak asi tušíte, patří to do HEAD (<head> .. </head>) části kódu stránky.
TIP: 17. července 2017 Facebook (prý v rámci boje proti fake news) zruší možnost opravovat nadpis, popis i obrázek při vkládání odkazů. Správné použití META značek pro Open Graph tak bude jediná možnost, jak správně sdílet. Viz Facebook zrušil možnost úpravy sdílených odkazů. Pro vydavatele nabízí (asi dočasné) řešení
Plná sada zahrnující i další podstatné informace se bude trochu lišit:
<title>Titulek vaší stránky, obecně doporučeno 60 až 70 znaků</title>
<meta name=“description“ content=“Popis stránky, často se doporučuje aby nebyl delší než 155 znaků“ />
<meta name=“twitter:card“ value=“Souhrn“ />
<meta name=“twitter:site“ value=“@twitter_id“ />
<meta name=“twitter:title“ value=“Titulek stránky“ />
<meta name=“twitter:description“ value=“Popisek“ />
<meta name=“twitter:creator“ value=“@twitter_id autora“ />
<meta name=“twitter:image“ value=“URl obrázku, co má minimálně 120×120″ />
<meta property=“og:title“ content=“Titulek stránky, může být stejný jako ten co je uvedená výše“ />
<meta property=“og:type“ content=“article“ />
<meta property=“og:url“ content=“URL adresa stránky, čístá, bez další dodatků“ />
<meta property=“og:image“ content=“URL adresa obrázku co je dostatečně velký“ />
<meta property=“og:description“ content=“Popis, podtitulek, perex, může být shodný s výše uvedeným meta description “ />
<meta property=“og:site_name“ content=“jméno web“ />
<meta property=“fb_admins“ content=“ID všech správců, oddělené čárkami“ />
Co udělat se špatně vloženým odkazem na Facebooku? Jak ho napravit? Aneb ne vždy musíte mazat, opravit přes Debugger a pak znovu vkládat.
