HTTP headers: Cosa sono?

Quasi tutto quello che vedi nel browser viene trasmesso al computer tramite il protocollo HTTP. Ad esempio, quando hai aperto questa pagina , il browser probabilmente ha inviato più di 40 richieste HTTP e ha ricevuto risposte HTTP per ciascuna di esse. Gli HTTP headers sono la parte centrale di queste richieste e risposte HTTP, e portano informazioni riguardo il browser client, la pagina richiesta, il server e altro ancora.
Ecco un esempio pratico:

Quando si digita un URL nella barra degli indirizzi, il browser invia una richiesta HTTP che può apparire come segue:

GET /miosito/blog/titolo-del-mio-articolo-/ HTTP/1.1
  Host: net.tutsplus.com
  User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5 (.NET CLR 3.5.30729)
  Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
  Accept-Language: en-us,en;q=0.5
  Accept-Encoding: gzip,deflate
  Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
  Keep-Alive: 300
  Connection: keep-alive
  Cookie: PHPSESSID=r2t5uvjq435r4q7ib3vtdjq120
  Pragma: no-cache
  Cache-Control: no-cache

La prima linea è la "Request Line", che contiene alcune informazioni di base sulla richiesta. E il resto sono gli header HTTP. Dopo tale richiesta, il browser riceve una risposta HTTP che può apparire come segue:

HTTP/1.x 200 OK
Transfer-Encoding: chunked
Date: Sat, 28 Nov 2009 04:36:25 GMT
Server: LiteSpeed
Connection: close
X-Powered-By: W3 Total Cache/0.8Pragma: publicExpires: Sat, 28 Nov 2013 08:13:04 GMTEtag: "pub1259380237;gz"Cache-Control: max-age=3600, publicContent-Type: text/html; charset=UTF-8Last-Modified: Sat, 05 Aug 2010 03:50:37 GMTX-Pingback: http://www.paitadesign.com/blog/xmlrpc.phpContent-Encoding: gzipVary: Accept-Encoding, Cookie, User-Agent

<!-- ... contenuto html ... -->

La prima linea è la "Status Line", seguita dagli "header HTTP", fino alla riga vuota.
Dopo di che, inizia il "contenuto" vero e proprio della pagina (in questo caso, un output HTML).
Quando si guarda il codice sorgente di una pagina web nel browser, si vedrà solo la parte di codice HTML e non le intestazioni HTTP, anche se effettivamente sono state trasmesse così come le vedete sopra.
Queste richieste HTTP sono state inviate e ricevute anche per altre cose, come immagini, file CSS e JavaScript, ecc…
Questo è il motivo per cui poco prima abbiamo accennato al fatto che il browser ha inviato almeno 40 o più richieste HTTP quando è stata caricata questa pagina.

Non ci interessa qui approfondire nel dettaglio gli HTTP headers.

HTTP status code: comprenderli e gestirli

I server HTTP rispondono utilizzando linee di status che informano il client sull’esito della richiesta.
Gli status contengono 3 campi:

1. versione del protocollo HTTP
2. status code
3. descrizione

Lo status code è dato da un numero a 3 cifre con i seguenti significati:
1XX consiste solo nella status line e in headers opzionali
2XX l’azione richiesta ha avuto successo: la pagina è presente e il server ne restituisce il contenuto
3XX richiesta di reindirizzamento
4XX è un errore lato client e contiene sintassi errata
5XX è un errore lato server e il server non ha potuto soddisfare la richiesta

SEO e Status code HTTP

Dal punto di vista dell’ottimizzazione SEO gli status code più importanti sono:

• 200 (OK) serve per indicare che la pagina esiste e ne restituisce successvamente il contenuto;
• 204 (No Content) indica che la richiesta è stata processata ma non è stato reperito alcun contenuto da inviare;
• 301 (Moved Permanently) indica che il file specificato è stato permanentemente spostato in un’altra locazione (è necessario specificare la nuova locazione permanente). Da utilizzare ai fini SEO nello spostamento di URL permanentemente.
• 403 (Forbidden) indica che la richiesta non è autorizzata, spesso causata dal settaggio dei permessi sul web server o dall’accesso non consentito ad un area coperta da user name e password;
• 404 (Not Found) serve ad indicare che la risorsa all’URL richiesta non è stata trovata. Da utilizzare ai fini SEO e di usabilità, impostando nel web server un Error Document con destinazione una pagina HTML con un messaggio di errore per l’utente;
• 410 (Gone) rappresenta la risposta in caso di risorsa non più disponibile;
• 500 (Internal Server Error) indica che il server è incorso in un errore inaspettato che non ha permesso di completare la richiesta;
• 503 (Service Unavailable) consente al bot di capire che il sito è temporaneamente fuori servizio. Importante utilizzare lo status 503 qualora il sito web non sia disponibile per un periodo superiore alle 5 ore per motivi tecnici.

Per impostare il redirect delle pagine di errore su pagine SEO freindly è possibile settare il file htaccess per i server Apache.

Articoli correlati:

1. WAMP e SSI: come aggiungere il supporto Server Side Include

Le Cheat Sheet sono uno strumento di riferimento che fornisce semplici, brevi istruzioni per realizzare un compito specifico.

Ecco quindi di seguito una selezione di riferimenti rapidi per numerosi linguaggi e tecnologie web, gratuiti e stampabili:

ASCII – Caratteri speciali

Character Entity References in HTML 4 and XHTML 1.0
HTML: Special Characters
Decimal ASCII code, Reference, URL code and HTML entity
HTML special character reference
HTML – Special Entity Codes
Using HTML Symbol Entities

Colori e web

Coloreminder.com; find colors palette easily and inspiration
RGB Hex Colour Chart
Web safe color chart
The browser safe colors

CSS

CSS2.1 Sheet
CSS3 Sheet
CSS Shorthand Guide
CSS Property Index
CSS Cheat Sheet (V2)
CSS Cheat Sheet: Inheritance, Cascade, Specificity
CSS Shorthand Cheat Sheet
CSS Properties and Values
Esempi di utilizzo di CSS
Will the browser apply the rule(s)?

CSS3

Tutto quello che c’è da sapere su CSS3

Google

Google Guide Quick Reference: Google Advanced Operators
The Google Cheat Sheets: Everything You Need To Know

Freelance

Esempio di contratto per prestazione occasionale
Pubblicare un sito web: verifiche e controlli preventivi

HTML 5

HTML 5 Visual Cheat Sheet (Reloaded)
HTML 5 Cheat Sheet

HTML/XHTML

HTML Cheat Sheet
HTML Codes Cheat Sheet
Character Entity References in HTML 4 and XHTML 1.0
HTML Cheat Sheet: quick reference guide
A Simple Guide To HTML
Browser Compatibility Master Table
HTML/XHTML in one page

jQuery

jQuery 1.4 Cheat Sheet
Woork: jQuery Visual Cheat Sheet

Lorem Ipsum generators

Render dummy text in English, French, German…

Mac OS

The OS X Keyboard

Programmi Adobe

Dreamweaver CS4: Cheat Sheet and shortcuts
Photoshop: Toolbox Reference
Flash CS4: PC Shortcuts

SEO

Web Developer’s SEO Cheat Sheet

Tipografia e Font

The New CSS Font-Family List
Approximate Conversion from Points to Pixels
PX to EM conversion made simple.
Compare screen type
16 Gorgeous Web Safe Fonts To Use With CSS
Top 10 (Web Safe) Blogging Fonts
How safe are Web-safe Font Families really? Font preview

UI and wireframing

Sketching & Wireframing kit free set
UI and wireframing tools
Browser Safe Area

Windows

Alt Key + Numeric Codes

WordPress

WordPress Cheat Sheet
WordPress Help Sheet in Italiano

Cheat Sheet per tutto, tutte insieme!

All cheat sheets, round-ups, quick reference cards.

Articoli correlati:

1. SEO: guida pratica per ottimizzazione e posizionamento nei motori di ricerca
2. Eliminare il bordo tratteggiato attorno a un link mantenendo l’usabilità
3. HTML5: tag nuovi e anteprima delle novità

Ecco quindi dei semplici, buoni consigli per intervenire in modo efficace sui fattori di ranking, per capire i quali, occorre prima conoscere come funziona un motore di ricerca.
Quali sono nel concreto questi fattori? Vediamoli organizzati in una breve guida SEO:

1. HTML semantico e valido

Ecco il primo, mai troppo spesso rimarcato, passo per fare in modo che il nostro sito sia prima di tutto visitato e fruito dal più ampio numero di visitatori possibili, umani e non.
Il sito, che è un ipertesto, deve fornire le informazioni secondo un ordine logico e una gerarchia semantica, come avviene per tutti i testi, per esempio i libri. Proprio come un libro, anche un sito deve avere un titolo, dei contenuti organizzati in capitoli, paragrafi e sotto-paragrafi. I contenuti letti dal crawler sono solamente testuali (niente immagini, flash, javascript). Per avere un’idea di come viene visualizzato il sito, cioè vedere cosa vedono gli spider, è utile utilizzare la Web Developer Toolbar di Firefox, che permette di effettuare anche una verifica sulla validità di HTML e CSS.

Ecco un esempio di codice semantico:

<div id="id-del-contenitore">
 <h1>Titolo della pagina</h1>
  <h2>Titolo del paragrafo</h2>
 <p>Testo del paragrafo. Testo <strong>importante</strong>
    e un altro <em>testo importante</em>.</p>
</div>

2. Keywords nell’URL e nel nome del dominio

Come si fa a scegliere le Keywords / Key Phrases per il prprio sito? Semplice, le parole chiave non sono altro che le parole / frasi che meglio descrivono l’attività e gli argomenti oggetto del sito. Va da sè che esse dovrebbero essere quelle che hanno una frequenza maggiore nei testi del sito.
Se per esempio, stiamo sviluppando un sito sul webdesign, di sicuro una delle principali parole chiave saranno "webdesign", e per aumentare il ranking del sito potremmo cercare di registrare il dominio con la keyword "webdesign". Una buona pratica è inserirla nell’url delle pagine, tenendo conto che, per tutti i fattori SEO, Google ritiene più imporatnti le parole che vengono per prime. Per esempio: www.moltoimportante.com/importante-sempremenoimportante.html; questo vale per tutti i fattori di pagerank.

Per scegliere le parole chiave del nostro sito, dobbiamo fare in modo che esse siano coerenti con i contenuti delle pagine: per fare questo possiamo valutare le parole che ricorrono maggiormente in pagina e inseirle tra le nostre parole chiave. Se i risultati non sono conformi all’attività che il sito promuove, vuol dire che abbiamo sbagliato a scrivere i contenuti, o stiamo cercando di bluffare!

“Think of this way: each search engine is programmed and designed to crawl each site in a manner similar to a human.
Information is stored and viewed as more or less important based upon what a human is most likely to consider important. You can have the best META tags in the world, but search engines reward Web pages where the tags match up with the page’s copy.

”Mark Jackson
Search Engine Watch

3. Keywords nei metatag, nei titoli e nel corpo della pagina

Ricollegandoci alla metafora del sito come libro, il motore di ricerca è di fatto un "lettore" che naviga continuamente il web indicizzando tutti i siti che trova sul suo percorso, cioè memorizzando il contenuto delle varie pagine e catalogando i link che puntano in direzione di altri siti. Ecco gli elementi in pagina (ON-Page SEO Factors) da tenere in considerazione:

Metatag
Dopo il dominio e l’URL, gli spider fino a una decina di anni fa si soffermavano su ciò che trovavano nei meta-tag description e keywords. Oggi non è più così. Il metatag title è invece molto importante perchè deve dare una sintesi (60-100 caratteri) del prodotto / servizio / attività per ogni singola pagina del sito, visibile nella SERP di Google.

H1 / H2 / …
Il titolo H1 della pagina deve descrivere il contenuto principale della pagina: è inutile infarcirlo con le parole chiave che abbiamo già usato, è molto più sensato utilizzare sinonimi, sempre tenedo a mente che il titolo di un paragrafo deve essere coerente con ciò di cui si parla nel paragrafo!

Strong / em
Proprio come accade per i libri e gli articoli cartacei, Google interpreta come importanti la parole contrassegnate da <strong> e <em>.

Alt / title
Anche in questo caso, è opportuno inserire una breve descrizione sostitutiva (attributo alt per le immagini, title per i link) contenente, se possibile, parole chiave e sinonimi.

4. Link a/da siti interessanti e con alto pagerank

Google tiene in grande considerazione quelli che sono chiamati fattori "off-page", cioè i link che puntano al nostro sito. In pratica, se un sito con elevato page-rank ha un collegamento al nostro sito, implicitamente "trasmette" una parte del suo livello di importanza anche al nostro. Cosa che succede, in misura minore, anche per la "qualità" dei link a risorse esterne presenti nel nostro sito. Naturalmente, più persone hanno tra i loro bookmark condivisi una pagina del nostro nostro sito, più Google la riterrà importante.

5. Contenuti aggiornati per un sito "vecchio"

Secondo Google, ulteriori fattori di pagerank sono l’età del sito e il livello di aggiornamento dei contenuti. Il senso è questo:

vecchio = affidabile
aggiornato = interessante, al passo con le novità

L’ultimo step per concludere l’ottimizzazione è la generazione della sitemap (e il caricamento nella root principale) e la segnalazione del sito / blog a Google.

La cosa più importante è…

Naturalmente questa lista non esaurisce tutti i possibili interventi SEO, ma rappresenta un buon punto di partenza, anche perchè, prima di ogni altra cosa viene il contenuto: Content is the King!

Articoli correlati:

1. Cheat Sheets per il Web Design