Guida ai microformats
I microformats sono una serie di linguaggi semantici che si implementano al linguaggio HTML di partenza per specificare e approfondire le informazioni dei quel determinato codice, rendendo quindi il contenuto più facile da trovare ai motori di ricerca.
Esistono diversi tipi di microformat, ognuno con uno specifico compito, ognuno di essi costituito da una serie di attributi da aggiungere al codice HTML di base tramite elementi span e class e id
Perchè dovrei iniziare ad usarli?
i microformat sono supportati e riconosciuti dai più importanti motori di ricerca, Google, Yahoo e altri questo significa che se usati in maniera corretta daranno un valore aggiunto alle nostre pagine, ci aiuteranno a specificare meglio i nostri contenuti e renderli più facili da trovare ai motori di ricerca con la possibilità di avanzare nella SERP e a rendere i contenuti Search Engine Optimized, alla realizzazione di alcuni microformati hanno anche partecipato personaggi stessi di Google come Matt Cuts.
Di seguito la lista di quelli riconosciuti e definiti ufficialmente completi:
Hcard
Il formato Hcard serve per specificare le informazioni di una persona fisica o di un azienda, molto utile per esempio se volessimo inserire sul web un nostro CV online.
Se possedete già una pagina informativa in HTML e volete implementare il codice Hcard in quello già usato potete farlo aggiungendo semplicemente qualche class associata alla giusta proprietà, per esempio:
Linguaggio di partenza:
<div id="contact"> <h2>Contact Me</h2> You can contact me via email to <a href="mailto:jane@example.com">jane@example.com</a>, or send stuff to me at the following address: 255 Some Street, Some Place, Some Town</div>
Linguaggio modificato con Hcard:
<div id="contact" class="vcard"> <h2>Contact Me</h2> <h3 class="fn">Jane Doe</h3> You can contact me via email to <a class="email" href="mailto:jane@example.com">jane@example.com</a>, or reach me at the following address: <div class="adr"> <div class="street-address">255 Some Street</div> <div class="locality">Some Town</div> <div class="region">Some Place</div> </div> </div>
Di seguito tutti i tag che si possono usare per creare una Hcard
Obbligatori:
- fn
- n (family-name, given-name, additional-name, honorific-prefix, honorific-suffix)
Facoltativi:
- adr (post-office-box, extended-address, street-address, locality, region, postal-code, country-name, type, value)
- agent
- bday
- category
- class
- email (type, value)
- geo (latitude, longitude)
- key
- label
- logo
- mailer
- nickname
- note
- org (organization-name, organization-unit)
- photo
- rev
- role
- sort-string
- sound
- tel (type, value)
- title
- tz
- uid
- url
Potete creare la vostra Hcard anche usando il tool Hcard creator.
Hacalndar
Questo formato serve per specificare un evento e tutti i dati necessari relativo ad esso, per esempio:
<div class="vevent"> <a href="http://www.example.com/events/spinaltap" class="url summary">Spinal Tap</a> <img src="spinal_tap.jpg" class="photo" /> <span class="description">After their highly-publicized search for a new drummer, Spinal Tap kicks off their latest comeback tour with a San Francisco show.</span> When: <span class="dtstart"> Oct 15, 7:00PM<span class="value-title" title="2015-10-15T19:00-08:00"></span> </span>- <span class="dtend"> 9:00PM<span class="value-title" title="2015-10-15T21:00-08:00"></span> </span> Where: <div class="location vcard"> <span class="fn org">Warfield Theatre</span>, <span class="adr"> <span class="street-address">982 Market St</span>, <span class="locality">San Francisco</span>, <span class="region">CA</span> </span> <span class="geo"> <span class="latitude"> <span class="value-title" title="37.774929" ></span> </span> <span class="longitude"> <span class="value-title" title="-122.419416"></span> </span> </span> </div> Category: <span class="category">Concert</span> </div>
Di seguito la lista di tutti i tag che si possono usare per creare un formato Hcalendar
Obbligatori:
- dtstart
- summary
Facoltativi:
- location
- url
- dtend
- duration
- rdate
- rrule
- category
- description
- uid
- geo (latitude, longitude)
- attendee (partstat, role
- contact
- organizer
- attach
- status
Potete creare il vostro evento con il tool online Hcalendar creator
Rel
L’attributo rel=”proprietà” inserito nel codice semantico di un link serve per specificare o dare direttive su qualche cosa riguardante il contenuto del link, attualmente sono tre gli attributi definiti completamente che si possono intergrare:
License: Per definire se un prodotto, pagina o qualsiasi contenuto web è protetto da licenza e nel caso da che tipo di licenza.
<a href="http://creativecommons.org/licenses/by/2.0/" rel="license">cc by 2.0</a>
Tag: Per identificare tramite tag l’argomento che tratterà
<a href="http://technorati.com/tag/tech" rel="tag">tech</a>
No-Follow: Per specificare ad un motore di ricerca se seguire o non seguire un determinato link, quindi dargli o non dargli importanza dal punto di vista dell’indicizzazione.
Un esempio dell’utilizzo di questo microformato è quello che ne fa una piattaforma blog come WordPress che aggiunge rel=”nofollow” ai link inseriti dagli utenti nei commenti, per specificare ai crawlers dei motori che sono link che non appartengono al blog, ma fanno parte di terze parti.
<a href="http://www.example.com/" rel="nofollow">discount pharmaceuticals</a>
Vote links
Tramite questo microformato possiamo specificare se il nostro voto a qualche cosa (persona, partito, ecc) dovrà essere a favore rev=”vote-for”, contro rev=”vote-against” o neutro rev=”vote-abstain”.
<a rev="vote-for" href="http://example.com/cheesevote" title="Melt the cheese!">Do it!</a> <a rev="vote-against" href="http://example.com/cheesevote" title="Don't melt the cheese!">Don't do it!</a>
Guarda un esempio di sito basato sul Vote link.
XFN
Acronimo di XHTML Friends Network è un linguaggio che serve per specificare realzioni umane, ci può essere molto utile per esempio se in una serie di link del nostro blog o sito vogliamo specificare quale rapporto abbiamo con il destinatario del link.
Se il link è relativo a qualcosa di nostro possiamo usare rel=”me”, per esempio:
My Site!
nel caso invece il contenuto non sia nostro possiamo usare altri tag, di seguito la lista completa:
- Friendship (contact, acquaintance, friend)
- Physical (met)
- Professional (co-worker, colleague)
- Geographical (co-resident, neighbor)
- Family (child, parent, sibling, spouse, kin)
- Romantic (muse, crush, date, sweetheart)
- Identity (me)
Potrete anche costruire i vostri link di rapporti con il tool XFN creator
I microformati e l’uomo
Secondo gli stessi fondatori i microformati sono stati realizzati prima per l’uomo e poi per le macchine, purtroppo non tutti i browser stanno tenendo conto della possibilità di renderli leggibili facilmente per l’uomo, Fire Fox è una delle eccezioni che mette a disposizione due add-ons per poter estrapolare i contenuti microformat da una pagina web e consultarli in separata sede rispetto alla fonte, questi due sono Operator e Tails Export scaricabili dal sito del browser.
Conclusioni
I microformat trattati in questo articolo sono quasi tutti quelli completamente riconosciuti, ma ne esistono diversi che sono in fase di definizione, per consultarli vi rimando alla sezione Draft della Homepage del sito Microformat.
Credit: GMPG, Microformat, Google web master
Complimenti per l’articolo!! Questo dei microformati è un argomento a cui non ho ancora avuto modo di approfondire e testare.
Secondo te sono davvero importanti a fine del posizionamento??
Ciao Lorenzo, grazie!
Io no ho una casistica diretta per poterti dire il vantaggio dell’utilizzo dei microformati, ma leggendo opinioni sul web sembra che la maggiorparte ne siano soddisfatti, comunque sia Google che Yahoo li supportano e hanno dedicato alcune pagine ad essi, credo che sia una buona credenziale per utilizzarli.
Ciao ho letto con interesse il tuo articolo e mi stò cimentando ad inserire i microformati in un mio sito svilluppato con Wp.
però mi sono bloccato perchè non riesco a mettere il tag photo nella prima immagine dell’articolo.
Tu come hai risolto?
Ciao Fabio, il tag photo dei microformat funziona inserendo la class=”photo” all’interno del tag HTML img, per farlo ci sono molte soluzioni, potresti andare nel tuo template single.php e cercare il tag img da modificare oppure puoi usare la libreria JQuery e la proprietà addclass. (bisognerebbe provarlo)Oppure ancora più complesso mettere mano al codice delle pagine WP, ti sengalo anche questo plugin per wordpress Hcard Generator.
Ora sorge un problema più importante, da quello che ho capito tu vuoi aggiungere il microformato alla prima immagine dei tuoi articoli giusto? il problema è che questa soluzione è errata, il tag photo del microformat Hcard non è pensato per essere aggiunto a qualsiasi immagine di un articolo, magari non ho capito bene io il tuo problema, fammi sapere meglio se vuoi.
Grazie Francesco per la celerità e la disponibilità.
Ciao Francesco,
sempre per quanto riguarda wp conosci un plugin che implementi l’hcalendar in un blog worpress?
Oppure conosci un buon template già configurato per la classe vevent? sul sito ufficiale di wp ce ne ne sono diversi taggati con l’etichetta microformats ma non è facile capire per quale microformato siano compatibili!!
Nel mio caso (vedi sito sopra) ho un template che supporta l’hcard e non so come inserire l’hcalendar!
help!!
grazie
Ciao Carlo, ho trovato il plugin che fa per te si chiama Simple Event Calendar ti da la possibilità di creare eventi e poi richiamarli singolarmente o tutti insieme in pagine e post del tuo blog utilizzando degli shortcode del tipo [event=label]
Credo proprio che ti sarà di aiuto
Grazie Francesco,
lo provo subito
Ciao Francesco, come da tuo suggerimento ho testato il plug-in che mi hai consigliato, simple events; il plugin sembra funzionare (l’ho inserito in un widget) ma testanto il sito con il rich snippets tool per vedere se l’hcalendar viene letto correttamente mi da questo errore:
Warning: At least one field must be set for Hcalendar.
Warning: Missing required field “dtstart”.
Warning: Missing required field “summary”.
Il mio blog è http://www.turismoumbria.net.
Da cosa pensi possa dipendere?
grazie
Ciao Carlo ho dato un occhio alla tua situazione, dunque:
Prima cosa effettivamente il plugin è stato pensato prevalentemente per essere inserito in post o pagine.
Ho dato un occhiata al tuo codice ed è tutto a posto, il vero mistero è che se vado a prendere il codice sorgente dal tuo widget e lo copio in un widget qui su fmdesignblog e poi faccio il test con il tool di Google rich snippet tutto viene considerato dallo strumento correttamente.
ho fatto decine di prove per capire dove fosse il problema ma non riesco a trovarlo, forse è davvero un problema di plugin.
L’unica cosa che posso consigliarti a questo punto è di provare ad inserire un codice del genere tra i tag head
Ciao Francesco,
grazie per il consiglio, purtroppo però non cambia nulla. Forse è il template che utilizzo che non fa leggere correttamente l’hcalendar.
Proverò a spostare il plugin in una pagina e vediamo che esce fuori…..
Grazie comunque
Non ti preoccupare, mi dispiace non aver trovato la soluzione.
Ciao Carlo
Ciao, ho letto l’articolo, ma ho qualche problema ad includere i microformats, perchè se faccio analizzare la pagine, l’analisi mi dice che non ci sono i microformati. Devo per cado introdurre qualche libreria?
ciao Stefania, no per i Microformat non c’è da includere nessuna libreria, quale strumento usi per fare i test?
Se vuoi puoi inviarmi per mail il tuo codice html così lo controllo.-