Inserire Open Graph su WordPress, meta data per i Social Network

L’Open Graph Protocol è un protocollo introdotto da Facebook che consente di “arricchire” i link con informazioni specifiche di una pagina web, come:

• Tipo di contenuto (articolo, video, prodotto, ecc.)
• Titolo della pagina
• Descrizione
• Immagine di anteprima

L’ Open Graph serve nella pratica a dire ai social network come Facebook, Linkedin, Twitter/X, quali sono le informazioni che devono sapere della pagina attuale.

Quando condividi un articolo i Social potrebbero creare una anteprima accattivante seguendo le informazioni che gli hai fornito tramite Open Graph.

Senza Open Graph, i social potrebbero scegliere automaticamente contenuti poco adatti dalla tua pagina.

Inserire Open Graph su WordPress

Per implementare Open Graph su WordPress puoi usare un plugin oppure inserire il codice a mano.

Tramite Plugin di SEO

Il modo più semplice è usare un plugin di SEO che offre gratuitamente questa funzionalità:

• Yoast SEO: un plugin molto semplice adatto a tutti. Offre impostazioni Open Graph integrate, permettendo di scegliere titolo, descrizione e immagine per ogni pagina/articolo.
• Rank Math: simile a Yoast, con un’interfaccia intuitiva e opzioni avanzate per ogni social network.
• All in One SEO: un’alternativa completa, che include Open Graph e schede Twitter.

Ad esempio con Yoast SEO una volta attivato, nell’editor Gutenberg apparirà l’icona di Yoast, selezionala per vedere le impostazioni/funzionalità del plugin.

Sulla destra troverai il pulsante Aspetto dei social media:

Premi il pulsante Aspetto dei social media e potrai modificare le informazioni per Open Graph:

Qui puoi impostare l’immagine di condivisione dell’articolo, il titolo e la descrizione.

Ecco come si presentano i meta data Open Graph inseriti dal plugin in questa pagina:

<meta property="og:locale" content="it_IT" class="yoast-seo-meta-tag" />
	<meta property="og:type" content="article" class="yoast-seo-meta-tag" />
	<meta property="og:title" content="Inserire Open Graph su WordPress, meta data per i Social Network" class="yoast-seo-meta-tag" />
	<meta property="og:description" content="Inserire Open Graph su WordPress, meta data &lt;og: per i Social Network come Facebook, Linkedin, utile per impostare l&#039;immagine d&#039;anteprima del post" class="yoast-seo-meta-tag" />
	<meta property="og:url" content="https://robertoiacono.it/inserire-open-graph-su-wordpress-meta-data-per-i-social-network/" class="yoast-seo-meta-tag" />
	<meta property="og:site_name" content="Roberto Iacono" class="yoast-seo-meta-tag" />
	<meta property="article:author" content="http://www.facebook.com/robertoiacono.it" class="yoast-seo-meta-tag" />
	<meta property="article:published_time" content="2011-10-27T14:55:51+00:00" class="yoast-seo-meta-tag" />
	<meta property="article:modified_time" content="2013-01-24T15:16:24+00:00" class="yoast-seo-meta-tag" />
	<meta property="og:image" content="https://robertoiacono.it/wp-content/uploads/2011/10/open-graph-wordpress.png" class="yoast-seo-meta-tag" />
	<meta property="og:image:width" content="520" class="yoast-seo-meta-tag" />
	<meta property="og:image:height" content="280" class="yoast-seo-meta-tag" />
	<meta property="og:image:type" content="image/png" class="yoast-seo-meta-tag" />

Tramite Codice

Se preferisci non usare plugin, puoi aggiungere il codice nel file functions.php del tema child o tramite un plugin personalizzato:

function aggiungi_open_graph() {
    if(is_single() || is_page()) {
        global $post;
        $img = wp_get_attachment_url(get_post_thumbnail_id($post->ID));
        $desc = strip_tags($post->post_excerpt ? $post->post_excerpt : wp_trim_words($post->post_content, 20));
        echo '<meta property="og:title" content="'.get_the_title().'"/>';
        echo '<meta property="og:description" content="'.$desc.'"/>';
        echo '<meta property="og:image" content="'.$img.'"/>';
        echo '<meta property="og:url" content="'.get_permalink().'"/>';
        echo '<meta property="og:type" content="article"/>';
    }
}
add_action('wp_head', 'aggiungi_open_graph');

Verifica tramite Debugger

Dopo aver configurato Open Graph, puoi testare se tutto funziona correttamente:

• Facebook Sharing Debugger
• Twitter Card Validator

Inserisci il tuo URL e controlla titolo, descrizione e immagine.

Consigli Pratici

• Usa immagini di almeno 1200×630 px per Facebook.
• Mantieni il titolo entro 60 caratteri e la descrizione entro 155 caratteri.
• Assicurati che ogni articolo abbia un’immagine unica per aumentare le condivisioni.

Perché Open Graph è Importante

1. Migliora il CTR (Click-Through Rate): una preview ben curata attira più clic.
2. Controllo completo sull’aspetto dei tuoi link: eviti anteprime sbagliate o immagini troppo piccole.
3. Ottimizzazione SEO sociale: anche se non influisce direttamente sul ranking, aumenta la visibilità e la condivisione dei tuoi contenuti.

Dopo tutto il lavoro che hai impiegato per scrivere il tuo articolo, dedica qualche minuto ad ottimizzare anche questo aspetto.