Wszystko, co musisz wiedzieć o atrybutach rel= w znaczniku a

Jeśli tu trafiłeś, to pewnie chcesz dowiedzieć się więcej o atrybucie rel= w znaczniku <a> i jak go używać, prawda? Nie martw się, zaraz wszystko wytłumaczę w prosty sposób, bez zbędnego żargonu. Po drodze dodam przykłady, żebyś mógł zrozumieć, o co chodzi.

Co to jest atrybut rel?

Atrybut rel w znaczniku <a> określa relację między aktualną stroną a linkiem, do którego prowadzi dany odnośnik. W praktyce pozwala Ci poinformować przeglądarki i wyszukiwarki, co mają zrobić z tym linkiem. Możesz kontrolować takie rzeczy jak:

• Czy link ma być śledzony przez wyszukiwarki?
• Czy jest bezpieczny dla użytkownika?
• Czy prowadzi do treści zewnętrznej?

Ten atrybut jest superważny z punktu widzenia SEO i bezpieczeństwa.

Jak wygląda standardowy link z atrybutem rel?

Oto podstawowy przykład:

<a href="https://example.com" rel="nofollow">Przykładowy link</a>

W tym przypadku przeglądarki (i Google) wiedzą, że ten link ma być traktowany w specyficzny sposób – ale o tym za chwilę. 😎

Główne wartości atrybutu rel

Teraz przejdźmy do mięsa. Istnieje kilka popularnych wartości, które możesz przypisać do rel. Każda z nich ma inne zastosowanie.

1. nofollow

Co to robi?

Kiedy ustawisz wartość nofollow, informujesz wyszukiwarki, że nie chcesz przekazywać mocy SEO (tzw. link juice) do strony, do której prowadzi link.

Kiedy używać?

• Gdy linkujesz do strony, której nie ufasz w 100%.
• Gdy chcesz uniknąć kar od Google za sprzedaż linków (np. w artykułach sponsorowanych).
• Gdy masz linki w komentarzach użytkowników, by nie promować przypadkowych stron.

Przykład:

<a href="https://strona-zewnetrzna.com" rel="nofollow">Nie przekazuj mocy SEO</a>

2. noopener

Co to robi?

Zapobiega atakom typu tabnabbing, które mogą wystąpić, gdy otwierasz link w nowej karcie. W skrócie, zabezpiecza przed manipulacją stroną, z której pochodzi link.

Kiedy używać?

• Zawsze przy otwieraniu linków w nowej karcie (target="_blank").

Przykład:

<a href="https://bezpiecznastrona.com" target="_blank" rel="noopener">Otwórz w nowej karcie</a>

3. noreferrer

Co to robi?

Podobnie jak noopener, ale dodatkowo nie przekazuje informacji o stronie odsyłającej (referrer) do strony, do której prowadzi link.

Kiedy używać?

• Gdy nie chcesz, by strona docelowa wiedziała, skąd użytkownik na nią trafił.

Przykład:

<a href="https://anonimowastrona.com" target="_blank" rel="noreferrer">Anonimowy odnośnik</a>

4. nofollow noopener

Co to robi?

Łączy dwie funkcje: nie przekazuje mocy SEO i chroni przed tabnabbingiem. To popularna kombinacja, szczególnie dla linków sponsorowanych otwieranych w nowej karcie.

Przykład:

<a href="https://sponsorowana-strona.com" target="_blank" rel="nofollow noopener">Sponsorowany link</a>

5. ugc

Co to robi?

Oznacza, że link pochodzi z User Generated Content (czyli treści generowanej przez użytkowników). To istotne dla Google, bo pozwala oddzielić treści sponsorowane od organicznych.

Kiedy używać?

• W komentarzach, postach na forum czy recenzjach tworzonych przez użytkowników.

Przykład:

<a href="https://link-uzytkownika.com" rel="ugc">Link od użytkownika</a>

6. sponsored

Co to robi?

Informuje wyszukiwarki, że link jest częścią współpracy reklamowej, sponsorowanego postu lub jakiejkolwiek innej płatnej promocji.

Kiedy używać?

• Gdy link pochodzi z artykułu sponsorowanego.
• W banerach reklamowych.

Przykład:

<a href="https://sponsor.com" rel="sponsored">Link sponsorowany</a>

7. canonical

Co to robi?

Wskazuje wyszukiwarkom, że link prowadzi do oryginalnej wersji treści. Dzięki temu unikasz problemów z duplikacją treści.

Kiedy używać?

• Gdy masz kilka wersji tej samej strony (np. różne języki lub wersje mobilne).

Przykład:

<a href="https://oryginalnastrona.com" rel="canonical">Oryginalna wersja</a>

Kombinowanie wartości atrybutu rel

Możesz łączyć różne wartości rel, oddzielając je spacjami. Na przykład:

<a href="https://zlozonylink.com" target="_blank" rel="nofollow noopener noreferrer">Kombinowany link</a>

To jest jeden z najczęstszych scenariuszy, gdy chcesz połączyć bezpieczeństwo z SEO.

Kilka ciekawostek i wskazówek

1. Nie przesadzaj z nofollow. Jeśli wszystkie linki na Twojej stronie są nofollow, Google może uznać to za podejrzane.
2. Uważaj na target=”_blank”. Zawsze używaj noopener lub noreferrer w takich przypadkach – bezpieczeństwo przede wszystkim!
3. Stosuj atrybut rel strategicznie. Warto zrozumieć intencje linku, zanim zdecydujesz się na konkretną wartość.

Kod źródłowy do sprawdzenia linków z atrybutem rel

Chcesz sprawdzić, jakie atrybuty rel mają linki na Twojej stronie? Oto prosty skrypt w JavaScript, który możesz wkleić w konsoli przeglądarki:

document.querySelectorAll('a').forEach(link => {
    console.log(`Link: ${link.href}, Rel: ${link.rel}`);
});

Ten skrypt przechodzi przez wszystkie linki na stronie i wypisuje ich adres oraz wartość atrybutu rel.

Atrybut rel w znaczniku <a> to potężne narzędzie, które pozwala Ci kontrolować, jak Twoje linki są interpretowane przez przeglądarki i wyszukiwarki. Niezależnie od tego, czy chodzi o SEO, bezpieczeństwo czy współpracę sponsorowaną, odpowiednie użycie tego atrybutu pomoże Ci zoptymalizować Twoją stronę i uniknąć problemów.