Holan.eu - Jak skamarádit váš web a sociální sítě (sdílené odkazy)

Jak skamarádit váš web a sociální sítě (sdílené odkazy)

Sociální sítě dnes mají svou sílu. A mají také pravidla, např. pro to, jak zobrazují sdílené odkazy. Jak tato pravidla využít, aby se sdílené odkazy na vaše stránky zobrazovaly přesně tak jak chcete vy, si ukážeme na konkrétním příkladě.

Podoba odkazu ovlivňuje jeho atraktivitu a ochotu lidí kliknout. Největší smysl určitě dává, optimalizovat způsob zobrazení pro Facebook. Kromě toho, že je to nejpoužívanější sociální síť, má to i další podstatný benefit. Stejně (nebo hodně podobně) se odkaz zobrazí i na Linkedin, Google+ a ve vyhledávačích si můžeme také polepšit (hlavně u Googlu, u Seznamu už trochu méně).

Jak na to? Pomocí Open Graph

Obecně, sociální sítě i vyhledávače se už nějakou dobu snaží co nejvíce porozumět obsahu stránek, aby mohli určovat jejich význam. Využívají k tomu jednak základní HTML značky jako titulek, meta description, ale také meta informace – mikroformáty nebo protokol Open Graph, o kterém bude dnes řeč.

Open Graph umožňuje z obyčejných stránek udělat objekty reálného světa tím, že je obohacuje o meta informace. A tyto metainformace pak soc. sítě použijí také pro zobrazení odkazů. V příkladě se podíváme, jak jsem použil Open Graph na svém WordPress blogu a jak si výsledek otestovat a odladit pro Facebook.

Funguje to tak, že do hlavičky stránky umístíme meta tagy:

Tyto značky pro optimalizaci odkazu stačí a dávají dostatek prostoru i pro SEO:

og:title – zobrazí se jako proklikávatelný nadpis
og:description – zobrazí se pod nadpisem jako popisek. Vhodné je ho použít stejně, jako meta description
og:image – url obrázku, který se zobrazí vedle odkazu. I když by na stránce žádný obrázek nebyl, Facebook zobrazí právě tento obrázek. Určitě doporučuji tuto značku využít, odkaz tím dostane správný šmrnc. Já ke článkům nepřidávám úvodní obrázky, takže pro celý blog i články používám stále stejný obrázek – fotku s logem.
og:url – je url vaší konkrétní odkazované stránky
og:type – tato značka v zobrazení nehraje zásadní roli. Já ji ale používám, konkrétně 2 typy: Pro homepage „blog“ a pro jednotlivé články pak „article“. Seznam všech možností uvádím taktéž na konci článku.

Existuje ještě několik dalších značek, odkaz na jejich přehled uvádím na konci článku pro inspiraci.

Oficiálně se doporučuje také v hlavičce upravit DOCTYPE plus přidat definici OpenGraphProtocol. Ale pokud to neuděláte, Facebook, Linkedin i Google vaše značky schroustají a ani nepípnou. Jen pro pořádek zde oboje zmíním:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/">

Testování v praxi

Pro otestování jak vypadá váše snažení má Facebook svůj nástroj – Open Graph Debugger. Určitě doporučuji tento nástroj použít, má totiž další a užitečný benefit: Pomocí něho sdělíte, že se něco změnilo, a že chcete, aby si do své cache uložil aktuální stav. Když totiž sdílíte odkaz, Facebook se snaží z důvodu zrychlení služby a šetření nákladů, do své cache před-uložit informace o sdíleném (obrázek, url, titulek i popisek) – takže pokud pak provedete změny a upravíte open graph tagy, může se vám stát, že se to nijak neprojeví v reálu a na Facebooku u svého odkazu pořád uvidíte staré popisky, obrázky atd. Díky OG Debuggeru budete mít jistotu, že se nesnažíte zbytečně :)

Další užitečné zroje

Celý princip Open Graph Protokolu a další značky, které by se vám na vašem webu mohli hodit, najdete na adrese projektu: ogp.me.

Odkazy ve výsledcích hledání Googlu můžete vylepšit podobným způsobem jako odkazy na Facebooku (a potunit si tak i SEO), a to pomocí Rich-Snippets. Jsou to mikroformáty, které si definoval Google, více detailů zde. V nástroji Structured Data Testing Tool si je pak můžete otestovat. Stejně jako Facebook Open Graph Debugger, i tento tool umožní sdělit Googlu, že si má aktualizovat cache u vašich odkazů, případně projít znovu robotem váš web.

Používáte mikroformáty či open graph? Znáte další užitečné nástroje nebo tipy? Budu rád, když se podělite v komentářích.