Torna al blog
Ti sei mai chiesto perché a volte i link che condividi su Facebook o Twitter hanno un aspetto strano? Sai come influenzare l’aspetto dei tuoi post del blog condivisi su questi social media?
Se non sei sicuro di aver fatto tutto il possibile per ottimizzare le informazioni del tuo post o di una pagina visualizzata su Facebook e Twitter, continua a leggere. Ti mostreremo come utilizzare i giusti social media tag possa aiutarti a migliorare il look & feel delle anteprime dei tuoi post.
Quando condividi il link di un articolo, vuoi che il tuo post abbia un bell’aspetto una volta pubblicato sui social media. Vorresti che contenesse un’immagine di qualità, il nome corretto, la descrizione e l’URL. Facebook, Twitter e altre piattaforme social recuperano questi parametri dal tuo sito web.
Puoi controllare quali dati vengono estratti dal post includendo i social media meta tag (ad esempio, gli open graph tag) nel codice HTML dei tuoi post.
Se i meta tag di Facebook (=Open Graph meta tag) sono presenti, sei tu a determinare cosa viene visualizzato nel post di Facebook. Se non includi queste meta proprietà Open Graph (og), Facebook visualizzerà comunque le informazioni sul tuo post del blog, ma probabilmente non come vorresti. Questo funziona in modo analogo anche con i meta tag di Twitter. Vediamo come utilizzare i social media meta tag e la condivisione dei link su Facebook.
Condivisione di contenuti web su Facebook
Facebook è un’ottima piattaforma social per condividere i tuoi nuovi contenuti. Creare un nuovo post partendo da un articolo del tuo sito web è semplice: basta inserire il link nella casella di un nuovo post su Facebook.
Diamo un’occhiata a questo processo. Useremo il nostro post sulla Strategia di Marketing su Facebook come esempio.
Dopo aver inserito l’URL nella casella del nuovo post, Facebook estrae i dati dall’URL di destinazione e crea per noi un post ben formattato. Il formato viene mostrato istantaneamente nell’anteprima, sia per la visualizzazione desktop che mobile. Se utilizzi Kontentino per gestire i tuoi contenuti social, l’anteprima è immediatamente disponibile nel Calendario di Kontentino.
Comprendere i meta tag nel codice HTML della pagina web
Meta proprietà per i motori di ricerca
Proprio all’inizio, possiamo vedere diverse proprietà che definiscono i parametri di questo articolo, chiamate anche meta tag o meta proprietà. Alcune di esse sono utilizzate dai motori di ricerca per capire quale sia il contenuto del sito web, fornendo informazioni aggiuntive che non vengono visualizzate sulla pagina del post. Queste includono, ad esempio, meta tag come:
- Meta title – <title>
- Meta description – meta name=”description”
- Robots – meta name=”robots”
L’immagine qui sotto mostra il codice HTML per questo post di Kontentino. Puoi vedere questi meta tag evidenziati in verde.
Identificazione dei meta tag nel codice HTML del post Facebook Ads Target Audiences 101: The Ultimate Guide
Consiglio rapido: Non sei sicuro di come visualizzare il codice HTML del tuo sito web? Premi semplicemente CTRL+U nel tuo browser su Windows o Option + Command + U su Mac.
Grazie a questi meta tag, i motori di ricerca sanno che l’indicizzazione di questa pagina web (post) e i suoi parametri sono impostati su follow (dofollow). Il meta title inserito e la meta description vengono utilizzati dai motori di ricerca per visualizzare il link a questo post nei loro risultati di ricerca (nella pagina dei risultati dei motori di ricerca – SERP). Come puoi vedere, le proprietà meta title e meta description sono impostate su:
- Meta title: ‘Facebook Ads Target Audiences 101: The Ultimate Guide | Kontentino Blog – Simplifying Social Media Approval Workflow’
- Meta description: ‘Find out how to reach the right people with Facebook Ads target audiences.’
Sappiamo che questi meta tag non hanno una lunghezza ottimale, ma non siamo qui per parlare di SEO o Google. Quindi, passiamo subito ai meta tag sottostanti, che contengono il testo ‘og:’.
Questi meta tag o meta proprietà sono talvolta indicati come social meta tag, social media meta tag o semplicemente proprietà meta og.
Come vedi, ci sono 7 diverse proprietà meta og nel codice HTML del nostro post. Sono:
- og: locale
- og: type
- og: title
- og: description
- og: url
- og: site_name
- og: image
Inoltre, ci sono altri meta tag di Facebook – le proprietà og: associate al meta tag og:image, che includono:
- og:image:width
- og:image:height
- og:image:alt
- og:image:type
Meta tag di Twitter
Oltre a questi, nel codice HTML troverai anche alcuni social meta tag speciali per Twitter, come:
- meta name=”twitter:card”
- meta name=”twitter:title”
- meta name=”twitter:description”
- meta name=”twitter:site”
- meta name=”twitter:image”
Torniamo al nostro esempio di condivisione del post su Facebook. Dovremo capire, decodificare e modificare il contenuto delle meta proprietà ‘og:’ per influenzare l’aspetto del nostro nuovo post FB con il link incorporato.
Continua a leggere per saperne di più su: i) Decodifica delle meta proprietà og:; ii) Linee guida per la scrittura del contenuto dei social meta tag; e iii) Modifica del contenuto di queste proprietà social meta nel CMS del tuo sito web.
Pubblicazione su Facebook e Twitter con Kontentino
Iscriviti per una prova gratuita di 14 giorni di Kontentino e diventa un esperto dei social media meta tag con noi. Guarda l’anteprima del post in Kontentino prima di pubblicarlo.
Il prefisso ‘og:’ nel codice HTML del tuo sito web sta per ‘Open Graph’. È l’acronimo di un protocollo Open Graph che ti permette di dire a Facebook come dovrebbe essere visualizzato il tuo contenuto condiviso. Come abbiamo già detto (e come afferma Facebook nelle sue istruzioni per gli sviluppatori), ‘senza questi tag Open Graph, il Crawler di Facebook utilizza un’euristica interna per indovinare al meglio il titolo, la descrizione e l’immagine di anteprima per il tuo contenuto’. Definire queste informazioni esplicitamente con i tag Open Graph aiuta a garantire la massima qualità dei post su Facebook.
Come puoi vedere, questi meta tag og sono estremamente importanti per Facebook. Se non ne avevi ancora sentito parlare o pensi che siano una novità, ti sorprenderà sapere che il protocollo Open Graph è stato lanciato da Facebook già 10 anni fa (nel 2010). Oggi, tuttavia, è gestito dalla Open Web Foundation.
Il protocollo Open Graph si basa su varie tecnologie e schemi esistenti per assistere gli sviluppatori nel rappresentare riccamente qualsiasi pagina web all’interno del social graph. Basta con la storia e le definizioni; entriamo nei dettagli dei vari meta tag og. Analizzeremo nel dettaglio solo 4 di essi – quelli responsabili dell’aspetto del nostro post incorporato su Facebook: og:title, og:image, og:url e og:description.
Meta proprietà og:title
Questa meta proprietà è uno dei quattro metadati di base all’interno del protocollo Open Graph (quelli sono: og:title, og:type, og:image, og:url). Specificando l’og:title, impostiamo il titolo del nostro oggetto (in questo caso, un post del blog), come dovrebbe apparire all’interno del social graph. Facebook estrarrà quindi questo og:title e lo mostrerà come titolo del post (proprio sotto l’URL nella nostra prima immagine).
Meta proprietà og:image
Inseriamo un URL dell’immagine che dovrebbe rappresentare il nostro oggetto (articolo) all’interno del social graph. In questo caso, il link all’immagine in evidenza (featured image) dovrebbe essere incluso in questa proprietà. Specificando l’og:image, ci assicuriamo che venga visualizzata proprio questa immagine su Facebook.
Altrimenti, Facebook potrebbe scegliere un’altra immagine dal nostro post; potrebbe essere l’immagine principale mostrata nell’elenco dei post e in cima al nostro articolo o qualsiasi altra immagine che appare nel post del blog.
Meta proprietà og:url
Questo meta tag contiene l’URL canonico del nostro oggetto che verrà utilizzato come suo ID permanente nel social graph. Nel nostro caso, l’URL nell’og:url è https://www.kontentino.com/blog/facebook-ads-target-audiences/.
Meta proprietà og:description
Infine, specificare il meta tag og:description dovrebbe aiutarci a far visualizzare la descrizione quando si condivide questo post. Ora, come puoi vedere nell’immagine del codice HTML, è ‘Find out how to reach the right people with Facebook Ads target audiences.’
Meta tag di Twitter
I meta tag di Twitter funzionano in modo analogo ai meta tag Open Graph e specificano il contenuto che Twitter estrarrà quando si condivide una pagina web su questa piattaforma social.
Padroneggiare i meta tag og
Facebook e Twitter offrono linee guida su come utilizzare i meta tag sopra menzionati. Nella nostra tabella qui sotto, riassumiamo le informazioni di base su di essi insieme alle rispettive raccomandazioni.
Ora che comprendiamo i vari tipi di social meta tag e le loro implicazioni, è tempo di entrare nel CMS della nostra pagina web e scoprire dove e come modificarli. Ti mostreremo esempi dal CMS WordPress, essendo il CMS n. 1 al mondo per distacco.
Se utilizzi un plugin SEO, come Yoast SEO, Rank Math, All in One SEO o simili, ti torneranno utili quando modifichi questi social metadata. Quasi tutti i buoni plugin SEO ti permetteranno di cambiare i meta tag per Facebook e Twitter separatamente. Nel testo seguente, ti mostreremo come impostarli in Rank Math.
Iniziamo modificando il post e cliccando sulla scheda SEO. Lì, bisogna aprire la scheda ‘social’.
Trovare dove modificare i social media meta tag nel tuo CMS
Rank Math contiene un visualizzatore di anteprima dal vivo che ti consente di vedere come le modifiche apportate influenzerebbero l’incorporamento del tuo post su Facebook o Twitter. Clicca sul pulsante ‘Preview & Edit Social Media’ (Anteprima e modifica Social Media).
Modificare i meta tag di Facebook
In primo luogo, vedremo l’anteprima del post di Facebook e sotto di essa, i social media meta tag che possono essere modificati.
Anteprima della condivisione del link del post generata dal tuo CMS – in questo caso, il plugin RankMath
Nel nostro caso, le proprietà og:image, og:title e og:description non sono ancora state specificate. Come puoi vedere, il simulatore (editor dello snippet di anteprima) mostra i valori dai metadati di base utilizzati per i motori di ricerca.
Modifica dei social media meta tag: i tag og:title e og:description del tuo post del blog
Nella nostra primissima immagine in questo post del blog, possiamo vedere che il titolo mancante è la parte più problematica. Tuttavia, compileremo sia il titolo che la descrizione.
Successivamente, dopo aver salvato le modifiche, dovremmo controllare come apparirà il post aggiornato una volta condiviso su Facebook.
Nuovi social media meta tag compilati per il post
Sebbene Facebook raccomandi di usare da 2 a 4 frasi per il meta tag og:description, per questa dimostrazione ci limiteremo a una sola frase. Vogliamo vedere se Facebook la visualizza, grazie allo spazio creato sulla card riducendo la lunghezza del parametro og:title.
Prima di verificare il risultato, dovremmo menzionare altre soluzioni che ti consentono di modificare i parametri Open Graph in WordPress. Se non utilizzi un plugin SEO, puoi usare un plugin Open Graph dedicato come OG o inserire manualmente i social metadata nel codice HTML della tua pagina web. Quest’ultima opzione sarà utile anche per altri CMS. WIX ha una soluzione integrata per inserire le meta proprietà og, così come altri importanti sistemi di gestione dei contenuti.
Una volta finito di modificare i meta tag di Facebook o Twitter, è il momento di provare a condividere il tuo post su queste piattaforme social. Vediamo come apparirebbe ora il nostro post su Facebook. Possiamo usare il Facebook Debugger (ufficialmente chiamato Facebook Sharing Debugger, o talvolta FB preview tool) per controllare i post modificati su Facebook. Prima di farlo, non dimenticare di svuotare la cache o eliminare i file temporanei di Safari (se usi questo browser) se non è stata cancellata automaticamente dopo aver salvato il post.
Meta tag Open Graph nel Facebook Sharing Debugger
Anteprima del link nel Facebook Sharing Debugger che mostra i tuoi social media meta tag in azione
Come puoi vedere qui sopra, tutto sembra a posto e le modifiche ai meta tag di Facebook hanno avuto effetto.
Errati convincimenti comuni sui social media meta tag
Mito 1: I social media meta tag servono solo per la SEO.
I meta tag non servono solo ai motori di ricerca: svolgono un ruolo fondamentale nel modo in cui i tuoi contenuti vengono visualizzati sui social network. I meta tag per i social media, come og:image e og:title, ottimizzano specificamente i tuoi post per piattaforme come Facebook e Twitter, migliorando l’engagement.
Mito 2: Tutte le immagini verranno visualizzate perfettamente sui social media.
Non tutte le immagini del tuo post verranno visualizzate correttamente una volta condivise. Senza specificare og:image o utilizzare una Twitter card, le piattaforme social potrebbero selezionare un’immagine generica o formattare il visual in modo errato, compromettendo l’aspetto del tuo post.
Mito 3: I meta tag sono importanti solo per i siti web one-page.
I meta tag sono essenziali per i siti web composti da più pagine. Che il tuo sito contenga blog o elenchi di prodotti, l’utilizzo di og:type e altri meta tag garantisce una visualizzazione coerente e ottimizzata su più piattaforme social.
Mito 4: Puoi affidarti alle piattaforme social per visualizzare correttamente i tuoi contenuti.
Affidarsi a Facebook o Twitter per formattare automaticamente il tuo post è rischioso, per non dire altro. Senza impostare manualmente meta tag chiave come og:url e og:description, le piattaforme social potrebbero estrarre dati errati o incompleti, impattando sull’attrattiva visiva dei tuoi contenuti.
Mito 5: I social meta tag sono difficili da implementare senza competenze di programmazione.
Plugin e strumenti WordPress come Rank Math semplificano il processo di aggiunta e gestione dei social media meta tag. Non devi essere uno sviluppatore web per garantire che i tuoi post siano ottimizzati per la condivisione sui social.
Mito 6: Le Twitter card funzionano solo con immagini statiche.
Le Twitter card supportano vari formati multimediali, inclusi i formati GIF e i video. Puoi allegare foto o altri media alla tua summary card, rendendo i tuoi post più dinamici e coinvolgenti su questo social network.
Mito 7: I meta tag riguardano solo i tuoi contenuti.
I meta tag non riguardano solo il tuo sito web; aiutano anche quando i tuoi contenuti vengono condivisi su altri siti web. Impostare correttamente meta property=”og:image” e meta property=”og:title” assicura che i tuoi contenuti abbiano un aspetto professionale indipendentemente da dove vengono condivisi.
Conclusione
Speriamo che questo articolo ti abbia aiutato a comprendere le meta proprietà og e la loro importanza per la condivisione dei link su Facebook e Twitter. Se vuoi portare il tuo social media marketing a un livello superiore, assicurati di provare Kontentino (se non l’hai già fatto). È uno strumento facile da usare per creare contenuti social, che supporta una collaborazione efficiente del team e l’approvazione dei contenuti.
Il nostro Calendario Editoriale integra la funzione di anteprima, così non devi andare da nessun’altra parte per vedere come apparirà il tuo nuovo link post, risparmiando tempo prezioso per controllare e ottimizzare i tuoi social media meta tag.
E cosa c’è di meglio che impostare i tag UTM per tracciare le performance del post nei tuoi web analytics, impostare una data di pubblicazione futura o assegnare un budget di sponsorizzazione al post per ottenere una portata più ampia?
FAQ
Che cos’è un social media meta tag?
Un social media meta tag fornisce dati cruciali come titoli, immagini e descrizioni per le piattaforme di social media quando si condividono pagine web. È essenziale per migliorare l’engagement degli utenti sulle principali piattaforme social.
Quali sono esempi di meta tag?
Esempi includono il contenuto di meta property=”og:title”, meta property=”og:image” e meta property=”og:url”, che ottimizzano la condivisione sociale su piattaforme come Facebook e Twitter, assicurando che il tuo contenuto sia ben rappresentato.
Cosa sono i social media metadata?
I social media metadata includono dati open graph come un titolo conciso, una descrizione e immagini di alta qualità, che migliorano l’aspetto dei post sui social media su piattaforme come Twitter e Facebook.
Cosa sono i social media tag?
I social media tag sono identificatori come i tag delle twitter card o gli og tag incorporati nel file HTML per influenzare come le pagine web vengono visualizzate quando condivise sulle piattaforme social, aumentando l’esposizione sociale.
Come creare i meta tag?
Per creare meta tag, uno sviluppatore web inserisce alcune righe di codice nel file HTML di una pagina web, includendo parametri come il title tag, il description tag e un’immagine unica che rappresenta il contenuto.
Quali social media usano i meta?
I meta tag sono utilizzati dalle principali piattaforme social come Facebook, Twitter e LinkedIn per ottimizzare l’aspetto delle pagine web e dei post sui social media quando vengono condivisi tra i network, migliorando l’engagement degli utenti.
È necessario un meta tag?
Sì, i meta tag sono cruciali per il marketing online perché controllano come appare il tuo contenuto sulle piattaforme social, assicurando che vengano mostrati l’immagine e il titolo corretti, il che aumenta la condivisione sociale e l’engagement.
Come trovare i meta tag?
Puoi ispezionare il file HTML di un sito web per trovare i meta tag. Strumenti come il Facebook Debugger e servizi generali online ti aiutano anche a visualizzare specifiche proprietà meta come og:image o og:type.
Quanti meta tag dovrei usare?
Usa i meta tag essenziali come og:title, og:image, og:url e i tag per le Twitter card per ottimizzare la tua esposizione sociale. Dai priorità alla qualità rispetto alla quantità concentrandoti sui tag ad alto impatto per la condivisione sociale.
Cos’è un meta tag di Facebook?
Un meta tag di Facebook, come meta property=”og:title”, fa parte del protocollo Open Graph. Aiuta a determinare come le tue pagine web o i post sui social media appaiono su Facebook, garantendo un migliore engagement degli utenti.
Cos’è il contenuto della meta property og:title?
Il contenuto della meta property og:title definisce il titolo della tua pagina web come appare quando condivisa su piattaforme di social media come Facebook.
Cos’è il contenuto della meta property og:image?
Il contenuto della meta property og:image specifica l’URL dell’immagine che apparirà quando il tuo contenuto viene condiviso sulle piattaforme di social media.
Cos’è il contenuto della meta property og:type?
Il contenuto della meta property og:type definisce il tipo di contenuto (ad es., articolo, sito web) condiviso, aiutando le piattaforme social a categorizzarlo e visualizzarlo correttamente.
Cosa sono i metadati? 3 esempi?
Esempi di metadati includono il tag description, le variabili di sessione per i parametri identificativi dell’utente e il tag meta property=”og:image”, che aiuta le piattaforme a selezionare l’immagine giusta per la condivisione sociale.
