Máte na vašich stránkách korektně uvedeny všechny běžně používané meta informace? Tedy titulek, popis a výstižný obrázek, pokud existuje? Informací využívají vyhledavače, sociální sítě, katalogy stránek a je proto dobré nic nepodcenit. Dost možná vám drobná úprava přivede řadu nových čtenářů.

O co běží?

V zásadě potřebujeme pro slušně vypadající záznam ve vyhledávání či sociálních sítích při sdílení odkazu tři základní věci:

  • titulek stránky
  • popisek - krátký popis toho, co na stránce nalezneme
  • obrázek vystihující článek, pokud takový existuje

Tyto tři údaje jdou většinou velmi snadno určit z každé běžné stránky tak jak je, aniž by ji bylo třeba upravovat pro potřeby sdílení. 

Jak vypadá ideální stav můžeme vidět při pokusu o sdílení článku z webu lupa.cz:

Sdílení článku z lupa.cz na facebooku

Výsledek vyhledávání na google.com pak zobrazuje ty v podstatě ty samé informace (krom obrázku):

vyhledávání na google

Titulek - title

Titulek stránky si každý robot načte z hlavičky (<head>), elementu <title>. Titulek stránky je zobrazován i v tabech prohlížeče, výsledcích vyhledávání. autoři stránky by měli mít titulek v pořádku i když neplánují žádné sdílení na sociálních sítích.

Správně má titulek vypadat v kódu takto:

<title>Základní registry zatím skoro nikdo nepoužívá a ministerstvo o chybách mlčí - Lupa.cz</title>

Popisek - meta description

Meta description element má sloužit k vložení krátké informace popisující, co stránka obsahuje. Dříve to byl populární tag pro SEOmágy, pak nastalo období, kdy naopak mágové tvrdili jak je description zcela k ničemu. Dle mého jsme dospěli k rozumnému stavu, description je zobrazeno ve výsledcích hledání a při sdílení v sociálních sítích. Správně má meta description vypadat:

<meta name="description" content="Zatímco oficiálně jsou základní registry řádně a dostatečně připraveny, řada měst a obcí upozorňuje své občany na pravý opak. S tím korespondují i statistiky: referenční údaje by ze základních registrů mělo čerpat na 10 tisíc agendových informačních systémů. Zatím jich tak činí jen asi 40." />

Nemá smysl do description uvádět něco, co na stránce ve skutečnosti není a doufat, že vám to pomůže na první pozice vyhledavačů. Takový podvod bude rychle rozpoznán a i kdyby ne, klamete uživatele a ten nejspíš vaši stránku opustí ihned po vstupu.

Obrázek

Pokud vaše stránka neposkytuje žádný relevantní obrázek, buď to vůbec neřešte nebo poskytněte svoje logo. Pokud máte ke každému článku odpovídající obrázek nebo fotku, stojí za to informaci v hlavičce poskytnout. Můžete k tomu využít element link s parametrem rel="image_src". Celý element pak může vypadat:

<link rel="image_src" href="http://i.iinfo.cz/images/426/sprava-zakladnich-registru-1.jpg"/>

Co když nebudete mít definován žádný obrázek ke článku ale přesto na stránce nějaký vložený bude? Pak se robot rozhodne jeden vybrat sám (dost často třeba grafický prvek navigace webu), případně poskytne sdílejícímu uživateli možnost vybrat, který obrázek přiložit k příspěvku.

Opengraph na scéně

Opengraph je technologie která umožňuje tvůrcům stránek lépe popsat, kam stránka patří, do které kategorie spadá (článek, video, hudba), kdo je autorem, jaký obrázek připojit k textu. 

Opengraph může pro potřeby v sociálních sítích nahradit meta informace popsané v článku výše. Ty však mají stále svůj význam pro mnoho dalších webů (vyhledavače, katalogy) i uživatelů (titulek tabu v prohlížeči). 

Opengraph daty tak můžeme vhodně doplnit již stávající meta informace. Nejlépe jde zápis dat ukázat na příkladu článku na lupě:

<meta property="og:site_name" content="Lupa.cz" />
<meta property="og:type" content="article" />
<meta property="og:image" content="http://i.iinfo.cz/images/426/sprava-zakladnich-registru-1-thumb.jpg" />
<meta property="og:url" content="http://www.lupa.cz/clanky/zakladni-registry-zatim-skoro-nikdo-nepouziva-a-ministerstvo-o-chybach-mlci/" />

Jak je vidět, v metadatech opengraphu přenášíme název stránky (Lupa.cz), typ stránky(article), cestu k obrázku a url stránky (kanonická url). Při použití opengraphu je za potřebí doplnit i vhodný namespace:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" xmlns:og="http://opengraphprotocol.org/schema/">

Opengraph je preferovaná cesta, jak získává robot facebooku data při pokusu o sdílení stránky. Umí si je však snadno dopočítat i pokud žádná opengraph metadata na stránce nenajde. Detailní popis protokolu opengraph naleznete na webu http://ogp.me/ .

Testování - jak si web stojí?

Nakonec to nejdůležitější, jak poznám, že mám vše v pořádku a roboti u mě na webu vidí, co mají? Facebook poskytuje jednoduchý ladící nástroj - vložíte url a ihned vidíte to, co facebook robot. Adresa ladícího nástroje je: http://developers.facebook.com/tools/debug

Pokud Vás zajímá, jak si stojí mockrát zmíněná stránka lupy - prohlédněte si její kompletní report.

 object debugger - facebook

Poděkování

Poděkování patří lupě za vzorné zpracování metadat u svých článků. Sám nemám na svých webech informace tak dopodrobna zpracované, proto jsem v příkladech využil článek lupy.