tutorial javascript

Se mi segui da un po’ di tempo, avrai visto sicuramente un enorme cambiamento grafico all’interno del sito, ma i cambiamenti che ho apportato non si sono fermati allo stile, ma ho creato delle funzioni che automatizzassero tante piccole routine che prima dell’aggiornamento svolgevo manualmente.

Nel tutorial di oggi voglio mostrarti come attribuire l’attributo rel=”nofollow”  a quasi tutti i link in uscita. Perché non tutti? Sono dell’idea che i link liberi debbano essere lasciati tali solo nel caso la risorsa / fonte linkata sia affidabile e autorevole, mentre tendo a bloccare i link ai siti che conosco meno sulla quale sono capitato per puro caso cercando informazioni relative all’argomento che sto trattando.

Come fare quindi a bloccare determinati link in uscita e lasciare invariati quelli autorevoli e affidabili? Con  javascript e una dannatissima espressione regolare.

Markup Iniziale

Iniziamo il tutorial con la creazione di un markup molto semplice. Inserirò al suo interno 4 link fittizi (3 autorevoli e 1 in fase di valutazione).

Individuiamo i link

Una volta realizzato il markup possiamo procedere con la realizzazione dello script. Per questioni di comodità e di comprensibilità lo dividerò in più parti così che ti sia chiaro al 100% il suo funzionamento.

Il primo passo è quello di individuare i link contenuti nella pagina o all’interno di un elemento (come il listato dell’esempio).

La variabile outBoundLink contiene tutti i link della pagina dove lo script viene eseguito.

Per ridurre il raggio d’azione dello script ad una sola area bisogna fare un passaggio in più:

La variabile contiene la posizione dell’elemento con id link-list, solo in seguito si può procedere con la ricerca dei link al suo interno utilizzando la variabile al posto di document.

L’espressione regolare

Espressioni Regolari

La mia faccia quando devo usare le espressioni regolari

Non stavi più nella pelle eh? Finalmente si parla di espressioni regolari. Vediamo subito il codice da implementare:

La definizione di Espressione Regolare è: oggetto che descrive un pattern di caratteri. Quella che puoi osservare, partorita con tanta fatica in un afoso pomeriggio di luglio, identifica un URL sia che esso sia inizi con http, https, con o senza www e che termini con una qualsiasi estensione di dominio.

La porzione dell’espressione dove devi concentrare maggiormente la tua attenzione la “white list”, è la parte dove devi inserire i siti alla quale linki più spesso, in modo che il pattern una volta confrontato con il link in uscita non applichi il no-follow.

Nell’esempio qui sopra la white list include: spacewebdesign, support.google, plus.google e stackoverflow, siti pieni di consigli e risorse ovviamente nella versione completa implementata in questo sito sto pian piano aggiungendo tutti i siti dei colleghi a mio avviso più autorevoli.

Per effettuare qualche test ti consiglio di andare su RegularExpression101.

Confronto dei link e applicazione dell’attributo rel=”nofollow”

Lo script si conclude con una serie di confronti tra link e pattern, ma andiamo con ordine.

Nel ciclo for se lasci invariato il valore restituito da outBoundLink.length lo script non verrà eseguito perché l’ultimo elemento è undefined, vi basterà sottrarre il valore di troppo così che lo script venga eseguito senza problemi.

Per settare l’attributo rel dei link deve essere soddisfatta la condizione per la quale il pattern debba essere diverso dal link preso in esame, se la risposta è false allora verrà settato l’attributo altrimenti si continua fino all’esaurimento dei link da testare.

Conclusione

Questa task di inserimento dell’attributo nofollow la facevo manualmente prima di scrivere questo breve script.  Tu cosa ne pensi? Automatizzerai anche tu la tua routine? Hai consigli per migliore questo script? Fammelo sapere in un commento qui sotto.