Aggiungi i tag Open Graph principali

Q: Mi servono sia i tag Open Graph che i Twitter Card?

X (ex Twitter) ripiega su Open Graph se nessun tag twitter: è presente, quindi OG da solo copre la maggior parte della superficie. Aggiungi i Twitter Card solo se hai bisogno di un'immagine o di un riassunto diverso su X — vedi tag Twitter Card.

Q: E se la mia pagina ha già un ` ` e una meta description?

I motori di ricerca leggono e . Le piattaforme social leggono og:title e og:description. Sono campi separati con intenti separati (snippet di ricerca vs anteprima di condivisione), quindi duplicali invece di saltare le versioni OG.

Cosa controlla questo check

Analizza il <head> della pagina alla ricerca di quattro tag meta: og:title, og:description, og:image e og:url. Sono le proprietà Open Graph minime che ogni grande piattaforma social, di messaggistica e chat legge quando qualcuno incolla il tuo link.

Perché è importante

Quando i tag mancano, l’unfurl del link su Facebook, LinkedIn, X, Slack, Discord, iMessage, WhatsApp e Telegram ripiega su un URL nudo con al massimo il titolo della pagina raschiato — niente immagine di anteprima, niente descrizione. Il click-through su una card senza anteprima è una frazione di quello di una card con un’immagine 1200×630.

Open Graph è anche il dato che Google usa per il pannello “Informazioni su questo risultato” e per le card di citazione delle ricerche IA. Una pagina senza tag OG appare come un link semplice mentre i concorrenti appaiono come card complete.

Come risolvere

Metti i quattro tag nel <head> di ogni pagina pubblica. I valori possono rispecchiare il <title> e la meta description ma vanno calibrati per i social — un pelo più click-worthy, un’immagine scelta a mano.

<head>
  <meta property="og:title" content="Audit SEO gratuito in 60 secondi — MetricSpot">
  <meta property="og:description" content="Vedi cosa vedono gli agenti IA e Google sul tuo sito. 91 check, senza registrazione.">
  <meta property="og:image" content="https://metricspot.com/og/home.png">
  <meta property="og:url" content="https://metricspot.com/">
  <meta property="og:type" content="website">
</head>

Astro / Next.js — genera valori per pagina dal frontmatter:

---
const { title, description, ogImage } = Astro.props;
const url = Astro.url.href;
---
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={new URL(ogImage, Astro.site).href} />
<meta property="og:url" content={url} />

WordPress — Yoast SEO, Rank Math e SEOPress emettono tutti questi tag automaticamente. Aprine uno, imposta i valori social predefiniti in SEO → Social, e sovrascrivi per ogni post quando serve.

Regole per l’immagine. PNG o JPG, ≥1200×630 (1.91:1), sotto i 5 MB. Vedi la pagina dedicata immagine Open Graph per il dettaglio su dimensione e formato.

Testa prima di pubblicare — incolla l’URL nello Sharing Debugger di Facebook e nel Post Inspector di LinkedIn e clicca “Scrape Again” per svuotare la cache.

Domande frequenti

Mi servono sia i tag Open Graph che i Twitter Card?

X (ex Twitter) ripiega su Open Graph se nessun tag twitter: è presente, quindi OG da solo copre la maggior parte della superficie. Aggiungi i Twitter Card solo se hai bisogno di un’immagine o di un riassunto diverso su X — vedi tag Twitter Card.

E se la mia pagina ha già un `<title>` e una meta description?

I motori di ricerca leggono <title> e <meta name="description">. Le piattaforme social leggono og:title e og:description. Sono campi separati con intenti separati (snippet di ricerca vs anteprima di condivisione), quindi duplicali invece di saltare le versioni OG.

Perché la mia anteprima sembra ancora sbagliata dopo aver aggiunto i tag?

Facebook, LinkedIn e Slack mettono in cache aggressivamente le anteprime raschiate — a volte per settimane. Passa l’URL nel debugger della piattaforma e clicca il pulsante “Re-scrape”. Le tue modifiche non appariranno finché la cache non sarà svuotata.