Meta Tag Open Graph - Tutto Quello Che Devi Sapere

Vuoi che le persone notino i tuoi post sui social media?

Ogni giorno vengono scritti oltre 4 milioni di articoli di blog, quindi è fondamentale condividere il tuo lavoro sui social network. Open Graph è uno dei componenti più importanti per raggiungere un pubblico più ampio.

Non tutti conoscono l'importanza di Open Graph. Cos'è esattamente? Come può aiutarti a farti notare?

Cos'è Open Graph?

“I meta tag, come le meta description e i titoli, regolano il modo in cui gli URL vengono visualizzati quando sono condivisi sui social media.”

È più semplice definire il contenuto delle pagine sui siti di social networking grazie al progetto Open Graph di Facebook per standardizzare le informazioni sociali tra i siti web.

Questi tag forniscono ai servizi di social networking informazioni come il titolo della pagina, la descrizione e l'immagine in evidenza nella sezione head di una pagina web. Questo processo preserva la coerenza e l'autenticità delle informazioni mostrate.

Perché usare Open Graph?

Open Graph è supportato in vari social network come:

• Facebook;
• Twitter/X;
• Pinterest;
• Viber;
• Telegram;
• WhatsApp.

Secondo Google, il protocollo migliora i “Blocchi di Contenuti Consigliati”.

Cosa succede se Open Graph non viene utilizzato?

Poiché Facebook non è sicuro di cosa mostrare nell'anteprima, potrebbe utilizzare qualsiasi immagine trovi (potrebbe persino prendere un banner pubblicitario o qualcosa dalla tua intestazione).

Di conseguenza, Facebook non è in grado di determinare quali sezioni dell'anteprima visualizzare.

• Open Graph crea anteprime per i siti web relativi ai social media.
• I tag Open Graph aiutano le persone a trovare materiale nei feed sociali, il che porta a un aumento delle visite.

Man mano che i visitatori scorrono la pagina del tuo sito web, più in alto appare il tuo materiale, maggiore attenzione riceve. Permette agli utenti di ottenere un'anteprima prima di cliccare.

Usa i tag OG per aiutare le persone a trovare il tuo materiale su Facebook e altre piattaforme di social media.

Gli elementi meta OG vengono utilizzati per creare snippet quando gli URL sono condivisi in conversazioni private su siti che utilizzano il protocollo.

L'importanza del protocollo Open Graph per la tua attività

Questo tipo di interazione è reso semplice dal protocollo Open Graph di Facebook. Il markup Open Graph è un metodo per organizzare e tracciare i dati di anteprima. Ti consente il controllo completo su come il tuo materiale viene visualizzato sui social network diversi dal tuo.

Per facilitare l'integrazione, sono stati creati oggetti grafici ricchi che condividono il set standard di caratteristiche di Facebook. Facebook ha il controllo sul flusso di informazioni da fonti esterne (o apprezzate, ecc.). Queste informazioni sono fornite dai meta tag Open Graph mentre passano attraverso l'intestazione di un sito web.

Poiché molte persone accedono a una pagina tramite i social media, i tag Open Graph sono più vitali che mai. Il CTR può aumentare quando la ricerca è migliorata. Open Graph facilita il processo di condivisione sui social media. Open Graph è ampiamente supportato su tutti i siti di social networking. I tag Open Graph di Twitter/X ne sono un buon esempio; Twitter/X supporta Open Graph.

Cosa significa esattamente?

Perché preoccuparsi di etichettare il tuo contenuto lato server usando Open Graph? C'è la possibilità che i tag aggiuntivi migliorino le prestazioni del tuo sito web e attirino più visitatori? Ecco alcuni dei motivi per cui crediamo che Open Graph possa fare una grande differenza.

La maggior parte dei social network più importanti utilizza i tag Open Graph

Se non hai tempo per imparare l'HTML, puoi invece utilizzare i tag Open Graph di Facebook. Puoi usare queste etichette per personalizzare i nomi, le descrizioni e le foto che appaiono su tutti i principali siti di social networking.

I tag Open Graph sono davvero per i social media

Open Graph è stato progettato per visualizzare campioni di informazioni all'interno del social network. Organizza le informazioni in modi che vanno oltre la semplice condivisione di una pagina web.

Immagine ottimizzata in evidenza

Puoi usare i tag Open Graph per specificare quale immagine dovrebbe apparire nella tua anteprima social. L'opzione predefinita non deve essere necessariamente scelta. Le persone sono più propense a cliccare sui link al tuo post del blog o al tuo sito web se l'aspetto è eccellente.

Si tratta di anteprime social, non di anteprime di ricerca

Sia la search engine optimization che il social media marketing sono cruciali, ma hanno requisiti distinti. I componenti Open Graph hanno risolto un vecchio problema SEO: il fatto che le anteprime dei post sui social network avessero titoli e descrizioni poco attraenti.

Il titolo della pagina, le meta description e i tag Open Graph per titolo, description, URL e immagine devono essere tutti unici affinché il contenuto sia ottimizzato per i motori di ricerca e i social network.

Hai il controllo sul tuo materiale

Sia che tu pubblichi il tuo materiale da solo o che lo faccia qualcun altro, hai il controllo completo su come apparirà sui social media.

Anche se personalizzi ogni post sui social media, la maggior parte dei tuoi clienti ignorerà l'anteprima. I visitatori che scelgono di condividere il tuo materiale lo faranno con un'immagine, un titolo e una descrizione ben scelti se i tuoi tag Open Graph sono il più eccellenti possibile. Questo è molto importante perché hai il controllo completo sulle informazioni che vengono diffuse sulla tua attività.

Tipi di tag Open Graph

I tag Open Graph come og:title, og:image, og:type e og:url consentono alle piattaforme di social networking di visualizzare le tue informazioni. Devi usare questi tag critici, ma puoi anche usarne altri.

Uno screenshot di Facebook contenente collegamenti ai componenti og:image, og:url, og:title e og:description.

og:site_name

Il tag og:site_name dovrebbe contenere il dominio in cui si trova il tuo contenuto. Di conseguenza, sostituisce il nome del brand, che sarebbe stato nel meta title (e quindi non consentito nel tag og:title).

Il tag og:site_name dovrebbe includere il nome del tuo sito o brand, mentre il tag og:title dovrebbe contenere il titolo del tuo articolo.

Codice og:site_name <meta property="og:site_name" content="Your Site Name" />

Usa lo stesso tag del nome del sito su tutto il tuo sito web.

og:title

Il tag og:title è consigliato per impostare il titolo della pagina. È simile a come i meta title sono usati nella SEO. Quando usi un meta title esistente, assicurati di mantenere il campo og:title libero da qualsiasi contenuto specifico del tuo brand o sito web.

Codice og:title <meta property="og:title" content="Title" />

Questo tag dovrebbe apparire su qualsiasi pagina del tuo sito web che un utente potrebbe voler condividere su Facebook, Twitter/X o un altro sito di social networking.

Mantieni il titolo tra 40 e 50 caratteri; altrimenti, verrà troncato.

Se vuoi che più persone visitino il tuo sito web, il titolo deve fare più che semplicemente descriverlo.

A differenza dei meta title dei motori di ricerca, non dovresti includere il tuo nome di dominio o qualsiasi altra informazione che potrebbe essere usata per identificarti.

og:type

Usa il tag og:type per specificare il tipo di materiale che viene inviato. Questo informa il sito di social networking sul tipo di contenuto che stai condividendo, come un post di blog, una pagina web, un video o un file audio.

Codice og:type <meta property="og:type" content="article" />

Usa il tipo di oggetto 'article' per informazioni che richiedono spiegazioni, come i post del blog.

Aggiungi il tipo 'website' alle altre pagine del sito web.

Devi usare il formato di file corretto se desideri trasferire un file che contiene sia testo che audio o video. Questa pagina contiene un elenco di tutte le categorie di oggetti.

og:locale

Il tag og:locale fornisce informazioni sulla lingua in cui è scritto il materiale trasferito. Gli utenti dei siti di social networking dovrebbero essere consapevoli che il contenuto pubblicato sui siti web può essere visualizzato in diverse lingue.

Codice og:locale <meta property="og:locale" content="en_GB" />

Poiché Facebook presume che tutto ciò che manca di un tag og:locale sia scritto in inglese americano, se gestisci un sito web negli Stati Uniti interamente composto da materiale in inglese, sei libero di ignorare questo tag (en_US).

Se il contenuto che stai fornendo è scritto in una lingua diversa dall'inglese americano, assicurati di utilizzare il tag OG corretto.

og:url

Usa semplicemente il tag og:url per specificare dove desideri pubblicare il contenuto.

Codice og:url <meta property="og:url" content=" https://www.yourdomain.com/title.html" />

Questo tag deve fornire l'URL canonico della pagina.

og:description

La dichiarazione inclusa in un tag og:description deve essere succinta, semplice e il più coinvolgente possibile per incoraggiare i lettori a visitare un sito web.

Sei libero di riutilizzare le informazioni purché siano pertinenti, dato che questo tag è simile a uno utilizzato dai motori di ricerca.

Codice og:description <meta property="og:description" content="Your description." />

Sarebbe utile se potessi mantenere la tua descrizione tra 50 e 100 caratteri. I post di Facebook dovrebbero essere al massimo tra due e quattro parole; i post più lunghi di quattro parole hanno maggiori probabilità di essere eliminati.

Per ottenere il maggior numero di click e attenzione al materiale che stai fornendo, la descrizione che fornisci dovrebbe essere il più dettagliata e convincente possibile.

og:image

Fornisci l'URL dell'immagine da utilizzare nell'estratto social usando l'elemento og:image. Usa un'immagine che sia sia intrigante che direttamente rilevante per il contenuto dell'articolo per aumentare la probabilità che le persone clicchino sul tuo sito web.

Questo elemento OG funziona in modo simile al schema markup, che è utilizzato dai motori di ricerca per fornire risultati ricchi.

Codice og:image <meta property="og:image" content="https://yourdomain.com/wp-content/uploads/your-image.png" />

Se vuoi che le pagine condivisibili del tuo sito web si posizionino più in alto nell'ottimizzazione per i motori di ricerca di immagini, usa foto innovative che corrispondano al tuo branding. Anche se una pagina non è probabile che venga condivisa frequentemente, brandizzarla con il tuo logo è un'ottima idea nel caso qualcuno la condivida in futuro.

Per evitare che appaia pixelata o di bassa qualità, la tua opera d'arte originale dovrebbe avere un rapporto di aspetto di 1.91:1 e una risoluzione di almeno 1200 per 630 pixel.

I tag og:image:width e og:image:height assicurano che le immagini precedentemente condivise appaiano correttamente. Installa Yoast sul tuo sito WordPress, se non l'hai già fatto, per farli aggiungere automaticamente. Se non l'hai già fatto, ecco il codice:

<meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" />

Aggiungi Open Graph a WordPress

Aggiungere i tag OG a WordPress è il modo più semplice, comune e diretto per farlo con il plugin Yoast SEO. Questo plugin dovrebbe essere già installato se il tuo sito è configurato in modo che i motori di ricerca possano facilmente localizzarlo.

Aggiorna la pagina o l'articolo in cui Open Graph dovrebbe essere inserito utilizzando l'opzione “social” di Yoast SEO.

Compila le caselle og:image, og:title e og:description nell'accordion di Facebook.

Yoast configurerà per te il tag og:url, la Twitter/X Card e le dimensioni dell'immagine. Se non istruisci Yoast a usare un'immagine specifica, utilizzerà l'immagine principale del post.

Quando il tuo sito web viene condiviso, nessuna immagine viene visualizzata per impostazione predefinita. Puoi modificare questo fornendo uno screenshot dell'intero sito. Questo errore si verifica quando un URL di immagine manca del tag og:image.

Nella pagina delle impostazioni principali di Yoast, puoi selezionare l'og:image a livello di sito.

Aggiungere i tag OG nel tuo blog WordPress è davvero facile. Devi solo andare su:

Sidebar di WordPress : Yoast>Social>Facebook.

Attiva l'interruttore e poi salva l'immagine esistente. Crediamo che dovresti selezionare un logo. Puoi fare lo stesso anche per Twitter/X e Pinterest.

Aggiungi Open Graph manualmente

Se sai come programmare e non stai utilizzando uno dei sistemi precedenti, i tag OG sono semplici da installare.

Puoi copiare e incollare il contenuto qui sotto sul tuo sito web, ma modificalo per adattarlo alle tue esigenze.

<meta property="og:site_name" content="INSERT SITE NAME" /> <meta property="og:title" content="INSERT TITLE" /> <meta property="og:description" content="INSERT DESCRIPTION" /> <meta property="og:url" content="INSERT URL" /> <meta property="og:type" content="INSERT TYPE" /> <meta property="og:image" content="INSERT IMAGE URL" /> <meta property="og:image:width" content="1280" /> <meta property="og:image:height" content="640" /> <meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="INSERT IMAGE URL" />

Testare i tuoi meta tag Open Graph

Supponiamo che tu abbia capito come includere un Open Graph sul tuo sito web.

Se il tuo sito web è correttamente classificato, dovrebbe apparire eccellente quando condiviso sui social media. Testa sempre il tuo lavoro prima di renderlo pubblico.

Prima di condividere un URL, ricontrolla che i tuoi tag OG vengano estratti e mostrati correttamente.

Questi strumenti possono essere utili per testare i tuoi tag OG:

• Pinterest Rich Pins Validator
• Twitter/X Card Validator
• Facebook Sharing Debugger
• LinkedIn Post Inspector

Inserisci semplicemente un URL in uno di questi servizi per ottenere i meta tag originali. Quando lo condividi, avrai un'idea di come apparirà agli altri.

Esamina l'immagine, il titolo e la descrizione dell'anteprima prima di procedere. Puoi ricevere avvisi su tag di cui non hai bisogno, che puoi aggiungere o ignorare.

Se il test dell'URL fallisce, dovresti riprovare con un tag diverso. Controlla che ogni strumento sia operativo visitando il suo URL. Puoi parlarne quando è finito.

Verdetto

È fondamentale mantenere il controllo su ciò che condividi sui social media. Il traffico e i tassi di conversione aumentano quando gli elementi ricchi sono mostrati in Open Graph. Inizia da un singolo post del blog. Una volta visto il risultato, sarà molto più facile applicare i tag Open Graph nei tuoi prossimi post in futuro.

Domande frequenti