Základním stavebním kamenem linkbuildingu jsou HTML odkazy. Právě těmi se budeme podrobněji zabývat v následujícím článku. Osvěžíte si definici a specifika odkazu, zjistíte, jaké druhy existují, a odnesete si několik praktických tipů, jak z pohledu SEO s odkazy správně pracovat.
Co je HTML odkaz
Hypertextový odkaz, zkráceně také hyperlink, slouží k vzájemnému propojování webových stránek. Po kliknutí na tento odkaz jsou uživatelé přesměrování na jinou stránku nebo web. Nejčastěji se setkáte s HTML odkazem v textu, ale může mít také podobu obrázku, ikony nebo jiného HTML prvku.
V HTML se pro tvorbu odkazů používá tag <a>, k určení cílového URL pak slouží atribut href. Použití tohoto HTML tagu může v praxi vypadat například takto:
<a href=”https://www.collabim.cz/akademie/”>SEO Akademie Collabim</a>
Uživatel pak odkaz uvidí v této podobě: SEO Akademie Collabim
Výsledkem je tedy hypertextový odkaz v podobě textu. Po kliknutí na výraz “SEO Akademie Collabim” bude uživatel přesměrován na stránku SEO Akademie od Collabimu.
Textová část viditelná pro uživatele se nazývá anchor text. V oblasti SEO je anchor text prostředkem, jak zvýšit relevanci cílové stránky odkazu. Je proto třeba s ním správně pracovat, ale není to žádná raketová věda. Stačí dodržovat pár základních pravidel, co by měl správný anchor text splňovat:
- být relevantní k tématu cílové stránky,
- přirozeně vyplývat z textu (být spíše ve volné než přesné shodě),
- být konkrétní,
- nebýt přeplněný klíčovými slovy.
Ve výchozím nastavení se odkazy, resp. jejich anchor texty, ve všech prohlížečích zobrazují podtržené a v těchto barvách:
- nenavštívený odkaz je modrý,
- navštívený odkaz je fialový
- a aktivní odkaz je červený.
V případě odkazu vedoucího z obrázku by pak příslušná část HTML kódu vypadala následovně:
<a href="https://collabim.com"> <img src="logo-seo-akademie-collabim.png" alt="Logo SEO Akademie Collabim"> </a>
Po kliknutí na odkaz se ve výchozím nastavení cílová stránka otevře ve stejném okně prohlížeče. To ale není vždy ideální, ať už z hlediska SEO nebo UX. Přidáním atributu target snadno nastavíte, jak se má daný odkaz otevírat. Atribut target může nabývat těchto hodnot:
- _self – otevře odkaz na stejné kartě prohlížeče,
- _blank – odkaz se otevře na nové kartě prohlížeče,
- _parent – odkaz se otevře v nadřazeném rámci,
- _top – otevře odkaz v aktuálním okně záložky (nejvyšší okno hierarchie rámů).
Relativní vs. absolutní HTML odkaz
Relativní odkaz se od toho absolutního liší tím, že adresa obsahuje pouze cestu uvedenou za doménou. Neposkytuje kompletní informace o umístění vašeho webu, ale poskytuje údaje vztahující se k webu, na kterém se právě nacházíte. Například: „/akademie/“.
Pokud odkaz vede na stránku na stejném webu (tj. stejné doméně), označujeme jej jako místní odkaz. Specifikem takového odkazu také je, že má právě relativní URL, tedy bez domény. Místní odkazy používá většina webových stránek.
Absolutní odkaz naopak poskytuje úplné informace o umístění stránky – obsahuje tedy název domény i cestu ke stránce. Například: „https://www.collabim.cz/akademie/“.
Je třeba pochopit, že každý z těchto typů má své klady i zápory. Z pohledu SEO ale doporučujeme používat absolutní odkazy, které jsou pro SEO cennější. Zabraňují totiž problémům s duplicitním obsahem a umožňují robotům vyhledávačů snadno číst a indexovat vaše stránky.
E-mailové odkazy
HTML odkazy nachází své praktické využití také v e-mailových zprávách. Slouží k odeslání zpátečního e-mailu, k jehož nastavení se používá protokol mailto. Po kliknutí na takový odkaz se otevře prázdná zpráva s již nastaveným adresátem.
Je vhodné předem nastavit i předmět zprávy, adresy pro odeslání kopií nebo předpřipravený text e-mailu, abychom uživateli odeslání co nejvíce usnadnili.
Autor: SEOPRAKTICKY.CZ
Použité zdroje
- An Introduction to HTML Link. Simplilearn | Online Courses – Bootcamp & Certification Platform [online]. Copyright © 2009 [cit. 15.04.2023]. Dostupné z: https://www.simplilearn.com/tutorials/html-tutorial/html-link
- HTML Links Hyperlinks. W3Schools Online Web Tutorials [online]. Dostupné z: https://www.w3schools.com/html/html_links.asp
- HTML Links – Dofactory. NET Success Platform – Dofactory [online]. Dostupné z: https://www.dofactory.com/html/links
- What is a Hyperlink? Definition for HTML Link Beginners. freeCodeCamp [online]. Dostupné z: https://www.freecodecamp.org/news/what-is-a-hyperlink-definition-for-html-link-beginners/
- HTML Links (With Examples). Programiz: Learn to Code for Free [online]. Copyright © Parewa Labs Pvt. Ltd. All rights reserved. [cit. 15.04.2023]. Dostupné z: https://www.programiz.com/html/links
- Absolute Links vs. Relative Links: Which Is Better for SEO?. Digital Marketing West Palm Beach | Digital Resource [online]. Copyright © Digital Resource LLC. All rights reserved [cit. 15.04.2023]. Dostupné z: https://www.yourdigitalresource.com/post/absolute-links-vs-relative-links-seo-value
- Přidání zpátečního e-mailu (mailto:) odkaz ve zprávě – Podpora Microsoftu. Microsoft [online]. Dostupné z: https://support.microsoft.com/cs-cz/office/p%C5%99id%C3%A1n%C3%AD-zp%C3%A1te%C4%8Dn%C3%ADho-e-mailu-mailto-odkaz-ve-zpr%C3%A1v%C4%9B-86cea017-8f4e-4f20-85aa-0683779ccb0a
