I chociaż o linkach już sporo napisano, dzisiejszy nasz wpis będzie poświęcony odpowiedniemu tematowi. A zwłaszcza dodatkowym parametrom, które pojawiły się w specyfikacji HTML 5. Chodzi o „nofollow”, „noreferrer” i „noopener”. Słyszeliście o nich? A możliwie nawet, że stosujecie je przy tworzeniu odnośników? Wtedy możecie przejrzeć poniższe informacji i upewnić się, że wykorzystujesz je poprawnie.  A jeśli jeszcze nie słyszeliście o wspomnianych parametrach, zapraszamy do bliższego zapoznania się z tematem. Na pewno odkryjecie  dla siebie sporo ciekawego. 😉

I zaczniemy nasz temat z wyjaśnienia struktury odnośniku w HTML.

Struktura linku w HTML

Jeśli dodajesz linki za pomocą specjalnego klawisza edytora wizualnego WordPress na pewno nie masz styczności z kodem HTML. Wtedy możesz nie wiedzieć jak wygląda struktura linku. Powiedzmy, że dodałeś do wpisu następny akapit:

TemplateMonster to najstarszy i jeden z największych serwisów z gotowymi motywami dla WordPress.  Do wyboru użytkowników dostępne są ponad 2 tysiące templatek poświęconych różnym tematom niszowym.

W edytorze kodu powyższy fragment wygląda następnie:

Rysunek 1. Wygląd linku w edytorze kodu

Jak widać z rysunku 1 link ma taką strukturę:

<a href=”https://www.templatemonster.com/pl/”>TemplateMonster</a> czyli

<a href=”URL”>tekst</a>, gdzie:

• znacznik a czyli skrót od ang. anchor realizuje odsyłacze hipertekstowe.
• atrybut href to skrót od ang. hypertext reference – określa adres dokumentu HTML, do którego hiperłącze ma prowadzić.
• „URL” – właśnie adres dokumentu HTML czyli link do odpowiedniej strony.
• tekst – anchor text czyli tekst zakotwiczony, kotwica.

Tak właśnie wygląda prawie każdy link. Dodatkowo do niego mogą być włączone następne atrybuty:

• title służy do opisu obiektu, który wskazywany jest przez href. Za jego pomocą użytkownik oraz robot wyszukiwarki może dowiedzieć się o czym jest strona do której skierowujesz go.

Rekomendacja. I chociaż użycie title w linkach nie jest wymagane, jednak zachęcamy o nich nie zapominać. Jest to dodatkowy czynnik wpływający pozytywnie na optymalizację strony pod kątem SEO.  Także warto zaznaczyć, że WordPress nie dodaje title do linku. Musisz to robić ręcznie oraz za pomocą dodatkowych wtyczek.

• target=”_blank” służy do otwierania strony w nowej, nieużywanej karcie przeglądarki.

Uwaga! Domyślnie link otwiera się w tej samej kartce. To wychodzi z przyzwyczajenia większości użytkowników. Oprócz tego otwarcie strony w nowej karcie może spowodować do włamań (opiszemy to poniżej). Dlatego nie zalecamy używać tego atrybutu.

Używając powyższe atrybuty nasz link przykładowy może wyglądać następująco:

<a href=https://www.templatemonster.com/pl/ target=”_blank” title=” Marketplace z gotowymi szatami graficznymi dla strony”>TemplateMonster</a>

Jak widać, nie ma tutaj nic trudnego? Nie prawda?

Jeśli już zrozumiałeś z czego składa się odnośnik w HTML, możemy przejrzeć dodatkowe parametry dla niego. Chodzi o „nofollow”, „noreferrer” i „noopener”.

Parametr „nofollow”

Podany parametr pojawił się przy bezpośredniemu uczestnictwu Google w 2005 roku. Najpierw on stosował się w znaczniku meta dla oznaczenia zawartości strony. Później został wykorzystany w linkach. Zgodnie z określenia Google parametr nofollow  przekazuje moc Twojej strony do strony docelowej. Według rekomendacji internetowego giganta warto go stosować, gdy:

• Skierowujesz użytkowników do niezaufanej zawartości. Jeśli nie jesteś pewien, że zawartość strony docelowej jest bezpieczna dla użytkownika, skorzystaj z podanego parametr. Wtedy nie dostaniesz kary od Google nawet, gdy strona będzie uznana przez wyszukiwarkę jako niebezpieczna.
• Dodajesz płatne linki. Wyszukiwarka cały czas walczy przeciwko nadużyć w pozycjonowaniu stron. Jeśli dodajesz wpis reklamowy oraz jakiś płatny link, lepiej stosuj parametr nofollow. W tym przypadku Twoja strona oraz strona docelowa nie jest karana przez Google.
• Dodajesz linki do nieznaczących stron. Jeśli wstawiasz do wpisu linki do podstron oraz stron z formularzami typu zaloguj się lub zarejestruj się, możesz śmiało użyć opisany powyżej parametr. Wtedy nie przekazujesz mocy swojej strony do tych mało użytecznych podstron dla Google.

Dlatego aby wstawić parametr nofollow do linku warto dodać do struktury rel=”nofollow”.

Parametr noreferrer

Podany parametr ma na celu blokować przesyłanie informacji z Twojej strony do strony docelowej po kliknięciu w link. Dzięki temu strona docelowa „nie wie”, gdzie link do niej został wywołany i kliknięty. I to ma negatywne znaczenie dla danych analitycznych, np. w Google Analitycs. Wtedy nie jesteś na 100% pewien, że internauta trafił na Twoją stronę bezpośrednio z zakładek oraz przy wklejaniu linku do wyszukiwarki.

Na obecną chwile nie ma informacji od Google o pozytywnym lub negatywnym wpływanie noreferrer na SEO. Dlatego możesz śmiało używać ten parametr w swoich linkach, gdy chcesz zachować dla siebie pochodzenie internautów.

Ważne! Istnieje mit, że parametr noreferrer nie można stosować w linkach partnerskich. Te informacje nie są prawdziwe i zostały obalone przez badania.

Dlatego aby dodać powyższy parametr do linku warto wstawić rel=„noreferrer”.

Parametr noopener

Użycie parametru noopener to konieczność, bowiem chroni on przed pewnym zagrożeniem spowodowanym otwieraniem linków z atrybutem _blank. Powyżej już opisaliśmy ten atrybut. On służy do otwierania strony w nowym oknie (karcie) przeglądarki. I chociaż te rozwiązanie czasem może być przydatne, jednak ma poważną lukę w bezpieczeństwie.  Cyberzłodzieje wyłapały błąd, który nadaje pełną kontrolę nad treścią strony otwierającej przez kliknięte hiperłącze. Dzięki temu można kierować zawartością strony z zewnątrz, zmieniać ją i przekierować użytkownika na złośliwe witryny.  Przy tym użytkownik nie będzie wiedział o zmianie zawartości.

Uwaga! Cyberzłodzieje mogą otrzymać dostęp do zawartości Twojej strony nawet, gdy odnośnik z atrybutem _blank będzie znajdować się na innej domenie. Więc aby chronić swoją stronę od włamań, warto używać we wszystkich linkach parametr noopener. Nawet, gdy one prowadzą na własne podstrony!

Aby dodać parametr noopener do linku, warto dopisać rel=„noopener”

No i na sam koniec, nasz przykładowy link przy dodaniu tych parametrów może wyglądać:

• <a href=https://www.templatemonster.com/pl/ rel=“nofollow”>TemplateMonster</a> – jeśli dodajemy jeden parametr;
• <a href=https://www.templatemonster.com/pl/ rel=“nofollow noreferrer”>TemplateMonster</a> – jeśli używamy 2 parametry;
• <a href=https://www.templatemonster.com/pl/ rel=“nofollow noreferrer noopener”>TemplateMonster</a> – przy dodaniu 3 parametrów;

Podsumowanie

W dzisiejszym wpisie opisaliśmy podstawowe rzeczy o strukturze odnośników w HTML, o których warto wiedzieć podczas administrowania stronami internetowymi. Oprócz tego opisaliśmy dodatkowe parametry „nofollow”, „noreferrer” i „noopener”, które także warto używać w odnośnikach. Za pomocą tych parametrów nie tylko możesz ulepszyć optymalizację swojej strony, lecz także ochronić ją przed włamaniami.

P.S. Jeśli masz dodatkowe pytania, pozostaw komentarz poniżej.

Artykuł napisany przy współudziale Janusza Kamińskiego z TemplateMonster