Gdy chcesz skierować odbiorcę do konkretnej podstrony, dokumentu albo formularza, sam adres często nie wystarczy. Pokażę, jak zrobić link do strony w edytorze tekstu, systemie CMS i kodzie HTML, a także jak dobrać tekst odnośnika, sprawdzić jego działanie i uniknąć błędów, które psują wygodę użytkownika oraz SEO.
Najważniejsze zasady tworzenia skutecznych linków
- Hiperłącze składa się z tekstu, który widzi użytkownik, oraz adresu docelowego.
- W Wordzie, Dokumentach Google i CMS-ie link dodasz zwykle przez skrót Ctrl + K.
- W HTML używa się znacznika z atrybutem href.
- Tekst odnośnika powinien mówić, dokąd prowadzi link, zamiast brzmieć „kliknij tutaj”.
- Po publikacji zawsze sprawdź, czy link prowadzi do właściwej strony i nie zwraca błędu 404.
Link to coś więcej niż sam adres
Link, nazywany też hiperłączem, pozwala przejść z jednego miejsca do drugiego po kliknięciu tekstu, przycisku, obrazu albo ikony. Technicznie składa się z adresu docelowego oraz widocznego elementu, który użytkownik wybiera.
Adres może prowadzić do innej podstrony tej samej witryny, zewnętrznego serwisu, pliku PDF, formularza lub konkretnego fragmentu dokumentu. Dla odbiorcy liczy się przede wszystkim to, aby od razu wiedział, co otworzy się po kliknięciu.
W praktyce rozróżniam dwa podstawowe rodzaje odnośników. Link wewnętrzny prowadzi do innego miejsca w tej samej witrynie, a link zewnętrzny kieruje do obcej domeny. Pierwszy pomaga użytkownikowi poruszać się po stronie i wspiera jej strukturę, drugi może uzupełniać treść o wiarygodne źródło lub przydatne narzędzie.
Jak dodać hiperłącze bez pisania kodu
Najłatwiej utworzyć link w edytorze tekstu, poczcie elektronicznej, Dokumentach Google lub panelu administracyjnym strony. Zaznaczam tekst, który ma być klikalny, naciskam Ctrl + K na Windowsie albo Command + K na komputerze Mac, a potem wklejam adres w wyznaczone pole.
- Zaznacz słowo lub zdanie, które ma prowadzić do strony.
- Użyj skrótu klawiaturowego albo wybierz ikonę łańcucha na pasku narzędzi.
- Wklej adres strony w polu adresu.
- Zatwierdź zmianę i kliknij gotowy link testowo.
W wielu programach można też wkleić sam adres i nacisnąć Enter. Aplikacja automatycznie zamieni go w klikalne hiperłącze, ale takie rozwiązanie nie zawsze wygląda dobrze w tekście. Zwykle lepiej podlinkować krótkie, opisowe wyrażenie niż zostawiać długi ciąg znaków.
Dodawanie linku w systemie CMS
W popularnych systemach zarządzania treścią procedura wygląda podobnie. W edytorze wpisu zaznaczam tekst, wybieram ikonę linku, wstawiam adres i zapisuję zmianę. Przy przycisku lub banerze adres dodaje się zazwyczaj w polu opisanym jako link przycisku, „URL” albo „adres docelowy”.
Niektóre systemy pozwalają zdecydować, czy strona otworzy się w tym samym oknie, czy w nowej karcie. Dla linków wewnętrznych najczęściej wybieram to samo okno, natomiast przy zewnętrznych zasobach nowa karta może być wygodna, o ile nie utrudnia nawigacji.
Link w HTML krok po kroku
Jeśli pracujesz bezpośrednio w kodzie, do utworzenia odnośnika służy znacznik . Atrybut href wskazuje miejsce, do którego użytkownik ma przejść, a tekst pomiędzy znacznikami otwierającym i zamykającym jest widoczny na stronie.
opis stronyW praktycznym użyciu zamiast wartości adres-docelowy wstawiasz właściwy adres podstrony, a zamiast opis strony umieszczasz zrozumiały tekst. Najważniejsze jest zachowanie zamknięcia znacznika, czyli . Jego brak może sprawić, że kolejne fragmenty treści również staną się częścią linku.
Przeczytaj również: Kodowanie HTML od podstaw - jak zbudować dobrą stronę?
Link otwierany w nowej karcie
Jeżeli chcesz otworzyć odnośnik w nowej karcie, możesz użyć atrybutu target="_blank". Przy linkach zewnętrznych warto dodać również rel="noopener noreferrer", ponieważ ogranicza to niepotrzebne powiązanie między otwieranymi stronami.
opis stronyNie ustawiam nowej karty automatycznie dla każdego odnośnika. Użytkownik powinien wiedzieć, gdzie się znajduje, a zbyt wiele nowych okien może utrudniać korzystanie z witryny, szczególnie na telefonie.
Dobry tekst linku poprawia czytelność i SEO
Największą różnicę robi nie sam kod, lecz tekst zakotwiczenia, czyli widoczna treść linku. Powinien krótko opisywać cel, na przykład „instrukcja konfiguracji formularza” albo „cennik usługi”. Dzięki temu użytkownik może ocenić wartość odnośnika jeszcze przed kliknięciem.
Unikam ogólnych określeń takich jak „kliknij tutaj”, „więcej” czy „sprawdź”. Nie mówią one, dokąd prowadzi link, a osobom korzystającym z czytników ekranu utrudniają zrozumienie strony. Opisowy anchor pomaga także wyszukiwarkom lepiej odczytać temat podstrony, choć sam link nie zapewni wysokiej pozycji bez wartościowej treści i dobrej struktury witryny.
| Słaby tekst | Lepszy tekst | Dlaczego |
|---|---|---|
| Kliknij tutaj | Zobacz instrukcję instalacji | Wyjaśnia, co znajduje się na stronie docelowej. |
| Więcej | Poznaj szczegóły oferty | Jest zrozumiały także wyrwany z kontekstu. |
| Przejdź | Pobierz formularz zgłoszeniowy | Informuje o działaniu i rodzaju zasobu. |
Nie próbuję też upychać w każdym odnośniku tej samej frazy. Naturalne, różnorodne anchory lepiej pasują do tekstu i tworzą czytelniejszą architekturę informacji. Liczy się zgodność linku z otaczającym akapitem, a nie mechaniczne powtarzanie słów kluczowych.
Najczęstsze błędy przy dodawaniu odnośników
Najbardziej podstawowy problem to literówka w adresie albo skopiowanie niepełnego adresu. Po publikacji zawsze klikam każdy ważny link i sprawdzam, czy prowadzi do właściwego miejsca. Szczególnie istotne są odnośniki w menu, przyciskach, formularzach i najważniejszych artykułach.
- Błąd 404 oznacza, że strona nie została znaleziona albo jej adres się zmienił.
- Link prowadzący przez kilka przekierowań może działać wolniej i wymaga aktualizacji.
- Odnośnik do nieaktualnej treści obniża zaufanie do całego artykułu.
- Nieczytelny anchor utrudnia korzystanie ze strony osobom używającym klawiatury lub czytnika ekranu.
- Link o zbyt małym obszarze klikalnym jest niewygodny na ekranach dotykowych.
Sprawdzam również, czy link działa na telefonie, czy tekst jest wystarczająco kontrastowy i czy użytkownik może przejść do niego samą klawiaturą. To drobiazgi, ale właśnie na nich często potyka się dopracowana strona.
Prosty test przed publikacją strony
Przed zapisaniem wpisu przechodzę przez trzy krótkie pytania. Czy wiadomo, dokąd prowadzi link? Czy adres jest poprawny? Czy po kliknięciu użytkownik otrzymuje dokładnie tę informację, którą obiecuje tekst odnośnika?
Jeżeli odpowiedź na wszystkie pytania brzmi „tak”, link jest gotowy. Najlepiej traktować go jako część nawigacji i treści, a nie ozdobnik. Dobrze opisany, sprawny odnośnik prowadzi czytelnika dalej bez zgadywania i jednocześnie wzmacnia logiczną strukturę całej witryny.
