Czym jest rel="noopener" w WordPress? (Wyjaśnienie)

Mieliśmy kiedyś klienta, którego odwiedzający stronę byli przekierowywani na podejrzane strony internetowe po kliknięciu w zewnętrzne linki. Problem polegał na braku małego fragmentu kodu, który stworzył poważną lukę w zabezpieczeniach.

To przerażająca myśl, ale ta luka może dotknąć każdą witrynę WordPress. Techniczny żargon, taki jak rel="noopener", może wydawać się mylący, pozostawiając Cię zmartwionym, czy Twoja witryna jest naprawdę bezpieczna dla Twoich odwiedzających.

W WPBeginner zabezpieczyliśmy tysiące witryn i nauczyliśmy się, że te drobne szczegóły mają ogromne znaczenie. Wyjaśnimy, czym jest rel="noopener" prostymi słowami i dlaczego jest tak ważny.

Zobaczmy, jak ten mały atrybut chroni Ciebie i Twoich użytkowników.

Czym jest rel=”noopener” w WordPress?

Dodając linki do swojej witryny WordPress, możesz używać atrybutów HTML, aby kontrolować, co dzieje się po kliknięciu linku.

Na przykład, gdy tworzysz link, znajduje się przełącznik, który pozwala otworzyć go w nowej karcie.

Kod HTML wygenerowany przez WordPress dla tego linku wygląda następująco:

<a href="http://example.com" target="_blank" rel="noreferrer noopener">external link</a>

Zauważ, że do linku dodano kilka atrybutów HTML: rel="noopener" i rel="noreferrer". Te atrybuty są dodawane w celu rozwiązania luki w zabezpieczeniach.

Kiedy używasz target="_blank" do otwierania linku w nowej karcie, domyślnie dzieje się coś potencjalnie nieoczekiwanego. Nowa karta faktycznie uzyskuje pewnego rodzaju połączenie z oryginalną kartą, na której właśnie byłeś.

To połączenie jest nawiązywane za pomocą czegoś w przeglądarkach internetowych, co nazywa się window.opener. Strona w nowej karcie może uzyskać dostęp, a nawet kontrolować pewne właściwości oryginalnej karty, na przykład zmieniając adres strony (window.opener.location).

To stwarza lukę w zabezpieczeniach.

Wyobraź sobie, że klikasz link na zaufanej stronie internetowej, a ona otwiera złośliwą stronę w nowej karcie. Z powodu tego połączenia window.opener ta złośliwa strona mogłaby potencjalnie zmienić oryginalną zaufaną stronę, którą właśnie przeglądałeś, w fałszywą stronę logowania (oszustwo phishingowe), oszukując Cię, gdy wrócisz do oryginalnej karty.

Atrybut linku noopener jest zaprojektowany, aby zapobiec temu konkretnemu ryzyku bezpieczeństwa.

Kiedy dodajesz rel="noopener" do linku, który otwiera się w nowej karcie, mówisz przeglądarce, aby nie tworzyła tego połączenia window.opener między dwiema kartami. Chroni to Twoich użytkowników przed oszustwami i próbami phishingu.

Jak rel=”noopener” wpływa na Twoje SEO w WordPressie?

Nie wpływa.

Chociaż atrybut rel="noopener" poprawia bezpieczeństwo Twojej witryny WordPress, niektórzy użytkownicy unikają jego stosowania, ponieważ uważają, że wpłynie to na ich SEO w WordPressie.

Ale to tylko mit.

Nie ma to wpływu na pozycjonowanie SEO Twojej witryny ani na ogólną wydajność WordPressa.

Jaka jest różnica między „noopener” a „nofollow”?

Łatwo pomylić rel="noopener" z rel="nofollow". Są to jednak zupełnie odrębne atrybuty.

Atrybut noopener zapobiega atakom typu cross-site na Twoją witrynę i poprawia bezpieczeństwo WordPress.

Z drugiej strony atrybut nofollow zapobiega przekazywaniu przez Twoją witrynę "soku SEO" do połączonej witryny.

Wyszukiwarki szukają i biorą pod uwagę atrybut nofollow podczas śledzenia linku na Twojej stronie. Jednak nie biorą pod uwagę tagu noopener.

Atrybut nofollow informuje wyszukiwarki, aby nie przekazywały żadnej autorytetu SEO do witryny, do której linkujesz. Chociaż edytor bloków WordPress ma wbudowany przełącznik do dodawania nofollow do linku, wtyczka jest często potrzebna do bardziej zaawansowanej kontroli.

Na przykład możesz chcieć automatycznie zastosować tag nofollow do wszystkich zewnętrznych linków na swojej stronie, dlatego wtyczka SEO staje się niezbędna.

Aby dowiedzieć się więcej, zapoznaj się z naszym artykułem o tym, jak dodać tytuł i nofollow do linków w WordPressie.

Czy rel=”noreferrer” wpływa na linki partnerskie w WordPressie?

rel="noreferrer" nie wpływa na linki partnerskie w WordPress. Niektórzy użytkownicy wierzą, że tak jest, ponieważ rel="noreferrer" zapobiega przekazywaniu informacji o polecającym do nowej karty.

Jednak większość programów partnerskich udostępnia unikalny adres URL z Twoim identyfikatorem partnerskim. Oznacza to, że Twój identyfikator partnerski jest przekazywany jako parametr adresu URL, aby inna witryna mogła go śledzić.

Po drugie, większość marketerów afiliacyjnych używa wtyczki do ukrywania linków dla swoich linków afiliacyjnych.

Dzięki maskowaniu linków, link afiliacyjny, na który klikają Twoi użytkownicy, jest faktycznie własnym adresem URL Twojej strony, który następnie przekierowuje użytkowników do docelowego adresu URL.

Jak wyłączyć rel=”noopener” w WordPress?

Nie ma potrzeby usuwania rel="noopener" z linków na Twojej stronie. Jest to dobre dla bezpieczeństwa Twojej strony i nie ma wpływu na wydajność ani SEO Twojej strony.

Jednak jeśli musisz go usunąć, będziesz musiał wyłączyć edytor bloków Gutenberga w WordPressie i używać klasycznego edytora.

Dzieje się tak, ponieważ jeśli ręcznie usuniesz rel="noopener" z linku, edytor bloków automatycznie doda go z powrotem, aby zapewnić bezpieczeństwo Twojej witryny.

Po wyłączeniu edytora blokowego będziesz musiał dodać fragment kodu do pliku functions.php swojego motywu lub do wtyczki WPCode (zalecane). Możesz dowiedzieć się, jak używać darmowej wtyczki WPCode w naszym przewodniku jak łatwo dodawać niestandardowy kod w WordPress.

Po prostu skopiuj poniższy kod do nowego fragmentu PHP:

add_filter('tiny_mce_before_init','wpb_disable_noopener');
function wpb_disable_noopener( $mceInit ) {
    $mceInit['allow_unsafe_link_target']=true;
    return $mceInit;
}

Upewnij się, że włączysz przełącznik „Aktywny”, a następnie klikniesz przycisk „Zapisz fragment”.

Spowoduje to zatrzymanie dodawania przez WordPressa atrybutu rel="noopener" do nowych linków. Będziesz musiał również ręcznie edytować stare linki, aby usunąć ten atrybut.

Aby uzyskać jeszcze większą kontrolę nad atrybutami linków, zalecamy użycie wtyczki All in One SEO (AIOSEO). AIOSEO pozwala łatwo dodawać atrybuty, takie jak nofollow lub sponsored, bezpośrednio w edytorze WordPress, pomagając zarządzać linkami zewnętrznymi zgodnie z najlepszymi praktykami SEO.

Często zadawane pytania dotyczące rel=”noopener”

Oto odpowiedzi na niektóre z najczęstszych pytań dotyczących atrybutu „noopener” w WordPress.

1. Jaki jest główny cel używania rel=”noopener”?

Głównym celem rel="noopener" jest bezpieczeństwo. Zapobiega to możliwości kontrolowania przez nową kartę oryginalnej karty, która ją otworzyła, co chroni odwiedzających przed złośliwymi oszustwami phishingowymi.

2. Czy rel=”noopener” jest dobry dla SEO?

Atrybut rel="noopener" nie ma bezpośredniego wpływu, ani pozytywnego, ani negatywnego, na SEO Twojej witryny. Jego funkcja jest czysto związana z bezpieczeństwem, a wyszukiwarki nie używają go jako czynnika rankingowego.

3. Czy powinienem usunąć rel=”noopener” z moich linków?

Nie, nie ma dobrego powodu, aby usuwać rel="noopener". Zapewnia on ważne korzyści w zakresie bezpieczeństwa bez negatywnych skutków ubocznych dla SEO lub wydajności witryny, dlatego najlepiej pozostawić go na miejscu.

4. Czy WordPress automatycznie dodaje rel=”noopener”?

Tak, WordPress automatycznie dodaje rel="noopener" do linków ustawionych tak, aby otwierały się w nowej karcie. Ta ważna funkcja bezpieczeństwa została po raz pierwszy wprowadzona w WordPress 4.7.4 i jest standardową częścią nowoczesnego edytora bloków.

Poradniki ekspertów dotyczące używania linków w WordPressie

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się o rel="noopener" w WordPress. Możesz również zapoznać się z innymi poradnikami dotyczącymi używania linków w WordPress:

• Poradnik dla początkujących, jak dodać link w WordPressie
• Jak otwierać zewnętrzne linki w nowym oknie lub karcie w WordPressie
• Jak dodać linki nofollow w WordPress (prosty przewodnik dla początkujących)
• Jak dodać tytuł i NoFollow do okna wstawiania linku w WordPress
• Jak dodać nofollow do wszystkich zewnętrznych linków w WordPress
• Jak śledzić kliknięcia linków i przycisków w WordPress (łatwy sposób)
• Jak śledzić linki wychodzące w WordPressie
• Jak zmienić kolor linku w WordPressie (przewodnik dla początkujących)
• Linkowanie wewnętrzne dla SEO: Ostateczny przewodnik po najlepszych praktykach
• Jak wstępnie ładować linki w WordPress, aby przyspieszyć ładowanie strony
• Jak znaleźć i naprawić niedziałające linki w WordPressie (krok po kroku)
• Najlepsze wtyczki do linkowania wewnętrznego dla WordPress (automatyczne + ręczne)

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.