AVVISO IMPORTANTE: Dato l'elevato numero di richieste, Eternal Curiosity non può accettare nuovi clienti, sia che si tratti di consulenze scritte che di ottimizzazione SEO diretta. Valutiamo solo casi eccezionali e ad alto budget. Per informazioni, vi invitiamo a scriverci a [email protected]

Questo articolo apparteneva al vecchio blog (blog.danilopetrozzi.it), per cui le informazioni potrebbero non essere più aggiornate ed attendibili.

Studiamo l’HTML5 – I metadati delle pagine: title, base, link, meta e style

Gran parte dei SEO che conosco ancora non hanno studiato in modo analitico l’HTML5, un pò per laziness, un pò perché effettivamente è tanta roba. Per questo motivo,  nell’immagine in alto ho inserito un interessantissimo e professionalissimo spunto motivazionale così da spronare i più scansafatiche a immergersi nell’HTML5 😀

Per quanto lo standard HTML5 non sia ancora definitivo, dato che siamo alla fase della Candidate Recommendation del consorzio W3C, il “grosso” dell’HTML5 è stato già deciso e può essere discusso (la release della CR attuale, è datata 31 luglio 2014, quindi direi sufficientemente recente!)

Con la serie “Studiamo l’HTML5“, ho intenzione di sviscerare in modo dettagliato numerosi aspetti importanti del markup, sopratutto mettendoli in relazione alle strategie/attività SEO.

I metadata

Per iniziare, i metadata sono una scelta quasi obbligata. Per avere sottomano la documentazione, in questa pagina trovate le specifiche ufficiali sull’argomento.

I metadati, come suggerisce il nome, sono una classe di markup utilizzati per definire in modo esplicito numerose caratteristiche dei documenti. I metadati sono posizionati in cima al codice sorgente e dovrebbero essere immediatamente successivi all’apertura del tag html.

Se la pagina è un iframe srcdoc oppure se i metadati sono acquisibili da un protocollo superiore, allora la presenza di metadata è opzionale, altrimenti, devono essere inseriti facendo in modo che ci sia non più di un title e non più di un base.

Nell’analisi SEO on-page degli operatori italiani, se ti ricordi, c’era un grafico dedicato all’assenza dell’head all’interno del codice sorgente. L’head, come specificai in quella circostanza, è comunque un tag opzionale.

Esempio di metadati inseriti nell’head (l’esempio proviene da W3C):

Ora, analizziamo uno per uno i vari metadati permessi dall’HTML5:

Title

Il title è la Kim Kardashian della SEO: è il tag più famoso e discusso in ambito SEO, è il più utilizzato, il più sopravvalutato e forse non così utile come si pensa.

Cosa ci dice il consorzio? Beh, se anche c’era bisogno di dirlo, il title deve essere unico all’interno del documento.

La definizione ufficiale del title è: “The title element represents the document’s title or name. Authors should use titles that identify their documents even when they are used out of context, for example in a user’s history or bookmarks, or in search results. The document’s title is often different from its first heading, since the first heading does not have to stand alone when taken out of context.”

Il title, quindi, deve identificare un documento anche se utilizzato fuori dal suo contesto (l’identificazione deve essere assoluta e non relativa). Gli heading, come dice W3c, non devono identificare in modo assoluto, e quindi non devono necessariamente essere “stand alone” anche fuori dal contesto.

Nota sull’obbligatorietà del title: il title non è obbligatorio, tant’è che W3C consiglia di non inserirlo se è sensato che il documento non necessiti di un titolo identificativo.

Esempio di utilizzo semantico title/headings:

In questo esempio, il compito del title è stato soddisfatto, dato che identifica in modo preciso il contenuto del documento anche se è preso fuori contesto.

Se tu dicessi a qualcuno che stai leggendo i “metodi per coltivare il basilico sul balcone“, hai fornito tutte le informazioni necessarie per comprendere il contenuto della pagina (identificazione assoluta). Se invece dicessi di essere interessato al “Periodo di fioritura” o alla “Quantità di luce e acqua ottimali“, non riusciresti a trasmettere nessun tipo di informazione all’esterno, dato che queste “frasi” sono legate in modo indissolubile al contesto interno (ossia, alla coltivazione del basilico sul terrazzo).

Base

Il tag base, come il title, deve essere contenuto nell’head e deve essere unico all’interno del documento. (in presenza di più elementi base, viene preso in considerazione solo il primo)

Lo scopo principale dell’elemento base è quello di indicare la path base del documento che servirà per risolvere gli url relativi.

L’elemento base può avere gli attributi href, target, o entrambi.

La chiusura del tag, a differenza del title, può essere omessa. (non c’è bisogno di </base> )

Se presente, l’href indica la path utilizzata per risolvere URL relativi del deocumento, e il target, se presente, indica in quale modo gli URL debbano essere aperti dal browser.

Esempio:

Se nella cartella /immagini/ effettivamente esiste l’immagine ciao.jpg, allora essa verrà visualizzata correttamente. Stesso discorso per documento.html (che in questo caso, verrà aperto in una nuova finestra del browser, dato che il base contiene l’attributo target=”_blank”)

Link

L’elemento link permette di collegare il documento a altre risorse.

Un link deve possedere un attributo href che deve contenere un URL valido.

Un link deve avere un attributo rel (le keyword utilizzabili negli attributi rel verranno spiegati in una lezione separata, dato che coinvolgono principalmente gli <a>)

La chiusura del tag può essere omessa (non c’è bisogno di </link> )

Attraverso gli elementi link è possibile dare vita a due entità:

Collegamenti a risorse esterne, esempio:

Collegamenti ipertestuali, esempio:

Nel primo caso, ossia quando link viene usato per l’inserimento di risorse esterne, l’user-agent si occuperà di effettuare le richieste HTTP necessarie per ottenere la risorsa (e eventuali sottorisorse collegate) e applicherà il contenuto delle risorse al documento in esame (nel caso di un .css effettuerà il download del file CSS specificato nell’href e, se non ci sono errori di nessun tipo, applicherà il contenuto del foglio di stile al documento in esame).

Ulteriori attributi che possono essere applicati all’elemento link sono:

  • title: il title permette di attribuire alla risorsa un titolo testuale e leggibile agli umani
  • hreflang: descrive la lingua in cui è servita la risorsa correlata (ad esempio associato al rel=”alternate” permette di indicare versioni, dello stesso documento, tradotte in altre lingue)
  • media: descrive per quale dispositivo il documento è stato creato (nel caso in cui link venga usato per una risorsa esterna, es. un css, l’attributo media dovrebbe essere seguito alla lettera dagli user-agent in modo da elaborare le risorse compatibili con il dispositivo in esame)
  • type: attributo che descrive il MIME type della risorsa linkata (gli user-agent, comunque, non sono obbligati a trattare la risorsa come descritta dal type). Un esempio di questo attributo è:  type=”text/css”
  • sizes: utilizzato solo se nel rel=”” è presente la keyword icon, e quindi ci si riferisce alla gestione del favicon del documento

Alcuni esempi finali forniti da W3C:

Style

L’elemento style permette in includere stili all’interno del documento.

L’attributo type stabilisce il linguaggio in cui è scritto lo stile (MIME type). Se non specificato, il valore di default è type=”text/css”

E’ possibile usare l’attributo media, che segue le stesse regole viste prima per link. Di default è impostato su all

Esempio:

Meta

I meta vengono utilizzati per tutte le informazioni che non rientrano nelle categorie precedenti. Sotto il profilo SEO, sono estremamente importanti.

Prima di addentrarci nel mondo dei meta tradizionali, c’è da dire che esistono due casi particoliri in cui viene usata una sinassi unica:

Dichiarazione del character enoding del documento: grazie a questo meta è possibile dichiarare qual’è l’encoding della pagina. Esempio:

Simulazione o invio di HTTP response header: grazie alla keyword speciale http-equiv è possibile, per esempio, imporre un refresh alla pagina ogni 10 secondi:

Oltre a refresh ci sono altre possibilità più o meno standardizzate come content-language per definire la lingua, content-type per stabilire l’encoding ma è stato sostituito con il charset, default-style per definire stylesheet alternativi e set-cookie per impostare cookie HTTP (metodo sconsigliato)

Meta tradizionali

I meta “tradizionali” sono quelli nella forma <meta name=”X” content=”Y”> dove X è il nome dello specifico meta e Y è il suo contenuto.

I meta standard ufficialmente approvati dal consorzio sono pochi: application-name, author, description, generator e keywords.

Sotto il profilo SEO, i due meta più famosi sono il description, che va a popolare lo snippet nelle SERP di Google, e il keywords, che in realtà non viene più utilizzato dai motori di ricerca (ma nella analisi statistica che ho effettuato emerge che il 50% di noi ancora lo usa 😀 )

Meta non standard

Per quanto riguarda gli altri meta, quelli non-standard, W3C linka una lista ufficiale in cui vengono raccolti tutti i meta “utilizzabili”. Sono talmente tanti che non posso nemmeno citarne i nomi.

Se volete analizzare questi meta per conto vostro, la lista si trova in questa pagina.

Conclusione

La costruzione dell’head è uno dei pilastri fondamentali della SEO e dello sviluppo web in generale, per cui il ripasso spero sia servito a tutti 🙂 Nelle puntate successive, ci addentreremo un pò di più nei tag e nelle specifiche più interessanti dell’HTML5.

Stay tuned!

 

Danilo petrozzi

Ciao! Io sono Danilo Petrozzi, il fondatore di Eternal Curiosity. Oltre a essere un senior SEO Specialist e un Web Developer, è dall'età di 9 anni che mi appassiono a qualsiasi cosa ruoti intorno al web e all'informatica in generale.

Lascia un commento