Share
Nessun markup di due siti web è stato creato uguale. In quanto tale, può essere difficile per piattaforme di social media come Facebook trovare l'informazione corretta all'interno del contenuto da visualizzare quando la pagina viene condivisa nel feed di notizie.
È qui che entra in gioco l'Open Graph Protocol (OGP); un'iniziativa sviluppata da Facebook che consente di riconoscere facilmente i contenuti Web e visualizzarli facilmente all'interno della loro piattaforma.
Esaminare quanto segue:
Pagina visualizzata nei feed di Facebook, senza meta tag Open GraphQuesto ci dà un'anteprima content content sul Feed di Facebook, con il titolo e l'estratto. Se guardiamo il contenuto della nostra pagina demo, tuttavia, ci sono alcuni altri elementi che potrebbero essere utilizzati; come l'immagine e il nome dell'autore. Facebook non selezionerà questi dettagli senza aiuto.
Diamo un'occhiata a come possiamo usare Open Graph per migliorare la nostra presentazione di contenuti su Facebook.
Open Graph specifica una serie di meta tag che definiscono le meta informazioni del contenuto, simili ai meta tag che forniamo ai motori di ricerca nelle pratiche SEO comuni. Prima di aggiungere questi meta tag, sarà necessario impostare lo spazio dei nomi XML per Open Graph in html.
La concezione dello spazio dei nomi in HTML è simile ad altri linguaggi web; previene l'ambiguità sulla struttura dei dati. Si riferisce a quali vocabolari o sintassi semantici dovrebbero essere usati quando lo spazio dei nomi è presente nel documento. Nel nostro caso, il og namespace si riferisce al protocollo Open Graph, mentre il fb lo spazio dei nomi si riferisce alle specifiche Open Graph di Facebook.
In alternativa, possiamo usare il prefisso attributo per definire questi spazi dei nomi. Per esempio:
Facebook richiede che alcuni tag siano presenti in ogni momento.
Innanzitutto, il tipo di contenuto, specificato da og: Tipo proprietà. Sulla homepage, di solito impostiamo il valore su sito web.
E comunemente lo imposta articolo per il contenuto.
È inoltre possibile impostare un numero di altri valori possibili og: Tipo meta tag che include Prodotto, posto, video.movie, books.book, e molti altri nel caso in cui i tuoi contenuti non siano un articolo tipico come un post sul blog o notizie.
Per esempio:
L'URL del contenuto, specificato con og: url proprietà, deve contenere un URL assoluto della pagina Web senza stringhe di query o hash, simile a canonico collegamento. Sulla homepage, l'URL è l'URL della home page:
L'URL del contenuto sarà un po 'più dettagliato:
Il meta titolo, specificato con og: titolo proprietà, definisce il titolo per l'anteprima. Il valore del titolo potrebbe non corrispondere sempre al titolo impostato nel file titolo etichetta; è possibile scegliere di modificare o abbreviare il titolo per la condivisione.
Ad esempio, il contenuto della nostra pagina riguarda i CSS ed è intitolato ai fini dei social media "Learn CSS: The Complete Guide". Tuttavia il titolo del documento è in realtà "Open Graph Protocol - Tuts +", quindi:
Non esiste un limite di caratteri definito per og: titolo, ma Facebook è noto per troncare i titoli a volte, in particolare per i contenuti condivisi nel thread dei commenti in cui lo spazio è stretto.
Facebook tronca titolo e descrizione del contenuto condiviso su Facebook Wall La meta description, specificata con og: Descrizione tag, fornisce l'estratto di contenuto condiviso.
Facebook non imposta un carattere definito o un limite di parole alla descrizione. Tuttavia, Facebook troncherà la descrizione quando lo riterrà opportuno, quindi mantieni la descrizione breve e allettante.
La meta immagine è definita con og: Immagine, ti consente di rappresentare visivamente il contenuto e il valore non deve sempre essere un'immagine all'interno del contenuto. Usa l'immagine migliore per invogliare i lettori a fare clic e alla fine leggere il contenuto.
Oltre all'URL, puoi anche aggiungere i metatag che specificano la dimensione dell'immagine e il tipo MIME dell'immagine. Questi meta tag sono facoltativi, ma aiuteranno a ridurre il carico di lavoro di Facebook quando si analizzano e memorizzano nella cache l'immagine.
La dimensione minima dell'immagine è limitata a 200x200 pixel, ma Facebook consiglia la dimensione dell'immagine di 1200x630 pixel per il miglior risultato possibile.
Piccolo vs grande immagine nei contenuti condivisi di Facebook.Puoi prendere in considerazione anche le proporzioni della tua immagine:
"Cerca di mantenere le immagini il più vicino possibile al rapporto di proporzioni di 1,91: 1 per visualizzare l'intera immagine nel feed di notizie senza alcun ritaglio". - Sviluppatori di Facebook
All'interno di Facebook, aggiungendo l'ID app Facebook con fb: APP_ID il meta tag è altamente incoraggiato. L'ID app consentirà a Facebook di collegare il tuo sito Web e generare una panoramica completa di come gli utenti interagiscono con il tuo sito web e i tuoi contenuti.
Puoi ignorarlo, se non hai bisogno di analizzare il tuo sito web.
Alcuni meta tag sono facoltativi, ma in alcuni casi saranno utili.
Il nome del sito è specificato con og: site_name meta tag. Definisce il nome del sito web o, più precisamente, il marchio del tuo sito web. Il nome o il nome del sito Web potrebbe non essere sempre il tuo nome di dominio. Tuts +, in questo caso, è un buon esempio.
Secondo le nostre linee guida per il branding, questo dovrebbe essere scritto come Tuts + invece di Tutsplus, ancora tutsplus.com è il nome di dominio poiché un dominio non può contenere il + carattere, quindi:
Facebook non mostra questo nome del sito sul contenuto condiviso. Invece, lo troverai visualizzato sulla notifica quando hai installato un plug-in social di Facebook come Facebook Comment sul tuo sito web.
Esistono numerosi meta tag correlati al tipo di contenuto specificato. Come implicito, questi tag differiscono in base al valore specificato in og: Tipo meta tag. Qui abbiamo un articolo. Un articolo può essere accompagnato da alcuni meta tag di supporto come articolo: autore, articolo: published_time, articolo: editore, articolo: Sezione, e articolo: tag.
Prima di includere questi meta tag, sarà necessario aggiungere un nuovo spazio dei nomi che punta alla specifica dell'articolo grafico aperto. Quindi, a questo punto, abbiamo tre spazi dei nomi vale a dire og, fb, e articolo.
Secondo Facebook, il articolo: autore il meta tag dovrebbe contenere un URL del profilo di Facebook o l'ID dell'autore dell'articolo.
L'aggiunta di più di un URL o ID è consentita nel caso in cui più autori abbiano contribuito all'articolo.
Mancia: se l'autore non ha un account Facebook, è possibile sostituirlo articolo: autore con il seguente autore meta tag.
Facebook mostrerà il nome dell'autore nell'anteprima, come segue.
Anche se Facebook suggerisce di includere tag di articoli come articolo: published_date e articolo: Sezione non aggiungono alcun significato al momento della scrittura. Cioè, a meno che tu non abbia a che fare con una pagina di Articolo istantaneo.
Come accennato, questi tag dipendono in gran parte dal tipo di contenuto. Se il tipo di contenuto è video.movie, i tag più appropriati sarebbero Video: attore, Video: direttore, e Video: la durata invece del articoli: published_date.
Per questo motivo, lascerò a te quella parte di Open Graph da esplorare. Facebook ha fornito materiale di riferimento completo su questi meta tag insieme ad alcuni esempi di frammenti di codice.
Open Graph è stato adottato da altre piattaforme di social media come Twitter (anche se Twitter ha anche il proprio markup proprietario chiamato Twitter Cards), Pinterest, LinkedIn e Google+ in una forma o nell'altra. In questo tutorial abbiamo esaminato alcuni meta tag Open Graph e li abbiamo sfruttati per rendere l'anteprima dei nostri contenuti più avvincente.
Infine, se ritieni che il tuo contenuto non sia reso come previsto, utilizza Facebook Sharing Debugger per scoprire cosa c'è di sbagliato nel markup.
Accentsconagua