Il protocollo Open Graph

Pubblicato da admin il

Introduzione

Il protocollo Open Graph permette a qualsiasi pagina web di diventare un oggetto arich in un grafico sociale. Per esempio, questo è usato su Facebook per permettere a qualsiasi pagina web di avere le stesse funzionalità di qualsiasi altro oggetto su Facebook.

Mentre esistono molte tecnologie e schemi diversi che potrebbero essere combinati insieme, non c’è una singola tecnologia che fornisca abbastanza informazioni per rappresentare qualsiasi pagina web nel grafo sociale. Il protocollo Open Graph si basa su queste tecnologie esistenti e dà agli sviluppatori una cosa da implementare. La semplicità per gli sviluppatori è un obiettivo chiave del protocollo Open Graph che ha informato molte delle decisioni tecniche di design.

Metadati di base

Per trasformare le tue pagine web in oggetti grafici, hai bisogno di aggiungere metadati di base alla tua pagina. Abbiamo basato la versione iniziale del protocollo suRDFa che significa che metterai ulteriori tag <meta> nel <head> della tua pagina web. Le quattro proprietà richieste per ogni pagina sono:

  • og:title – Il titolo del vostro oggetto come dovrebbe apparire nel grafico, per esempio, “The Rock”.
  • og:type – Il tipo del vostro oggetto, per esempio, “video.movie”. A seconda del tipo che specifichi, altre proprietà possono essere richieste.
  • og:image – Un URL immagine che dovrebbe rappresentare il tuo oggetto all’interno del grafico.
  • og:url – L’URL canonico del tuo oggetto che sarà usato come suo ID permanente nel grafico, per esempio, “https://www.imdb.com/title/tt0117500/”.

Come esempio, il seguente è il markup del protocollo Open Graph per The Rock suIMDB:

<html prefix="og: https://ogp.me/ns#"><head><title>The Rock (1996)</title><meta property="og:title" content="The Rock" /><meta property="og:type" content="video.movie" /><meta property="og:url" content="https://www.imdb.com/title/tt0117500/" /><meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />...</head>...</html>

Metadati opzionali

Le seguenti proprietà sono opzionali per qualsiasi oggetto e sono generalmente raccomandate:

  • og:audio – Un URL a un file audio per accompagnare questo oggetto.
  • og:description – Una descrizione di una o due frasi del vostro oggetto.
  • og:determiner – La parola che appare prima del titolo di questo oggetto in una frase. Un enum di (a, an, the, “”, auto). Se auto è scelto, l’utente dei vostri dati dovrebbe scegliere tra “a” o “an”.Il default è “” (vuoto).
  • og:locale – Il locale in cui questi tag sono marcati.Del formato language_TERRITORY. L’impostazione predefinita è en_US.
  • og:locale:alternate – Un array di altri locali in cui questa pagina è disponibile.
  • og:site_name – Se il vostro oggetto è parte di un sito web più grande, il nome che dovrebbe essere visualizzato per il sito nel suo complesso, “IMDb”.
  • og:video – Un URL a un file video che completa questo oggetto.

Per esempio (interruzione di riga solo per scopi di visualizzazione):

<meta property="og:audio" content="https://example.com/bond/theme.mp3" /><meta property="og:description" content="Sean Connery found fame and fortune as the suave, sophisticated British agent, James Bond." /><meta property="og:determiner" content="the" /><meta property="og:locale" content="en_GB" /><meta property="og:locale:alternate" content="fr_FR" /><meta property="og:locale:alternate" content="es_ES" /><meta property="og:site_name" content="IMDb" /><meta property="og:video" content="https://example.com/bond/trailer.swf" />

Lo schema RDF (in Turtle) può essere trovato su ogp.me/ns.

Proprietà strutturate

Alcune proprietà possono avere metadati extra collegati ad esse.Questi sono specificati nello stesso modo degli altri metadati con property econtent, ma il property avrà in più :.

La proprietà og:image ha alcune proprietà strutturate opzionali:

  • og:image:url – Identico a og:image.
  • og:image:secure_url – Un url alternativo da usare se la pagina web richiedeHTTPS.
  • og:image:type – Un tipo MIME per questa immagine.
  • og:image:width – Il numero di pixel di larghezza.
  • og:image:height – Il numero di pixel di altezza.
  • og:image:alt – Una descrizione del contenuto dell’immagine (non una didascalia). Se la pagina specifica un og:image dovrebbe specificare og:image:alt.

Un esempio di immagine completa:

<meta property="og:image" content="https://example.com/ogp.jpg" /><meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /><meta property="og:image:type" content="image/jpeg" /><meta property="og:image:width" content="400" /><meta property="og:image:height" content="300" /><meta property="og:image:alt" content="A shiny red apple with a bite taken out" />

Il tag og:video ha gli stessi tag di og:image. Ecco un esempio:

<meta property="og:video" content="https://example.com/movie.swf" /><meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" /><meta property="og:video:type" content="application/x-shockwave-flash" /><meta property="og:video:width" content="400" /><meta property="og:video:height" content="300" />

Il tag og:audio ha solo le prime 3 proprietà disponibili (poiché la dimensione non ha senso per il suono):

<meta property="og:audio" content="https://example.com/sound.mp3" /><meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" /><meta property="og:audio:type" content="audio/mpeg" />

Array

Se un tag può avere più valori, basta mettere più versioni dello stesso tag<meta> nella tua pagina. Il primo tag (dall’alto verso il basso) riceve la preferenza durante i conflitti.

<meta property="og:image" content="https://example.com/rock.jpg" /><meta property="og:image" content="https://example.com/rock2.jpg" />

Mettere le proprietà strutturate dopo aver dichiarato il loro tag radice. Ogni volta che viene analizzato un altro elemento radice, quella proprietà strutturata viene considerata finita e se ne inizia un’altra.

Per esempio:

<meta property="og:image" content="https://example.com/rock.jpg" /><meta property="og:image:width" content="300" /><meta property="og:image:height" content="300" /><meta property="og:image" content="https://example.com/rock2.jpg" /><meta property="og:image" content="https://example.com/rock3.jpg" /><meta property="og:image:height" content="1000" />

significa che ci sono 3 immagini in questa pagina, la prima immagine è 300x300, quella centrale ha dimensioni non specificate, e l’ultima è 1000px alta.

Tipi di oggetti

Per far sì che il tuo oggetto sia rappresentato all’interno del grafico, devi specificare il suo tipo. Questo viene fatto usando la proprietà og:type:

<meta property="og:type" content="website" />

Quando la comunità è d’accordo sullo schema di un tipo, questo viene aggiunto alla lista dei tipi globali. Tutti gli altri oggetti nel sistema dei tipi sonoCURIE della forma

<head prefix="my_namespace: https://example.com/ns#"><meta property="og:type" content="my_namespace:my_type" />

I tipi globali sono raggruppati in verticali. Ogni verticale ha il suo spazio dei nomi. I valori og:type per uno spazio dei nomi sono sempre preceduti dal prefisso dello spazio dei nomi e da un punto, per ridurre la confusione con i tipi namespace definiti dall’utente che hanno sempre i due punti.

Music

  • URI spazio dei nomi: https://ogp.me/ns/music#

og:type valori:

music.song

  • music:duration – intero >=1 – La lunghezza della canzone in secondi.
  • music:album – array music.album – L’album da cui è tratta questa canzone.
  • music:album:disc – intero >=1 – Su quale disco dell’album si trova questa canzone.
  • music:album:track – intero >=1 -Quale traccia è questa canzone.
  • music:musician – profilo array – Il musicista che ha fatto questa canzone.

music.album

  • music:song – music.song – La canzone di questo album.
  • music:song:disc – integer >=1 – Lo stesso di music:album:disc ma al contrario.
  • music:song:track – intero >=1 -Lo stesso di music:album:track ma al contrario.
  • music:musician – profilo – Il musicista che ha fatto questa canzone.
  • music:release_date – datetime – La data di pubblicazione dell’album.

music.playlist

  • music:song – Identici a quelli su music.album
  • music:song:disc
  • music:song:track
  • music:creator – profilo – Il creatore di questa playlist.

music.radio_station

  • music:creator – profilo – Il creatore di questa stazione.

Video

  • Namespace URI: https://ogp.me/ns/video#

og:type valori:

video.movie

  • video:actor – array profilo – Gli attori del film.
  • video:actor:role – stringa – Il ruolo che hanno interpretato.
  • video:director – profilo array – Registi del film.
  • video:writer – profilo array – Sceneggiatori del film.
  • video:duration – intero >=1 – La lunghezza del film in secondi.
  • video:release_date – datetime – La data di uscita del film.
  • video:tag – array di stringhe – Parole tag associate a questo film.

video.episode

  • video:actor – Identico al video.movie
  • video:actor:role
  • video:director
  • video:writer
  • video:duration
  • video:release_date
  • video:tag
  • video:series – video.tv_show -A quale serie appartiene questo episodio.

video.tv_show

Una serie TV a più episodi.I metadati sono identici a video.movie.

video.other

Un video che non appartiene a nessun’altra categoria.

No Vertical

Questi sono oggetti definiti globalmente che non rientrano in una verticale ma sono ampiamente usati e concordati.

og:type valori:

article – Namespace URI: https://ogp.me/ns/article#

  • article:published_time – datetime – Quando l’articolo è stato pubblicato per la prima volta.
  • article:expiration_time – datetime – Quando l’articolo è scaduto dopo.
  • article:author – array di profili – Gli autori dell’articolo.
  • article:section – stringa – Un nome di sezione di alto livello. Es. Tecnologia
  • article:tag – array di stringhe -Parole tag associate a questo articolo.

book – URI del namespace: https://ogp.me/ns/book#

  • book:author – array di profili – Chi ha scritto questo libro.
  • book:isbn – stringa – L’ISBN
  • book:release_date – datetime – La data di uscita del libro.
  • book:tag – array di stringhe -Le parole tag associate a questo libro.

profile – URI del Namespace: https://ogp.me/ns/profile#

  • profile:first_name – stringa – Un nome normalmente dato ad un individuo da un genitore o scelto da sé.
  • profile:last_name – stringa – Un nome ereditato da una famiglia o dal matrimonio e con il quale l’individuo è comunemente conosciuto.
  • profile:username – stringa – Una breve stringa unica per identificarli.
  • profile:gender – enum(male, female) – Il loro genere.

website – Namespace URI: https://ogp.me/ns/website#

Nessuna proprietà aggiuntiva oltre a quelle di base.Qualsiasi pagina web non contrassegnata dovrebbe essere trattata come og:type sito web.

Tipi

I seguenti tipi sono usati quando si definiscono gli attributi nel protocollo Open Graph.

Type Description Letterali
Booleano Un booleano rappresenta un valore vero o falso vero, falso, 1, 0
DateTime Un DateTime rappresenta un valore temporale composto da una data (anno, mese, giorno) e un componente temporale opzionale (ore, minuti) ISO 8601
Enum Un tipo costituito da un insieme limitato di valori stringa costanti (membri di enumerazione). Un valore di stringa che è un membro dell’enumerazione
Float Un numero in virgola mobile firmato a 64 bit Tutti i letterali conformi ai seguenti formati:
1.234
-1.234
1.2e3
-1.2e3
7E-10
Integer Un numero intero firmato a 32 bit. In molte lingue gli interi oltre i 32-bit diventano float, quindi limitiamo il protocollo Open Graph per un facile uso multilingue. Tutti i letterali conformi ai seguenti formati:
1234
-123
Stringa Una sequenza di caratteri Unicode Tutti i letterali composti da caratteri Unicode senza caratteri di escape
URL Una sequenza di caratteri Unicode che identificano una risorsa Internet. Tutti gli URL validi che utilizzano i protocolli https:// o https://

Discussione e supporto

Si può discutere dell’Open Graph Protocol nel gruppo di Facebook o sulla mailing list degli sviluppatori.Attualmente viene consumato da Facebook (vedi la loro documentazione), Google (vedi la loro documentazione), emixi. viene pubblicato da IMDb, Microsoft, NHL, Posterous, Rotten Tomatoes, TIME, Yelp, e molti altri.

Implementazioni

La comunità open source ha sviluppato una serie di parser e strumenti di pubblicazione. Fai sapere al gruppo Facebook se anche tu hai costruito qualcosa di fantastico!

  • Facebook Object Debugger – Il parser e debugger ufficiale di Facebook
  • Google Rich Snippets Testing Tool – Supporto del protocollo Open Graph in specifiche verticali e motori di ricerca.
  • PHP Validator and Markup Generator – validatore di input OGP 2011 e generatore di markup in oggetti PHP5
  • PHP Consumer – una piccola libreria per accedere ai dati del protocollo Open Graph in PHP
  • OpenGraphNode in PHP – un semplice parser per PHP
  • PyOpenGraph -una libreria scritta in Python per analizzare le informazioni del protocollo Open Graph dai siti web
  • OpenGraph Ruby – Gemma Ruby che analizza le pagine web ed estrae il markup del protocollo Open Graph
  • OpenGraph per Java – piccola classe Java usata per rappresentare il protocollo Open Graph
  • RDF::RDFa::Parser -Perl RDFa parser che capisce il protocollo Open Graph
  • WordPress plugin -Progetto ufficiale di Facebook per WordPress, che aggiunge metadati Open Graph ai siti WordPress.
  • Alternate WordPress OGP plugin – Un semplice e leggero plugin per WordPress che aggiunge metadati Open Graph ai siti WordPress.

Categorie: Articles

0 commenti

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Articoli correlati

Articles

Cos’è SAP S/4 HANA Cloud? A Deeper Look

All’inizio di febbraio 2017, SAP ha annunciato una versione cloud pubblica del suo prodotto di punta – S/4 HANA ERP Suite – come elemento chiave della sua iniziativa di trasformazione digitale. Il prodotto, chiamato SAP Leggi tutto…

Articles

241 nomi di cani inglesi

Nomi di cani femminili ” Nomi di cani inglesiNomi di cani maschili ” Nomi di cani inglesi Grande lista di 241 nomi di cani inglesi per adattarsi a qualsiasi Bulldog inglese, Brittany Spaniel, Yorkshire Terrier, Leggi tutto…

Articles

Gli effetti dannosi dell’uso dei cotton fioc per pulire le orecchie

La maggior parte delle persone compra i cotton fioc per pulire le orecchie anche se questo non è mai stato il loro scopo. Infatti, usare un cotton fioc per pulire le orecchie è una delle Leggi tutto…