Czym jest atrybut linku rel="noopener"?

Atrybut rel="noopener" to jedna z wartości atrybutu rel, która jest stosowana w odnośnikach (<a>) w języku HTML. Jego głównym celem jest poprawa bezpieczeństwa i wydajności podczas otwierania linków w nowej karcie przeglądarki. Atrybut ten zapobiega przekazywaniu informacji o oryginalnym oknie (referencji window.opener) do nowo otwartego okna lub karty.


Kiedy użytkownik kliknie w link otwierający się w nowej karcie (ustawiony za pomocą target="_blank"), przeglądarka domyślnie tworzy połączenie między oryginalnym oknem a nowym. Może to prowadzić do potencjalnych zagrożeń bezpieczeństwa, takich jak ataki typu „tabnabbing”. Dodanie rel="noopener" eliminuje tę lukę, blokując możliwość manipulacji przez nowo otwarte okno.


Atrybut rel="noopener" jest szczególnie ważny w przypadku linków prowadzących do zewnętrznych witryn, ponieważ chroni przed nieautoryzowanymi działaniami, które mogłyby wpłynąć na bezpieczeństwo użytkowników.

Pomoc Techniczna w SEO

Przykładowa składnia w HTML

Dodanie atrybutu rel="noopener" do odnośnika jest proste. Oto przykłady:


href="https://przyklad.com" target="_blank" rel="noopener">Przykładowy link
href="https://przyklad.com" target="_blank" rel="noopener noreferrer">Link z dodatkowymi zabezpieczeniami
href="https://przyklad.com" target="_blank" rel="noopener">Otwórz w nowej karcie

W powyższych przykładach:

  • href — określa adres URL, do którego prowadzi link.
  • target="_blank" — otwiera link w nowej karcie przeglądarki.
  • rel="noopener" — eliminuje potencjalne zagrożenia związane z przekazywaniem referencji oryginalnego okna.
  • noreferrer — dodatkowo blokuje przesyłanie informacji o stronie odsyłającej (referer).

Jak można używać atrybutu rel="noopener"?

Atrybut rel="noopener" jest stosowany głównie w celu poprawy bezpieczeństwa i ochrony użytkowników. Oto, kiedy warto go używać:

  • Linki do zewnętrznych stron: Każdy link otwierający się w nowej karcie, prowadzący do zewnętrznej witryny, powinien zawierać rel="noopener", aby zapobiec potencjalnym zagrożeniom.
  • Linki w treściach generowanych przez użytkowników: Jeśli witryna pozwala użytkownikom na dodawanie linków (np. w komentarzach), warto stosować ten atrybut dla dodatkowego zabezpieczenia.
  • Względy wydajnościowe: Blokowanie window.opener poprawia wydajność, ponieważ przeglądarka nie musi utrzymywać połączenia między oknami.
  • Ochrona przed tabnabbingiem: Ataki typu „tabnabbing” polegają na manipulacji otwartą kartą w celu przejęcia sesji użytkownika lub wyłudzenia danych. rel="noopener" eliminuje tę możliwość.

Atrybut ten jest szczególnie ważny w przypadku witryn, które dbają o bezpieczeństwo użytkowników i chcą minimalizować ryzyko związane z linkami do zewnętrznych stron.

Czy atrybut rel="noopener" wpływa na SEO?

Atrybut rel="noopener" nie wpływa bezpośrednio na SEO, ponieważ jego głównym celem jest poprawa bezpieczeństwa i ochrona użytkowników, a nie kontrolowanie wartości linków. Nie zmienia on sposobu, w jaki wyszukiwarki interpretują linki, ani nie wpływa na przekazywanie wartości SEO (tzw. link juice).

Jednak stosowanie rel="noopener" może mieć pośredni wpływ na SEO, ponieważ:

  • Poprawa doświadczeń użytkowników: Bezpieczna witryna buduje większe zaufanie, co może prowadzić do lepszego zaangażowania użytkowników i niższego współczynnika odrzuceń.
  • Unikanie problemów bezpieczeństwa: Strony narażone na ataki, takie jak tabnabbing, mogą być postrzegane przez wyszukiwarki jako mniej wiarygodne.

Chociaż rel="noopener" nie ma bezpośredniego wpływu na ranking w wyszukiwarkach, jego stosowanie jest zgodne z najlepszymi praktykami w zakresie bezpieczeństwa i użyteczności witryny.

Jak ustawić atrybut rel="noopener" w WordPress?

WordPress ułatwia dodawanie atrybutu rel="noopener" do linków, zarówno ręcznie, jak i za pomocą wtyczek. Oto jak to zrobić:

1. Ręczne dodawanie atrybutu rel="noopener"

Aby dodać atrybut ręcznie w WordPress, wykonaj następujące kroki:

  • Przejdź do edytora wpisów lub stron w WordPress.
  • Dodaj link za pomocą edytora wizualnego lub blokowego.
  • Przełącz na widok kodu HTML („Edytor kodu”).
  • Znajdź odnośnik i dodaj atrybut rel="noopener", np.: 
        
    href="https://przyklad.com" target="_blank" rel="noopener">Bezpieczny link

2. Korzystanie z wtyczek

Jeśli chcesz zautomatyzować proces dodawania rel="noopener", możesz skorzystać z wtyczek WordPress:

  • WP External Links: Ta wtyczka pozwala na automatyczne dodawanie atrybutu rel="noopener" do wszystkich linków otwierających się w nowej karcie.
  • Yoast SEO: Popularna wtyczka SEO, która umożliwia zarządzanie linkami i ich atrybutami.

Wtyczki te są szczególnie przydatne w przypadku większych witryn, gdzie ręczne dodawanie atrybutów byłoby czasochłonne.

Pozostałe atrybuty linków:

dofollow nofollow noopener noreferrer sponsored ugc

Umów się na darmową
konsultację

Jesteś zainteresowany usługą pozycjonowanie strony ? Chcesz dowiedzieć się więcej? Zapraszamy do kontaktu – przeprowadzimy bezpłatną konsultację.

    Ile kosztuje pozycjonowanie strony?

    Cena naszych usług jest uzależniona od zakresu działań, które zostaną wybrane w ramach konkretnego pakietu. Oferujemy zarówno standardowe plany, jak i możliwość przygotowania indywidualnej oferty, perfekcyjnie dopasowanej do specyficznych potrzeb Twojej firmy oraz oczekiwanych wyników. Aby dowiedzieć się więcej, zapraszamy do kontaktu – umów się na bezpłatną konsultację. 

    Zadzwoń Napisz