Come si usa
- Inserisci og:title e og:description che usi, o che intendi usare, nella pagina.
- Incolla l'URL completo di og:image. Lo strumento carica l'immagine e ne indica le dimensioni effettive in pixel.
- Aggiungi l'URL o il dominio della pagina, poi confronta le anteprime delle schede grandi e piccole e correggi eventuali avvisi.
Come funziona
Quando qualcuno condivide un link, la maggior parte dei social network e delle app di messaggistica recupera la pagina e legge i relativi tag Open Graph: og:title, og:description, og:image e og:url. Poi crea una scheda. Un'immagine larga con un rapporto di circa 1,91:1 di solito genera una scheda grande con l'immagine in alto; un'immagine piccola o quadrata spesso genera una scheda compatta, con una miniatura accanto al testo.
Questo strumento mostra due stili generici di scheda per aiutarti a valutare la lunghezza del testo e l'inquadratura dell'immagine. Controlla le dimensioni naturali dell'immagine dopo che il browser l'ha caricata: sotto 200 × 200 px molte app non mostrano l'immagine; sotto 600 × 315 px tendono a usare il layout compatto; un rapporto molto diverso da 1,91:1 comporta un ritaglio. 1200 × 630 px è la dimensione ampiamente consigliata perché mantiene la nitidezza sugli schermi ad alta densità.
L'anteprima non può mostrare esattamente cosa visualizzerà una specifica app. Le app differiscono per il numero di righe mostrate per titolo e descrizione; alcune ignorano la descrizione e la maggior parte memorizza temporaneamente l'anteprima dopo la prima condivisione, quindi le modifiche ai tag potrebbero non apparire subito. Molte piattaforme offrono uno strumento di debug dedicato per aggiornare la cache.
Esempi
Uno screenshot usato come og:image
Uno screenshot di 1440 × 900 ha un rapporto di 1,6:1. Lo strumento segnala il rapporto: in una scheda grande, l'immagine verrebbe ritagliata in alto e in basso. Esportarla in formato 1200 × 630 evita sorprese.
Un logo come unica immagine
Un logo di 180 × 180 è più piccolo di 200 × 200 px, quindi molte app non mostrerebbero alcuna immagine. Usa invece un banner più grande e largo che includa il logo.
Controllare la lunghezza del titolo
Un og:title di 90 caratteri va a capo su tre righe nell'anteprima della scheda grande. Ridurlo a circa 60 caratteri mantiene la scheda ordinata nella maggior parte delle app.
Domande frequenti
Perché il mio link appare diverso su Facebook, LinkedIn e X?
Ogni piattaforma visualizza le schede con layout, ritaglio e limiti di testo diversi; alcune mostrano la descrizione, altre no. Questa anteprima è un'approssimazione generica, non una replica del design di una piattaforma specifica.
Ho cambiato og:image, ma continua ad apparire la vecchia immagine. Perché?
Le piattaforme memorizzano nella cache le anteprime dei link. Usa lo strumento di debug per la condivisione della piattaforma per recuperare di nuovo la pagina oppure attendi che la cache scada. Anche cambiare il nome del file immagine può essere d'aiuto.
Posso usare un'immagine SVG o WebP?
La maggior parte delle piattaforme non supporta SVG. WebP funziona in molte app, ma non in tutte; JPG o PNG sono la scelta più sicura.
Perché lo strumento non riesce a caricare la mia immagine?
L'URL potrebbe richiedere l'accesso, rimandare a una pagina HTML invece che a un'immagine, oppure il server potrebbe bloccare le richieste provenienti da altri siti. Se il browser non riesce a caricarla qui, potrebbe non riuscirci nemmeno il crawler di un social network.
Privacy
Il testo inserito rimane nel browser. Per controllare l'immagine, il browser la richiede direttamente all'URL inserito (senza inviare un referrer), quindi il server riceve una normale richiesta di immagine. Non viene inviato nulla a TIG Tools.