Guida alla condivisione per i webmaster

Questo documento spiega come ottimizzare i contenuti web condivisi su Facebook tramite computer, web o app mobili.

Questo documento fornisce informazioni sugli ambiti seguenti:

Markup Open Graph
Test del markup
Test per verificare la gestione corretta dell'agente utente di Facebook
Tipi di contenuti multimediali

Markup Open Graph

La maggior parte dei contenuti viene condivisa su Facebook come URL, quindi è importante eseguire il markup del tuo sito web con tag Open Graph per controllare come saranno visualizzati i contenuti su Facebook. Affinché il tuo sito web sia condiviso correttamente dal nostro crawler, anche il tuo server deve utilizzare le codifiche gzip e deflate.

Senza questi tag Open Graph, il crawler di Facebook usa euristiche interne per individuare al meglio titolo, descrizione e immagine di anteprima dei contenuti. Indica queste informazioni in modo esplicito con i tag Open Graph per assicurarti post di qualità su Facebook.

Ecco un esempio di contenuti formattati con i tag Open Graph per una visualizzazione ottimale su Facebook:

Esempio di markup

Questo esempio spiega come eseguire il markup di un articolo, di una notizia o di un post sul blog con og:type="article" e altre proprietà aggiuntive:

<meta property="og:url"                content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type"               content="article" />
<meta property="og:title"              content="When Great Minds Don’t Think Alike" />
<meta property="og:description"        content="How much does culture influence creative thinking?" />
<meta property="og:image"              content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

Le proprietà comprendono metadati descrittivi sul modo in cui desideriamo presentare l'articolo quando qualcuno lo condivide.

Tag di base

Utilizza questi metatag di base per tutti i tipi di contenuti:

Tag	Descrizione
`og:url`	L'URL canonico della tua pagina. Deve essere semplice e non contenere variabili per la sessione, parametri che identificano l'utente o contatori. I "Mi piace" e le condivisioni relative all'URL saranno aggregati in esso. Ad esempio, gli URL dei domini mobili devono puntare alla versione per computer come l'URL canonico per aggregare i "Mi piace" e le condivisioni delle diverse versioni della pagina.
`og:title`	Il titolo dell'articolo senza brand, ad esempio il nome del tuo sito.
`og:description`	Una breve descrizione dei contenuti, generalmente compresa tra 2 e 4 frasi. Sarà visualizzata sotto il titolo del post su Facebook.
`og:image`	L'URL dell'immagine visualizzata quando qualcuno condivide i contenuti su Facebook. Vedi sotto per maggiori informazioni e consulta la guida alle best practice per scoprire come specificare un'immagine di anteprima di alta qualità.
`fb:app_id`	Per usare gli Insights di Facebook, aggiungi l'ID dell'app alla tua pagina. Insights ti consente di visualizzare i dati statistici per il traffico al tuo sito da Facebook. Puoi trovare l'ID dell'app nella Dashboard gestione app.

Puoi aggiungere anche altri due tag per migliorare la distribuzione dei contenuti e l'interazione:

Tag	Descrizione
`og:type`	Il tipo di contenuti multimediali. Il tag ha effetti sulla visualizzazione dei contenuti nel Feed. Non specificandolo, l'impostazione predefinita è `website`. Ogni URL deve essere un singolo oggetto, quindi non è possibile inserire più valori `og:type`. L'elenco completo dei tipi di oggetti è consultabile in Riferimento per i tipi di oggetto
`og:locale`	La lingua della risorsa. L'impostazione predefinita è `en_US`. Se sono disponibili traduzioni in altre lingue, puoi utilizzare anche `og:locale:alternate`. Scopri le lingue supportate consultando la documentazione sulla localizzazione.

Per una lista completa delle proprietà standard degli oggetti, consulta il Riferimento per le proprietà degli oggetti.

Test del markup

Per vedere il modo in cui il tuo markup viene visualizzato nel crawler di Facebook, inserisci un URL nel debugger di condivisione. Quest'ultimo mostrerà i metatag estratti dal crawler ed eventuali errori o avvisi.

Il debugger attiva anche un'estrazione di dati dalla tua pagina, quindi utilizzalo per aggiornarne i contenuti in caso di errori nel codice HTML. Per scoprire di più, consulta Aggiornamento degli oggetti.

Test per verificare la gestione corretta dell'agente utente di Facebook

Apri il browser.
Modifica l'agente utente affinché corrisponda a quello di Facebook. Per maggiori informazioni sulla modalità di modifica dell'agente utente, consulta il sito web http://osxdaily.com/2013/01/16/change-user-agent-chrome-safari-firefox/:
- Develop Menu (Menu sviluppo) > User-Agent (Agente utente) > Other (Altro).
- Imposta l'agente utente sul sito web: facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php).
Carica l'URL del problema.
Imposta l'agente utente su quello di un browser mobile, ad esempio Safary - iPhone:
Develop Menu (Menu sviluppo) > User-Agent (Agente utente) > Safari — iOS 10 — iPhone (Safari - iOS 10 - iPhone).
Carica l'URL del problema.
Se si tratta di un problema a livello di agente utente, la pagina verrà caricata correttamente nel passaggio 5 ma non in quello 3.

Tipi di contenuti multimediali

Se i tuoi contenuti includono audio, video o informazioni sulla posizione, puoi eseguire un altro markup. Consulta le proprietà standard degli oggetti in Riferimento per i tipi di oggetto.

Video

Puoi usare og:video per tutti i tipi di contenuto. Questa sezione descrive la modalità di utilizzo dei tag aggiuntivi per ottimizzare l'aspetto dei video su Facebook. Facebook supporta video in mp4 e in Flash.

Usa un URL protetto per i tag og:video:url e og:video:secure_url, così da poter riprodurre il video in linea nel Feed. Tieni presente che la riproduzione del video non è garantita in base a diversi fattori.

Metatag	Descrizione
`og:video`	L'URL del video. Per riprodurre il video in linea nel Feed, devi usare l'URL https:// se possibile.
`og:video:url`	Equivalente a `og:video`.
`og:video:secure_url`	L'URL protetto del video. Includilo anche se imposti l'URL protetto in `og:video`.
`og:video:type`	Tipo MIME del video. Può essere `application/x-shockwave-flash` o `video/mp4`.
`og:video:width`	Larghezza del video in pixel. Questa proprietà è obbligatoria per i video.
`og:video:height`	Altezza del video in pixel. Questa proprietà è obbligatoria per i video.
`og:image`	Specifica un'immagine per un'anteprima di alta qualità nel Feed.

Immagini

Utilizza questo insieme di proprietà per i contenuti che contengono più di un'immagine. Per una guida su come utilizzare al meglio og:image, consulta le best practice per la condivisione.

Metatag	Descrizione
`og:image`	URL dell'immagine. Per aggiornare un'immagine dopo la pubblicazione, usa un nuovo URL per la nuova immagine. Le immagini vengono memorizzate nella cache in base all'URL e non vengono aggiornate, a meno che non cambi l'URL.
`og:image:url`	Equivalente a `og:image`.
`og:image:secure_url`	URL https:// dell'immagine.
`og:image:type`	Tipo MIME dell'immagine. Può essere `image/jpeg`, `image/gif` o `image/png`
`og:image:width`	Larghezza dell'immagine in pixel. Specifica l'altezza e la larghezza dell'immagine, per garantirne il corretto caricamento durante la prima condivisione.
`og:image:height`	Altezza dell'immagine in pixel. Specifica l'altezza e la larghezza dell'immagine, per garantirne il corretto caricamento durante la prima condivisione.

Risorse in 3D

Consulta il nostro documento sulla condivisione con Open Graph per i post in 3D.