Italiano
Crea tag Open Graph e Twitter Card con anteprima social dal vivo.
Ultimo aggiornamento
Coddy ti insegna facendoti scrivere codice vero nel browser: lezioni interattive, feedback immediato e aiuto dall'AI quando ti blocchi.
Quando condividi un link in una qualsiasi app moderna (un post, un messaggio privato, un canale Slack), la piattaforma scarica l'URL ed estrae un piccolo insieme di metadati per mostrare una *scheda di condivisione*: il titolo, una descrizione, un'immagine e il nome del sito. Quei metadati non vengono presi dalla pagina visibile, ma da un insieme specifico di tag <meta> nell'<head>. Il protocollo Open Graph, inventato da Facebook nel 2010, ne definisce la maggior parte. X (ex Twitter) aggiunge qualche extra con il prefisso twitter:. LinkedIn, Discord, Slack, iMessage, WhatsApp e Pinterest leggono tutti gli stessi tag con piccole variazioni.
Impostare bene questi tag è un lavoro da fare una volta per pagina, ma ha un impatto enorme. Una pagina senza immagine Open Graph sembra rotta quando viene condivisa. Un titolo troppo lungo viene tagliato a metà parola. Un og:image con le proporzioni sbagliate viene incorniciato con bande da tutte le piattaforme. Questo strumento ti permette di regolare questi valori con anteprime dal vivo, così vedi i problemi di troncamento e ritaglio *prima* di pubblicare la pagina.
Tutto funziona in locale. Lo stato del modulo, le anteprime e l'HTML generato non lasciano mai il tuo browser: puoi incollare URL non ancora pubblicati e testi riservati senza preoccuparti di fughe di informazioni.
property (<meta property="og:title">), mentre i tag SEO standard e quelli Twitter Card usano name (<meta name="description">, <meta name="twitter:card">).title, meta description), Open Graph (og:title, og:description) e Twitter (twitter:title, twitter:description).og:image dovrebbe essere 1200×630, servita in HTTPS e indicata con un URL assoluto: i percorsi relativi falliscono quando altri server scaricano la pagina.twitter:card su X controlla il layout: summary è una piccola miniatura quadrata, summary_large_image è il banner a tutta larghezza che vuole la maggior parte dei brand.Punta a 50-60 caratteri. Facebook tronca intorno ai 95 caratteri e X intorno ai 70. Metti prima il valore, non il brand: "Come fare il deploy con Cloudflare Workers" funziona meglio di "Blog di Coddy · Guida al deploy".
Punta a 120-155 caratteri. La maggior parte delle piattaforme tronca intorno ai 200. Usa frasi complete: la descrizione compare sotto il titolo in ogni scheda, e i frammenti tagliati sembrano incompiuti.
Usa l'URL https:// assoluto della pagina stessa, non un link di tracciamento o di reindirizzamento. I crawler Open Graph seguono og:url per deduplicare le condivisioni: un URL canonico mantiene coerenti conteggi e anteprime.
1200×630 è la misura ideale per le schede summary_large_image su X e per le schede standard su Facebook e LinkedIn. PNG o JPEG, sotto i 5 MB circa. Usa sempre un URL assoluto: i percorsi relativi falliscono perché il crawler del social visita l'URL dal proprio server.
Incolla il blocco del pannello **Tag <head> generati** nell'<head> della tua pagina. Dopo il deploy, verifica con il debugger di ogni piattaforma (Facebook Sharing Debugger, X Card Validator, LinkedIn Post Inspector) e forza una nuova scansione se in seguito cambi l'immagine.
I tag qui sotto coprono tutto ciò che le piattaforme social leggono oggi. I tag indicati con property= appartengono al protocollo Open Graph; quelli indicati con name= sono le varianti SEO standard e Twitter Card. Specifiche di riferimento: Open Graph, X Cards.
| Tag | Usato da | Consigliato | Note |
|---|---|---|---|
og:title | FB, LinkedIn, Slack, Discord | 50-60 caratteri | Se manca, si usa il <title>: impostalo comunque. |
og:description | FB, LinkedIn, Slack, Discord | 120-155 caratteri | Se manca, si usa la meta description. |
og:image | Tutte le piattaforme | 1200×630, < 5 MB, HTTPS, URL assoluto | Deve essere un URL assoluto: i percorsi relativi falliscono. |
og:image:alt | Accessibilità | Descrivi l'immagine | Usato dagli screen reader e da alcune piattaforme. |
og:url | FB, LinkedIn | URL canonico https:// | Serve a deduplicare le condivisioni tra varianti con query string. |
og:type | FB, LinkedIn | website o article | article sblocca article:published_time, article:author. |
og:site_name | FB, Discord | Nome del brand | Mostrato come piccola attribuzione sopra o sotto la scheda. |
twitter:card | X | summary_large_image | summary per una piccola miniatura quadrata, summary_large_image per il layout a banner. |
twitter:title | X | Uguale a og:title | Se manca, X usa og:title: impostali entrambi per sicurezza. |
twitter:description | X | Uguale a og:description | Se manca, si usa og:description. |
twitter:image | X | Uguale a og:image | Se manca, si usa og:image. |
twitter:site | X | @tuobrand | L'handle X dell'editore: alimenta alcune statistiche. |
Imposta **og:type** su article, aggiungi **Autore** e **Data di pubblicazione** nella sezione dedicata agli articoli e usa un'immagine di copertina 1200×630. Le anteprime si aggiornano per mostrare come appare la scheda su ogni piattaforma.
og:type=article sblocca i tag specifici degli articoli (article:published_time, article:author) che alcune piattaforme (Discord, LinkedIn) usano per mostrare l'attribuzione. Twitter li ignora ma non si lamenta.
Lascia **og:type** su website. Usa il nome del prodotto come titolo, una proposta di valore di una frase come descrizione e un'immagine principale o il ritaglio di uno screenshot come immagine.
Le landing page non hanno bisogno di metadati da articolo. L'elemento più cliccato della scheda di una landing page condivisa è di solito l'immagine, quindi investi in un'immagine pulita da 1200×630.
Titolo: "Concetto - Sezione · Docs". Descrizione: una frase che spiega il concetto. Immagine: una copertina generica della documentazione o uno screenshot dell'interfaccia pertinente.
Le pagine di documentazione vengono condivise nei canali Slack e nei thread di X. Un'immagine di copertina coerente le rende riconoscibili in un feed affollato ancora prima che si legga il titolo.
og:image, come /images/cover.png. I crawler dei social visitano la tua pagina dai *loro* server: i percorsi relativi puntano al dominio della piattaforma e restituiscono 404. Usa sempre un URL https:// assoluto.twitter:card. Senza, X usa una scheda minimale senza immagine. Aggiungi twitter:card=summary_large_image per ottenere il layout a banner che vuole quasi ogni brand.og:image:alt. Non costa nulla, aiuta chi usa uno screen reader e alcune piattaforme lo mostrano come testo alternativo nella scheda.og:image.<meta>: titolo, descrizione, immagine, tipo e così via. Oggi lo leggono tutte le principali piattaforme social e di chat, ed è per questo che è diventato lo standard di fatto per i metadati delle schede di condivisione.twitter: agli equivalenti og: quando quelli specifici di X mancano, quindi tecnicamente potresti cavartela solo con Open Graph. Ma aggiungere twitter:card, twitter:site e twitter:creator ti dà un controllo più preciso su come la scheda appare su X.<title> e la meta description. Google a volte usa og:image per la ricerca immagini e per Discover, ma non è un fattore di ranking.