Open Graph: Ottimizza l’Aspetto del Sito sui Social Media (Guida Completa)

Open Graph (OG) Tags sono meta tag HTML che definiscono anteprima, titolo, descrizione, immagine, URL e tipo di contenuto quando una pagina web viene condivisa sui social. In breve, i tag OG ti permettono di gestire come il tuo sito appare su Facebook, LinkedIn, WhatsApp, X e altri, evitando errori di anteprima, rafforzando l’immagine del brand e aumentando il tasso di click con una presentazione più professionale.

Condividendo un articolo, una pagina prodotto o un servizio aziendale sui social, le piattaforme generano automaticamente una preview - se i dati Open Graph non sono impostati, possono scegliere immagini casuali, mostrare titoli vecchi o lasciare la descrizione vuota. Questo comporta gravi problemi soprattutto su pagine di campagne, e-commerce, news e siti aziendali dove la reputazione è cruciale.

In questa guida Hostragons scoprirai cosa sono i tag Open Graph, quali tag OG sono indispensabili, come inserirli su WordPress e siti custom, le dimensioni ideali delle immagini, strumenti di test, errori comuni e l’impatto indiretto di hosting, SSL e dominio sulla qualità delle anteprime social. Hosting Web Verifica del dominio certificato SSL

Cos’è il Protocollo Open Graph?

Il protocollo Open Graph è uno standard di metadati ideato da Facebook per rendere le pagine web più ricche e leggibili su social media. I tag OG nel codice HTML rispondono a domande fondamentali per i crawler social: Qual è il titolo della pagina? Quale descrizione? Quale immagine mostrare? Quale URL usare? Che tipo di contenuto è: articolo, prodotto, video?

Oggi Open Graph non riguarda solo Facebook. LinkedIn, WhatsApp, Telegram, Slack e molte app di messaggistica leggono i dati OG per creare preview dei link. X (ex Twitter) usa i propri tag Twitter Card, ma spesso sfrutta anche Open Graph. Perciò la configurazione OG è un ponte tra SEO tecnico, ottimizzazione social e user experience nei siti moderni.

I tag OG non sono un fattore di ranking diretto per Google; il solo inserimento non migliora la posizione nei risultati. Tuttavia, offrendo anteprime più chiare e coinvolgenti sui social, puoi aumentare il traffico, la condivisione e i segnali di brand. Di conseguenza, i tag OG contribuiscono alla visibilità digitale in modo indiretto.

Perché i Tag Open Graph sono Importanti?

L’utente social decide se cliccare in pochi secondi, influenzato da titolo, immagine, descrizione e dominio affidabile. I tag OG permettono di gestire questi elementi. Soprattutto su mobile, la preview è spesso il solo indizio sul contenuto.

• Incrementa il tasso di click: Titoli chiari e immagini accattivanti risaltano nel feed.
• Assicura coerenza di brand: Logo, colori, descrizione e URL corretti in ogni condivisione.
• Evita immagini sbagliate: Impedisci alle piattaforme di scegliere visual casuali dalla pagina.
• Migliora l’esperienza di condivisione: Su WhatsApp, LinkedIn e Facebook le preview sono professionali.
• Supporta le campagne: Comunica messaggi chiari su prodotti, promozioni e annunci.

Pensa a una pagina di promozione hosting: se l’immagine OG mostra nome della campagna, percentuale sconto e colori del brand, l’utente capisce subito. Senza tag OG, il sistema può scegliere un’icona o un banner irrilevante, minando la fiducia e la volontà di cliccare. Per le campagne conta anche una base affidabile, risposta server veloce e HTTPS. Hosting WordPress Hosting Aziendale

Tag OG Indispensabili

Le esigenze variano, ma una configurazione OG base richiede alcuni tag essenziali, per garantire che i social interpretino correttamente il tuo link.

og:title

og:title definisce il titolo visibile sui social. Non deve essere identico al SEO title; puoi scrivere un titolo più breve, diretto e orientato al click. Di solito 40-60 caratteri è la lunghezza ideale: titoli troppo lunghi vengono tagliati su mobile.

Esempio: <meta property='og:title' content='Ottimizza la tua anteprima social con i tag Open Graph'>

og:description

og:description è la breve descrizione della card. Deve chiarire cosa trova l’utente nella pagina, tra 120 e 160 caratteri. Evita linguaggio troppo promozionale; punta ad informare e incuriosire.

Esempio: <meta property='og:description' content='Gestisci titolo, immagine e descrizione con i tag OG: rendi le tue condivisioni social professionali.'>

og:image

og:image è l’URL dell’immagine mostrata nella preview. È il tag che più influenza le performance social. L’immagine va fornita con URL completo, accessibile via HTTPS e senza restrizioni. La misura ideale è 1200 x 630 pixel, formato orizzontale. Mantieni il peso tra 300 KB e 1 MB per velocità.

Esempio: <meta property='og:image' content='https://esempio.it/images/open-graph-guida.jpg'>

og:url

og:url indica l’indirizzo canonico per la condivisione. Evita parametri, sessioni e codici di tracking. Se lo stesso contenuto è accessibile da URL diversi, scegli quello preferito per evitare la frammentazione delle statistiche.

og:type

og:type specifica il tipo di contenuto. Usa article per blog, website per homepage, product per schede prodotto: aiuta i social a categorizzare correttamente.

og:site_name e og:locale

og:site_name mostra il nome del brand o del sito. og:locale indica lingua e paese: per siti italiani usa it_IT. Su siti multilingua imposta il locale corretto per ogni versione.

Tabella di Sintesi dei Tag OG Fondamentali

Open Graph vs Twitter Card: Le Differenze

I tag Open Graph sono adottati da molti social, mentre i tag Twitter Card sono specifici per X (ex Twitter). Le due strutture sono simili, ma differiscono nei nomi e alcune funzioni. La best practice è usare entrambi: così la preview è coerente ovunque.

Di fatto, dopo aver impostato i tag OG su un articolo, puoi aggiungere twitter:card come summary_large_image per ottenere una preview elegante, con immagine grande e più visibile sul mobile.

Come Inserire i Tag Open Graph?

I tag OG si inseriscono nel head HTML, cioè nella sezione meta letta dai crawler e dai bot social, non visibile direttamente all’utente. Il metodo varia secondo la piattaforma.

1. Inserire Tag OG su WordPress

Su WordPress puoi gestire i tag OG senza scrivere codice grazie a plugin come Yoast SEO, Rank Math, All in One SEO. Questi permettono di definire titolo, descrizione e immagine social per ogni pagina o articolo.

• Installa e attiva il plugin SEO scelto.
• Accedi all’editor della pagina o articolo.
• Apri la scheda Social/Sharing.
• Definisci titolo, descrizione e immagine per Facebook/LinkedIn.
• Carica l’immagine in formato 1200 x 630 px.
• Aggiorna la pagina e verifica la preview con uno strumento di test.

La performance è cruciale su WordPress: se i bot social non accedono al sito o il server risponde lentamente, la preview può essere incompleta. Scegli sempre una soluzione WordPress veloce e stabile. Hosting WordPress LiteSpeed Hosting

2. Inserire Tag OG su Siti Custom o Statici

Se usi software custom (Laravel, Next.js, Nuxt, HTML puro o generatori statici), i tag OG vanno definiti a livello di template. Per blog e prodotti, titolo, descrizione e immagine devono essere dinamici e prelevati dal database.

Esempio base: <meta property='og:title' content='Titolo pagina'> <meta property='og:description' content='Descrizione pagina'> <meta property='og:image' content='https://site.com/og-image.jpg'> <meta property='og:url' content='https://site.com/pagina'> <meta property='og:type' content='article'>

Errore frequente: usare lo stesso titolo OG e la stessa immagine su tutte le pagine. Questo danneggia la performance delle condivisioni, soprattutto su e-commerce con molti prodotti. Ogni pagina importante deve avere dati OG specifici e pertinenti.

3. Tag OG sui Siti E-Commerce (Prodotto)

Sulle pagine prodotto, inserisci il nome del prodotto in og:title, il beneficio principale in og:description, una foto di qualità in og:image. Evita testi promozionali fuorvianti su prodotti non disponibili. Se ci sono varianti, usa l’URL canonico della scheda principale come og:url.

Quando un prodotto viene condiviso su social, l’immagine, il vantaggio e la caratteristica chiave dovrebbero essere subito evidenti. Evita descrizioni troppo “sales”, punta sulla chiarezza: questo rafforza la fiducia.

Dimensioni Ideali e Regole per l’Immagine Open Graph

L’immagine OG è l’elemento più visibile della card. Immagini sfocate, tagliate o illeggibili trasmettono poca professionalità. Nel 2026 la misura più sicura resta 1200 x 630 pixel (ratio circa 1,91:1), compatibile con Facebook, LinkedIn e altri.

• Dimensione consigliata: 1200 x 630 px.
• Minimo accettabile: 600 x 315 px, meglio comunque più grande.
• Formato: JPG e PNG sono i più compatibili; WebP può dare problemi su alcuni social.
• Peso: Mantieni il file sotto 1 MB.
• URL: Usa sempre l’URL completo; no percorsi relativi.
• HTTPS: Deve essere accessibile via connessione sicura.

Non avvicinare troppo testo o logo ai bordi: alcune piattaforme tagliano le immagini. Tieni titolo e messaggio centrali. Crea immagini OG uniche per ogni articolo: riduci la sensazione di ripetitività nel feed social.

Test dei Tag OG e Problemi di Cache

Dopo aver inserito i tag OG, è fondamentale testarli. I social spesso memorizzano le preview: se una prima scansione cattura dati errati, anche dopo le modifiche può restare la vecchia anteprima.

Strumenti di Test Utili

• Facebook Sharing Debugger: Analizza l’URL, mostra i tag OG e permette di aggiornare la cache.
• LinkedIn Post Inspector: Controlla la preview LinkedIn.
• Twitter Card Validator: Verifica che la struttura Twitter Card funzioni.
• Test WhatsApp: Inviati il link e verifica la preview direttamente da mobile.

Se vedi errori 404, 403, warning SSL o restrizioni robots.txt, i bot social non riescono a leggere la pagina. In questo caso verifica le impostazioni di sicurezza hosting, regole CDN e firewall. Un SSL configurato correttamente è cruciale per l’accesso ai media da parte dei bot. certificato SSL Che cos'è il CDN Soluzione Errore 403 Forbidden

Errori Comuni con i Tag Open Graph

Piccoli errori nei tag OG possono causare grossi problemi di preview. Ecco le criticità più frequenti riscontrate in audit SEO tecnici.

• Usare percorsi relativi per le immagini: Preferisci https://site.com/images/og.jpg invece di /images/og.jpg.
• Immagine non accessibile: Protezione hotlink, firewall o permessi errati possono bloccare i bot.
• Stessa preview su tutte le pagine: Serve un titolo e una descrizione originali per blog, prodotti e servizi.
• Titolo troppo lungo: Viene tagliato su mobile, perde efficacia.
• No HTTPS: Genera warning di sicurezza ed errori di accesso.
• Cache non aggiornata: La vecchia immagine può restare visibile.
• Disallineamento tra URL canonico e OG: I segnali social si disperdono su più varianti di URL.

Esempio pratico: cambi l’immagine di un articolo, ma WhatsApp mostra ancora la vecchia. Di solito è un problema di cache. Prima verifica che og:image sia aggiornato nel codice sorgente. Poi usa Facebook Sharing Debugger o altri strumenti per ripulire la cache. Se persiste, svuota la cache CDN/server.

Valutazione SEO dei Tag Open Graph

I tag OG non sono meta SEO tradizionali come title, meta description o canonical: non influenzano direttamente la SERP. Tuttavia, nel SEO 2026, contano user behavior, fiducia del brand, distribuzione contenuti e visibilità multi-canale. Un contenuto che appare bene sui social riceve più click, condivisioni e feedback.

Nell’era di Google AI Overviews e risultati avanzati, il contenuto deve essere comprensibile sia per i motori di ricerca che per i sistemi di anteprima dei social. I tag OG sono ormai parte integrante dei checklist tecnici di SEO.

Scrivi SEO title e OG title in modo che servano lo stesso intento, senza contraddizioni: il SEO title compete nei risultati di ricerca, il OG title attira nel feed social. Non devono confondere l’utente, né rappresentare il contenuto in modo errato. Anche meta description e og:description vanno coordinati, ma ottimizzati secondo piattaforma.

Checklist Open Graph: Passo Passo

La seguente checklist è utile per un controllo rapido prima di pubblicare una pagina, e aiuta agenzie, content team e webmaster a standardizzare i processi di pubblicazione.

• La pagina ha un og:title unico?
• og:description descrive chiaramente e sinteticamente il contenuto?
• og:image è in formato 1200 x 630 px e di qualità?
• L’immagine è accessibile via HTTPS a chiunque?
• og:url è allineato con l’URL canonico?
• og:type è corretto secondo il tipo di contenuto?
• Per pagine in italiano, og:locale è impostato su it_IT?
• La preview è stata testata su Facebook, LinkedIn e WhatsApp?
• Cache CDN/server è stata aggiornata?
• Titolo e immagine non vengono tagliati su mobile?

Applicare questa lista ad ogni nuovo articolo, pagina prodotto, landing di campagna o sezione aziendale garantisce coerenza nelle anteprime social e velocizza i controlli interni di qualità.

Impatto di Hosting, SSL e Dominio sulle Anteprime OG

Anche se i tag OG sono HTML, il loro funzionamento dipende dalla salute dell’infrastruttura web. I bot social devono ricevere risposte rapide e senza errori dal server. Timeout frequenti, errori SSL o immagini bloccate da 403 impediscono la generazione della preview.

Anche il dominio influisce sulla fiducia: un nome breve, leggibile e coerente col brand appare più professionale nella card social. L’SSL è ormai requisito base sia per la fiducia utente sia per la compatibilità delle piattaforme. Se stai creando un sito, pianifica attentamente dominio, hosting e SSL: eviterai problemi futuri di sharing e SEO. Verifica del dominio Hosting Web certificato SSL

Conclusione: Open Graph, Piccolo Dettaglio, Grande Impatto

I tag Open Graph sono meta-dati fondamentali per controllare come il sito appare sui social. Usando titolo, descrizione, immagine e URL corretti, i tuoi link risultano più affidabili, comprensibili e cliccabili. Non garantiscono ranking diretto, ma sono un pilastro per traffico social, branding e distribuzione dei contenuti.

Controlla sempre i tag OG, prepara immagini nelle dimensioni giuste e testa la preview prima di pubblicare. Se scegli hosting veloce, SSL sicuro e un dominio ben gestito, le tue card social funzioneranno senza problemi. Esplora le soluzioni Hostragons per una base affidabile, e integra i controlli OG nella routine editoriale.

Domande Frequenti

A cosa servono i tag Open Graph (OG)?

I tag OG definiscono titolo, descrizione, immagine e URL di una pagina quando viene condivisa sui social, per una preview più coerente e professionale.

I tag OG influenzano direttamente il SEO?

I tag OG non sono un fattore di ranking diretto su Google, ma migliorano click, condivisioni e fiducia del brand, contribuendo indirettamente alla performance SEO.

Qual è la dimensione ideale per l’immagine Open Graph?

La misura più sicura è 1200 x 630 pixel, accessibile via HTTPS, di buona qualità e sotto 1 MB.

Come si inseriscono i tag OG su WordPress?

Puoi usare plugin come Yoast SEO, Rank Math o All in One SEO per definire facilmente titolo, descrizione e immagine social per ogni pagina.

Se WhatsApp mostra l’immagine sbagliata, cosa fare?

Verifica che og:image sia aggiornato nel codice, svuota la cache CDN/server, usa strumenti come Facebook Sharing Debugger per resettare la preview e riprova il link.