Il tag title si trova nella sezione “head” di un documento HTML. Non si tratta di un Metatag vero e proprio. Un buon title riassume in poche parole il contenuto che si trova all’interno della pagina. Si consiglia di introdurre nel tag title alcune parole chiave per la pagina a cui si riferisce.

Il tag title è uno dei fattori di successo più importanti della pagina.

Tag title

L’utilizzo del tag title in un documento HTML è legato ai bookmarks. Il contenuto di questo tag viene proposto come descrizione quando si memorizza una pagina nei propri bookmarks (favoriti).

Scegliendo una descrizione dettagliata sul contenuto del sito che si sta memorizzando, si aiuta l’utilizzatore a catalogare o a trovare più semplicemente il sito in un secondo momento nella lista dei propri bookmarks.

Lo stesso vale anche per altre funzioni del browser, come ad esempio la History-List o cronologia, dove viene anche proposto il contenuto del tag title come descrizione della pagina visitata.

Qui si deve scrivere in poche parole ciò che il visitatore trova una volta che arriva sulla pagina, in quanto questo testo viene proposto anche dai motori di ricerca nella lista dei risultati. Per questo motivo è bene introdurre in questo tag delle parole che poi si ritroveranno anche nel contenuto della pagina.

Nel tag meta description si ha poi la possibilità di descrivere meglio il contenuto della pagina in quanto si hanno più parole a disposizione.

Il file robots.txt serve per dirigere i bots dei motori di ricerca, per includere o escludere dalla registrazione nel motore di ricerca determinati file o directory. Di solito si scrive ciò che va escluso. Il file di testo robots.txt deve essere posizionato nella root directory del sito e deve contenere almeno un’istruzione, un file vuoto non viene considerato.

robots.txt

Questo è il comando più semplice:

User-agent: *
Disallow: /

La prima riga si riferisce a tutti i bots, la seconda esclude tutti i file. In questo modo il sito non verrebbe registrato da alcun motore di ricerca.

User-agent: *
Disallow:

Senza lo slash invece il sito viene aperto a tutti i bots per la registrazione delle pagine. Ma normalmente si ha qualcosa da nascondere ai motori di ricerca.

User-agent: *
Disallow: /test

In questo modo vengono esclusi tutti i file e le directory che iniziano con test. Se si volesse escludere la directory test, bisogna scrivere:

User-agent: *
Disallow: /test/

Con User-agent: * ci si rivolge a tutti i bots. Per dare istruzioni solo al Googlebot, bisogna scrivere:

User-agent: *
Disallow: /test/
User-agent: Googlebot
Disallow: /test/
Disallow: /test1/
Disallow: /test2/ #non leggere questa directory

Con il segno # si possono introdurre commenti.

Attenzione però: introducendo User-agent: Googlebot Google guarda solamente la sua istruzione in questa sezione e non legge le istruzioni che si trovano sotto User-agent: *. Nel caso che nel sito web ci siano delle parti (pagine o directory) che non devono essere lette dai bot, allora queste devono essere notate in ogni sezione.

Per evitare che Google Bot indicizzi tutte le pagine:

User-agent: Googlebot
Disallow: /

Con allow si dice espressamente al Googlebot che deve indicizzare un file particolare nella directory che non deve indicizzare:

User-agent: Googlebot
Allow: /test/test.html
Disallow: /test/

Per evitare che Microsoft Search (Windows Live) controlli tutto il sito:

User-Agent: MSNBot
Disallow: /

Per evitare che Microsoft Search (Windows Live) controlli la pagina e continui a girare di qua e di là, lo si può rallentare:

User-Agent: MSNBot
Crawl-Delay: 36000

Per evitare che Microsoft Search (Windows Live) faccia vedere il preview della pagina:

User-agent: searchpreview
Disallow: /

Per evitare che Alexa registri le pagine nel suo archivio:

User-Agent: ia_archiver
Disallow: /

Per il file robots.txt non è stata definita una grandezza massima. Potrebbe anche essere più grande di 2000 caratteri.

Sul sito robotstxt.org si trova tutto quello che c’è da sapere sul file robots.txt (in inglese).

Sul sito mcanerin.com si può generare online il file robots.txt.

L’occasione in cui si ridisegna il sito internet può essere favorevole per aggiornare anche alcune regole su come prepararlo.

1. La navigazione deve essere semplice e comprensibile in modo che il visitatore riesca a trovare ciò che gli interessa (che è poi il motivo per cui è appena arrivato). Utilizzo di CSS tools per il menu e gli elementi di navigazione. Il sito deve essere navigabile senza che il visitatore sia costretto ad installare plug-in o altro software, quindi si dovrebbe preparare un sito alternativo in html.
2. Rinunciare alle animazioni, finestre popup o introduzioni inutili (anche musicali, in questo caso far ben vedere il tasto di stop o pause) che non fanno altro che “rubare” tempo al visitatore. Non portano alcun valore aggiunto al sito ed allungano il tempo di trasferimento specialmente se sono sulla prima pagina, che si dovrebbe invece caricare velocemente.
3. Da ogni pagina ci deve essere la possibilità di raggiungere la pagina principale, dei contatti, delle richieste e della privacy. Informare il visitatore con chi si ha a che fare.
4. Non spaventare il visitatore con troppa grafica e colori vivaci. Meglio meno che troppo.
5. Il carattere della scrittura utilizzata nel testo non deve essere troppo piccolo, la soluzione migliore è di dare al carattere una grandezza relativa. Il colore della scrittura deve essere ben leggibile e contrastato. Indicare la famiglia del font utilizzato nel file css e scegliere una scritttura standard, che sia installata sulla maggior parte dei sistemi operativi. Quando si scrive fare attenzione agli errori di scrittura e grammaticali.
6. Rispondere alle richieste pervenute per e-mail. Non ignorare le mail con domande che arrivano dai visitatori.
7. Non discostarsi dall’identità dell’azienda. Il design del sito deve riprendere l’identità aziendale conosciuta dal visitatore.
8. Dare la possibilità a tutti di vedere il sito e le informazioni in esso contenute. Testare il layout e le nuove funzioni implementate nelle pagine con più browser: diversi e di versioni diverse.
9. Controllare i link. Collegamenti non funzionanti (quali pagine o siti non trovati) non fanno una buona impressione al visitatore e nemmeno al motore di ricerca. Preparare quindi le pagine per gli errori standard come per esempio la pagina con “errore 404, pagina non trovata”.
10. Con una sitemap e funzioni di ricerca all’interno del sito si dà la possibilità al visitatore di trovare ciò che cerca.
11. Effettuare gli update del sito ad intervalli regolari. Controllare che non ci siano in linea eventi con date passate.
12. Il web è interattivo. Si possono preparare elementi interattivi come un forum, guestbook e weblog.
13. Trasferire e pubblicare le pagine del nuovo sito nel momento in cui queste sono finite senza mettere cartelli del tipo “Sito in costruzione”. Piuttosto aspettare ed aggiungere poi con il tempo le pagine aggiuntive, senza però cambiare a posteriori i nomi dei file della pagine già trasferite e già registrate nei motori di ricerca.
14. Nel caso che si fossero cambiati dei nomi file delle pagine, effettuare un redirect 301 per informare il motore di ricerca che al posto del precedente nome pagina ora ne deve memorizzare un altro.

Sul sito browsershots.org si può controllare come le pagine vengano viste in diversi browser.

Con MS Internet Explorer 6, posizionando il mouse sopra un’immagine si apre una piccola finestra: l’Image-Toolbar, con la quale si può stampare o memorizzare sul disco l’immagine. Per disattivare questa funzione sulla pagina si può aggiungere un meta-tag:

meta http-equiv="imagetoolbar" content="no"

nella parte "head" della pagina html. Questo comporta che la funzione viene disabilitata per tutte le immagini della pagina.

Se si volesse disabilitare la funzione su singole immagini della pagina, bisogna dare il seguente attributo all’immagine:

galleryimg="no"

Vi sono ormai diverse grandezze per i banner. Si cerca quindi di imporre delle misure standard. Le grandezze indicate sono in pixel, larghezza x altezza.

Banner e bottoni

468 x 60 Full Banner (Image-Ad: 15 Kb, Flash-Ad 20 Kb)
234 x 60 Half Banner
88 x 31 Micro Button
120 x 90 Button #1
120 x 60 Button #2
120 x 240 Vertical Banner
125 x 125 Square Button
728 x 90 Super Banner (Image-Ad: 20 Kb, Flash-Ad 30 Kb)

Rettangoli e Pop-Up

300 x 250 Medium Rectangle (Image-Ad: 20 Kb, Flash-Ad 30 Kb)
250 x 250 Square Pop-Up (Image-Ad: 15 Kb, Flash-Ad 20 Kb)
240 x 400 Vertical Rectangle
336 x 280 Large Rectangle
180 x 150 Rectangle (Image-Ad: 15 Kb, Flash-Ad 20 Kb)
400 x 400 Superstitial, Flying Layer, AdLayer, Interstitial

Skyscraper

160 x 600 Wide Skyscraper (Image-Ad: 20 Kb, Flash-Ad 30 Kb)
120 x 600 Skyscraper (Image-Ad: 20 Kb, Flash-Ad 25 Kb)
300 x 600 120 Half Page Ad

Altri formati banner

728 x 90 Superbanner
468 x 60 Traditional Full Banner
400 x 400 Universal Flash Layer
300 x 250 Medium Rectangle
234 x 60 Halfsize Banner
160 x 600 Wide Skyscraper

Flash-Layer: animazioni Flash con style CSS con bottone Close, max 30 Kb, dopo max 10 secondi si ferma sulla pagina e non si sposta più.

La grandezza di questi formati non dovrebbe superare i 15 KByte (Skyscraper) o i 20 KByte (tutti gli altri formati).

Alcuni termini relativi alla pubblicità online

Con Click si definisce l’azione di cliccare su di una pubblicità da parte di un visitatore.

Ad Click o Click Through è il numero delle volte che la pubblicità è stata cliccata da un utente.

Con Ad Click Rate si calcola il rapporto tra quante volte è stato visualizzato il banner ed i click che sono stati fatti sullo stesso.

Ad Impression o Ad View è è il numero delle volte che la pubblicità è stata visualizzata (quindi numero di utenti) in un determinato periodo.

Il Cost per Click (CPC) è il costo di ogni singolo click che a sua volta ridirige l’utente verso la pagina dell’inserzionista.

Il Cost per Order (CPO) è determinato da ogni singolo ordine effettivo che l’utente effettua nel sito dell’inserzionista.

Il Click Through Rate (CTR) indica il rapporto tra le visualizzazioni dell’inserzione ed il numero di click effettuati sulla stessa entro un determinato periodo.

Con Hit (web request) si indica il numero di richieste che vengono fatte al webserwer quando viene caricata una pagina in un browser. La singola pagina potrebbe avere delle immagini o testo che viene prelevato al suo interno. Si calcola il traffico generato da una pagina.

Con Page Impression o Page View si indica il numero di contatti di un sito internet, il totale delle pagine del sito che sono state caricate in un browser da un utente.

Con Cost per Mille (CPM), anche detto Cost per thousand (CPT), si definisce il costo dell’inserzione su ogni 1000 visualizzazioni della stessa.

Con View Time si indica il tempo in cui l’inserzione è stata visualizzata da parte di un utente.

Visit definisce il numero dei visitatori di un sito internet, sia di visitatori nuovi che di quelli che sono tornati.

Molti utenti impostano la grandezza del font nel proprio browser. Se però la grandezza del font della pagina è stata definita con px, la grandezza pixel, invece di em, il font non diventa più grande ma rimane come è stato definito dal webmaster.

Con il seguente calcolo si riesce a definire la grandezza em partendo dalla grandezza px.

em è una grandezza relativa che è proporzionata alla grandezza della scrittura che è stata definita nell’elemento base. Le scritture del browser hanno per definizione una grandezza base di 16px. Quindi non dichiarando nulla, 1em = 16px.

Se nel file css nell’istruzione body si introduce la seguente riga:

body {font-size: 62.5%;}

si definisce che 1em è uguale a 10px (62,5% di 16 risulta essere 10).

Così facendo tutte le grandezze delle scritture che vengono successivamente definite nel file css risultano sempre un decimo della misura in pixel: 12px = 1.2em, 14px = 1.4em e coì via.

La cosiddetta favicon. Vicino all’indirizzo internet nella barra del browser si può avere un’icona personalizzata del sito in cui ci si trova. Si tratta di preparare un’immagine in formato ICO, con trasparenza della grandezza 16×16 px o anche 32×32 px, con 256 colori o in True Color.

Per preparare una favicon si può utilizzare un programma online come favicongenerator.

Oppure si può preparare un’immagine in formato .bmp la quale viene poi convertita in formato .ico da un programma come Irfanview.

Una volta preparata l’immagine bisogna effettuare il collegamento nel tag "head" della pagina.

Ci sono 2 varianti:

link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"

e

link rel="icon" href="/favicon.ico" type="image/x-icon"

Nella specificazione del W3C però si consiglia la seconda per evitare lo spazio in rel, che però potrebbe non funzionare con alcuni browser. Si preferisce quindi l’utilizzo della prima variante.

Discussioni ci sono anche per il MIME, in quanto oltre a image/x-icon viene utilizzato anche image/ico o specificazioni proprietarie Microsoft. Corretto è image/x-icon.

Se si dispone di una favicon per Apple iPod Touch o iPhone:

link rel="apple-touch-icon" href="/favicon.png"