Che cos'è rel="noopener noreferrer" in WordPress?

cos'è rel noopener

Sicuramente se usi WordPress avrai visto degli strani tag nei link se hai guardato il codice.

All'inizio è spaventoso perché sai di non averlo aggiunto tu stesso e pensi da dove viene? Non preoccuparti, non è successo niente di male, è lo stesso WordPress ad averlo aggiunto.

Perché lo fa? Per proteggerti, spiego in modo più dettagliato.

È un attributo HTML che ci aiuta a essere protetti da qualsiasi vulnerabilità che si verifica quando si inserisce un collegamento esterno all'interno della nostra pagina web.

Ogni volta creiamo un link da aprire in una nuova finestra con target="_blank". In questo modo, siamo stati esposti a hacker malintenzionati che potrebbero, tramite il selettore window.opener, modificare le cose grazie al linguaggio di programmazione JavaScript.

Cose come portarci su una pagina falsa e chiederci di inserire i nostri dati.

Per questo, a partire dalla versione 4.7.4 di WordPress, qualsiasi collegamento generato a una nuova scheda con target="_blank" sarà collegato a rel="noreferrer noopener" evitando così ogni vulnerabilità a qualsiasi link esterno.

Come posso verificare di avere rel=»noreferrer noopener»?

Qui vi mostro il mio editor di WordPress e faremo un esempio.

Creiamo un post e aggiungiamo un link esterno di prova.

collegamento nuova scheda

Ora vedremo la voce in formato HTML, per fare ciò clicchiamo sui tre punti che compaiono nell'intestazione del blocco sul lato destro e selezioniamo "Modifica come HTML"

wp modifica come html

Ora vedremo come è strutturato il mio link. Possiamo notare che per impostazione predefinita WordPress chiama il codice rel="noreferrer noopener"

rel noopener

Ti stai chiedendo cos'è Noreferrer?

È un altro attributo che viene fornito con Noopener per evitare di passare le nostre informazioni personali alla nuova scheda in cui andremo.

L'aggiunta di noopener noreferrer influisce sulla SEO?

Ovviamente no, non pregiudica il posizionamento dei link.

Potresti anche chiederti se potrebbe influire sui link che hanno l'attributo nofollow.

Vediamolo, se ad esempio avessimo un link come questo:

<a rel="nofollow" href="https://misitio.es/mi-enlace/">Texto de mi enlace</a>

E ora dovrebbe essere il seguente:

<a rel="nofollow noopener noreferrer" href="https://misitio.es/mi-enlace/">Texto de mi enlace</a>

Lascia che te lo dica, non influirebbe nemmeno sulla SEO.

E non lo dico io, lo dice Google stesso.

Come hanno risposto da Google, l'aggiunta di noopener ai nostri collegamenti non influisce sul posizionamento.

E per i miei link di affiliazione? Se l'attributo Noreferrer non mi consente di trasmettere informazioni personali, verrò danneggiato?

Inoltre, la maggior parte dei programmi di affiliazione non ti fornisce un URL univoco che includa il tuo ID affiliato.

Posso alternare Noopener e Noreferrer?
Sì, questo non pregiudica la protezione del collegamento.

Vediamo il seguente esempio, all'interno del mio input di test ho inserito i codici al contrario

relnoopener html

Salvo la voce e faccio clic su Anteprima. Una volta visualizzato, vedrò il codice sorgente, facendo clic su Ctrl+U (se lavori in Chrome)

codice sorgente di relopener

Possiamo renderci conto che gli attributi sono ancora presenti eseguendo la funzione di protezione.

Posso disabilitare questa funzionalità?
Puoi farlo, ma saresti di nuovo esposto, quindi non avrebbe senso farlo.

Allo stesso modo, se vuoi disabilitarlo, dovresti andare nel file functions.php del tuo tema figlio attivo e aggiungere il seguente codice:

// Esto desactiva voluntariamente una funcionalidad de seguridad de tinyMCE.
// NO ES RECOMENDABLE usar este código.
add_filter('tiny_mce_before_init','tinymce_allow_unsafe_link_target');
function tinymce_allow_unsafe_link_target( $mceInit ) {
$mceInit['allow_unsafe_link_target']=true;
return $mceInit;
}

Spero che questo articolo ti abbia aiutato a capire come funziona l'attributo noopener sui link esterni.

Ti consigliamo di non modificare nulla perché in questo modo sarai protetto e al sicuro.

Al prossimo tutorial 😉

Lascia un commento