Atrybuty noopener i noreferrer — co oznaczają w linkach?

Obecne na każdej stronie internetowej linki przychodzące to nie tylko sposób na to, aby użytkownicy sieci mogli łatwo przechodzić „od witryny do witryny”, ale również źródło bardzo istotnych informacji z punktu widzenia robotów wyszukiwarek. A co za tym idzie — także i specjalistów od . Właściwości odnośników opisują tzw. atrybuty — w dzisiejszym tekście przedstawimy dwa z nich: noopener /noreferrer.

Czym jest atrybut linku?

Atrybuty są jednym z podstawowych elementów języka HTML — zawierają one dodatkowe informacje na temat tego, w jaki sposób przeglądarki internetowe czy roboty wyszukiwarek mają interpretować kod strony. Jeżeli mówimy o atrybutach przypisanych linkom — mogą one na przykład modyfikować zachowanie odnośnika lub definiować relację pomiędzy stroną źródłową (linkującą) oraz elementem docelowym (może być nim inna strona, ale także, chociażby, plik graficzny).

Te ostatnie — na których dziś się skupimy — oznacza się w postaci rel=”wartość atrybutu” (skrót rel pochodzi od angielskiego słowa relation). W praktyce może to wyglądać tak:

<a href=”https://semcore.pl/” rel=”noreferer”>agencja SEO</a>

Tak zapisany w HTML-u link poprowadziłby użytkownika do strony głównej naszej agencji — i byłby ukryty pod anchorem agencja SEO. O tym, jaki byłby jego związek ze stroną linkującą, powiemy w dalszej części artykułu.

Atrybuty linków nie mają większego znaczenia z punktu widzenia użytkowników — nie są dla nich widoczne, a większość z nich nie wpływa także na działanie samego odnośnika. Dostarczają za to ważnych informacji przeglądarkom internetowym oraz robotom wyszukiwarek — dzięki nim możemy mieć wpływ na to, jak zindeksowany i oceniony pod kątem SEO zostanie dany link.

Atrybut noopener

Atrybut o wartości noopener zazwyczaj występuje w parze z innym atrybutem: target=”_blank”, który wywołuje otwarcie linkowanej strony w nowej karcie przeglądarki. Dodanie do niego atrybutu rel=”noopener” uniemożliwia z kolei nowo otwartej witrynie dostęp do strony oryginalnej — przeglądarka nie przekaże pomiędzy nimi żadnych danych.

<a href=”https://semcore.pl/” target=”_blank” rel=”noopener”>agencja SEO</a>

Taka praktyka jest jednym ze sposobów zapobiegania ataków phishingowych, polegających na podmianie adresu URL w odnośniku na taki, który poprowadzi użytkownika do strony zainfekowanej złośliwym oprogramowaniem lub wyłudzającej dane — najczęściej bankowe. Atrybut rel=”noopener” zeruje bowiem jedną z wartości (window.opener) wykorzystywanych przez internetowych oszustów do zmiany adresu strony — uniemożliwiając w praktyce przeprowadzenie ataku.

Stosowanie atrybutu o wartości noopener ma więc bezpośredni wpływ na bezpieczeństwo użytkowników — ale i pośredni na pozycjonowanie Twojej strony. W „oczach” robotów Google każdy sposób na zabezpieczenie Twojej witryny podnosi ocenę serwisu — warto o tym pamiętać.

Atrybut noreferer

Atrybut o wartości noreferrer (czyli ten, który pokazaliśmy jako przykład na początku artykułu) ma całkiem ciekawą funkcję. Standardowo witryna internetowa na której znajduje się link jest traktowana jako strona linkująca (odsyłająca). Za każdym razem, gdy ktoś kliknie w odnośnik, Google Analytics i inne narzędzia analityczne mogą zebrać nie tylko dane dotyczące wejścia na stronę docelową, ale i podstawowe informacje o stronie odsyłającej. Przede wszystkim — jej adres URL, co umożliwia to śledzenie źródeł ruchu na witrynie docelowej.

Atrybut rel=”noreferrer” stanowi zaś dla przeglądarki polecenie, aby zaszyfrowała dane dotyczące strony linkującej. Nie zostanie ona tym samym odnotowana przez narzędzia analityczne — aczkolwiek działanie samego linku się nie zmieni: będzie standardowo śledzony i indeksowany. Co ciekawe, Google Analytics wejścia na stronę z atrybutem noreferrer traktuje tak samo, jak wejścia bezpośrednie — czyli tak, jakbyśmy po prostu wpisali jej adres w pasku przeglądarki.

Czy atrybut noreferrer ma wpływ na SEO strony? Wiemy z pewnością, że nie ma negatywnego — chociaż może utrudniać analizę ruchu na witrynie docelowej. Z drugiej strony, noreferrer (oprócz własnych właściwości) zawiera w sobie funkcje atrybutu o wartości noopener — może być więc z powodzeniem stosowany na stronach internetowych wymagających wielopoziomowego zabezpieczenia danych.

FAQ – najczęstsze pytanie o atrybuty noopener i noreferrer w linkach

1. Co oznaczają atrybuty noopener i noreferrer w linkach?

• rel=”noopener” sprawia, że strona docelowa nie może uzyskać dostępu do obiektu window.opener, czyli nie ma możliwości manipulacji oknem, z którego została otwarta. Chroni to użytkownika przed atakami, takimi jak phishing lub zmiana zawartości strony źródłowej.
• rel=”noreferrer” powoduje, że przeglądarka nie przekazuje informacji o stronie źródłowej (tzw. nagłówek HTTP referer) do strony docelowej, zwiększając tym samym prywatność użytkownika.

2. Kiedy warto stosować te atrybuty?

Najlepiej stosować oba atrybuty w przypadku otwierania linków w nowej karcie lub oknie (z atrybutem target=”_blank”), by chronić użytkowników i stronę źródłową przed przejęciem lub naruszeniem bezpieczeństwa. Atrybuty te są szczególnie polecane właścicielom stron, którzy chcą zwiększyć wiarygodność i bezpieczeństwo swojej witryny.

3. Jak wygląda przykładowy zapis HTML z tymi atrybutami?

Przykład: <a href=”https://twoja-strona.pl” target=”_blank” rel=”noopener noreferrer”>Twój link</a>

4. Czym różni się noreferrer nofollow?

• rel=”noreferrer” nie przekazuje nagłówka HTTP o stronie źródłowej, ale link nadal może być śledzony i indeksowany przez roboty wyszukiwarek.
• rel=”nofollow” dla robotów wyszukiwarek oznacza, że nie powinny one śledzić odnośnika ani przekazywać tzw. „mocy” SEO stronie docelowej, a link nie wpływa na pozycjonowanie tej strony.

Warto łączyć te atrybuty (np. rel=”nofollow noopener noreferrer”), jeśli zależy nam na maksymalnej ochronie i kontroli nad otwieraniem linków.

5. Jak wpływają te atrybuty na właściciela strony i roboty wyszukiwarek?

Stosowanie atrybutów noopener i noreferrer podnosi ocenę bezpieczeństwa witryny zarówno w oczach użytkowników, jak i algorytmów Google — transparentność i ochrona są pozytywnie oceniane przez roboty wyszukiwarek. Właściciel strony dzięki nim ogranicza ryzyko ataków phishingowych i zabezpiecza dane o swojej stronie przed linkowaną witryną.

Genialne firmy mnożą
swój potencjał z

Sprawdź nasze Case Studies

Ocena Clutch

5.0

Ocena Google

4.8