Il momento peggiore per scoprire un'anteprima di link non funzionante è dopo il tweet di lancio, Si passa una settimana su una pagina, si scrive l'annuncio, si preme invia - e la carta che appare è un rettangolo grigio con un titolo troncato e nessuna immagine, perché og:image appuntito /images/og.png invece di https://yoursite.com/images/og.png. Il post è già uscito. La carta è già memorizzata nella cache. Puoi aggiustarlo e poi chiedere a tutti di ricondividere.
un' Grafico aperto anteprima risolve che spostando l'assegno prima Invece di pubblicare e sperare, si guarda a ciò che la carta sarà mentre i tag sono ancora modificabili Questa è l'intera premessa del Apri l'anteprima del grafico Strumento: inserisci i tuoi tag o incolla quelli che hai già e visualizza le carte approssimative di Facebook, X, LinkedIn, Slack e Discord renderizzate affiancate, con un verdetto pass/warn/fail su ogni campo.
Il motivo per cui una singola anteprima non è sufficiente è che ogni piattaforma legge gli stessi tag e li rende in modo diverso. X Tronca le descrizioni a circa 110 caratteri; Facebook mostra più vicino a 155. LinkedIn elimina spesso la descrizione e mostra solo l'immagine, il titolo e il dominio. Slack fa crollare il tutto in un attacco compatto con una guida colorata. Discord incorpora la descrizione in modo prominente ma riduce l'immagine. Un titolo che si adatta perfettamente a una scheda Facebook può essere tagliato a metà parola su X e non te ne accorgerai mai a meno che non guardi entrambi.
io costruisco Toolz.dev e spedisci le pagine costantemente, e mi sono stancato del ciclo di pubblicazione-controllo-correzione Lo strumento viene eseguito interamente nel browser e non effettua alcuna chiamata di rete - non recupera mai il tuo URL - il che significa che funziona anche per le pagine che non sono ancora distribuite, si siedono dietro un login o vivono su un dominio di staging che i debugger della piattaforma ufficiale non possono raggiungere.
tl; dr: I tag Graph Open controllano l'aspetto del tuo collegamento quando è condiviso. Ogni piattaforma legge lo stesso
og:tag ma li tronca e li espone in modo diverso, quindi visualizzare in anteprima una piattaforma non ti dice nulla delle altre. la Apri l'anteprima del grafico Lo strumento rende cinque carte piattaforma da un set di tag, convalida ogni campo rispetto ai limiti della piattaforma corrente, analizza un blocco di tag esistente se ne hai già uno e ti consegna un pronto copia<meta>blocco: tutto lato client, senza scraping e senza caricamento.
Caratteristiche principali
Cinque anteprime della piattaforma da un set di tag
Lo strumento rende le carte approssimative per Facebook, X in entrambi summary_large_image e summary stili, LinkedIn, Slack e Discord Leggono tutti dagli stessi campi, quindi quando tagli un titolo lo guardi aggiornare ovunque contemporaneamente Il punto non è la fedeltà perfetta per i pixel - le piattaforme ridisegnano le loro carte senza preavviso - ma la fedeltà relativa: proporzioni corrette, punti di troncamento corretti, ordine corretto dei campi, in modo da poter vedere quale piattaforma è quella che si rompe.
Incolla e analizza per i tag che hai già
Se la pagina esiste, raramente si desidera riscrivere nove campi Incolla l'HTML grezzo - un tutto <head>, un dump view-source o un blocco sciolto di <meta> linee - nella scatola di analisi e il parser incorporato tira fuori ogni og: e twitter: Tag Li riconosce e li carica nel modulo. Il parser è basato su regex anziché basato su DOM, che è ciò che consente di eseguire lo stesso codice in un browser, in Node e nella build del desktop senza modifiche.
Convalida per campo con limiti reali
Ogni campo riceve uno stato di passaggio, avviso o errore. Un titolo di oltre 60 caratteri fallisce. Una descrizione tra 110 e 155 caratteri avverte, perché legge completamente su Facebook e LinkedIn ma viene tagliata su X. Un parente og:image il percorso fallisce completamente: i raschietti non li risolvono. UN og:image Servito in pianura http avverte, perché diverse piattaforme si rifiutano di eseguire il rendering delle immagini non HTTPS. un' twitter:site Il valore che non è un handle valido non riesce. I verdetti sono abbastanza specifici da agire piuttosto che un generico "sembra fine".
Regole dell'immagine che puoi effettivamente seguire
Le schede di grandi immagini su ogni piattaforma principale presuppongono un'immagine 1,91:1; 1200x630 pixel è la dimensione che li soddisfa tutti contemporaneamente Lo strumento afferma che il target è esplicito, segnala le modalità di guasto che fanno sparire silenziosamente le immagini e, poiché una scheda con un'immagine rotta è il singolo bug Open Graph più comune, rende il tuo vero e proprio og:image URL in ogni anteprima, ricaduta su un segnaposto chiaro se l'immagine non può caricarsi.
Un meta blocco pronto per la copia e correttamente evaso
L'output generato è un blocco di tag completo, non un frammento. Include og:image:width e og:image:height, che contano più di quanto la maggior parte delle persone si renda conto: senza di loro, alcuni raschiatori rendono una carta di solo testo sul primo recupero e mostrano l'immagine solo dopo averla scaricata e misurata, che può essere diverse ore dopo. I valori sono in fuga HTML, quindi una e commerciale o una citazione nella tua descrizione non possono uscire dall'attributo e danneggiare il markup.
100% lato client, senza raschiatura
Lo strumento non richiede mai il tuo URL Questo è deliberato, e vale la pena capire perché: un browser non può recuperare una pagina arbitraria di terze parti a causa della politica della stessa origine, e un fetcher lato server significherebbe spedire i tuoi URL inediti a qualcun altro' registra Lavorando dai tag forniti elude entrambi i problemi e sblocca il caso che i debugger ufficiali non possono servire - convalidando una pagina che non è ancora in diretta Vedere Privacy dei dati negli strumenti online per il ragionamento più ampio.
Come utilizzare lo strumento Anteprima grafico aperto
Passaggio 1: carica i tuoi tag
Hai due percorsi. Se stai scrivendo metadati da zero, compila il modulo: og:title, og:description, og:image, og:url, og:site_name, quindi scegli un og:type e un twitter:card stile e aggiungi il tuo twitter:site e twitter:creator maniglie.
Se la pagina ha già dei tag, incollali invece Apri la pagina, visualizza l'origine (non l'ispettore del browser - più su quella distinzione qui sotto), copia il <head>e lasciarlo cadere nella scatola di analisi. Fare clic su Analizza tag e tutto ciò che viene riconosciuto viene caricato nel modulo. Il parser comprende anche gli alias: og:image:secure_url e og:image:url entrambi alimentano il campo immagine e twitter:title, twitter:description, e twitter:image sono usati come fallback quando il loro og: gli equivalenti sono assenti - il che rispecchia il modo in cui le piattaforme stesse risolvono i tag.
Passaggio 2: leggi il pannello di convalida
L'elenco di convalida è ordinato in modo che i campi siano importanti. Risolvi prima i fallimenti: un mancante og:image, un percorso relativo dell'immagine, un titolo 20 caratteri oltre il limite Poi guardate gli avvertimenti, che riguardano principalmente il divario tra le piattaforme - una descrizione che va bene per Facebook ma che desidera X, una mancanza og:site_name Ciò significa che la tua carta mostra un nome host nudo invece del tuo marchio.
I contatori nella parte superiore del pannello ti danno una lettura veloce. Zero falli e un paio di avvisi è uno stato perfettamente spedibile; gli avvisi sono compromessi, non bug.
Passaggio 3: confronta le carte
Questo è il passo che le persone saltano, ed è quello che cattura i veri problemi Scansiona tutte e sei le anteprime Il titolo è tagliato sulla scheda di riepilogo X? la descrizione svanisce su LinkedIn (di solito lo fa - questo è previsto)? l'immagine sembra proprio a 1,91:1, o il tuo logo è ritagliato perché hai progettato una grafica quadrata e la scheda la rende ampia?
Taglia e ricontrolla finché ogni carta non viene letta in modo pulito. Una disciplina utile: scrivere al vincolo più stretto. Se la tua descrizione si legge completamente a 110 caratteri, le legge completamente ovunque. Se il tuo titolo funziona a 55, sopravvive a ogni carta e ogni layout mobile.
Passaggio 4: copia il meta blocco e spediscilo
Copia il blocco generato nella tua pagina <head>. In un framework - Next.js, Nuxt, SvelteKit, Astro - non incollerai crudo <meta> tag, ma il blocco è ancora la tua fonte di verità per esattamente quali campi popolare nell'API dei metadati del framework.
Quindi fai il passo che tutti dimenticano: riscatta l'URL nel debugger di ciascuna piattaforma. Spedizione La correzione non cancella la carta memorizzata nella cache. la Generatore di meta tag è lo strumento complementare qui se hai bisogno anche dei tag SEO standard - titolo, descrizione, canonici, robot - che vivono insieme ai tag social.
Come funziona effettivamente il protocollo Open Graph
Open Graph è iniziato su Facebook nel 2010 come un modo per trasformare una pagina web in un nodo in un grafico sociale. L'ambizione svanì; il vocabolario TAG si blocca, ed è ora lo standard de facto che Facebook, LinkedIn, Slack, Discord, WhatsApp, Pinterest, iMessage, Signal e la maggior parte degli altri software di collegamento che spiegano.
Il meccanismo è semplice Quando un link è condiviso, la piattaforma invia un bot al tuo URL - facebookexternalhit, LinkedInBot, Slackbot-LinkExpanding, Discordbot, Twitterbot. Quel bot richiede l'HTML grezzo, legge il <head>, estrae il og: e twitter: Meta tag e costruisce una carta. È un singolo HTTP GET e un'analisi. Il bot non è un browser: la maggior parte di questi crawler non esegue JavaScript, che è la causa principale di un intero genere di bug.
i tag stessi
Quattro tag sono descritti come richiesto dal protocollo: og:title, og:type, og:image, e og:url. praticato og:description e og:site_name sono ugualmente portanti, perché senza di loro la carta è nuda o ricade su qualsiasi testo il raschietto possa trovare sulla pagina. I tag utilizzano il property Attributo, non name- <meta property="og:title" content="..." />- che fa inciampare le persone perché i tag Twitter fanno il contrario e usano name. La maggior parte dei parser perdona questo, ma i validatori di piattaforme non sempre lo sono, quindi vale la pena farlo bene.
OG: Versus Twitter: Precedenza
X legge prima i tag della scheda Twitter e ricade su Graph aperto quando sono assenti. Ciò significa una pagina con solo og:title, og:description, e og:image produce ancora una scheda X funzionante: il fallback è previsto.
Quindi cosa in realtà ha bisogno di un twitter: Tag? Tre cose. twitter:card Decide il layout e non esiste un grafico aperto equivalente: senza di esso, X sceglie uno stile di carta in base a ciò che trova, che non è una decisione che vuoi delegare. twitter:site attribuisce la carta a un account del marchio. twitter:creator accredita l'autore. Tutto il resto può provenire in sicurezza da Open Graph.
La regola pratica: scrivi tag grafici aperti completi, quindi aggiungi esattamente questi tre twitter: Tag. duplicazione twitter:title e twitter:description è innocuo ma inutile a meno che tu non voglia sinceramente una copia diversa su X che altrove, il che a volte è una scelta legittima, dal momento che X' il troncamento più stretto a volte giustifica una descrizione più breve e incisiva.
Dimensioni dell'immagine, rapporti e problema di ritaglio
Il rapporto di aspetto 1.91:1 è il numero da interiorizzare. 1200x630 pixel lo colpisce, è abbastanza grande per i display Retina, ed è ciò che Facebook, LinkedIn e X tutti vengono visualizzati senza distorsioni per le schede di grandi immagini.
La modalità di guasto è sottile: le piattaforme di solito non rifiutano un'immagine off-ratio, la ritagliano. Carica una grafica quadrata 1000x1000 e Facebook lo ritaglia al centro a 1,91:1, che taglia all'incirca un terzo dalla parte superiore e inferiore. Se il testo del titolo è stato centrato verticalmente, sopravvive; se metti un logo in alto, non lo fa. Conserva contenuti significativi all'interno di un'area sicura e lontani dai bordi, perché superfici diverse ritagliano di quantità leggermente diverse.
il compatto x summary la carta è l'eccezione Vuole un'immagine quadrata, minimo 144x144, e ritaglierà al centro un banner 1,91:1 in un quadrato - che di solito lo distrugge Se usi deliberatamente summary, Fornisci un'immagine quadrata; se fornisci un banner, usa summary_large_image.
Mantenere la dimensione del file sotto circa 5 MB (Facebook's tetto documentato; altre piattaforme sono più severe nella pratica), servire come PNG, JPEG, o webp, e utilizzare sempre un URL HTTPS assoluto Percorsi relativi e protocollare-relativo // Gli URL sono i due modi più comuni in cui un'immagine non viene visualizzata silenziosamente.
Perché scrapers cache e come rompere la cache
Ogni piattaforma memorizza nella cache il risultato dello scraping della tua pagina - in genere per circa sette giorni, a volte più a lungo Non si tratta di testardaggine: un link popolare può essere condiviso migliaia di volte all'ora e recuperare nuovamente la tua pagina per ogni condivisione sarebbe un attacco denial-of-service condotto dalla piattaforma Quindi raschiano una volta e riutilizzano.
La conseguenza è che riparare i tag non risolve la carta. La vecchia anteprima persiste per ogni condivisione esistente e per le nuove condivisioni fino alla scadenza della cache. Per forzare un aggiornamento:
- Facebook: Il debugger di condivisione, utilizzando il pulsante "raschiatura di nuovo". Questo cancella anche la cache utilizzata da Instagram e WhatsApp.
- LinkedIn: L'ispettore postale. L'inserimento dell'URL attiva un nuovo scrape.
- X: Il validatore della carta è stato deprecato e l'accesso è incoerente. In pratica, pubblicare il link è l'unico aggiornamento affidabile.
- allentamento: Unfurl Caches scade da solo; l'aggiunta di un parametro di query innocuo produce immediatamente un nuovo dispiegamento.
- discordia: simile: una stringa di query modificata è la soluzione pratica.
Quel trucco della stringa di query è il portello di fuga universale: https://example.com/page?v=2 è, per un raschietto, un URL diverso senza voce cache. Usalo per i test, non per il link canonico che pubblichi effettivamente e mantieni og:url puntando all'indirizzo canonico pulito in modo che le condivisioni di varianti parametrizzate si consolidino correttamente. la Encoder/decoder URL è utile quando quei parametri si complicano.
Cosa succede quando mancano i tag
I raschiatori ricadono e i fallback sono peggio di quanto speri.
no og:title E usano il <title> tag - che di solito è scritto per i risultati di ricerca e spesso termina in una pipe e il nome del tuo marchio, leggendo goffamente come titolo di una carta. NO og:description E usano la meta descrizione, o il corpo del testo raschiato, che può inserire un banner di cookie o un'etichetta di navigazione. no og:image E la maggior parte delle piattaforme mostra una scheda di solo testo, anche se alcune cercano qualsiasi immagine nella pagina e potrebbero trovare un logo, un avatar o un pixel di tracciamento. no og:url e l'indirizzo condiviso viene utilizzato così com'è, quindi ?utm_source=twitter Le varianti vengono trattate come pagine distinte e il frammento di conteggio delle conteggi.
C'è un'altra classe di fallimento che vale la pena nominare, perché è invisibile nel debug normale: Tag iniettati da JavaScript lato client. Se i tuoi meta tag vengono impostati da React dopo l'idratazione, l'ispettore del browser li mostra perfettamente e lo scraper non vede nulla, perché lo scraper non ha mai eseguito il tuo JavaScript. Verificare sempre con la vista-origine o curl, che mostrano l'HTML grezzo effettivamente restituito dal server - non il DOM dopo l'avvio della tua app Lo stesso vale per le pagine che restituiscono un 401, un reindirizzamento di accesso o un bot-blocking 403 a richieste non autenticate: lo scraper ottiene la pagina di errore, non il tuo contenuto.
Casi d'uso comuni
Convalida pre-lancio
il caso centrale. Prima che una pagina venga pubblicata, incolla i tag che intendi spedire e conferma ogni rendering di carta. Questa è l'unica cosa che i debugger di piattaforma ufficiali non possono fare, perché devono recuperare un URL live. Un controllo pre-lancio costa trenta secondi e salva la ricondivisione del giorno di lancio.
Debug di una carta rotta
Un link si sta spiegando male e devi sapere perché. Incolla i tag correnti della pagina, leggi il pannello di convalida e la causa è solitamente immediata: un percorso immagine relativo, un http immagine, una descrizione il doppio del limite, una mancante twitter:card. Risolvi, ri-scara nel debugger della piattaforma, fatto.
Verifica dei metadati di un sito su larga scala
Lavorare attraverso un sito pagina per pagina, incollando ciascuno <head> E leggendo il verdetto, emerge la deriva che si accumula su qualsiasi progetto multi-contributore: una pagina ha tag Twitter e un'altra no, una descrizione è di 300 caratteri, tre pagine condividono lo stesso generico og:image. Lo strumento diventa un rapido controllo di coerenza piuttosto che un'ipotesi per pagina.
Progettare l'immagine di condivisione
Quando si sceglie o si commissiona un og:image, l'anteprima mostra cosa gli fa effettivamente il ritaglio in una carta ampia rispetto a una quadrata. I designer consegnano regolarmente una bella grafica quadrata che viene macellata da un raccolto di 1,91:1; visto che prima di spedire è più economico che vederlo dopo.
Scrivere la copia con il vincolo più stretto
Poiché le anteprime mostrano il troncamento di X accanto a Facebook, trasformano un limite di caratteri astratto in qualcosa di visibile. Scrivere una descrizione che legge completamente a 110 caratteri è una disciplina molto più facile da tenere quando puoi vedere le ellissi apparire durante la digitazione. la generatore di lumache copre il lavoro adiacente di produrre l'URL pulito che og:url dovrebbe indicare.
lavorando su messa in scena o dietro un login
Gli strumenti interni, il lavoro del cliente sotto NDA e le pagine dietro un muro di autenticazione sono tutti irraggiungibili dai debugger della piattaforma. Poiché lo strumento funziona da tag anziché da un recupero, li gestisce in modo identico a una pagina pubblica.
confronto di piattaforme
Guida attuale più nota Le piattaforme cambiano questi numeri senza annuncio, e i punti di troncamento sono misurati in pixel anziché in caratteri - un titolo pieno di clip di lettere larghe prima di uno pieno di obiettivi stretti Trattali come bersagli sicuri, non specifiche.
| tribuna | Immagine consigliata | rapporto | Titolo mostrato | Descrizione mostrata | banconote |
|---|---|---|---|---|---|
| 1200x630 | 1.91:1 | ~60 caratteri | ~155 caratteri | Minimo 200x200; immagini fuori rapporto delle colture centrali | |
| X / Twitter (grande) | 1200x628 | ~1.91:1 | ~60 caratteri | ~110 caratteri | esigenza twitter:card=summary_large_image |
| X / Twitter (Riepilogo) | 800x800 | 1:1 | ~50 caratteri | ~90 caratteri | Minimo 144x144; immagine quadrata richiesta |
| 1200x627 | ~1.91:1 | ~100 caratteri | Spesso nascosto | Descrizione spesso eliminato dalla carta | |
| stagnante | 1200x630 | 1.91:1 | ~60 caratteri | ~140 caratteri | Allegato compatto; Unfurl Cache scade da solo |
| discordia | 1200x630 | 1.91:1 | ~60 caratteri | ~160 caratteri | rende la descrizione in primo piano, immagine più piccola |
Il takeaway dal tavolo è l'obiettivo del progetto: un'immagine 1200x630, un titolo pari o inferiore a 55-60 caratteri e una descrizione che arriva sotto 110 ti dà una carta che rende correttamente ovunque senza sintonia per piattaforma.
FAQ
Qual è la dimensione corretta dell'immagine del grafico aperto?
Usa 1200x630 pixel - un rapporto 1,91:1. che soddisfa Facebook, LinkedIn, X, Slack e Discord simultaneamente per le schede di grandi immagini, ed è abbastanza grande da rimanere nitido sui display ad alta densità Tieni il file sotto circa 5 MB, servilo su HTTPS a un URL assoluto e tieni il testo importante lontano dai bordi poiché le superfici si ritagliano in quantità leggermente diverse Per una scheda di riepilogo X compatta, fornisci invece un'immagine quadrata di almeno 144x144.
Perché la mia anteprima del link mostra ancora la vecchia immagine dopo aver corretto i tag?
Perché la piattaforma ha memorizzato nella cache il risultato del suo scrape precedente, di solito per circa una settimana L'aggiornamento dei tag non invalida quella cache Forza un nuovo recupero attraverso la piattaforma's debugger - il pulsante Facebook Sharing Debugger's Scrape Again o il LinkedIn Post Inspector Per Slack e Discord, l'aggiunta di un parametro di query all'URL produce immediatamente un'anteprima non memorizzata nella cache, che è il modo più veloce per verificare una correzione.
Ho bisogno di entrambi OG: e Twitter: tag?
X torna a Grafico aperto quando mancano gli equivalenti di Twitter, quindi una pagina con completa og: Tag produce una scheda X funzionante. Ciò che Open Graph non può esprimere è il layout della carta, quindi dovresti comunque aggiungere twitter:card per scegliere tra il banner grande e il riepilogo compatto, più twitter:site e twitter:creator attribuire la carta. Quei tre tag più completi del grafico aperto sono la combinazione efficiente.
Quanto tempo dovrebbe essere OG:title e og:description?
lasciare og:title a o meno di circa 60 caratteri. per og:description Le piattaforme divergono: X mostra circa 110 caratteri, Facebook e LinkedIn mostrano più vicini a 155 a 200. Scrivere al limite X più stretto significa che la descrizione si legge completamente ovunque. Il testo oltre il limite non è perso, solo nascosto dietro un'ellissi, quindi carica prima le parole che contano.
Perché la mia anteprima è vuota o mostra solo l'URL?
Le cause abituali, in ordine di frequenza: og:image è un percorso relativo piuttosto che un URL assoluto; l'immagine viene servita in pianura http; i tag sono al di fuori del <head>I tag vengono iniettati da JavaScript lato client che lo scraper non esegue mai, oppure la pagina restituisce uno stato non 200 o un reindirizzamento di accesso al bot. Controlla l'HTML grezzo con la sorgente di visualizzazione o curl piuttosto che l'ispettore del browser - l'ispettore mostra il DOM dopo l'esecuzione di JavaScript, che non è ciò che vede lo scraper.
Questo strumento recupera il mio URL per leggere i tag?
No. Non fa richieste di rete a tutti Funziona dai tag digitati o incollati, e tutto è analizzato e reso nel tuo browser I browser non possono recuperare pagine arbitrarie di terze parti a causa di CORS, e un fetcher lato server significherebbe inviare i tuoi URL inediti da qualche altra parte Il compromesso è che fornisci i tag - e il vantaggio è che le pagine su localhost, sulla messa in scena o dietro un lavoro di accesso esattamente come quelli pubblici.
Posso visualizzare in anteprima una pagina che non è stata ancora pubblicata?
Sì, ed è il motivo principale per utilizzare questo piuttosto che un debugger di piattaforma I debugger ufficiali devono recuperare un URL live, quindi sono inutili prima della distribuzione Qui incolli i tag che intendi spedire - dal tuo modello, dal tuo oggetto di metadati framework o da una build locale - e le anteprime eseguono il rendering immediatamente.
I tag Open Graph aiutano le mie classifiche di ricerca?
non direttamente. 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, indirettamente, i segnali che contano. Pensa a loro come all'ottimizzazione delle conversioni per i link condivisi piuttosto che come una leva SEO. Per i tag che influiscono sul frammento di ricerca, utilizza il Generatore di meta tag.
