Aggiungere tag Open Graph in WordPress

I tag Open Graph sono piccoli pezzi di metadati nell'HTML della tua pagina che controllano come appare il tuo contenuto quando qualcuno lo condivide sui social media. Senza di essi, piattaforme come Facebook, LinkedIn e Twitter devono indovinare quale titolo, descrizione e immagine mostrare, e spesso lo sbagliano. Un link condiviso con un'immagine mancante o un titolo mutilato sembra poco professionale, e le persone hanno molte meno probabilità di farci clic. Impostare correttamente i tag Open Graph richiede solo pochi minuti e fa una vera differenza nel traffico dai social media.

Perché i tag Open Graph sono importanti per la condivisione sui social

Ogni volta che qualcuno condivide un link su Facebook, LinkedIn, Twitter o app di messaggistica come WhatsApp e Telegram, quelle piattaforme recuperano i metadati Open Graph della tua pagina per costruire una card di anteprima. Questa card include in genere un titolo, una descrizione e un'immagine. Se i tuoi tag OG sono mancanti o configurati in modo errato, potresti vedere l'immagine sbagliata estratta da un annuncio nella sidebar, la meta description tagliata a metà frase o nessuna anteprima.

I numeri parlano da soli. I post con card di anteprima ricche ottengono significativamente più engagement rispetto ai link di solo testo. Su Facebook, i post con immagini ricevono circa 2-3 volte più engagement di quelli senza. Su LinkedIn, gli articoli con immagini di anteprima accattivanti ottengono più clic e condivisioni. Impostare correttamente i tag OG è uno dei modi più semplici per aumentare la visibilità dei tuoi contenuti condivisi.

Checklist dei tag Open Graph richiesti

Non tutti i tag OG sono ugualmente importanti. Ecco i tag che dovresti sempre includere:

• og:title: Il titolo della tua pagina come dovrebbe apparire nelle condivisioni social. Mantienilo sotto i 60 caratteri per evitare il troncamento sulla maggior parte delle piattaforme.
• og:description: Un breve riepilogo del contenuto della pagina. Punta a 120-200 caratteri. Questa è la tua occasione per scrivere un hook accattivante che faccia clic alle persone.
• og:url: L'URL canonico della pagina. Questo garantisce che tutte le condivisioni puntino allo stesso URL, consolidando le metriche di engagement.
• og:type: Il tipo di contenuto. Usa article per i post del blog, website per la tua homepage e product per gli articoli e-commerce.
• og:image: L'immagine di anteprima. Questo è il tag OG più importante per l'engagement. Vedi sotto per le best practice sulle immagini.

I tag opzionali ma consigliati includono og:site_name (il nome del tuo sito web), og:locale (lingua e regione, ad esempio en_US) e article:published_time per i post del blog.

Best practice per og:image per il massimo impatto

L'immagine di anteprima è ciò che le persone notano per prime mentre scorrono i loro feed social. Vale la pena farla bene:

• Dimensioni: Usa immagini di almeno 1200x630 pixel. Facebook lo consiglia come minimo per gli schermi ad alta risoluzione. Per LinkedIn, 1200x627 pixel funziona meglio.
• Proporzioni: Mantieni 1.91:1 per la migliore compatibilità cross-platform. Queste proporzioni funzionano bene su Facebook, LinkedIn, Twitter e app di messaggistica.
• Formato file: JPEG e PNG sono universalmente supportati. Evita WebP per le immagini OG, poiché alcune piattaforme e crawler non lo supportano ancora.
• Dimensione file: Mantieni le immagini sotto i 5MB. Facebook potrebbe saltare le immagini che impiegano troppo tempo a scaricarsi.
• Contenuto: Evita immagini con troppo testo. Facebook applicava una regola del 20% di testo per gli annunci, e sebbene non sia più valida per le condivisioni organiche, le immagini pulite con un testo minimo in genere si comportano meglio.
• Immagine fallback: Imposta sempre un'immagine OG predefinita a livello di sito per le pagine senza un'immagine in evidenza. Un'immagine brandizzata con il tuo logo funziona bene come fallback.

Impostare i tag Open Graph con Yoast SEO

Yoast SEO genera automaticamente tag Open Graph e Twitter Card per ogni pagina del tuo sito. Ecco come configurarlo:

Per le impostazioni a livello di sito:

1. Installa e attiva Yoast SEO.
2. Vai su Yoast SEO, poi Social nel menu di amministrazione.
3. Nella scheda Facebook, abilita "Add Open Graph meta data".
4. Carica un'immagine predefinita che verrà utilizzata quando un articolo o una pagina non ha un'immagine in evidenza.
5. Nella scheda Twitter, abilita i metadati Twitter Card e scegli "Summary" o "Summary with large image" come tipo di card predefinito.

Per singoli articoli e pagine:

1. Modifica l'articolo o la pagina.
2. Nella metabox Yoast SEO, fai clic sulla scheda "Social" (l'icona di condivisione).
3. Sotto "Facebook preview", personalizza il titolo, la descrizione e l'immagine per la condivisione sui social media.
4. Sotto "Twitter preview", imposta un titolo, una descrizione o un'immagine diversi se necessario (altrimenti Twitter utilizzerà i valori Facebook OG).

Yoast estrae automaticamente l'immagine in evidenza come og:image se non ne imposti una personalizzata. Genera anche l'og:title dal titolo SEO e l'og:description dalla meta description, mantenendo le tue condivisioni social coerenti con le tue impostazioni SEO.

Impostare i tag Open Graph con Rank Math

Rank Math gestisce i tag OG in modo simile a Yoast:

1. Installa e attiva Rank Math.
2. Vai su Rank Math, poi General Settings, poi Social Meta.
3. Abilita "Add Open Graph meta data to your site's header".
4. Imposta un'immagine social-share predefinita per i post senza un'immagine in evidenza.

Per la personalizzazione per articolo, fai clic sull'icona Rank Math durante la modifica di un articolo e vai alla scheda "Social". Puoi impostare titoli, descrizioni e immagini separati per Facebook e Twitter.

Aggiungere tag Open Graph manualmente tramite functions.php

Se preferisci non utilizzare un plugin SEO, puoi aggiungere tag OG tramite il functions.php del tuo tema. Questo approccio ti dà il pieno controllo su ogni tag:

function custom_open_graph_tags() {
    if (is_singular()) {
        global $post;
        $title = get_the_title();
        $description = has_excerpt() ? get_the_excerpt() : wp_trim_words($post->post_content, 30);
        $url = get_permalink();
        $image = get_the_post_thumbnail_url($post->ID, 'large');
        $site_name = get_bloginfo('name');

        echo '<meta property="og:title" content="' . esc_attr($title) . '" />' . "\n";
        echo '<meta property="og:description" content="' . esc_attr($description) . '" />' . "\n";
        echo '<meta property="og:url" content="' . esc_url($url) . '" />' . "\n";
        echo '<meta property="og:type" content="article" />' . "\n";
        echo '<meta property="og:site_name" content="' . esc_attr($site_name) . '" />' . "\n";
        if ($image) {
            echo '<meta property="og:image" content="' . esc_url($image) . '" />' . "\n";
            echo '<meta property="og:image:width" content="1200" />' . "\n";
            echo '<meta property="og:image:height" content="630" />' . "\n";
        }
    } elseif (is_front_page()) {
        $site_name = get_bloginfo('name');
        $description = get_bloginfo('description');
        echo '<meta property="og:title" content="' . esc_attr($site_name) . '" />' . "\n";
        echo '<meta property="og:description" content="' . esc_attr($description) . '" />' . "\n";
        echo '<meta property="og:url" content="' . esc_url(home_url('/')) . '" />' . "\n";
        echo '<meta property="og:type" content="website" />' . "\n";
    }
}
add_action('wp_head', 'custom_open_graph_tags');

Non aggiungere questo accanto a un plugin SEO che già emette tag OG. Tag OG duplicati possono confondere i crawler dei social media.

Tag Open Graph per i prodotti WooCommerce

Se gestisci uno store WooCommerce, le tue pagine prodotto beneficiano di tag OG aggiuntivi. Sia Yoast SEO che Rank Math hanno integrazioni WooCommerce che impostano automaticamente og:type su product e includono metadati specifici del prodotto come prezzo e disponibilità.

Per le implementazioni manuali, puoi agganciarti ai dati del prodotto WooCommerce:

function woo_product_og_tags() {
    if (is_product()) {
        global $product;
        $price = $product->get_price();
        $currency = get_woocommerce_currency();
        echo '<meta property="og:type" content="product" />' . "\n";
        echo '<meta property="product:price:amount" content="' . esc_attr($price) . '" />' . "\n";
        echo '<meta property="product:price:currency" content="' . esc_attr($currency) . '" />' . "\n";
    }
}
add_action('wp_head', 'woo_product_og_tags');

Testare i tuoi tag Open Graph

Dopo aver impostato i tuoi tag OG, testali prima di condividere qualcosa di importante. Ecco gli strumenti di cui hai bisogno:

• Facebook Sharing Debugger: Visita developers.facebook.com/tools/debug e inserisci il tuo URL. Mostra esattamente cosa vede Facebook, incluso titolo, descrizione e immagine. Fai clic su "Scrape Again" per aggiornare la cache se hai apportato modifiche.
• LinkedIn Post Inspector: Visita linkedin.com/post-inspector e inserisci il tuo URL. LinkedIn fa caching aggressivamente, quindi usa questo strumento per forzare un refresh dopo aver aggiornato i tag OG.
• Twitter Card Validator: Visita cards-dev.twitter.com/validator. Inserisci il tuo URL per vedere un'anteprima di come apparirà la tua Twitter Card.
• Scansione InspectWP: Esegui una scansione per verificare che i tuoi tag OG siano presenti nell'output HTML della pagina.

Svuotare le cache dei social media dopo le modifiche

Le piattaforme social fanno caching pesantemente dei tuoi dati OG. Se aggiorni i tuoi tag OG e la vecchia anteprima continua ad apparire durante la condivisione, devi svuotare la cache:

• Facebook: Usa lo strumento Sharing Debugger e fai clic su "Scrape Again". Potresti dover fare clic due volte per cache ostinate.
• LinkedIn: Usa lo strumento Post Inspector per forzare un re-scraping. LinkedIn a volte può richiedere fino a 7 giorni per aggiornare naturalmente la sua cache.
• Twitter: Usa il Card Validator per richiedere un nuovo crawl. Twitter di solito si aggiorna entro pochi minuti.
• WhatsApp e Telegram: Queste app fanno caching delle anteprime lato client. Chiedi alle persone di svuotare la cache della loro app o aspetta che la cache scada naturalmente (di solito 24-72 ore).

Errori comuni di Open Graph da evitare

• og:image mancante: L'errore più comune. Senza un'immagine, le condivisioni social sembrano noiose e vengono ignorate. Imposta sempre un'immagine in evidenza o un default a livello di sito.
• Immagine troppo piccola: Le immagini sotto 200x200 pixel potrebbero non essere visualizzate affatto su Facebook. Punta ad almeno 1200x630 pixel.
• Tag OG duplicati: Avere due plugin SEO in esecuzione, o un plugin SEO più un plugin social media che emettono entrambi tag OG, si traduce in metadati in conflitto. Usa solo una fonte per i tuoi tag OG.
• Mismatch di og:url: L'og:url dovrebbe corrispondere al tuo URL canonico. Se puntano a URL diversi, le piattaforme social possono confondersi su quale pagina dovrebbe ricevere engagement.
• Non impostare og:type: Alcune piattaforme usano website come default se og:type manca, il che va bene per la tua homepage ma non è ideale per i post del blog. Imposta article per i post in modo che le piattaforme visualizzino la data di pubblicazione e le informazioni sull'autore.
• Dimenticare i tag specifici di Twitter: Sebbene Twitter possa ripiegare sui tag OG, aggiungere tag twitter:card e twitter:site ti dà più controllo sul formato di anteprima di Twitter.