Jak i kiedy stosować atrybuty rel=”noopener” i rel=”noreferrer”

Jeżeli jesteś specjalistą SEO lub programistą tworzącym strony internetowe oparte o HTML to zapewne spotkałeś się z atrybutami stosowanymi na stronach internetowych do prowadzenia „za rękę” robotów takich jak Google. Najczęściej spotykanymi tagami w internecie będą rel=”nofollow” oraz rel=”noindex”, gdzie pierwszy z nich oznacza „nie podążaj za mną” (robocie Google), a drugi „nie indeksuj mnie” (oczywiście w Google :)).

Istnieją jednak także mniej znane atrybuty takie jak rel=”noopener” i rel=”noreferrer”. Co oznaczają i kiedy ich używać?

Atrybut noreferrer

Gdybym miał przyrównać i zestawić atrybut rel=”noreferrer” z innym, to wybrałbym nofollow. Atrybut ten jest bowiem częścią specyfikacji HTML 5, a jego rolą jest blokada przesyłania informacji ze strony A do strony B po kliknięciu w link. Oznacza to, że strona B nie wie gdzie link do niej został wywołany i kliknięty. Przydatne w SEO prawda?

Cała idea opiera się na ukryciu nagłówka HTTP, a stosujemy ten atrybut w kodzie HTML w następujący sposób:

<a href=”https://porady.org” rel=”noreferrer”>Porady.org</a>

Istnieje ryzyko, że stosowanie tego znacznika spowoduje problemy m.in. z kodami śledzącymi takimi jak Google Analytics, ale na potwierdzenie tych doniesień wciąż czekamy od samego Google. Decyzja odnośnie jego stosowania należy do Ciebie.

Atrybut ”noopener”

Inaczej sytuacja wygląda z atrybutem rel=”noopener”. Można wręcz rzecz, że jego stosowanie to konieczność, bowiem chroni on przed pewnym zagrożeniem spowodowanym otwieraniem linków z atrybutem _blank.

Zastosowanie tego tagu pozwala na wymuszenia otwarcia linku w nowej karcie (lub oknie), jednak jednocześnie luka w nim pozwala na przejęcie pełnej kontroli nad treścią strony, którą zobaczymy po kliknięciu w URL.

I tak, złośliwa strona może podszyć się pod inną stronę podmieniając jej treść po kliknięciu w URL z atrybutem _blank. Chociaż my klikając w link A będziemy pewni, że przenosi on nas do prawdziwej i wiarygodnej witryny, to jednak wczytana treść może być niczym innym jak phishingiem. Luka ta zadziała również dla linków zewnętrznych w innej domenie, co znacznie zmniejsza bezpieczeństwo użytkowników w sieci.

Rozwiązaniem tej sytuacji jest stosowanie atrybutu rel=”noopener”, który chroni nas przed tym zagrożeniem. Aby poradzić sobie z nim WordPress od wersji 4.7.4 automatycznie dodaje ten znacznik do każdego linku. Aby dodać atrybut noopener ręcznie, wprowadzamy kod jak poniżej:

<a href=”https://porady.org” rel=”noopener”>Porady.org</a>

Możemy także po prostu usunąć atrybut _blank.

Atrybut rel=”noopener” nie zadziała w przypadku przeglądarki Mozilla Firefox, dlatego zaleca stosować się kombinację atrybutów rel=”noopener noreferrer”.

Źródło: Atrybuty rel=”noopener” i rel=”noreferrer”