Perché la mia anteprima del link mostra la vecchia immagine dopo aver aggiornato i tag?

Ogni piattaforma principale memorizza nella cache il risultato dello scraping della tua pagina, spesso per una settimana o più, quindi un collegamento che hai condiviso prima della correzione continua a mostrare la scheda obsoleta L'aggiornamento dei tag non invalida da solo quella cache Ri-scrapa l'URL nel debugger della piattaforma - il debugger di condivisione di Facebook, l'ispettore dei post di LinkedIn o la ri-condivisione in Slack - per forzare un nuovo recupero L'aggiunta di una stringa di query innocua all'URL produce anche un'anteprima senza cache per il test.

Ho bisogno di entrambi OG: e Twitter: tag?

Non sempre, ma è più sicuro includerli entrambi X ricade sui tag Open Graph quando mancano i twitter: equivalenti, quindi una pagina con solo og: title, og: description, e og: image produrrà comunque una carta Quello che non puoi esprimere in Open Graph è lo stile della carta: twitter: card decide tra il banner grande e il layout di riepilogo compatto, e twitter: site e twitter: creator attribuiscono la carta ai tuoi account Aggiungi quei tre e lascia che i tag og: coprano il resto.

Quanto dovrebbero essere i miei OG:title e OG:Description?

Mantieni og: titolo a circa 60 caratteri o meno - la maggior parte delle carte tronca oltre e le schede mobili strette si agganciano prima. Per og: descrizione i limiti divergono: X mostra circa 110 caratteri, Facebook e LinkedIn mostrano più vicino a 155 a 200. Se scrivi al limite X più stretto la tua descrizione si legge completamente ovunque Tutto ciò che è passato e non è perduto, è semplicemente nascosto dietro un'ellissi, quindi carica in anticipo le parole importanti.

Perché la mia anteprima è vuota o mostra solo l'URL?

Le cause abituali sono un og: immagine che è un percorso relativo piuttosto che un URL assoluto, un'immagine servita su http semplice, tag posizionati all'esterno di , tag iniettati da JavaScript lato client che lo scraper non esegue mai, o la pagina che restituisce uno stato non 200 o un reindirizzamento di accesso allo scraper Controlla che i tag appaiano nell'HTML grezzo restituito dal tuo server - visualizza sorgente anziché l'ispettore del browser, poiché l'ispettore mostra il DOM dopo l'esecuzione di JavaScript.

Questo strumento recupera il mio URL per controllare i tag?

no . Non fa alcuna richiesta di rete. Funziona dai tag che digiti nel modulo o incolla come HTML e tutto viene analizzato e renderizzato nel tuo browser. Questa è una scelta di progettazione deliberata: i browser non possono recuperare pagine di terze parti arbitrarie a causa di CORS e un fetcher lato server significherebbe inviare i tuoi URL inediti a qualcun altro. Poiché non viene recuperato nulla, puoi convalidare le pagine su localhost, staging o dietro un login.

Posso visualizzare in anteprima una pagina che non è ancora stata pubblicata?

Sì, ed è il motivo principale per utilizzare uno strumento come questo piuttosto che un debugger di piattaforma I debugger ufficiali devono recuperare il tuo URL live, quindi sono inutili per una pagina che non viene distribuita Qui incolli semplicemente i tag che intendi spedire - dal tuo modello, dall'oggetto metadati del framework o da una build locale - e le anteprime vengono visualizzate immediatamente, non è richiesta alcuna distribuzione.

Cosa succede se lascio un tag fuori?

Gli scraper ripiegano e i fallback sono imprevedibili Senza titolo og: di solito usano il tag e senza descrizione og: possono usare la meta descrizione o il corpo del grattamento Senza og: immagine la maggior parte delle piattaforme mostra una scheda di solo testo, anche se alcune prenderanno un'immagine arbitraria dalla pagina - spesso un logo o un pixel di tracciamento Senza og: url l'indirizzo condiviso viene utilizzato così com'è, il che significa che i parametri di tracciamento possono frammentare i conteggi delle tue azioni L'impostazione esplicita dei tag è l'unico modo per controllare il risultato.

Il markup Open Graph aiuta il mio posizionamento nella ricerca?

Non direttamente. Open Graph i tag vengono letti dalle piattaforme social e chat, non utilizzati come fattore di ranking dai motori di ricerca Ciò che influenzano è la percentuale di clic su ogni condivisione del tuo collegamento, che guida il traffico e, nel tempo, i segnali che contano Trattarli come ottimizzazione della conversione per i collegamenti condivisi piuttosto che come leva di ranking SEO.

Lo strumento Open Graph Preview è gratuito e privato?

si. È completamente gratuito senza registrazione e ogni analisi, convalida e anteprima avviene in JavaScript all'interno del tuo browser. I titoli, gli URL e i collegamenti alle immagini immessi non vengono mai inviati a un server e lo strumento continua a funzionare offline una volta caricata la pagina.

Open Graph Anteprima

Visualizza in anteprima l'aspetto del tuo link su Facebook, X, LinkedIn, Slack e Discord, convalida il tuo OG: Tags e copia un meta blocco corretto

Paste existing meta HTML (optional)

Nothing is fetched or uploaded. Paste the tags from your page source and they are parsed in your browser.

og:title53/60

og:description127/200

og:image

og:url

og:site_name5/40

twitter:site

twitter:creator

og:type

twitter:card

Validation

8 1 0

og:title 53 characters - displays in full on every platform.
og:description 127 characters - fine for Facebook and LinkedIn, but X truncates past ~110.
og:image Absolute HTTPS image URL. Serve it at 1200x630 (1.91:1) for the best result.
og:url Absolute canonical URL set.
og:type Set to "website".
og:site_name 5 characters - shown above the title on most cards.
twitter:card Large banner card. Best when your image is 1200x630 or wider.
twitter:site Valid handle (@toolz).
twitter:creator Valid handle (@toolz).

Generated meta tags

<!-- Open Graph / Facebook / LinkedIn / Slack / Discord -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://toolz.dev/tools/open-graph-preview" />
<meta property="og:title" content="Open Graph Preview: Test Social Cards Before You Ship" />
<meta property="og:description" content="Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block." />
<meta property="og:site_name" content="Toolz" />
<meta property="og:image" content="https://toolz.dev/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Open Graph Preview: Test Social Cards Before You Ship" />

<!-- X / Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://toolz.dev/tools/open-graph-preview" />
<meta name="twitter:title" content="Open Graph Preview: Test Social Cards Before You Ship" />
<meta name="twitter:description" content="Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block." />
<meta name="twitter:image" content="https://toolz.dev/og-image.png" />
<meta name="twitter:site" content="@toolz" />
<meta name="twitter:creator" content="@toolz" />

Social card previews

Approximations of each platform's layout - exact rendering changes over time.

Facebook