Atrybuty rel=”noopener” i rel=”noreferrer”

W tym artykule dowiesz się czym są atrybuty rel=”noopener” oraz rel=”noreferrer” oraz kiedy i w jaki sposób należy je stosować.

Linkowanie to wciąż skuteczna metoda pozycjonowania strony, jednak przede wszystkim jest to sposób na łatwe dzielenie się interesującą treścią w internecie. Dotyczy to również platformy WordPress, która często wykorzystywana jest w formie bloga – prywatnego lub prowadzonego na rzecz przedsiębiorstwa.

Najczęściej znanym atrybutem stosowanym w przypadku linków jest rel=”nofollow”. Istnieje jednak także znacznie więcej atrybutów HTML, które warto znać, a listę wszystkich z nich przedstawiamy Ci poniżej.

A teraz skupmy się już na tych o których dzisiaj właśnie napiszemy, czyli atrybucie noopener oraz noreferrer.

Nofollow vs noreferrer

Pierwszym znacznikiem, który weźmiemy pod lupę będzie rel=noreferrer”. Atrybut ten jest częścią specyfikacji HTML 5, a jego zadaniem jest, aby nie przesyłać informacji na temat odsyłającej witryny po kliknięciu w link. Oznacza to, że pomimo, iż dla zwykłego użytkownika hiperłącze wygląda tak samo to jednak staje się ono niewidoczne dla linkowanej strony internetowej.

Obecnie atrybut noreferrer jest obsługiwany przez co raz więcej przeglądarek wspierających technologię HTML 5. Wbrew mylnej opinii wielu osób atrybut norefferrer nie działa tak samo jak na nofollow, a wytłumaczenie tego znajdziesz poniżej.

Zobacz także nasz artykuł: Atrybut rel=”alternate” hreflang=”x-default”.

Kiedy i jak używać rel=”noreferrer”?

Stosowanie rel=”noreferrer” ma swoje zalety, ponieważ umożliwia ukrycie nagłówka HTTP, a to zwiększa prywatność w sieci oraz bezpieczeństwo samych użytkowników.

Możemy to zrobić dodając prosty kod do linka w formie HTML:

<a href="https://siriuspro.pl/" rel="noreferrer">Sirius Pro</a>

Takie działanie jednak, jak wskazują ostatnie testy, może powodować m.in. problemy z Google Analytics oraz dawać efekty zbliżony do już wcześniej opisanego atrybutu nofollow, który w 2005 roku został zaprezentowany przez Google (więcej: Wikipedia).

Co jednak istotne, Google póki co nie ustosunkowało się do powyższych doniesień oraz samego atrybutu, dlatego słuszność jego stosowania pozostaje pod znakiem zapytania.

Aby dowiedzieć się więcej o pozycjonowaniu przeczytaj nasz artykuł Pozycjonowanie WordPress.

Rel=”noopener”

W przypadku atrybutu noopener jesteśmy jednak pewni, że jego stosowanie to konieczność. Wiąże się to z zagrożeniem jakie powoduje otwieranie linków z atrybutem _blank.

Działanie znacznika _blank jest bardzo proste i polega na przekierowaniu otwartego linka do nowej karty (okna), dzięki czemu nie tracimy aktualnie przeglądanej treści. Jednak w tej całej pięknej idei istnieje błąd, który pozwala na pełną kontrolę nad treścią strony otwierającej przez kliknięte hiperłącze.

Oznacza to, że po kliknięciu w niezabezpieczony link razem z nową kartą otwieramy szkodliwej witrynie możliwość podmiany treści w naszej źródłowej stronie. Co jednak najgorsze, zmiana treści nastąpi w tle pozostając zupełnie niewidoczną dla użytkownika. Ryzyko staje tym bardziej znaczące biorąc pod uwagę fakt, iż opisana sytuacja zadziała również w przypadku, gdy link znajduje się w innej domenie.

Z pomocą tutaj przychodzi właśnie atrybut rel=”noopener”, który wprowadza restrykcje, dla otwierany w tle linków i zabezpiecza użytkownika przed atakiem typu phishing.

Atrybuty rel=”noreferrer” i rel=”noopener” – czy warto je stosować?

Jeżeli masz aktualną wersję WordPress to nie musiusz nic robić – od wersji 4.7.4 system ten automatycznie dodaje parametr noopener do tworzonych linków.

Jeżeli jednak Twoja strona internetowa oparta jest o inny system CMS to do wszystkich linków zalecamy dodanie krótkiego fragmentu:

<a href="https://siriuspro.pl/" rel="noopener">Sirius Pro</a>

Lub unikanie znacznika _blank w kodzie HTML.

W przypadku przeglądarki Firefox, która nie respektuje znacznika noopener zaleca się, aby korzystać z kombinacji obu atrybutów: rel=”noopener noreferrer”.

Co znaczy rel?

Na sam koniec przedstawimy Ci jeszcze definicję znacznika rel jako dopełnienie tego artykułu. Co to znaczy rel? Najprościej mówią (a w sumie pisząc :)) rel to element język HTML, który służy do określania relacji pomiędzy łączem (linkiem) a miejscem, do którego on prowadzi. Co znaczy więc rel jako skrót? Oznacznie rel pochodzi od słowa relation z j. angielskiego i oznacza właśnie dosłownie relację.

Oprócz rel=”nofollow”, rel=”noreferrer” mamy jeszcze inne znaczniki np. rel=”author”, czy też rel=”publisher”.

Podsumowanie

Zainteresowanych odsyłamy do świetnego artykułu na GitHubie, a firmy i osoby, które dbają o bezpieczeństwo swoich stron internetowych do kontaktu z nami w celu uzyskania naszego wsparcia.

Rel=”nofollow noopener noreferrer”

Czasami zdarza się, że możesz w kodzie strony (zwłaszcza WordPress) możesz znaleźć link z takimi parametrami:

rel="nofollow noopener noreferrer"

Zastanawiasz się zapewne czemu tak sie dzieje skoro wstawiłeś/aś tylko link nofollow oraz czy taki link wciąż nie przekazuje mocy Google. Odpowiedź jest prosta:

Parametry noopener i noreferrer wstawia automatycznie WordPress, a tak długo jak w treści linka znajduje się nofollow, link ten jest przez Google śledzony jako link za którym robot nie ma podążać.

Jak usunąć atrybut noreferrer z linku

Czasami może zdarzyć się, że istnieje potrzeba usunąć atrybut rel=”noreferrer” z linku np. pod SEO. Chociaż noreferrer samo w sobie nie ma negatywnego wpływu na moc linku to jednak dla osób, które chcą tego dokonać, pokazujemy jak to zrobić.

Wystarczy, że poniższy kod wkleisz do pliku functions.php (np. szablonu child) w WordPress:

//This code removes noreferrer from your new or updated links
function my_targeted_link_rel($rel_values) {
return 'noopener';
}
add_filter('wp_targeted_link_rel', 'my_targeted_link_rel',999);

Od teraz nowe linki nie będą miały atrybutu noreferrer. Zmiana nie dotyczy atrybutu noopener.

Już istniejące linki należy ręcznie zmienić usuwając z nich atrybut rel=”noreferrer”.