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

Ogni piattaforma principale memorizza nella cache il risultato dello scrap della tua pagina, spesso per una settimana o più, quindi un link che hai condiviso prima che la correzione continui a mostrare la carta stantia. L'aggiornamento dei tag non invalida la cache da sola. con riferimento a -Raschiare l'URL nel debugger della piattaforma - il debugger di condivisione di Facebook, l'ispettore del post di LinkedIn o ri-condividendo 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 includere entrambi. X torna ai tag del grafico aperto quando mancano gli equivalenti, quindi una pagina con solo OG:title, OG:description e OG:image continuerà a produrre 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:Sito e Twitter:Creatore 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 supera quella e la clip delle carte mobili strette prima. Per OG:Description i limiti divergono: X mostra circa 110 caratteri, Facebook e LinkedIn mostrano più vicini a 155 a 200. Se scrivi su The più stretto X Limit, la tua descrizione si legge completamente ovunque. Tutto ciò che non è perduto, è semplicemente nascosto dietro un'ellissi, quindi carica prima le parole importanti.

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

Le cause abituali sono un'immagine og: che è un percorso relativo piuttosto che un URL assoluto, un'immagine servita su HTTP normale, tag posizionati al di fuori di , tag iniettati da JavaScript lato client che lo scraper non viene mai eseguito o la pagina che restituisce uno stato non 200 o un reindirizzamento di accesso al raschietto. Verifica che i tag appaiano nell'HTML grezzo restituito dal server: Visualizza origine anziché l'ispettore del browser, poiché l'ispettore mostra il DOM dopo che JavaScript è stato eseguito.

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 semplicemente incollate i tag che intendi spedire - dal tuo modello, dal tuo oggetto di metadati del framework o da una build locale - e le anteprime vengono visualizzate immediatamente, nessuna distribuzione richiesta.

Cosa succede se lascio un tag fuori?

I raschietti ripiegano e i fallback sono imprevedibili. Senza OG:TITLE di solito usano il tag e senza OG:Description possono usare la meta descrizione o il testo del corpo di scrape. Senza OG:Image La maggior parte delle piattaforme mostra una scheda di solo testo, anche se alcune acquisiranno 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 condivisioni. L'impostazione esplicita dei tag è l'unico modo per controllare il risultato.

Il markup del grafico aperto aiuta le mie classifiche di ricerca?

non direttamente. I tag Graph aperti vengono letti da piattaforme social e chat, non utilizzate come fattore di classificazione dai motori di ricerca. Ciò che influenzano è la percentuale di clic su ogni azione del tuo link, che guida il traffico e, nel tempo, i segnali che contano. Trattali come ottimizzazione delle conversioni per i link condivisi piuttosto che come una leva di classificazione SEO.

Lo strumento Open Graph Anteprima è 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.

Apri l'anteprima del grafico

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