Interventi volti a migliorare l’usabilità e il grado di ottimizzazione per i motori di ricerca

Alcuni interventi specifici sono stati finalizzati ad apportare miglioramenti all’usabilità del sito e al suo livello di ottimizzazione per i motori di ricerca. Nella fase preparatoria erano già stati evidenziati problemi da entrambi i punti di visti. Vedremo di

108

seguito su quali versanti si è intervenuti. Bisogna, innanzitutto, sottolineare che gli interventi di questa categoria hanno riguardato modifiche in punti precisi del codice HTML delle pagine scaricate dal sito, a differenza invece degli interventi visti in precedenza, incentrati totalmente sul testo e assolutamente indipendenti dalla loro collocazione all’interno dell’HTML.

Un primo intervento a livello di website usability ha interessato i link presenti nel testo. In più occasioni, come individuato alla sezione 3.3.2.2, i link sono segnalati per mezzo della semplice scritta “>>site”. Al fine di rendere più usabili tali link, si è intervenuti indicando, in sostituzione del “site”, il sito di destinazione, o comunque un’informazione che possa aiutare l’utente a capire dove porti il collegamento senza essere costretto a cliccarci. Per modificare la parte visibile all’utente (l’anchor text) di un link, è necessario intervenire su una porzione in particolare del codice HTML che descrive il link, come è possibile vedere di seguito in un esempio tratto dalla sezione “Activités nautiques”:

<a href="http://asso.angers.fr/detail_asso.php?id_asso=4938" onclick="window.open(this.href, '',

'resizable=yes,status=no,location=no,toolbar=no,menubar=no,fullscreen =no,scrollbars=yes,dependent=no,width=900,left=100,height=800,top=100 '); return false;">&gt;&gt;site</a></p>

“<a href=”XXX”>” è infatti il modo attraverso cui, nell’HTML, si inseriscono i link; segue il link cui il collegamento rimanda (anche questa parte può essere localizzata, soltanto però qualora esistesse il corrispondente italiano di tale sito) oltre ad altri attributi da non modificare (ad esempio…). Infine, troviamo “&gt;&gt;site”, dove “&gt;” è l’entity reference che nell’HTML permette di visualizzare il segno “>” mostrato nel sito. Quest’ultima porzione viene mostrata anche da Notepad++ in un colore differente, lo stesso usato per il contenuto testuale del sito; fattore, questo, che ulteriormente ci permette di riconoscere questa quale la porzione su cui intervenire. La porzione di codice è stata pertanto modificata nel modo seguente: Visitate il <a href="http://asso.angers.fr/detail_asso.php?id_asso=4938" onclick="window.open(this.href, '', 'resizable=yes,status=no,location=no,toolbar=no,menubar=no,fullscreen =no,scrollbars=yes,dependent=no,width=900,left=100,height=800,top=100

109

'); return false;">sito dell’associazione Club Nautique Angevin</a> (sito disponibile in lingua francese)</p>

Come suggerito dalle regole dell’usabilità, il link è dunque descrittivo, e le parole linkate sono soltanto quelle esclusivamente interessate dal collegamento: per questo “visitate il” e “sito disponibile in lingua francese” sono stati posti in una porzione di codice differente. Visualizzando la pagina HTML su un browser, questo sarà il risultato ottenuto (in Figura 10, a confronto con quanto presente nel sito originale, mostrato in Figura 9):

Figura 9

Figura 10

Sulla stessa scia di interventi volti al miglioramento dell’usabilità e del posizionamento del sito, troviamo le modifiche alle immagini. Per modifiche alle immagini intendiamo la modifica al codice HTML, affinché queste risultino indicizzabili dai motori di ricerca. Andiamo quindi ad intervenire sui problemi relativi agli attributi alt e a quello title individuati nella fase preliminare; l’inserimento dell’attributo title, in particolare, avrà effetti immediatamente evidenti a livello di usabilità, in quanto permetterà la visualizzazione di una scritta descrittiva dell’immagine al passaggio del mouse. In questo caso, al codice HTML abbiamo aggiunto “title="Il lago di Maine dall'alto"”. Di seguito l’effetto sull’immagine, prima e dopo:

110

Figura 11

In Figura 11 viene mostrato il sito originale: al passaggio del mouse non accade nulla.

Figura 12

In Figura 12, nel sito tradotto e ottimizzato, al passaggio del mouse viene mostrata la scritta informativa sull’immagine.

Alcuni interventi sono stati finalizzati esclusivamente ad ottimizzare il sito per i motori di ricerca, rispetto ad altri che hanno aumentato anche il livello di usabilità del sito Web. Fra questi, rientra sicuramente l’inserimento dell’attributo alt, che come abbiamo visto è spesso assente nel codice HTML delle pagine source. Il testo alternativo deve essere breve e descrittivo dell’immagine. Nel caso visto in precedenza, in cui l’immagine rappresenta una veduta dall’alto del Lago di Maine, abbiamo inserito, ad esempio, il seguente attributo alt: alt="Lago di Maine visto dall’alto".

Un altro importante intervento ha interessato i tag title delle varie pagine e i meta tag description. L’intervento è stato essenzialmente rivolto, nel caso dei title, a renderli più brevi, mentre per i meta tag description a renderli effettivamente più descrittivi e

111

informativi, mantenendoli in un numero contenuto di caratteri. Per la lunghezza di title e description si è scelto di seguire i parametri di analisi del plugin SEOQuake, che si avvicinano alle indicazioni teoriche del capitolo 2; in particolare, si è cercato di mantenere il title fra i 10 e i 70 caratteri, mentre la description, per cui teoricamente non esistono limiti “obbligatori” da rispettare, fra i 70 e 160 caratteri, che corrisponde all’incirca alla lunghezza di una stringa di testo mostrata da Google nello snippet del risultato di ricerca; riportiamo, ad esempio, la traduzione di title e description della pagina “Présentation”, con relativa indicazione della lunghezza (espressa in numero di caratteri), per ogni elemento: risulterà evidente la riduzione del numero di caratteri nella versione italiana.

<title> Le parc de loisirs du Lac de Maine – balade angers,

baignade et navigation - Parc de loisirs

Parco divertimenti Lago di Maine – passeggiate, balneazione e navigazione

n. caratteri 92 73

<meta

name="description"

Parc de loisirs du Maine et Loire (Angers) – détente, navigation et baignade sur le lac, observation faune et flore, balade en famille, activités sportive, pique niques, maison de l’environnement…

Parco divertimenti del Maine e Loira (Angers) – relax,

navigazione e balneazione sul lago, flora e fauna, passeggiate, attività sportive, picnic, casa dell’ambiente

n. caratteri 196 164