Post

Archivio di March, 2007

Quando è che Google ha indicizzato il tuo sito l’ultima volta?

Ok, Google non è proprio “il bene”, però è il motore di ricerca più usato, e fa comodo sapere quando è che il tuo sito è stato indicizzato l’ultima volta.

Per saperlo ci sono gli “strumenti per i webmaster“, che ti danno anche altre utili informazioni:

  • gli eventuali errori che il crawler ha trovato, tra cui le pagine inesistenti, utili per visualizzare link “persi”
  • le ricerche che hanno portato al sito, con la posizione in cui è stato trovato
  • quanti link puntano alle pagine del sito da fuori

Ovviamente per poter accedere a queste informazioni dovete in qualche modo provare che il sito è vostro, e lo potete fare inserendo nelle pagine un tag <meta> che vi viene indicato, oppure aggiungendo una pagina (anche vuota) con un nome che vi dicono.

Attenzione a lasciare il tag o il file, perché il controllo viene fatto periodicamente!

HTML 4.01 o XHTML 1.0?

Cosa serve per trasformare un codice HTML 4.01 in XHTML 1.0?

  • Il codice deve essere “ben formato” (well-formed), cioè tutti i tag devono essere chiusi, anche quelli che non hanno un tag di chiusura. Inoltre, i tag devono essere “nestati” correttamente (ma quello era vero già nell’HTML 4.01)
  • Gli elementi e i nomi degli attributi devono essere minuscoli
  • I valori degli attributi devono essere tra virgolette

Ma quale standard usare?

XHTML 1.0 Transitional: se nella vostra pagina ci sono dei tag deprecati, come <font> ma siete sicuri che il documento sia ben formato (quindi abbia tutte le virgolette e i tag di chiusura a posto).

XHTML 1.0 Strict: se usate i CSS per tutti gli aspetti di presentazione. E’ lo standard consigliato per le pagine sviluppate da zero.

HTML 4.01 (Transitional, Strict o Frames): se non vi interessa che il sito sia manutenibile o se usate un programma che ancora non supporta l’XHTML

XHTML 1.0 Frames o HTML 4.01 Frames: se usate i frame. Valgono ancora tutti gli attributi deprecati, ma dovrete metterci mano presto :)

XHTML 1.1: da non usare ancora, visto che non è pienamente supportato dai browser.

The OpenDirectory Project

www.dmoz.org è un sito di “open directory”, cioè un archivio aggiornato in maniera collaborativa di “pagine gialle” di Internet.

Al suo interno è possibile navigare in un albero di categorie per trovare il sito che vi interessa. Non solo, è anche possibile inserire il vostro sito con una descrizione.

L’inserimento viene controllato da delle “vere” persone, gli Editor, e quindi spesso ci vuole qualche giorno… si può contribuire diventando editor di una categoria di vostra scelta.

La cosa bella di inviare un sito a Dmoz è che i dati ODP (OpenDirectory Project, appunto) vengono letti da moltissimi motori di ricerca, tra cui Google, Yahoo! ed altri; è un buon punto di partenza, quindi, perché il vostro sito venga indicizzato dai motori di ricerca.

Il tag del giorno: <meta>

I tag <meta> sono contenuti all’interno di <head> e contengono informazioni sul contenuto del documento.

Da usare è

<meta http-equiv="content-type" content="text/html;
          charset=UTF-8"/>

che indica la codifica del carattere usata nel documento. NOTA: è in secondo piano rispetto a quello che dice il server…! Gli altri meta tag sono opzionali; alcuni sono utili per il posizionamento nei motori di ricerca, anche se non sono così indispensabili come normalmente si pensa, e anzi, a volte possono essere controindicati.

<meta name="description" content="Tutto quello che può
       servire ad un programmatore Web" />

Il tag description viene utilizzato dai motori di ricerca non tanto per il posizionamento, ma come descrizione nei risultati della ricerca. Può essere utile quindi metterlo se nei risultati viene visualizzato qualcosa che non volete.

<meta name="keywords" content="web, html, css,
       posizionamento, motori di ricerca" />

Il tag keywords NON viene usato da Google, ma anzi può essere negativo per il posizionamento se lo riempite con troppe parole chiave o ripetendone alcune. D’altra parte, altri motori di ricerca lo utilizzano, quindi indicare alcune parole chiave importanti può essere positivo.

<meta name="robots" content="noindex,nofollow" />

evita che i motori di ricerca indicizzino la pagina (noindex) e seguano i link contenuti nel testo (nofollow). Al posto di “robots” potete usare anche “googlebot” (specifico per Google) e dare anche i valori “noarchive” e “nosnippet” per fare sì rispettivamente che Google tolga la pagina dalla sua cache e che non ne visualizzi degli estratti.

Tutti gli altri tag <meta> non sono implementati dai browser, e quindi non vale la pena inserirli manualmente. Alcuni possono anche essere controindicati; ad esempio, il tag meta Author, che contiene tra le altre cose l’email dell’autore, può essere parsato dagli spider che cercano indirizzi su cui fare spam, e quindi andrebbe evitato.

Come piace a Google

Cioè, come fare ad essere posizionati in cima alla lista.

NOTA: non è possibile essere certi di stare al primo posto! Quindi se qualcuno vi propone un posizionamento al primo posto in google, è una bufala :)

Ci sono però delle regole da seguire, poche e semplici (anche se con dei risvolti spesso complessi):

  • Fare sì che altri siti sullo stesso argomento linkino al vostro. Questa è la cosa migliore… ma anche la più difficile. Ovviamente, meglio se il link è testuale e contiene nel testo le parole chiave per cui volete essere indicizzati.
  • Testo, testo, testo, e formattato in HTML “pulito”. Quindi…
    • tutte le pagine devono essere accessibili da un link testuale statico (no ai parametri passati nell’URL)
    • contenuti descrittivi, con tutte le parole chiave che vi interessano ben in evidenza
    • non usare le immagini per veicolare contenuto testuale
    • mettere <title> e <alt> correttamente
  • Non scrivere pagine per i motori di ricerca. L’idea è che un sito scritto per accumulare hit viene tolto dall’indice di Google. Quindi:
    • niente redirezioni
    • niente testo nascosto
    • niente duplicazione dei contenuti
    • niente pagine piene di contenuti presi da altri siti

Il tag del giorno: <title>

E’ l’unico tag obbligatorio all’interno di <head>, ma ha una grande importanza…

  • è quello che viene messo nella barra del titolo del browser
  • viene usato di default come titolo dei segnalibri/preferiti
  • viene usato come riferimento dai motori di ricerca per l’indicizzazione del sito

Pensate bene a quello che ci mettete, quindi…, ma attenti a non strafare, nella barra del titolo non entrano due righe :)

Il titolo può contenere entità (< e >, ad esempio), ma non altri tag, nemmeno commenti.

Dove trovare le immagini

Personalmente, una delle cose che trovo più difficile è scegliere l’immagine “adatta” ad un sito (non per niente questo non ne ha ;) ). E’ utile quindi poter accedere a siti da cui poter scaricare immagini con una licenza che ne permette l’uso. Eccone alcuni:

Gratuiti (attenzione, non tutte le immagini sono utilizzabili!):
Flickr (con una comoda ricerca per tipologia di licenza)
MyPhotos

A pagamento (ma a basso costo):
Shutterstock (solo su abbonamento)
Fotolia
123rf
Dreamstime
Bigstockphoto
Istockphoto

Il tag del giorno: <html>

Con questo post cominciamo una serie di articoli sui tag dell’HTML. L’idea è avere un riferimento per cosa usare, cosa non usare e, casomai, con cosa sostituirlo. Sono benvenute anche idee per usare in modo creativo le cose :)

Il tag HTML va preceduto dalla <DOCTYPE> (un elenco di quelle “normali” è qui). Se si tratta di XHTML ci vorrebbe anche una dichiarazione XML, del tipo:

<?xml version="1.0" encoding="UTF-8"?>

ma i browser ancora non la supportano, quindi bisogna farne a meno.

L’elemento <html> è la radice di tutti gli altri elementi; non ci dovrebbero quindi essere elementi al di fuori di esso. (NOTA: questa considerazione è la base di un “trucco” CSS che permette di impostare stili condizionali solo per Internet Explorer)

In XML, l’elemento radice <html> viene dichiarato con almeno questi attributi:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">

xmlns indica il namespace, cioè l’elenco di elementi ed attributi definiti nella DTD e in XHTML va indicato esplicitamente.

xml:lang e lang sono due metodi per identificare la lingua in cui è scritto il documento, da usare entrambi per compatibilità. L’informazione sulla lingua è importante per l’accessibilità; inoltre, si può utilizzare per gestire al meglio siti multilingua.

Il tag <html> deve contenere una <head> e un <body>, e nient’altro.

10 “must” dell’HTML

Perché? Perché facendo così:

  • I motori di ricerca indicizzano meglio le pagine
  • La manutenzione al codice è più facile e veloce
  • Si può cambiare grafica facilmente
  • Il sito è leggibile con tutti i tipi di browser (non solo quelli “normali” ;) )

Insomma, ecco cosa fare e cosa non fare:

  1. SI’: usare tag semanticamente corretti. Ad esempio, non usare <p> per i titoli (anche facendo il carattere più grande con i CSS) ma <h1>
  2. NO: non usare il tag <font>. Ho detto NO! Qualsiasi cosa si possa fare con <font> si può fare anche con i CSS. L’idea è: con l’HTML si fa la struttura semantica, con i CSS si modifica l’aspetto.
  3. SI’: usare le virgolette per racchiudere i valori degli attributi dei tag. Ad esempio, <p class=”menu”> e non <p class=menu>. Lo so, se state usando PHP è una palla, ma potete inserire HTML “normale” chiudendo i tag <? ?>, per esempio così: 
    <? if($condizione) { ?><p class="menu">

< } >
  4. SI’: chiudere con uno / i tag che non hanno chiusura, come img, br, etc. Meglio se la / finale è preceduta da uno spazio, così: <br />
  5. SI’: iniziare sempre la pagina con una dichiarazione <DOCTYPE> corretta.
  6. NO: non “incastrare” i tag. Cioè, non così: <strong><em>testo</strong></em> ma così: <strong><em>testo</em></strong>
  7. SI’: usare i tag in minuscolo: in HTML sono case-insensitive, ma in XHTML no.
  8. NO: non usare le tabelle per formattare la pagina, usa i div! Però, se devi fare del contenuto tabellare, usa le tabelle, non dei div uno accanto all’altro ;)
  9. NO: non usare iframe, animazioni flash, immagini per visualizzare del contenuto di testo, o non verranno indicizzati dai motori di ricerca
  10. E soprattutto, valida tutte le pagine con un validatore HTML (http://validator.w3.org) per essere sicuro che seguano gli standard. In questo modo sarà anche più facile farle leggere correttamente a tutti i browser :)

Cosa è loremipsum.it

…o meglio, cosa vorrebbe essere!

Vorrebbe essere un repository di materiale utile per gli sviluppatori Web, da cui poter sì attingere per fare copia&incolla di roba, ma anche per discutere e scambiarsi “trucchi” per lavorare meglio e più velocemente.

Per capirsi meglio, SI’ a discussioni sull’accessibilità e sulla progettazione Web, NO a chi usa i tag <font> (e non si vergogna di farlo ;) )

Nelle “Pagine” a destra degli strumenti utili per riferimento, nel blog gli articoli da commentare.

« Voci precedenti

Archivi e link