Generatore di meta tag Open Graph

I tag da cui viene costruita l'anteprima di un link

Quando qualcuno incolla il tuo link in un post o in un messaggio, l'app invia un crawler alla pagina e legge un gruppetto di tag <meta> nell'<head>. Quei tag provengono dal protocollo Open Graph, che ne indica quattro come obbligatori:

• og:title: il titolo come dovrebbe apparire nell'anteprima.
• og:type: cosa rappresenta la pagina. website va bene per la maggior parte delle pagine e article per un articolo di blog. Il protocollo definisce anche tipi come profile, book, video.movie e music.song.
• og:image: l'URL dell'immagine che rappresenta la pagina.
• og:url: l'URL canonico, che il protocollo chiama l'ID permanente dell'oggetto.

Il protocollo definisce anche tag opzionali, e il generatore scrive quelli utili: og:description, og:site_name, e i dettagli dell'immagine og:image:width, og:image:height e og:image:alt. Sul testo alternativo il protocollo è diretto: se una pagina specifica og:image, dovrebbe specificare og:image:alt, e quel testo descrive cosa c'è nell'immagine, non è una didascalia.

Cosa aggiunge X: twitter:card

Anche X legge Open Graph. Il suo riferimento sul markup delle card (la documentazione per sviluppatori di X, collegata qui tramite l'Internet Archive perché la pagina originale ora reindirizza) elenca il fallback per ogni tag: twitter:title ricade su og:title, twitter:description su og:description, twitter:image su og:image e twitter:image:alt su og:image:alt. Quindi l'unico tag che vale la pena aggiungere è twitter:card, che sceglie il layout. Se lo ometti, lo stesso riferimento indica che X potrebbe ricadere su una piccola summary card, anche se volevi quella grande:

• summary_large_image: un'immagine a tutta larghezza sopra il titolo. La pagina della card con immagine grande di X indica che le immagini supportano un rapporto 2:1, con dimensioni minime di 300 × 157 e massime di 4096 × 4096 pixel, sotto i 5MB, in JPG, PNG, WEBP o GIF. SVG non è supportato.
• summary: una card più piccola con un'immagine quadrata. La pagina della summary card di X indica che l'immagine supporta un rapporto 1:1, da 144 × 144 fino a 4096 × 4096 pixel, e viene ritagliata in un quadrato su tutte le piattaforme.

Lo stesso riferimento elenca le card app e player, che richiedono campi aggiuntivi per app store o video player, quindi qui sono escluse. Documenta anche i limiti usati dai controlli qui sopra: 70 caratteri per un titolo, 200 per una descrizione e 420 per il testo alternativo.

Dimensioni delle immagini indicate dalle piattaforme

• LinkedIn: la sua guida per rendere condivisibile un sito web richiede og:title, og:image, og:description e og:url, e indica una dimensione massima del file di 5 MB, un minimo di 1200 × 627 pixel e un rapporto consigliato di 1,91:1.
• Meta: le sue best practice per la condivisione consigliano immagini larghe almeno 1080 pixel per gli schermi ad alta risoluzione e almeno 600 pixel per mostrare gli annunci con link immagine. La stessa pagina richiede og:image:width e og:image:height così che il crawler possa renderizzare subito l'immagine senza doverla prima scaricare ed elaborare.

Un'immagine 1200 × 630 soddisfa tutti questi requisiti: è almeno 1200 × 627 per LinkedIn, più larga di 1080 per Meta, e 1,905:1, entro il 5% del 2:1 di X.

Verificalo e aggiorna le vecchie anteprime

Le app memorizzano nella cache ciò che hanno estratto, quindi correggere i tag non sistema un'anteprima già salvata. Entrambi i grandi network ti offrono uno strumento per questo:

• Il Sharing Debugger di Meta mostra i tag che il suo crawler estrae, con eventuali errori o avvisi, e avvia una nuova estrazione. La guida per webmaster di Meta lo descrive, e la pagina delle best practice segnala che altrimenti i contenuti estratti si aggiornano con un ciclo standard di 24 ore.
• Il Post Inspector di LinkedIn aggiorna un URL in cache. La pagina di aiuto di LinkedIn segnala che l'aggiornamento riguarda solo i nuovi post: i post che includono già l'URL mantengono la vecchia anteprima.

Cosa non fa questo strumento

Non recupera la tua pagina né la tua immagine, quindi non può vedere ciò che è davvero online, e l'anteprima qui sopra è uno schizzo testuale più che un render. Scrive i tag; il tuo sito deve comunque servirli nell'<head> della pagina, nell'HTML che riceve il crawler. I tag aggiunti più tardi da JavaScript potrebbero non essere mai visti. E non scrive card app o player, né le proprietà aggiuntive che definiscono tipi come book o video.movie.

Se preferisci non scriverlo a mano

Hermoso è il marketing con il pilota automatico: studia gli annunci che già funzionano nel tuo mercato, crea annunci immagine e video in linea con il tuo brand, pianifica i post e gestisce le campagne a pagamento sui tuoi account pubblicitari. Funziona nell'app web, oppure dentro Claude, ChatGPT e Cursor tramite il suo server MCP.

Strumenti gratuiti: Costruttore di link UTM · Generatore di codici QR · Guida alle dimensioni social

Domande frequenti

Quali tag Open Graph sono obbligatori?

Il protocollo Open Graph elenca quattro proprietà obbligatorie: og:title, og:type, og:image e og:url. og:description, og:site_name e i tag og:image width, height e alt sono facoltativi ma vale la pena aggiungerli.

Mi servono twitter:title e twitter:image se ho i tag og:?

No. Il riferimento sul markup delle card di X dice che twitter:title, twitter:description, twitter:image e twitter:image:alt ripiegano sui loro equivalenti og:. Il tag che vale la pena aggiungere è twitter:card, che sceglie il layout della card.

Quali dimensioni dovrebbe avere un'immagine Open Graph?

LinkedIn richiede almeno 1200 × 627 pixel a 1.91:1 e sotto i 5 MB. Meta suggerisce almeno 1080 pixel di larghezza. La card con immagine grande di X supporta il 2:1 da 300 × 157 a 4096 × 4096. Un'immagine 1200 × 630 va bene per tutte e tre.

Perché il mio link mostra ancora una vecchia immagine dopo aver cambiato i tag?

L'app ha memorizzato nella cache la vecchia scansione. Passa l'URL nello Sharing Debugger di Meta o nel Post Inspector di LinkedIn per recuperarlo di nuovo. LinkedIn precisa che i post che già condividono l'URL mantengono la vecchia anteprima.

Perché le virgolette e le e commerciali vengono modificate nell'output?

Vengono trattate con escape HTML così il tag resta valido. Un titolo come Tom & Jerry's "Sale" diventa Tom & Jerry's "Sale" dentro l'attributo content, e browser e crawler lo rileggono come il testo originale.

Lo strumento carica la mia immagine?

No. Niente di ciò che digiti viene inviato da qualche parte e l'URL dell'immagine non viene mai recuperato, ecco perché l'anteprima mostra un segnaposto invece dell'immagine.