Il tag meta http-equiv e il tag meta name si trovano nella sezione head di un documento HTML. Si possono usare associati con diversi attributi quali author, copyright, revisit-after, refresh, keywords, classification, publisher e altri.

Tag meta http-equiv e name

Questi attributi non sono utili ai fini dell’indicizzazione del sito.

Se in una pagina viene scritto in diverse lingue, con i Meta-Tags si possono introdurre delle parole chiave per le differenti lingue. Si prepara una riga per ogni lingua separata aggiungendo il parametro “lang”.

<meta name="keywords" lang="it" content=""> : italiano
<meta name="keywords" lang="de" content=""> : tedesco
<meta name="keywords" lang="en" content=""> : inglese
<meta name="keywords" lang="fr" content=""> : francese
<meta name="keywords" lang="da" content=""> : danese
<meta name="keywords" lang="el" content=""> : greco
<meta name="keywords" lang="es" content=""> : spagnolo
<meta name="keywords" lang="nl" content=""> : olandese
<meta name="keywords" lang="ru" content=""> : russo
<meta name="keywords" lang="fi" content=""> : finlandese
<meta name="keywords" lang="no" content=""> : norvegese
<meta name="keywords" lang="pt" content=""> : portoghese
<meta name="keywords" lang="sv" content=""> : svedese
<meta name="keywords" lang="tr" content=""> : turco

Il tag meta robots si trova nella sezione head di un documento HTML.

Con il file robots.txt si ha la possibilità di dirigere i bots nel sito, ma se si hanno tante regole per tante pagine diverse questo potrebbe diventare troppo grande. Un metodo più diretto per redirigere i bots si ha introducendo il tag meta robots direttamente nella pagina.

Nel tag meta robots vengono utilizzati due parametri: index / noindex, follow / nofollow e noarchive.

Con index si dice al bot che la pagina può essere indicizzata. Con noindex non si permette l’indicizzazione.

Il parametro follow indica al bot di seguire i link che trova nella pagina html. Con nofollow si dice non seguire i link nella pagina.

I due parametri si lasciano combinare liberamente o si possono usare singolarmente.

Un esempio pratico di un’istruzione che dice al bot di non indicizzare la pagina nel suo indice e di seguire i link che trova nella pagina:

<meta name="robots" content="noindex,follow">

Questa istruzione la si potrebbe introdurre in una pagina che contiene una lista di collegamenti verso singoli articoli in altre pagine del proprio sito.

Al posto di robots potrebbe essere specificato il nome del singolo bot (googlebot o slurp).

I tag meta noodp e meta noydir si trovano nella sezione head di un documento HTML.

Non sempre il tag title ed il tag meta description che sono scritti nella pagina sorgente del documento html vengono ripresi dai motori di ricerca nella lista dei risultati. Oppure potrebbe essere che alcune pagine del sito ne siano sprovvisti in quanto non sono mai stati introdotti.

Tag meta noodp e meta noydir

Nel caso che manchino il tag title ed il tag meta description alcuni motori di ricerca riprendono le descrizioni di questi due tag dal contenuto che si trova in Open Directory Project (dmoz.org) o nella directory di Yahoo! oppure generano una descrizione riprendendo del testo che si trova all’interno della pagina.

Ma purtroppo non sempre questi sono i contenuti che il webmaster vorrebbe vedere nel risultato di una ricerca. Se si tratta di un sito che è stato registrato diversi anni prima ed ora magari sono cambiati i contenuti o anche il proprietario (quindi l’argomento trattato) del sito, allora si hanno difficoltà a far cambiare il contenuto del testo.

Il fatto è che i testi relativi al tag title e al tag meta description sono stati introdotti manualmente da un redattore che a suo tempo aveva visitato il sito e riteneva che quella pagina dovesse avere quella descrizione. Quindi non erano stati decisi dal webmaster del sito.

La soluzione al problema la hanno trovata i motori di ricerca e sono stati introdotti due nuovi tag: noodp e noydr.

Nel caso che vengano utilizzati questi due meta tag allora il motore di ricerca non utilizza il testo descrittivo che si trova in DMOZ ma utilizza il suo algoritmo per generare una descrizione conforme alla pagina. In questo caso viene controllato il contenuto della pagina e nella maggior parte delle volte viene ripreso il testo descrittivo che si trova nel tag meta description.

Per evitare che venga utilizzata la descrizione DMOZ:

<meta name="robots" content="noodp">

Per evitare che venga utilizzata la descrizione Yahoo!:

<meta name="robots" content="noydr">

Per evitare che venga utilizzata la descrizione DMOZ e Yahoo!:

<meta name="robots" content="noodp, noydr">

Se un sito è presente nella directory DMOZ e Yahoo! fino a poco tempo fa veniva visto positivamente dai motori di ricerca, in quanto le pagine erano state visionate da una terza persona che aveva deciso che quel sito aveva le caratteristiche per essere introdotto nella loro directory in una sottocategoria particolare. Naturalmente chi non veniva accettato nell’indice non era molto contento. Sembra che oggi questo non sia più così importante come lo è stato fino a qualche anno fa.

Il tag meta description si trova nella sezione head di un documento HTML e descrive con alcune parole chiave il contenuto della pagina a cui si riferisce. Si consiglia di usare un testo descrittivo così che l’utente riesca a capire bene, poichè il contenuto del tag meta description viene proposto anche dai motori di ricerca nella lista dei risultati come descrizione della pagina.

Tag meta description

Si hanno a disposizione ca. 160 caratteri di testo per descrivere meglio il contenuto della pagina rispetto al testo che si era scritto nel tag title.

La descrizione deve essere scritta in modo tale che il visitatore che poi giunge sulla pagina trovi ciò che si aspettava nel momento in cui aveva letto la descrizione nel motore di ricerca.

Il tag code viene principalmente utilizzato quando si formattano in un determinato modo delle righe particolari come righe di codice di programma.

Tag pre

Il tag code è un elemento inline, che può essere utilizzato da un altro blocco quale il tag p.

Esempio:

<p>Definiamo il <code>codice</code> in questo modo</p>

si vede:

Definiamo il codice in questo modo

Con il browser la parola "codice" viene rappresentata con una scrittura corsiva.

Con l’utilizzo del tag code bisogna fare attenzione a due cose: nel testo all’interno del tag code non si possono utilizzare i segni "<" e ">" perchè questi verrebbero interpretati dal browser come codici html. Al loro posto si utilizzano le cosiddette Named Entities: "&lt" e "&gt".

Nel caso il codice sia più lungo di una riga si utilizza invece il tag pre.

Le righe all’interno dell’elemento pre vengono visualizzate dal browser così come vengono scritte, inclusi gli spazi cosiddetti White-spaces come Blanks, Tabs e nuovi paragrafi. Anche in questo caso bisogna convertire i simboli "<" e ">" come spiegato sopra se si vengono a trovare all’interno del codice.

Visto che la grandezza dei caratteri è fissa, si potrebbero scrivere dei testi in forma tabellare senza utilizzare i tags della tabella.

Riga 1   Riga 1   Riga 1   Riga 1   Riga 1   Riga 1
Riga 2   Riga 2   Riga 2   Riga 2   Riga 2   Riga 2
Riga 3   Riga 3   Riga 3   Riga 3   Riga 3   Riga 3

"cite" è un tag che si usa per la struttura logica di una pagina e per una citazione. Si tratta di un elemento inline che solitamente i browser rappresentano con una scrittura corsiva.

Esempio:

<cite>Questo testo è racchiuso nel tag cite</cite>

si vede:

Questo testo è racchiuso nel tag blockquote

Con il browser il testo sopra viene rappresentato in corsivo.

Per chiudere un paragrafo normalmente si usa il tag "p". Nel caso si tratti di una citazione il paragrafo può essere marcato in modo speciale con il tag "blockquote".

Esempio:

<blockquote>Testo racchiuso nel tag blockquote</blockquote>

si vede:

Testo racchiuso nel tag blockquote

Con il browser il testo nel paragrafo sopra viene rappresentato rientrante.

Nel caso si debbano spostare le pagine con indirizzi assoluti da un server ad un altro o cambiare l’indirizzo principale delle pagine di un sito in un altro percorso l’utilizzo del tag "base" risulta molto utile.

Con il comando "base" nella sezione "head"del documento html viene indicato l’indirizzo di base per tutti i collegamenti relativi che si trovano nel documento.

L’attributo "href" indica il percorso attuale in cui poi tutti i collegamenti del documento vengono convertiti.

Esempio

<html>
<head>
<base href="http://www.nome-dominio.com">
</head>
</html>

Nel caso che nel documento ci sia un riferimento ad un’immagine nella forma "images/image.jpg" questo viene convertito in:

http://www.nome-dominio.com/images/image.jpg

Un’ulteriore variante del tag "base" indica la finestra di destinazione globale per tutti i link di un documento. Questo può essere molto utile nei Framesets, dove ogni pagina che viene caricata deve comparire in un determinato frame.

La riga:

<base target="contentwindow">

ridirige tutti i click della pagina verso il frame con nome "contentwindow".

Si può usare anche con:

<base target="_blank">

e determinare che tutti i click della pagina appariranno in una nuova finestra.

Netscape introdusse alcuni anni fa una paletta di 216 colori fissa (Web safe color palette) che avrebbe funzionato su ogni piattaforma software con soli 256 colori disponibili.

I colori rimanenti vengono visualizzati in modo non corretto (dither), nel senso che il browser avrebbe sostituito i colori che non sono nella paletta con altri il più vicini possibile a loro.

Sul sito colorschemer.com si trovano dei software per lo schema dei colori (in inglese).

Un online tool per miscelare i colori si trova sul sito colormixers.com/mixers/cmr.

Un generatore di schemi di colore sul sito wellstyled.com (Color Scheme Generator), molto utile quando si prepara un layout per vedere quali colori si associano meglio.

Alcune regole per preparare le pagine del sito web con caratteristiche di usability.

1. Una struttura chiara: il testo, le immagini e la navigazione devono essere strutturati in modo tale che all’utente sia tutto chiaro in un attimo.
2. Meno è meglio: questo vale per tutti gli elementi della pagina (testo, immagini, navigazione, effetti). Rinunciare ad esagerare nell’utilizzo di certi elementi e cercare alternative. Non tutti gli utenti hanno attivato javascript o hanno installato gli ultimi plug-in.
3. Aiutare nell’orientamento: una funzione di ricerca, una sitemap e la barra di stato possono aiutare il visitatore a trovare ciò che viene cercato.
4. Piccole porzioni di testo: utilizzo di poco testo per il titolo ed il sottotitolo dell’articolo, poi nel corpo dell’articolo che viene caricato in una seconda pagina si può utilizzare tutto il testo che si vuole.
5. Sviluppare senza barriere: ricordarsi che la pagina può venire visitata anche da ciechi o da utenti con problemi alla vista.
6. Preview delle immagini: utilizzo di piccole immagini che possono venire ingrandite nel momento in cui le stesse vengono cliccate. In questo modo si riduce anche il tempo di attesa.
7. Utilizzo di link che si capiscano: far capire al visitatore dove portano determinati link, i link già visitati devono avere un’altra apparenza rispetto ai link che sono ancora da visitare.
8. Rispetto degli standard: ciò che si è imposto su determinate pagine conosciute, va riutilizzato, si ha più fiducia in ciò che è familiare.
9. Le impostazioni personali: lasciare il controllo del browser all’utente, in modo che possa definire da solo la grandezza della scrittura o della finestra.
10. Ricerca del contatto: offrire la possibilità all’utente di inviare una richiesta nel modo più semplice possibile e rispondere alla stessa in modo celere.