Jaka jest różnica między noopener, noreferrer oraz nofollow? Czy są one istotne dla SEO oraz bezpieczeństwa naszej witryny? A co z użytkownikami stron?
Ten wpis wszystko Ci wyjaśni! 🙂
Czym jest 'rel’?
rel to atrybut, do którego możemy przypisać jedną z wymienionych w tytule „no-wartości”. Dodajemy go do linków (w szczególności tych z atrybutem target="_blank").
Przykład linku z użyciem wszystkich trzech wartości:
<a href="#" target="_blank" rel="noopener noreferrer nofollow"></a>Ok, ale do czego może nam się to przydać?
Bezpieczeństwo i wydajność
W przypadku noreferrer oraz noopener, jeśli nie przypiszemy choć jednej z tych wartości do linku, który otwiera się w nowej karcie (a więc posiada atrybut target="_blank"), możemy narazić się na spadek wydajności naszej witryny (jeśli ta nowo otwierana strona uruchamia mnóstwo kodu JS).
Jednak co ważniejsze, pomijając noreferrer lub noopener, narażamy użytkowników strony oraz ich dane na niebezpieczeństwo!
Wszystko za sprawą window.opener, przez który hacker może całkowicie podmienić treść oryginalnej witryny.
Uproszczony przykład ataku:
1. Strona ABC nie ma zabezpieczonych linków za pomocą rel="noopener" lub rel="noreferrer". Użytkownik strony ABC klika link, który otwiera stronę XYZ na nowej karcie. 2. Strona XYZ posiada odpowiedni kod, który podmienia oryginalną wersję strony ABC. 3. Podstawiona strona wygląda identycznie jak oryginał, więc użytkownik może nie zauważyć zmiany. 4. Teraz hacker może wyłudzić dane użytkownika, zdobyć jego hasła itd.
Jeśli interesuje Was bardziej techniczna strona takiego ataku, sprawdźcie ten artykuł.
Warto dodać, że przeglądarki korzystające z Chromium w wersji 88 i nowsze, automatycznie dodają atrybut noopener do linków z target="_blank".
Mimo wszystko pamiętajmy, aby zawsze dodawać do linków rel="noopener" ze względu na inne przeglądarki.
No dobrze, wiemy więc, że noopener oraz noreferrer dbają o nasze bezpieczeństwo, ale jakie są między nimi różnice? I co z nofollow?
Poniższa lista wszystko Wam wyjaśni.
noopener:
- blokuje dostęp nowo otwartej strony, do strony oryginalnej (efekt pożądany, dbamy o bezpieczeństwo).
<!-- bezpieczny link -->
<a href="#" target="_blank" rel="noopener"></a>
<!-- link, który może narazić użytkownika strony na atak -->
<a href="#" target="_blank"></a>noreferrer:
- zapewnia „anonimowość” Twojej stronie, jeśli są na niej odnośniki do innych witryn1,
- ze względów na statystyki, nie jest zalecane korzystanie z tej wartości w linkach wewnętrznych2,
- nie ma zbyt dobrego powodu, aby korzystać z noreferrer (jeśli chodzi o względy bezpieczeństwa, sam noopener wystarczy).
<!-- bezpieczny link, choć jeśli używamy noreferrer tylko jako zabezpieczenie, lepiej skorzystać z noopener -->
<a href="#" target="_blank" rel="noreferrer"></a>
<!-- jeśli klikniesz ten link, strona MMC School nie będzie wiedziała, że trafiłeś/łaś na nią z bloga MMC -->
<a href="https://mmcschool.pl/" target="_blank" rel="noreferrer"></a>
<!-- jeśli umieściłbym taki link w tym wpisie, zepsuję sobie wgląd do statystyk bloga -->
<a href="https://mmcworld.pl/kontakt/" target="_blank" rel="noreferrer"></a>nofollow:
- blokuje śledzenie linku przez wyszukiwarki internetowe (taki link nie jest brany pod uwagę jeśli chodzi o SEO),
- używaj go przy linkach do stron, którym nie ufasz czy np. linków do treści sponsorowanych.
<!-- wyszukiwarki internetowe w 99,9% przypadków zignorują taki link (Google twierdzi, że nie indeksuje takich linków, ale nie potwierdza, że tak jest w 100% przypadków) -->
<a href="#" target="_blank" rel="nofollow"></a>
<!--
1. strona zawiera treść, która może przydać się użytkownikowi Twojej strony, ale np. nie jesteś w 100% przekonany, że jest ona bezpieczna, nie będzie narzucała męczących pop-up'ów proszących o zapisanie się na newsletter co 2 minuty itd.
2. strona jest linkiem afiliacyjnym, linkiem do reklamy, treści sponsorowanej itd.
-->
<a href="#" target="_blank" rel="nofollow"></a>Podsumowanie
Jak widzicie nie takie straszne te „noopenery” jak się na początku wydawało. 🙂
Wystarczy pamiętać, aby dodawać rel="noopener" do każdego linku z atrybutem target="_blank".
Jeśli nie ufamy jakiejś stronie lub jest to link do wpisu sponsorowanego i nie chcemy podbijać wartości takiej strony renomą naszej witryny, dodajmy do linku nofollow.
Wyszukiwarki internetowe lepiej oceniają strony, do których linki znajdują się na innych portalach, ponieważ oznacza to, że na takiej stronie znajduje się wartościowa treść.
Z noreferrer nie musimy korzystać wcale, chyba że bardzo zależy nam na tym, aby właściciel strony, do której linkujemy, nie miał pojęcia, skąd pochodzi część ruchu na jego stronie.
1 Jeśli nie chcesz, aby witryna XYZ wiedziała, że użytkownicy dostają się na nią z linku na Twojej stronie, możesz użyć noreferrer. Wtedy np. w Google Analytics właściciel strony XYZ zobaczy większy ruch na stronie, ale nie będzie wiedział, że pochodzi on z Twojej witryny.
2 Linki wewnętrzne, a więc takie, które prowadzą do innej treści w Twojej witrynie.
Np. jeśli umieszczę w tym wpisie link, który będzie prowadził do innego artykułu na blogu MMC i dodam do niego noreferref, to jedyny efekt, jaki osiągnę to zaburzenie statystyk i utrudnienie pracy np. Google Analytics.
