Scopri come l’open graph ti dà controllo sull’anteprima che appare quando una pagina viene condivisa. Impostando titolo, URL, immagine e descrizione puoi guidare clic e conversioni sui social network.
Questa guida pratica mostra cosa inserire sul tuo sito web e nelle pagine web chiave. Senza dati espliciti, i social cercano di dedurre le informazioni dal codice e spesso sbagliano.
Imparerai i quattro tag fondamentali e le best practice: titoli entro ~88 caratteri, immagini consigliate 1200×630 px (minimo 600×315 px) e come abilitare le proprietà con <html prefix=”og: http://ogp.me/ns#”>. È anche possibile ripetere og:image per creare un carosello di immagini.
Per domande o supporto sull’ottimizzazione dei tag, contattaci allo 07538341308. Questa introduzione ti prepara al resto della guida tecnica e al debug pratico.
Principali punti
- Controllo dell’anteprima per migliorare CTR.
- Elementi essenziali: titolo, immagine, URL, descrizione.
- Uso di <html prefix=”og:”> per attivare le proprietà.
- Best practice: 88 caratteri per i titoli e immagini 1200×630 px.
- Compatibile con diversi social network e utile per marketing nel Regno Unito.
Perché usare l’Open Graph oggi per il tuo sito e i social media
Un’anteprima curata decide spesso se un utente clicca o scorre oltre. Con il protocollo open graph puoi stabilire titolo, descrizione e immagine mostrati quando una pagina viene condivisa.
Vantaggi concreti: maggiore controllo sul brand e sul messaggio, anteprime coerenti e un CTR superiore su social network e social media. Questo vale sia per siti editoriali che per e‑commerce.
Quando qualcuno condivide una pagina, il crawler del network legge il codice e fa parsing. Se trova i dati OG, questi hanno priorità rispetto ai contenuti della pagina. In assenza, il crawler sceglie automaticamente titolo e immagine, spesso in modo improprio.
| Scenari | Con OG curati | Senza OG |
|---|---|---|
| Controllo | Titolo e immagine scelti da te | Il crawler può usare H1 o immagini generiche |
| Risultato CTR | Maggiore coerenza e clic | Ridotto, rischi di confusione |
| Requisiti tecnici | 88 caratteri titolo; immagine 1200×630 px | Possibili tagli o ridimensionamenti |
Vuoi capire se conviene ottimizzare le anteprime delle tue pagine? Parliamone: 07538341308.
Meta tag Open Graph in italiano per la condivisione sui social
Definire le proprietà giuste migliora l’anteprima e aumenta i clic. Qui spieghiamo i quattro pilastri da inserire sempre e come arricchire una pagina con attributi strutturati.
I quattro pilastri essenziali
og:title mostra il titolo visibile e deve restare sotto gli 88 caratteri. og:type indica il tipo di oggetto: website, article, video, profile ecc. og:url deve puntare all’URL canonico della risorsa. og:image usa un URL assoluto; ideale 1200×630 px (min 600×315 px).
Arricchimenti e proprietà strutturate
Usa og:description con almeno due frasi chiare. Aggiungi og:site_name per rafforzare il brand e og:locale (e og:locale:alternate) per la lingua.
Per le immagini includi og:image:width, og:image:height, og:image:type e og:image:secure_url. Lo stesso schema vale per og:video e per og:audio (audio non richiede width/height).
Tipi di oggetto e campi speciali
Scegli article per post editoriali e definisci article:published_time, article:modified_time, article:author, article:section e array di article:tag. Usa website per homepage e le varianti video.* o music.* se il contenuto lo richiede.
- Ripetere og:image permette un carosello di immagini.
- Distinguere informazioni essenziali da arricchimenti in base all’intento della pagina.
Hai bisogno di una checklist dei tag da implementare? Scriviamo insieme la tua: 07538341308.
Implementazione passo dopo passo: dal codice HTML ai tag ottimizzati
Qui impari a trasformare linee di codice in anteprime efficaci per il tuo sito. Inizia dal markup: aggiungi <html prefix=”og: http://ogp.me/ns#”> e inserisci nel head la sintassi base <meta property="NOME PROPRIETÀ" content="VALORE">.
Scrivi un titolo conciso (max ~88 caratteri) e una descrizione in italiano con due frasi chiare. Titoli lunghi rischiano il troncamento sui feed più usati.
Per l’immagine scegli 1200×630 px (min 600×315 px). Dichiarane width, height e type e aggiungi og:image:alt per accessibilità. Puoi inserire più immagini per creare un carosello; ordinale per priorità dall’alto verso il basso.
Definisci il tipo corretto: website per homepage, article per articoli e video.other per contenuti con player. Se serve, aggiungi og:video:width/height/type.
L’url dovrebbe coincidere con il canonico nella maggior parte dei casi. Eccezioni: varianti linguistiche o pagine filtrate dove l’URL OG può puntare a un oggetto stabile mentre il canonico resta sulla versione base.
Consiglio pratico: usa plugin CMS per generare questi elementi dinamicamente e ridurre errori.
Se vuoi che ci occupiamo dell’implementazione tecnica nel tuo codice, chiamaci al 07538341308.
Debug e convalida: prevenire errori e vedere l’anteprima come su Facebook
Un controllo rapido con il Debugger rivela cache, immagini fuori formato e campi mancanti. Verifica le pagine critiche dopo ogni aggiornamento per evitare anteprime errate sui network.
Facebook Sharing Debugger: come usarlo
Inserisci l’url della pagina nello strumento e avvia l’analisi. Lo strumento mostra i valori letti, l’anteprima e gli avvisi.
Se hai aggiornato i valori, usa il comando per forzare il re‑scrape. Questo aggiorna la cache e riflette le modifiche immediatamente.
Errori comuni da evitare
Controlli essenziali: presenza dei quattro tag principali, dimensioni corrette delle immagini e assenza di elementi duplicati che confondono il parser.
| Problema | Sintomo | Soluzione |
|---|---|---|
| Immagine troppo piccola | Anteprima sfocata o assente | Sostituire con immagine ≥600×315 px; dichiarare width/height |
| Titolo troncato | Testo incompleto nell’anteprima | Ridurre sotto 88 caratteri; testare varianti |
| Tag mancanti o duplicati | Informazioni errate o conflitti | Allineare valori OG con url canonico e rimuovere duplicazioni |
Consiglio pratico: salva screenshot dell’anteprima e crea una checklist di correzioni. Serve una revisione dei tuoi OG tag e un test con il Debugger? Contattaci allo 07538341308.
Esempi pratici di implementazione: homepage, articolo e video
Qui trovi esempi concreti da usare come modello nel codice del tuo sito. Ogni esempio mostra i campi essenziali e le proprietà aggiuntive per ottenere anteprime coerenti e cliccabili.
Homepage di un sito web
Impostazione consigliata: og:type=website, og:url alla radice del dominio, og:title con il nome del brand e og:site_name per coerenza dell’oggetto.
Configura og:locale=it_IT e scegli un’immagine hero 1200×630 come poster principale. Aggiungi immagini alternative per test A/B su media diversi.
Articolo o post di blog
Campi obbligatori: og:type=article; og:url dell’articolo; og:title; og:image; og:description; og:site_name.
Completa con article:published_time (ISO), article:author (nome e cognome), article:section e un array di article:tag per migliorare la categorizzazione dell’oggetto.
Contenuto video
Usa og:type=video.other e specifica og:video con URL del file o del player. Indica og:video:type (es. video/mp4) e og:video:width/og:video:height.
Definisci un poster tramite og:image e, se necessario, aggiungi video:duration, video:release_date e video:tag. Per tracce separate usa og:audio con type e secure_url come fallback.
Vuoi modelli pronti da incollare nel codice? Scrivici o chiamaci allo 07538341308.
Conclusione
Ecco una panoramica finale che riassume come trasformare questa guida in risultati concreti sul tuo sito web. I quattro elementi essenziali (og:title, og:type, og:url, og:image) rimangono imprescindibili. Mantieni titoli entro 88 caratteri e usa un’ immagine 1200×630 px per la migliore resa sui network.
Standardizza l’implementazione con modelli riutilizzabili per sito e siti satellite. Testa ogni pagina con il Debugger per forzare il re‑scrape e correggere errori velocemente.
Vuoi assistenza pratica? Possiamo trasformare questa guida in un piano operativo per il tuo progetto e monitorare link, CTR e conversioni. Chiamaci ora allo 07538341308.