Obsah stránky (TOC)

Jak obsah stránky zlepšuje UX

Hodí se zejména, pokud je stránka rozsáhlá. Protože:

1. TOC ukazuje uživateli obsah stránky

   Návštěvník webu tak během fáze skenování stránky snáze zjistí, o čem stránka je a co vše na ní najde. Zvyšuje se tím šance, že ho zaujmeme a motivujeme k důkladnějšímu přečtení.

2. TOC umožňuje rychlý přechod do hloubi stránky

   Pokud uživatel nechce číst celý text, může pomocí obsahu rychle přeskočit na část, která ho skutečně zajímá. Nebo se možná znovu vrací kvůli nějaké informaci na stránce, která ho zaujala při předchozí návštěvě – a my mu tabulkou s odkazy usnadníme, aby se k ní rychle dostal.

3. TOC umožňuje odkazovat z cizích webů do hloubi stránky

   U krátké stránky na tom nezáleží, ale pokud mluvíme o stránce, která obsahuje několik normostran textu, už může být pro lidi užitečné odkázat přímo na danou část textu. Když to na webu umožníte, podpoříte si tím vznik zpětných odkazů.

4. TOC odděluje úvod k textu od zbytku obsahu

   Nezdá se to jako důležitá funkce obsahu stránky, ale je to užitečné. Úvod stránky se tak chová jako perex článku, aniž bychom ho museli nějak zvýrazňovat a přidávat tím na stránku další vizuální šum.

Obsah stránky ve vyhledávačích

Z hlediska vyhledávačů přináší použítí TOC dvě zásadní výhody:

1. Zvyšuje dwell time

   Dwell time je čas, který návštěvník stráví na webu po příchodu z vyhledávače, než se vrátí opět na výsledky vyhledávání. Je to jedna z důležitých metrik, podle níž Google stránku hodnotí. A pokud se návštěvník díky obsahu začte, stráví u nás delší dobu. Ze stejného důvodu se ostatně používá také doporučování dalších článků.

2. Zobrazuje se přímo v SERPu

   Máte-li na stránce obsah v podobě čitelné pro crawlery vyhledávačů, Google i Seznam umí zobrazit příslušné odkazy přímo ve výsledcích vyhledávání. Dělají to jen někdy a nedá se to nijak vynutit. Obvykle je zobrazují hlavně na prvních pozicích výsledků.

   A to samozřejmě chceme – další řádek navíc zvyšuje viditelnost snippetu, odlišuje ho od konkurenčních odkazů a tím mu zvyšuje míru prokliku.

Vyhledávač Google

Pozor na to, že Google hodně podobně jako TOC zobrazuje i sitelinky v přirozeném vyhledávání.

Vyhledávač Seznam

V Seznamu říkají obsahu stránky „osnova“:

Jak obsah stránky vytvořit

Můžete to samozřejmě dělat ručně, ale je to dost pracné a těžko dlouhodobě uhlídáte, že všechny odkazy správně fungují. Proto je lepší to zautomatizovat.

Programátorsky je to poměrně triviální. Napsal jsem si na to automatickou funkci, která při uložení pojmu v administraci:

1. Najde  pomocí regulárních výrazů všechny podnadpisy úrovně H2 a H3 na stránce.
2. Přidá k nim identifikátory (kotvy, na které lze odkazovat pomocí URL fragmentů).
3. Vytvoří seznam hierarchicky tříděných odkazů, přičemž do anchor textů zkopíruje text nadpisu.
4. Hotový TOC vloží před první podnadpis.

Funkce se spustí pouze v případě, kdy jsou na stránce alespoň tři podnadpisy (aby se nevytvářel třeba obsah o jediné položce).

Skrolující TOC s vyznačeným postupem

Narazil jsem na zajímavý experiment, kdy na desktopech designér umístil obsah stránky do pravého sloupce a zde ho fixně přichytil, takže tabulka s odkazy byla během skrolování stále vidět. Jednotlivé odkazy obsahu stránky se pak postupně rozsvěcely, jak se návštěvník postupně pročítal celým článkem.

Autora k experimentu přiměl předpoklad, že toto řešení prodlouží čas strávený na stránce a tedy i tolik žádaný dwell time. A měl pravdu, A/B testování následně tuto teorii jednoznačně potvrdilo. A dokonce se mu prý i mírně zvedly počty přihlášení k odběru newsletteru