Hiperłącze to odnośnik umożliwiający przejście między zasobami w sieci, na przykład do innej strony internetowej, do sekcji tej samej podstrony albo do pliku. W języku HTML tworzy się je za pomocą tagu <a> z atrybutem href, który wskazuje docelowy adres URL. Znajdziesz tu typy linków, gotowy kod i błędy spotykane przy ich budowie.
Rodzaje hiperłączy w praktyce
W praktyce używa się 3 podstawowych rodzajów hiperłączy, opisanych niżej, a tabela dodaje odnośniki do poczty i telefonu. Ich działanie zależy od miejsca docelowego oraz zapisu w kodzie.
Linki zewnętrzne
Linki zewnętrzne prowadzą do innych domen, np. Google. Często otwiera się je w nowej karcie (target="_blank"), aby użytkownik nie opuszczał całkowicie strony źródłowej. Według dokumentacji MDN nowsze przeglądarki przy takim ustawieniu same działają tak, jak po dodaniu rel="noopener", a jawny zapis atrybutu zabezpiecza starsze wersje.
Linki wewnętrzne
Linki wewnętrzne odsyłają do innych podstron w tej samej domenie, np. Kontakt. Budują architekturę informacji i pomagają robotom wyszukiwarek odnaleźć wszystkie adresy. Google zaleca, aby każda podstrona, na której Ci zależy, miała link z co najmniej 1 innego miejsca w tej domenie.
Linki kotwicowe
Linki kotwicowe kierują do określonego fragmentu tej samej podstrony, np. Przejdź do sekcji. Wymaga to dodania atrybutu id w docelowym elemencie HTML, który odpowiada wartości po znaku # w adresie. Tego typu odnośniki przydają się w długich artykułach ze spisem treści lub FAQ.
Przykład kodu HTML hiperłącza
<a href="https://www.przyklad.com">Odwiedź naszą stronę</a>Kod hiperłącza składa się z tagu <a>, adresu w href i tekstu między <a> a </a>, czyli widocznego dla użytkownika anchora. Zapis można wzbogacić np. o title (dymek po najechaniu myszką) czy rel (relacja ze stroną docelową). Bez elementu <a> z href Google nie zindeksuje odsyłacza, a większości zapisów w innych formatach nie analizuje.
Dlaczego warto stosować hiperłącza
Hiperłącza warto stosować, bo prowadzą czytelnika do kolejnych informacji, a wyszukiwarce pokazują nowe adresy. Google podaje, że codziennie znajduje ogromną większość nowych stron właśnie za pomocą linków.
- Nawigacja - umożliwiają poruszanie się po stronie internetowej bez wpisywania adresów i ograniczają liczbę kliknięć potrzebnych do dotarcia do informacji
- SEO - poprawnie zbudowane odnośniki wzmacniają strukturę domeny i sygnalizują robotom hierarchię treści
- Użyteczność - zapewniają szybki dostęp do dodatkowych zasobów, np. dokumentów PDF, filmów lub powiązanych artykułów
- Zaangażowanie - dobrze umieszczone linki zachęcają do dalszego czytania, co widać w statystykach kolejnych odsłon
Jak tworzyć efektywne hiperłącza
Efektywne hiperłącze ma zrozumiałą etykietę, atrybuty dopasowane do celu i działający adres docelowy, a każdy z tych warunków da się sprawdzić przed publikacją.
Opisowy tekst anchora
Anchor (tekst klikalny) powinien jasno sugerować, dokąd prowadzi odnośnik. Zamiast ogólnikowych zwrotów typu "Kliknij tutaj" stosuj konkretne nazwy, np. "Poznaj nas". Dokumentacja Google wymaga od dobrej kotwicy zwięzłości i trafności, a jako test proponuje przeczytanie jej bez kontekstu: jeśli nie wiesz, o czym będzie strona, potrzebuje dokładniejszego sformułowania.
Atrybuty wspierające funkcjonalność
Atrybuty rozszerzają zachowanie odnośnika, na przykład:
target="_blank"- otwiera cel w nowej karcie (przydatne poza własną domeną)rel="nofollow"- stosowane według Google, gdy inne wartości nie mają zastosowania, a wolisz, aby robot nie kojarzył Twojej strony z linkowanąrel="ugc"- oznacza odnośniki dodawane przez czytelników, np. w komentarzach i postach na forumrel="noopener noreferrer"- blokuje dostęp nowej karty do strony źródłowej i nie przekazuje informacji o tym, skąd przyszedł użytkownik (ważne przytarget="_blank")download- każe traktować plik jako pobieranie zamiast nawigacji, ale działa tylko dla adresów z tej samej domeny
Unikanie martwych linków
Martwych linków unikniesz, gdy regularnie sprawdzasz błędy 404, bo frustrują użytkowników i mogą pogarszać widoczność w wyszukiwarkach. Screaming Frog w bezpłatnej wersji skanuje do 500 URL-i, a w Google Search Console przyda się raport Indeksowanie stron z kodem 404 z ostatniego miesiąca. Po wykryciu problemu ustaw przekierowanie 301 na aktualny adres, jeśli treść została przeniesiona, albo usuń odnośnik, gdy zasób przestał istnieć.
Wpływ hiperłączy na pozycjonowanie
Hiperłącza wpływają na pozycjonowanie, ponieważ Google używa linków jako sygnału do określania trafności stron. Stosuje też systemy analizy powiązań, wśród których dokumentacja wymienia PageRank jako jeden z wielu elementów oceny. Odnośniki wewnętrzne ułatwiają robotom dotarcie do podstron, a przychodzące (backlinki) należą do głównych czynników rankingowych off-site. Tekst kotwicy dostarcza wyszukiwarce informacji o stronie docelowej, dlatego pisz go naturalnie.
Tworzenie hiperłączy w praktyce
W praktyce składnia hiperłącza różni się tylko wartością atrybutu href i dodatkowymi parametrami, co pokazuje tabela z 5 typami.
| Typ odnośnika | Składnia HTML | Zastosowanie |
|---|---|---|
| Link zewnętrzny | <a href="https://domena.pl" target="_blank" rel="noopener">Tekst</a> |
Odesłanie do innej strony internetowej |
| Link wewnętrzny | <a href="/podstrona/">Tekst</a> |
Nawigacja w obrębie jednej domeny |
| Link kotwicowy | <a href="#sekcja-id">Tekst</a> |
Przeskok do fragmentu strony |
| Link do maila | <a href="mailto:adres@domena.pl">Tekst</a> |
Otwarcie klienta poczty |
| Link do telefonu | <a href="tel:+48123456789">Tekst</a> |
Połączenie głosowe na urządzeniu mobilnym |
Zachowanie linku tel: zależy od urządzenia: telefon zwykle wybiera numer, a komputer otwiera program do rozmów.
Najczęstsze błędy przy budowie hiperłączy
Najczęstsze błędy to zbyt wiele odnośników obok siebie, powielone anchory i link bez związku z otaczającym tekstem.
Nadużywanie linków w jednym akapicie
Zbyt gęsta sieć odnośników dezorientuje czytelnika i sprawia wrażenie spamu. Google pisze, że nie ma jednej właściwej liczby linków na stronie, ale jeśli wydaje Ci się, że masz ich za dużo, to pewnie tak jest. Zaleca też, aby nie umieszczać ich jeden obok drugiego, bo czytelnik przestaje je rozróżniać.
Identyczne anchory dla różnych stron
Powielony tekst klikalny dla wielu adresów URL utrudnia robotom ustalenie, której podstrony dotyczy dany temat. Google podaje jako zły przykład zwrot "Więcej informacji", który nic nie mówi o celu odnośnika. Różnicuj więc anchory, zachowując ich naturalność i związek z treścią docelową.
Brak kontekstu wokół linku
Hiperłącze umieszczone w zdaniu bez związku z otaczającym tekstem nie przyniesie korzyści ani użytkownikowi, ani SEO. Dokumentacja Google wskazuje wprost, że słowa przed linkami i po nich mają znaczenie, więc oceniaj całe otoczenie, a nie sam anchor. Odnośnik powinien logicznie wpisywać się w akapit i stanowić jego rozwinięcie.
