Link

Co je to Link?

Link neboli hyperlink je interaktivní prvek na webové stránce, který po kliknutí přesměruje uživatele na jinou stránku, soubor nebo konkrétní místo v rámci stejného dokumentu. Odkazy jsou absolutně základním stavebním prvkem internetu – bez nich by web nebyl "pavučinou" propojených stránek, ale jen izolovanými dokumenty. Písmeno "H" v HTML (HyperText Markup Language) odkazuje právě na schopnost vytvářet hypertextové odkazy mezi dokumenty. Linky umožňují navigaci mezi stránkami, sdílení obsahu, odkazování na zdroje a vedou uživatele přes celý web. Pro majitele webů jsou odkazy klíčové jak z pohledu uživatelské zkušenosti (návštěvník se snadno pohybuje po webu), tak z pohledu SEO (vyhledávače využívají odkazy k objevování nových stránek a hodnocení jejich důležitosti). Každý odkaz se v HTML vytváří pomocí značky <a> (anchor, česky kotva), která převádí obyčejný text nebo obrázek na klikatelný prvek.

Jak funguje Link v HTML?

Každý hyperlink se v HTML vytváří pomocí párové značky "a" (anchor). Nejdůležitějším atributem je href (hypertext reference), který určuje cílovou adresu – kam má odkaz vést. Text mezi otevírací a uzavírací značkou je viditelný odkaz, na který uživatel klikne. Tento text se nazývá anchor text (kotevní text) a má zásadní význam pro SEO. Kromě základního href nabízí anchor tag několik dalších užitečných atributů pro kontrolu chování odkazu.

• Klíčové atributy odkazu

Atribut target určuje, kde se cílová stránka otevře. Nejčastěji používaná hodnota target="_blank" otevře odkaz v novém okně nebo záložce prohlížeče. To je užitečné pro externí odkazy, aby uživatel neztratil váš web. Atribut rel definuje vztah mezi aktuální a cílovou stránkou. Hodnota rel="nofollow" říká vyhledávačům, aby nepředávaly autoritu cílové stránce (používá se pro nedůvěryhodné zdroje nebo placené odkazy). Hodnota rel="noopener noreferrer" se používá spolu s target="_blank" z bezpečnostních důvodů – chrání před útoky, kdy cílová stránka získá přístup k původnímu oknu. Atribut title přidává popisek, který se zobrazí po najetí myší na odkaz a pomáhá přístupnosti i SEO.

• Absolutní vs relativní URL adresy

Absolutní URL obsahuje kompletní adresu včetně protokolu a domény, například https://webouky.cz/kontakt.php. Používají se pro externí odkazy nebo když potřebujete explicitně zadat celou cestu. Relativní URL odkazuje na stránky v rámci stejného webu bez uvedení domény, například jen "kontakt.php" nebo "../sluzby/tvorba-webu.php". Relativní odkazy jsou jednodušší, kratší a flexibilnější při přesunu webu na jinou doménu. Pro interní odkazy (v rámci vašeho webu) vždy preferujte relativní cesty, pro externí odkazy (na cizí weby) musíte použít absolutní URL.

• Anchor linky (kotvy)

Speciálním typem jsou anchor linky neboli kotvy, které umožňují odkazovat na konkrétní místo v rámci stejné stránky. Vytvoříte je pomocí znaku # (hash) a ID elementu. Například odkaz s href="#kontakt" skočí na element s atributem id="kontakt". Anchor linky jsou ideální pro dlouhé články s obsahem, FAQ sekce nebo jednoduché navigační menu na jednostránkových webech (one-page). Po kliknutí na odkaz prohlížeč plynule posune stránku k cílovému elementu. Tato funkce výrazně zlepšuje UX na dlouhých stránkách.

Typy odkazů na webu

• Textové odkazy

Nejběžnější forma linku je prostý textový odkaz, kde anchor text jasně popisuje, kam odkaz vede. Kvalitní textový odkaz má popisný anchor text (ne generický "klikněte zde"), vizuálně se odlišuje od běžného textu (obvykle barvou a podtržením) a jasně komunikuje, co uživatel po kliknutí najde. Textové odkazy jsou základ navigace a nejdůležitější pro SEO.

• Obrázkové odkazy

Místo textu může být odkazem také obrázek. Důležité je vždy vyplnit alt atribut u obrázku, protože v případě obrázku jako odkazu slouží alternativní text jako anchor text pro SEO a přístupnost. Obrázkové odkazy se často používají pro loga, produktové galerie nebo grafické navigační prvky.

• Tlačítkové odkazy

Tlačítka (buttons) mohou vypadat jako klasická tlačítka, ale technicky jsou to odkazy stylované pomocí CSS. Třída "cta" (call-to-action) aplikuje tlačítkový design. Tento přístup je lepší než použití button elementu pro navigaci, protože odkazy jsou určeny právě pro přechod na jinou stránku, zatímco tlačítka pro akce v rámci stránky (odeslání formuláře, otevření modalu).

• Navigační menu

Hlavní navigace webu je tvořena seznamem odkazů, obvykle v HTML elementu nav. Sémantický tag nav říká vyhledávačům a čtečkám obrazovky, že jde o hlavní navigaci. Dobře strukturovaná navigace zlepšuje uživatelskou zkušenost i SEO.

• Breadcrumbs (drobečková navigace)

Breadcrumbs jsou navigační pomůcka ukazující cestu od domovské stránky k aktuální stránce: Domů > Služby > Tvorba webu. Každá úroveň je odkaz kromě aktuální stránky. Breadcrumbs pomáhají uživatelům orientovat se na webu a Google je zobrazuje přímo ve výsledcích vyhledávání, což zvyšuje CTR (míru prokliků).

Linky a SEO

Odkazy jsou absolutně klíčovým faktorem pro optimalizaci webu pro vyhledávače. Google a ostatní vyhledávače používají odkazy pro dva zásadní účely: objevování nových stránek (crawling) a hodnocení důležitosti a relevance stránek (ranking). Pochopení, jak linky fungují z pohledu SEO, může výrazně ovlivnit viditelnost vašeho webu ve vyhledávání.

• Anchor text a jeho význam

Anchor text (kotevní text) je viditelný, klikatelný text odkazu. Má obrovský význam pro SEO, protože říká vyhledávačům, o čem cílová stránka je. Pokud mnoho webů odkazuje na vaši stránku s anchor textem "tvorba webu na míru", Google pochopí, že vaše stránka je relevantní pro tento dotaz. Dobrý anchor text je popisný a přirozený – například "jak vytvořit responzivní web" je mnohem lepší než obecné "klikněte zde" nebo "více informací". Vyhněte se nadměrné optimalizaci – přirozený profil anchor textů obsahuje variace (exact match, partial match, branded, obecné fráze). Přílišné používání stejného keywordu v anchor textu může být vnímáno jako manipulace a vést k penalizaci.

• Interní linking (vnitřní propojení)

Interní odkazy propojují stránky v rámci vašeho webu. Kvalitní interní linking struktura má několik výhod: pomáhá vyhledávačům objevit všechny stránky webu, distribuuje link juice (autoritu) mezi stránkami, snižuje bounce rate tím, že nabízí návštěvníkům další relevantní obsah a zlepšuje uživatelskou navigaci. Důležité stránky by měly mít více interních odkazů z jiných částí webu. Blogové články by měly odkazovat na relevantní produktové nebo servisní stránky. Anchor text interních odkazů by měl obsahovat klíčová slova relevantní pro cílovou stránku. Každá stránka by měla být dostupná maximálně 3 kliknutími od domovské stránky.

• Backlinky (zpětné odkazy)

Backlink je odkaz z jiného webu na váš web. Je to jeden z nejdůležitějších ranking faktorů Googlu. Backlink funguje jako "doporučení" – čím více kvalitních webů na vás odkazuje, tím důvěryhodnější a relevantnější jste. Ne všechny backlinky jsou stejné. Kvalita je důležitější než kvantita. Jeden odkaz z prestižního oborového webu má větší hodnotu než stovky odkazů z nekvalitních adresářů. Faktory kvality backlinku zahrnují autoritu zdrojového webu, relevanci k vašemu oboru, pozici odkazu na stránce (odkazy v hlavním obsahu mají větší váhu než v patičce), anchor text a atribut rel. Získávání kvalitních backlinkú je náročné a vyžaduje tvorbu hodnotného obsahu, který si lidé přirozeně budou chtít sdílet a odkazovat na něj.

• Atribut rel="nofollow" a kdy ho použít

Atribut rel="nofollow" říká vyhledávačům: "Nesleduji tento odkaz, nepředávám mu svou autoritu." Google tento atribut bere jako návod (hint), ne jako absolutní příkaz. Použití nofollow: placené odkazy a sponzorovaný obsah (Google vyžaduje označit placené odkazy jako rel="sponsored" nebo rel="nofollow"), odkazy v komentářích uživatelů (ochrana před spamem), odkazy na nedůvěryhodné zdroje, které nechcete podporovat. Od roku 2019 Google zavádí také atributy rel="sponsored" pro placené odkazy a rel="ugc" (user generated content) pro odkazy v komentářích. Zbytečné používání nofollow na vlastní interní odkazy je chyba – snižujete tím distribuci link juice po vlastním webu.

• Důležitost relevantních odkazů

Pro SEO je zásadní, aby odkazy byly kontextuálně relevantní. Odkaz z článku o webdesignu na stránku o tvorbě webu je mnohem cennější než odkaz z blogu o vaření. Google hodnotí tématickou relevanci a penalizuje manipulativní linkovací schémata. Při budování backlinkového profilu se zaměřte na získávání odkazů z webů ve vašem oboru nebo příbuzných oborech.

Best practices pro linky

• Popisný anchor text

Vždy používejte popisný, konkrétní anchor text, který jasně říká, kam odkaz vede. Špatně: "Klikněte zde pro více informací o našich službách." Dobře: "Přečtěte si více o našich službách webdesignu a vývoje." Ještě lépe: "Zjistěte, jak vytvořit profesionální web na míru." Popisný anchor text zlepšuje přístupnost (nevidomí uživatelé čtou odkazy mimo kontext), UX (uživatel ví, co očekávat) a SEO (Google rozumí obsahu cílové stránky).

• Otevírání externích odkazů v novém okně

Pro externí odkazy (na cizí weby) je dobrá praxe použít target="_blank", aby se odkaz otevřel v novém okně/záložce. Návštěvník tak neztratí váš web. Z bezpečnostních důvodů přidejte také rel="noopener noreferrer": <a href="https://example.com" target="_blank" rel="noopener noreferrer">Externí web</a>. Atribut noopener zabraňuje cílové stránce získat přístup k vašemu oknu přes JavaScript API, noreferrer zajišťuje, že cílový web neuvidí, odkud návštěvník přišel.

• Přístupnost (accessibility) odkazů

Odkazy musí být přístupné všem uživatelům, včetně těch se zrakovým postižením používajících čtečky obrazovky. Klíčové zásady přístupnosti: Používejte popisný anchor text (čtečky často čtou seznam všech odkazů mimo kontext). Zajistěte dostatečný barevný kontrast mezi textem odkazu a pozadím. Odkazy musí být ovladatelné pomocí klávesnice (tabulátor, enter). Přidejte title atribut pro dodatečný kontext, kde je to užitečné. Vizuální rozlišení odkazu od běžného textu (podtržení, barva) musí být jasné i pro barvoslepé. Při najetí myší nebo focus (tab) by měl být vizuální feedback (změna barvy, podtržení).

• UX aspekty odkazů

Z pohledu uživatelské zkušenosti by měly odkazy následovat konvence. Vizuální rozlišení: Odkazy by měly být barevně odlišné (tradičně modrá) a podtržené, aby bylo zřejmé, že jde o klikatelný prvek. Hover efekt: Při najetí myší by měl odkaz reagovat (změna barvy, podtržení), což poskytuje okamžitou zpětnou vazbu. Konzistence: Všechny odkazy na webu by měly vypadat a chovat se stejně. Velikost klikací oblasti: Zejména na mobilech musí být klikací oblast dostatečně velká (minimálně 44×44 pixelů) pro pohodlné kliknutí prstem.

• Kontrola nefunkčních odkazů (404)

Nefunkční odkazy (broken links) vedoucí na chybovou stránku 404 poškozují uživatelskou zkušenost i SEO. Google to vnímá jako špatnou údržbu webu. Pravidelně kontrolujte své odkazy pomocí nástrojů jako Google Search Console, Screaming Frog nebo online checker. Opravte nebo odstraňte nefunkční odkazy. Pokud odstraníte stránku, nastavte 301 redirect na relevantní náhradní stránku. Zejména dbejte na kontrolu externích odkazů – cizí weby mohou změnit URL nebo přestat existovat.

Nejčastější chyby při práci s linky

Nefunkční odkazy (broken links) jsou častá chyba vzniklá přejmenováním stránek, migrací webu nebo změnou struktury URL bez nastavení redirectů. Návštěvník skončí na chybové stránce 404, což frustruje a zvyšuje bounce rate. Pravidelná kontrola a oprava broken links je nutností. Špatný anchor text – obecné fráze jako "klikněte zde", "více", "tady" nebo "tento odkaz" jsou z pohledu SEO i přístupnosti nepoužitelné. Vždy použijte popisný text vysvětlující, kam odkaz vede. Příliš mnoho odkazů na stránce může působit spamově a rozředit link juice. Google dříve doporučoval maximálně 100 odkazů na stránku, dnes není pevný limit, ale rozumná míra je důležitá. Každý odkaz by měl mít účel. Zapomenutý nebo chybný atribut href – odkaz bez href není odkaz, ale jen stylovaný text. Častou chybou je také href="#" bez cílového ID, což při kliknutí skočí na začátek stránky. Chybějící title atributy pro přístupnost – title není povinný, ale u složitějších navigací nebo odkazů na soubory ke stažení významně pomáhá. Například: <a href="katalog.pdf" title="Stáhnout katalog produktů (PDF, 2.5 MB)">Katalog</a>. Používání JavaScriptu místo HTML odkazů pro navigaci je špatná praxe. Odkazy vytvořené pomocí onclick události místo <a href> nefungují bez JavaScriptu a vyhledávače je nemusí sledovat. Vždy používejte sémanticky správné HTML odkazy.

Související pojmy