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.

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