Jak zrobić i wstawić link do strony w HTML

Jak zrobić i wstawić link do strony w HTML

Linki są podstawą funkcjonowania internetu – łączą strony, dokumenty, obrazy i użytkowników, umożliwiając swobodną nawigację oraz przekazywanie informacji między zasobami. Choć minęły dekady od stworzenia pierwszej strony internetowej, sposób tworzenia linków w HTML pozostał w swojej podstawowej formie niemal niezmienny. W tym wpisie pokażę Ci, jak zrobić i wstawić link do strony w HTML, jak tworzyć linki graficzne, czym są atrybuty typu rel czy target, jak linkować z mediów społecznościowych, a także jak usuwać linki z Google i jak działa przekierowanie.

Co to jest link w HTML i po co się go stosuje?

Link (hiperłącze) to odnośnik prowadzący użytkownika do innego miejsca w internecie – może to być podstrona w obrębie tej samej witryny, inna strona, plik do pobrania, a nawet zdjęcie lub film. W języku HTML linki tworzy się za pomocą znacznika <a>, który umożliwia zdefiniowanie zarówno adresu docelowego, jak i tekstu widocznego dla użytkownika.

Linki są fundamentem internetu:

  • pozwalają organizować strukturę serwisu,
  • umożliwiają nawigację pomiędzy treściami,
  • są kluczowe dla SEO i indeksowania przez wyszukiwarki.

Jak stworzyć link w HTML – składnia i przykłady

Podstawowy link w HTML wygląda następująco: <a href=”https://przykladowastrona.pl”>Kliknij tutaj</a>

Znacznik <a> zawiera atrybut href, który wskazuje, dokąd prowadzi link. Treść pomiędzy otwarciem a zamknięciem znacznika to tzw. anchor tekst – widoczny dla użytkownika i jest klikalny.

Najczęściej stosowane atrybuty linków

Linki w HTML mogą mieć wiele dodatkowych właściwości:

  • href – adres docelowy (wymagany),
  • target="_blank" – otwiera link w nowej karcie,
  • rel="nofollow" – mówi robotom wyszukiwarki, by nie przekazywały mocy SEO,
  • rel="sponsored" – oznacza link sponsorowany (np. reklamowy),
  • rel="ugc" – link pochodzący z treści generowanych przez użytkowników,
  • title – podpowiedź wyświetlana po najechaniu kursorem.

Przykład linku otwieranego w nowej karcie, z oznaczeniem rel: <a href=”https://domena.pl” target=”_blank” rel=”noopener noreferrer”>Zobacz więcej</a>

Link do podstrony w obrębie własnej witryny

Linkowanie wewnętrzne to jeden z podstawowych elementów zarządzania treścią. Przykładowy link prowadzący do podstrony kontakt w tej samej domenie: <a href=”/kontakt”>Skontaktuj się z nami</a>

Jeśli strona działa na CMS-ie, takim jak WordPress, Joomla czy Wix, większość edytorów posiada wizualne opcje wstawiania linków – nie trzeba pisać kodu ręcznie.

Jak dodać link do swojej strony z innych witryn?

To temat ważny szczególnie w kontekście pozycjonowania. Linki prowadzące z zewnętrznych domen do Twojej strony (tzw. linki przychodzące) mają ogromne znaczenie dla widoczności w wyszukiwarkach.

Aby dodać link do swojej strony w innym serwisie:

  • poszukaj możliwości publikacji treści (komentarze, wpisy gościnne, fora, katalogi),
  • wklej pełny kod HTML lub sam adres URL, w zależności od wymagań platformy,
  • pamiętaj o jakości i tematycznym dopasowaniu miejsca publikacji.

Przykład kodu linku: <a href=”https://twojastrona.pl”>Sprawdź naszą ofertę</a>

W niektórych przypadkach wystarczy podać adres URL bez kodu HTML – system automatycznie przekształci go w odnośnik.

Link do zdjęcia – jak dodać obraz jako odnośnik?

Zamiast tekstu, linkiem może być również obrazek. W tym celu używa się połączenia tagu <a> z tagiem <img>:

<a href=”https://domena.pl/oferta”>
<img src=”https://domena.pl/img/baner.png” alt=”Oferta” />
</a>

Atrybut alt pełni ważną rolę zarówno dla dostępności (czytniki ekranu), jak i SEO. Linki obrazkowe są często używane jako banery reklamowe lub przyciski CTA.

Jak skopiować link do obrazka z innej strony?

Czasem zamiast linkować do strony, chcesz przesłać komuś konkretny obrazek. Aby zdobyć link do zdjęcia:

  1. Kliknij prawym przyciskiem myszy na obrazku.
  2. Wybierz opcję „Otwórz grafikę w nowej karcie”.
  3. Skopiuj adres z paska przeglądarki.

Jeśli obrazek jest ustawiony jako tło CSS (np. background-image), może być konieczne przejrzenie kodu strony (CTRL+U) i ręczne odnalezienie ścieżki do pliku.

Jak zmienić lub przekierować link do innej strony?

Jeśli masz dostęp do kodu, wystarczy zmienić wartość href i ewentualnie tekst: <a href=”https://nowy-adres.pl”>Nowa lokalizacja</a>

Przykład przekierowania 301 w pliku .htaccess:

Redirect 301 /stary-adres https://domena.pl/nowy-adres

Przekierowanie w PHP:

<?php
header(„Location: https://domena.pl/nowy-adres”);
exit;
?>

Przekierowanie w JavaScript (nie zalecane w kontekście SEO):

<script>
window.location.href = „https://domena.pl/nowy-adres”;
</script>

Jak stylować linki – zmiana koloru i wyglądu

Najlepiej stylować linki za pomocą arkusza CSS:

a {
color: green;
text-decoration: underline;
}

Jeśli musisz nadać styl inline’owo (w kodzie HTML):

<a href=”https://domena.pl” style=”color: green;”>Kliknij tutaj</a>

Dla przejrzystości kodu warto jednak oddzielać warstwę treści od stylów i trzymać się zasad semantyki HTML.

Jak wstawiać linki na Facebooku i Instagramie?

Facebook – posty, profile, posty z datą:

  • Wystarczy wkleić link w treść posta, a Facebook automatycznie pobierze miniaturkę i opis.
  • Aby podlinkować użytkownika, użyj znaku @ i zacznij wpisywać jego nazwę.
  • Link do konkretnego posta uzyskasz klikając datę publikacji i kopiując adres z paska przeglądarki.

Instagram:

Linki można dodawać do relacji (Stories), ale tylko jeśli:

  • masz konto firmowe,
  • masz ponad 10 000 obserwujących.

W standardowych postach Instagram nie umożliwia aktywnego linkowania.

Jak usunąć link lub stronę z wyników Google?

Jeśli chcesz usunąć stronę lub link z Google:

  1. Zastosuj meta tag noindex lub zablokuj indeksację w pliku robots.txt.
  2. Zgłoś adres do usunięcia w Google Search Console (narzędzie do tymczasowego ukrywania).

Usunięcie linków z obcych domen to inna sprawa – nie ma prostych metod. W takich przypadkach warto rozważyć kontakt z właścicielem strony lub skorzystanie z narzędzi do zgłoszenia naruszeń.

Podsumowanie tworzenia i dodawania linków do strony

Tworzenie i zarządzanie linkami to podstawowa umiejętność każdego, kto zajmuje się stronami internetowymi – niezależnie od tego, czy tworzysz je od zera, czy zarządzasz treścią w CMS. Znajomość podstaw HTML, znaczenia atrybutów linków, zasad linkowania zewnętrznego i wewnętrznego oraz umiejętność stylowania odnośników to wiedza, która prędzej czy później się przydaje – zarówno programistom, specjalistom SEO, jak i właścicielom stro

Podobne wpisy

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *