Anteprima Open Graph

Avanti

Digita titolo, descrizione, nome del sito, URL della pagina e URL dell’immagine, e questo strumento rende in tempo reale una scheda di condivisione Facebook e X (Twitter) che si aggiorna a ogni battitura. È un ambiente di prova per i tuoi tag Open Graph: non viene richiesto né pubblicato nulla, così puoi provare la lunghezza del titolo e il ritaglio dell’immagine finché la scheda non è giusta, poi copiare il testo nei tuoi veri tag og:.

Come viene composta l'anteprima

  1. 1

    Digita i campi della scheda

    Titolo, nome del sito, descrizione, URL della pagina e URL dell'immagine. Ogni campo corrisponde a un tag og:.

  2. 2

    Guarda le schede aggiornarsi

    Le anteprime di Facebook e X vengono ricomposte mentre scrivi, usando il layout e il troncamento reali di ciascuna piattaforma.

  3. 3

    Aggiungi un URL immagine

    Incolla un indirizzo immagine https assoluto per vedere il ritaglio; lascialo vuoto e la scheda di Facebook mostra un segnaposto.

  4. 4

    Copia nei tuoi tag og:

    Quando la scheda si legge bene, riporta lo stesso titolo, descrizione e immagine nei tag meta della tua pagina.

Cosa diventa ogni campo

Campo Tag Open Graph Mostrato nella scheda
Titolo og:title Titolo in grassetto, troncato a una riga
Descrizione og:description Sottotitolo grigio, limitato a due righe
Nome del sito og:site_name Piccola etichetta sopra il titolo di Facebook
URL og:url Viene mostrato il dominio; lo determina l’host
URL immagine og:image Ritagliata a 1.91:1 su entrambe le schede

Lo strumento estrae l’host dall’URL che digiti, quindi https://blog.example.com/post mostra blog.example.com sulla scheda.

Le due schede e in cosa differiscono

  • Facebook mostra l’immagine ritagliata a 1.91:1, poi il dominio in maiuscoletto, il titolo in grassetto su una riga e la descrizione su un massimo di due righe. Senza URL immagine rende un segnaposto grigio, che è di gran lunga la causa più comune di una condivisione piatta e senza immagine in circolazione.
  • X (Twitter) mostra una scheda summary_large_image con angoli arrotondati: l’immagine con ritaglio 2:1, il dominio, il titolo e la descrizione sotto.

Far entrare il testo

  • Titolo: punta a 60-70 caratteri. Facebook taglia intorno agli 88 e X intorno ai 70, quindi un titolo entro i 70 resta intero ovunque.
  • Descrizione: tienila sotto i 160 caratteri circa; la scheda si limita a due righe e il resto viene scartato.
  • Immagine: progettala a 1200 x 630 px così il ritaglio 1.91:1 è pulito, e ospitala su un URL https:// assoluto. Un percorso relativo non si caricherà una volta che i tag sono in produzione.
  • Nome del sito: breve e solo il marchio, senza slogan. Sta sopra il titolo come etichetta.

Lista di controllo per il giorno della pubblicazione

  • [ ] Titolo sotto i 70 caratteri
  • [ ] Descrizione sotto i 160 caratteri
  • [ ] L’URL dell’immagine è assoluto (https, non // né un percorso relativo)
  • [ ] Immagine progettata a 1200 x 630 px, JPG o PNG
  • [ ] L’URL corrisponde al canonico che pubblicherai
  • [ ] Testo copiato nei veri tag og:, poi verificato con uno strumento di controllo

Domande frequenti

No. Digiti i campi della scheda a mano e lo strumento simula come apparirebbero. È un ambiente di prova, non uno scraper, quindi funziona anche prima che la pagina sia online. Per leggere i tag già presenti su una pagina, incolla invece l’HTML di quella pagina nella Verifica Open Graph.

Una scheda Facebook e una scheda a immagine grande di X (Twitter). Usano gli stessi valori Open Graph, quindi una scheda che si legge bene qui è un buon riferimento per LinkedIn, Slack, Discord e altre app che espandono i link dagli stessi tag og:, ciascuna con limiti leggermente diversi.

Perché il campo immagine è vuoto, oppure l’URL che hai incollato non è un indirizzo https assoluto funzionante. Aggiungi un URL immagine https completo e il ritaglio appare subito. Quando va online, mantieni il file sotto i 5 MB e servilo con un content-type pubblico image/*.

Ogni piattaforma tronca in un punto diverso (Facebook vicino agli 88 caratteri, X vicino ai 70), e l’anteprima lo rispecchia. Riduci il titolo a 60-70 caratteri e resterà intero su ogni piattaforma.

Strumenti correlati

Strumento disponibile in altre lingue