Nie każdy odnośnik w sieci działa tak samo, choć dla zwykłego użytkownika różnica bywa niewidoczna. W kodzie HTML dwa krótkie dopiski potrafią całkowicie zmienić sposób, w jaki przeglądarka i roboty Google traktują przejście na nową kartę. Wyjaśniamy, do czego służą noopener i noreferrer oraz, kiedy ich używać.
Spis treści
Czym są atrybuty linku?
Atrybuty HTML przychodzą z pomocą, gdy chcemy wymusić konkretne zachowanie linku lub określić jego relację z plikiem docelowym. Są częścią kodu strony i dostarczają przeglądarce dodatkowych informacji dotyczących sposobu działania danego elementu. W przypadku odnośników szczególne znaczenie ma atrybut rel, który pozwala wskazać relację między stroną źródłową a stroną docelową. Do innych często spotykanych atrybutów należy target, określający m.in., czy dany link zostanie otwarty w nowej karcie. Atrybuty linków nie są widoczne dla użytkownika przeglądającego treść, ale wpływają na bezpieczeństwo, prywatność oraz sposób obsługi odnośników przez przeglądarkę. Właściwe wykorzystanie ich w kodzie jest więc jednym z elementów prawidłowego tworzenia stron internetowych.
Noopener i noreferrer – co to za atrybuty?
Bezpieczeństwo sesji użytkownika i kontrola nad przesyłanymi danymi to dwa główne zadania, jakie stoją przed atrybutami noopener oraz noreferrer. Oba są wartościami atrybutu rel i mogą występować razem w zapisie rel=”noopener noreferrer”. Ich zastosowanie wiąże się przede wszystkim z linkami prowadzącymi do innych stron, zwłaszcza wtedy, gdy wykorzystują one target=”_blank”. Choć należą do tej samej grupy atrybutów, odpowiadają za różne mechanizmy związane z bezpieczeństwem i prywatnością. W kolejnych częściach wyjaśnimy, jak działa każdy z nich i kiedy warto zastosować je w kodzie.
Co robi noopener?
Otwieranie odnośników w nowej karcie wymaga przemyślanej architektury kodu. Atrybut noopener odcina stronie docelowej dostęp do obiektu window.opener, który w określonych sytuacjach pozwalał jej oddziaływać na stronę źródłową. Ma to znaczenie przede wszystkim w kontekście ochrony przed atakami typu reverse tabnabbing, w których nowo otwarta witryna mogłaby próbować zmienić zawartość lub adres URL pierwotnej karty. Atrybut noopener jest więc szczególnie istotny przy stosowaniu target=”_blank” i stanowi dodatkową warstwę zabezpieczenia użytkownika. Często spotkamy zapis rel=”noopener” lub połączenie rel=”noopener noreferrer”.
Znaczenie noreferrer
Każde kliknięcie w zwykły odnośnik zostawia w sieci wyraźny ślad. Przeglądarka może przekazać stronie docelowej informację o źródle ruchu za pomocą nagłówka HTTP Referer, dzięki czemu właściciel witryny może dowiedzieć się, z jakiej strony trafił do niego użytkownik. Atrybut noreferrer blokuje przekazywanie tej informacji, dlatego strona docelowa nie otrzymuje adresu URL strony źródłowej. Ma to znaczenie zarówno dla prywatności, jak i dla narzędzi wykorzystywanych do analizy ruchu. W statystykach wejście z takiego odnośnika może zostać zakwalifikowane jako ruch bezpośredni, co utrudnia dokładne określenie jego źródła. Sam dany link nadal działa, atrybut noreferrer nie oznacza bowiem, że roboty wyszukiwarek przestają podążać za odnośnikiem.
Noreferrer a nofollow
Noreferrer i nofollow brzmią podobnie, ale wykonują zupełnie inną pracę. Pierwszy odpowiada za ograniczenie informacji przekazywanych stronie docelowej na temat źródła ruchu, drugi natomiast jest sygnałem kierowanym przede wszystkim do robotów wyszukiwarek. Nofollow może wskazywać, że właściciel strony nie chce, aby dany link był traktowany jako rekomendacja przekazująca wartość SEO, czyli tzw. link juice. Nie wpływa on jednak na ukrywanie adresu URL strony źródłowej, czym różni się od noreferrer. Dlatego zastosowanie rel=”noreferrer” nie jest zamiennikiem dla nofollow, a oba atrybuty mogą być wykorzystane jednocześnie, jeśli przemawiają za tym konkretne potrzeby.
Kiedy stosować noopener i noreferrer?
Choć nowsze przeglądarki automatycznie zabezpieczają linki z target=”_blank”, ręczne wdrażanie atrybutów noopener i noreferrer wciąż pozostaje złotym standardem web developmentu. Warto stosować je przede wszystkim wtedy, gdy odnośnik otwiera stronę w nowej karcie i zależy nam na dodatkowym zabezpieczeniu połączenia między stroną źródłową a docelową. Noreferrer będzie przydatny także wtedy, gdy nie chcemy przekazywać zewnętrznej witrynie informacji o źródle ruchu.
Jak atrybuty wpływają na SEO?
Wokół wpływu atrybutów bezpieczeństwa na pozycjonowanie narosło sporo nieporozumień. W rzeczywistości noopener i noreferrer nie blokują przekazywania wartości SEO w taki sposób jak nofollow, dlatego ich użycie nie oznacza automatycznego pozbawienia linku znaczenia dla wyszukiwarek. Roboty wyszukiwarek mogą nadal podążać za odnośnikiem, a sam atrybut noreferrer nie jest sygnałem nakazującym pominięcie strony docelowej. Należy jednak pamiętać, że noreferrer może ograniczyć możliwość prowadzenia dokładnej analizy ruchu na stronie, ponieważ nie przekazuje informacji o źródle odwiedzin. Z punktu widzenia SEO są to więc przede wszystkim atrybuty związane z bezpieczeństwem i prywatnością, a nie narzędzia służące do bezpośredniego kształtowania pozycji strony.
