Applicare in automatico target blank e rel noopener a tutti i link in uscita

In questo blog ho sempre seguito la regola di applicare target=”_blank” a tutti i link in uscita. L’attributo _blank forza il browser ad aprire il link in una nuova tab del browser lasciando l’utente sulla pagina che sta visitando. Giusto o sbagliato che sia a livello di usability non è il punto di questa guida, voglio dare per scontato che tu abbia già valutato le tue necessità.

Tuttavia target=”_blank” causa alcune vulnerabilità note ed andrebbe sempre accompagnato dall’attributo rel=”noopener”.

Inserire a mano target=”_blank” e rel=”noopener” in ogni link esterno non è efficace: mi posso dimenticare ad esempio, posso saltarne qualcuno. Ho quindi cercato un modo per automatizzare l’inserimento dell’attributo _blank e noopener su tutti i link in uscita, io non devo fare niente.

Dato che amo semplicità e minimalismo (nel mio sito web, non nella vita) e non volevo usare plugin di dubbia provenienza, l’ho assemblato mettendo insieme due righe di PHP ed un JavaScript che ho trovato dopo qualche ricerca.

Il risultato è questo plugin che puoi scaricare e caricare sul tuo sito. Il plugin sfrutta un semplice codice JavaScript che identifica tutti i link che non fanno parte del dominio del sito web e applica l’attributo target=”_blank” e rel=”noopener” in automatico.

<?php
/*
Plugin Name: EVE Target _blank + noopener
Plugin URI: https://www.evemilano.com/
Version: 2.10 201905
Description: This plugin automatically inserts target blanks and rel noopener to all outgoing links
Author: Giovanni Sacheli
Author URI: https://www.evemilano.com/about-me/
*/


//* --- TARGET BLANK EXTERNAL LINKS --- *//
function eve_blankext() {
	?>
	<script type="text/javascript">
	(function($) {
		jQuery( document ).ready(function() {
			add_target_blank_to_external_links();
			});
	function add_target_blank_to_external_links(){
    $('a[href^="http://"], a[href^="https://"]').not('a[href*="'+location.hostname+'"]').attr({target: "_blank", rel: "noopener"});
	}
	})(jQuery);
	</script>
	<?php
	}
add_action('wp_footer', 'eve_blankext' );

Basta caricare il plugin, attivarlo ed il gioco è fatto.

Installa il plugin WordPress

Per usare questo plugin sul tuo sito segui questi piccoli passi:

1. Copia il codice del plugin che vedi qui sopra
2. Incolla il codice in notepad
3. Salva il file come “external-link-blank.php”
4. Comprimi il file PHP con Zip e crea un archivio compresso
5. Naviga nella sezione “Plugin” si WordPress
6. Carica il plugin e attivalo
7. Il plugin inserisce un piccolo codice JavaScript prima del tag </body>
8. Finito!

Cosa succede se in precedenza avessi inserito a mano dei target=”_blank” su alcuni link in uscita? Potresti ritrovarti con un doppio attributo target=”_blank” applicato ai link in uscita.

Meglio rimuovere tutti gli attributi inseriti a mano e lasciar lavorare solo il plugin. Vediamo come fare.

Rimuovi tutti i target=”_blank” dal testo dei post con MySQL

Per questa attività serve MySQL, in particolare devi lanciare un comando che andrà a cercare la stringa target="_blank" nel testo dei tuoi articoli e la rimuove. Puoi anche lanciare il comando da phpMyAdmin. Più facile a farsi che a dirsi…

1. Apri la console SSH, un software per collegarti al server MySQL oppure usa phpMyAdmin
2. Apri il database
3. Fai un backup/dump del database
4. Apri la tabella wp_posts
5. Naviga nella tab SQL dalla quale si possono lanciare i comandi
6. Digita questo comando e premi GO

UPDATE `wp_posts` SET post_content = REPLACE(post_content, 'target="_blank"', '')

Sostituisci il prefisso della tabella wp_post se il tuo è differente, nell’esempio ho usato la nomenclatura standard di WordPress.

Ecco fatto, a meno che tu non abbia sbagliato comando, nella tabella dei post del tuo database dovrebbero essere sparite tutte le stringhe target=”_blank”

Nel caso invece il processo fosse andato male, recupera il tuo dump, come ho fatto io la prima volta che ho cancellato tutto il database.

Ricordati, il vecchio saggio disse:

Il backup è quella cosa che dovevi fare prima!