Contents
Open Graph e Twitter Cards: guida completa
Come i metadati Open Graph controllano le anteprime dei link, in cosa differiscono dagli snippet di Google e come validare title, immagini e description.
Quando un utente condivide un link su Facebook, Telegram, LinkedIn o WhatsApp, la piattaforma non preleva i dati dal sito in modo arbitrario: legge meta tag speciali nella <head> della pagina. È l'Open Graph Protocol, sviluppato da Facebook nel 2010.
Senza markup OG, le piattaforme social indovinano da sole title, description e immagine — il risultato è imprevedibile. Con un markup corretto controlli pienamente l’aspetto dell’anteprima e massimizzi il CTR dei link condivisi.
<head> diventano una card con title, description e immagine.Open Graph non influenza direttamente il posizionamento nella ricerca — è uno strumento per il traffico social. Ma la condivisione con un'anteprima attraente aumenta la portata e può riflettersi indirettamente sul valore dei link e sul traffico di brand.
Cos’è Open Graph
L'Open Graph Protocol (OGP) è un insieme di meta tag nella <head> di una pagina HTML che definisce come la pagina viene presentata quando è condivisa sui social network. Il protocollo usa il namespace og: ed è supportato da tutte le piattaforme principali: Facebook, LinkedIn, Telegram, WhatsApp, Pinterest, Slack.
Tag OG principali
| Tag | Obbligatorio | Descrizione |
|---|---|---|
| og:title | Sì | Title della pagina nell’anteprima (fino a 60–70 caratteri) |
| og:description | Consigliato | Description (fino a 155–160 caratteri) |
| og:image | Sì | URL dell’immagine di anteprima (min 200×200, consigliata 1200×630) |
| og:url | Sì | URL canonical della pagina |
| og:type | Sì | Tipo di oggetto: website, article, product |
| og:site_name | Consigliato | Nome del sito (es. «example.com») |
| og:locale | Consigliato | Lingua della pagina: en_US, ru_RU |
| og:image:width | Consigliato | Larghezza dell’immagine in pixel |
| og:image:height | Consigliato | Altezza dell’immagine in pixel |
| og:image:alt | Consigliato | Testo alternativo per l’immagine di anteprima |
Esempio di implementazione nel codice:
html
<!-- Full OG tag set for an article -->
<head>
<meta property="og:title" content="Open Graph and Twitter Cards: complete guide" />
<meta property="og:description" content="How to set up Open Graph markup for maximum CTR when sharing on social media" />
<meta property="og:image" content="https://example.com/images/blog/open-graph.webp" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Open Graph and Twitter Cards guide" />
<meta property="og:url" content="https://example.com/en/blog/open-graph" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="example.com" />
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="ru_RU" />
<!-- Additional for article -->
<meta property="article:published_time" content="2026-05-17T00:00:00Z" />
<meta property="article:author" content="https://example.com/en/about" />
<meta property="article:section" content="On-Page SEO" />
</head>og:image — requisiti e dimensioni
L'immagine OG è l'elemento più importante dell'anteprima. Occupa oltre l'80% dell'area della card e determina se l'utente clicca il link. Con dimensioni o formato sbagliati, Facebook ritaglia l'immagine o si rifiuta di mostrarla.
| Piattaforma | Dimensione consigliata | Minimo | Formato |
|---|---|---|---|
| Facebook / Meta | 1200×630 px | 600×315 px | JPG, PNG, GIF, WebP |
| Twitter / X | 1200×600 px | 300×157 px | JPG, PNG, WebP, GIF |
| 1200×627 px | 200×200 px | JPG, PNG, GIF | |
| Telegram | 1280×720 px (16:9) | qualsiasi | JPG, PNG, WebP |
| 1200×630 px | 300×200 px | JPG, PNG |
Soluzione universale: 1200×630 px in formato WebP. È un rapporto 1,91:1 che si visualizza correttamente su tutte le piattaforme principali. Dimensione del file fino a 8 MB (limite Facebook), ottimale sotto 300 KB.
Twitter Cards
Twitter (X) supporta i tag OG ma ha anche un proprio markup: le Twitter Cards. La piattaforma legge prima i tag twitter:, poi ricade sui tag og:. È consigliato specificare entrambi gli insiemi.
| Tag Twitter Card | Equivalente OG | Descrizione |
|---|---|---|
| twitter:card | — | Tipo di card: summary, summary_large_image, app, player |
| twitter:title | og:title | Title (fino a 70 caratteri) |
| twitter:description | og:description | Description (fino a 200 caratteri) |
| twitter:image | og:image | URL dell’immagine |
| twitter:image:alt | og:image:alt | Alt dell’immagine |
| twitter:site | — | @username dell’account del sito |
| twitter:creator | — | @username dell’autore del contenuto |
Esempio di implementazione nel codice:
html
<!-- Twitter Cards markup -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yoursite" />
<meta name="twitter:creator" content="@yourhandle" />
<meta name="twitter:title" content="Open Graph and Twitter Cards: complete guide" />
<meta name="twitter:description" content="Setting up OG markup for maximum CTR when sharing" />
<meta name="twitter:image" content="https://example.com/images/blog/open-graph.webp" />
<meta name="twitter:image:alt" content="Open Graph guide" />Tipi di oggetto OG
| og:type | Quando usarlo | Tag aggiuntivi |
|---|---|---|
| website | Home page, pagine di servizi, landing page | — |
| article | Articoli di blog, notizie, guide | article:published_time, article:author, article:section |
| product | Pagine prodotto di un negozio online | product:price:amount, product:price:currency |
| profile | Pagine autore, profili utente | profile:first_name, profile:last_name |
| video | Pagine con contenuti video | video:duration, video:release_date |
Implementazione in Next.js
In Next.js 13+ (App Router) i tag OG si impostano comodamente tramite la Metadata API. Un approccio tipizzato, senza scrivere a mano i meta tag HTML.
typescript
// app/[locale]/blog/[slug]/page.tsx
import type { Metadata } from 'next';
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const article = await getArticle(params.slug);
return {
title: article.titleEn,
description: article.leadEn,
openGraph: {
title: article.titleEn,
description: article.leadEn,
url: `https://example.com/en/blog/${params.slug}`,
siteName: 'example.com',
images: [
{
url: `https://example.com${article.coverImage}`,
width: 1200,
height: 630,
alt: article.coverImageAltEn,
},
],
locale: 'en_US',
type: 'article',
publishedTime: article.date,
authors: ['https://example.com/en/about'],
section: article.tagEn,
},
twitter: {
card: 'summary_large_image',
title: article.titleEn,
description: article.leadEn,
images: [`https://example.com${article.coverImage}`],
creator: '@yourhandle',
},
};
}Validazione e debugging
| Strumento | Piattaforma | URL |
|---|---|---|
| Facebook Sharing Debugger | Facebook, Instagram, WhatsApp | developers.facebook.com/tools/debug/ |
| Twitter Card Validator | Twitter / X | cards-dev.twitter.com/validator |
| LinkedIn Post Inspector | linkedin.com/post-inspector/ | |
| Open Graph Checker | Universale | opengraph.xyz |
| Telegram | Telegram | Basta incollare il link in una chat — l’anteprima compare subito |
Facebook mette in cache i tag OG. Se hai aggiornato il markup ma l'anteprima non cambia, usa Facebook Sharing Debugger (pulsante «Scrape Again»). La cache di Telegram si aggiorna automaticamente; per un refresh forzato aggiungi
?v=2 all'URL.FAQ
Open Graph influenza il posizionamento su Google?
Direttamente no: Google non usa i tag OG per il ranking. Indirettamente sì: un'anteprima attraente aumenta le condivisioni, il che può tradursi in una crescita dei link e del traffico di brand.
Quale dei due è più importante: og:title o <title>?
Per la ricerca —
<title>. Per i social network — og:title. Possono differire: per la ricerca il title è ottimizzato per le keyword (50–60 caratteri), per i social per il clic e l’emozione (fino a 70 caratteri). Entrambi i tag devono essere presenti.Perché Telegram non mostra l’anteprima?
Tre motivi principali: 1) L'immagine non è raggiungibile via HTTPS o è bloccata per i bot. 2) Manca og:image oppure l'URL non è valido. 3) La pagina è chiusa ai crawler (noindex, robots.txt, Cloudflare Bot Fight Mode). Verifica l'accessibilità dell'immagine con
curl -A 'TelegramBot' URL.Servono le Twitter Cards se OG è già configurato?
Twitter supporta OG come fallback, ma i tag twitter: hanno priorità e danno più controllo — per esempio sul tipo di card (summary o summary_large_image). Meglio specificare entrambi gli insiemi: sono 5 righe in più che garantiscono una visualizzazione corretta.
Come si generano immagini OG in modo dinamico?
Next.js supporta la generazione dinamica delle immagini OG tramite
ImageResponse da next/og. L’immagine viene generata lato server in formato PNG/WebP a partire da un template JSX. Permette anteprime uniche per ogni articolo, senza preparare le immagini a mano.Check it with SpiderHead
Free and local: run the audit on your own machine.
