URL fragment

Využití fragmentů ke zlepšení UX

Výše popsané chování se hodí ve spoustě případů, chcete-li zlepšit uživatelský prožitek návštěvníka. Přitom tyto „vychytávky“ stojí jen pár minut práce kodéra:

1. Table of contents

   Rozsáhlé stránky mívají na začátku obsah tvořený seznamem odkazů vedoucích dovnitř stránky. Po kliknutí na odkaz se uživatel dostane rovnou na příslušnou kapitolu. Vidět to ostatně můžete i na této stránce nebo třeba na Wikipedii.

2. Odkazy na začátek stránky

   Pokud je stránka rozáhlá, může se hodit odeslat uživatele na její začátek, aby nemusel pracně rolovat přes všechen ten obsah. Já to na tomto webu používám při zobrazení stránky na mobilním telefonu, kde by bylo rolování nahoru zdlouhavé a přitom tam návštěvník potřebuje, aby si mohl zobrazit hlavní navigaci či fulltextové vyhledávání.

   Realizace je opět jednoduchá, stačí přiřadit id nějakému prvku na začátku stránky a odkázat na něj, třeba ikonkou se šipkou nahoru umístěnou v patičce stránky. Případně můžete odkázat na neexistující identifikátor, i v takovém případě prohlížeč skočí na začátek stránky.

3. Odkazy dovnitř cizích webů

   Pokud jiná stránka obsahuje HTML prvky s přiřazeným atributem id, nemusíte odkazovat pouze na její začátek, ale můžete se tak odkázat rovnou dovnitř daného dokumentu.

   Proto se také v této encyklopedii po najetí myši na některý podnadpis objeví znak mřížky, který po kliknutí změní adresu stránky na podobu s příslušným URL fragmentem. Můžete si tak pohodlně daný odkaz zkopírovat a odkázat se sem ze svého webu přímo na daný podnadpis.

4. JavaScripty

   URL fragmenty se také často využívají k ovládání nejrůznějších prvků stránky JavaScriptem. Ten si umí obsah fragmentu přečíst pomocí vlastnosti location.hash a příslušně stránku upraví (například překlikne slide v karuselu či třeba pustí video v přesně určené části).

Jak vypadá URL fragment v kódu

Na příkladu vidíte základ obsahu stránky zapsaný v HTML. Nahoře je vidět relativní odkaz vedoucí na fragment s id „klokani“. Tento podnadpis H2 by pak byl umístěný níže ve zdrojovém kódu stránky.

<a href="#klokani">Klokani</a>
…
<h2 id="klokani">Klokani</a>

Jiná využití fragmentů v URL

U souborů s jiným typem, než je text/plain, mohou fragmenty v adrese ovlivňovat jejich chování jinak. Například odkaz na PDF soubor s fragmentem #page=3 v některých čtečkách otevře soubor rovnou na straně 3, fragment #search=slovo způsobí vyhledávání slova v PDF dokumentu atd.

U SVG grafiky zase fragmenty v URL ovlivňují, jak se soubor zobrazí. To je důležité pro vývojáře, když vám chystají frontend webu.

URL fragmenty a vyhledávače

Adresy stránek, které se liší jen fragmentem, vyhledávače nepovažují za duplicitní obsah. Fragmenty zkrátka vůbec nestahují.

Toho se někdy využívá při optimalizaci pro vyhledávače, když potřebujete mít odlišné URL (tím že nesou odlišné informace) a zároveň nechcete, aby je vyhledávače považovaly za dvě různé adresy.

Typickým příkladem mohou být filtry na e-shopu, kde se adresa stránky bude lišit podle nastavení filtru. Tím nám ale vzniká duplicita, tj. stejný obsah se nachází na dvou různých adresách. U malých webů by se to dalo vyřešit pomocí kanonizace, ale ta zase plýtvá crawl budgetem, což u rozsáhlejšího e-shopu už může být problém.

Pokud však informace o nastaveních filtru umístíme do URL fragmentu, máme to vyřešené.