Generatore di immagini per la condivisione
Social Card Generator
Compone un’immagine di condivisione 1200 × 630 da titolo, sottotitolo, riga di marchio e logo facoltativo su un modello a scelta, e scrive i meta tag che le vanno accanto.
Compone una scheda di condivisione da 1200 × 630 a partire da un titolo, un sottotitolo, una riga di marchio e un logo facoltativo, ed emette i meta tag da incollare accanto. Il testo è disegnato direttamente su un canvas con il font coreano del dispositivo, mandando a capo l’hangul per sillaba e il latino per parola, e il titolo si rimpicciolisce da sé invece di debordare.
Anteprima (1200 × 630)
Contenuto
Trascina qui l’immagine del logo (facoltativa)
Un PNG o un SVG quadrato è quello che sta meglio. Senza logo, al suo posto va un blocco del colore d’accento.
Aspetto
Meta tag per la pagina
Perché 1200 × 630, e due parole sul font
Open Graph, X (summary_large_image), KakaoTalk e Slack ritagliano tutti verso un rapporto vicino a 1,91:1, quindi è questa la misura che perde meno. Il testo è disegnato direttamente sul canvas con il font coreano del dispositivo — Pretendard se è installato, altrimenti Apple SD Gothic Neo, Malgun Gothic o Noto Sans KR — e l’hangul va a capo per sillabe, ed è per questo che le stesse impostazioni possono rendere un po’ diversamente su un’altra macchina. Esportando a 2× si ottiene 2400 × 1260, che resta nitido su uno schermo ad alta risoluzione.
Per vedere come si apre davvero la card, l’anteprima di un link condiviso va a prendere la pagina; e per una trama di sfondo, il generatore di sfondi a motivo ne fa una.
Come si usa
Scrivere il titolo come verrà letto
Una scheda di condivisione si legge in un flusso alla dimensione di una miniatura, quindi un titolo corto in corpo grande batte una frase completa in corpo piccolo. La riga sotto l’anteprima dice quante righe ha occupato e se la dimensione è stata ridotta per farlo stare.
Aggiungere la riga di marchio e il piè di pagina
Vengono ricordati fra una visita e l’altra, perché sono le parti che restano uguali in tutte le schede che si costruiscono. Il titolo e il sottotitolo no.
Scegliere un modello e i due colori
Gradiente, pieno, diviso o a contorno. Il colore di sfondo e l’accento fanno tutto il lavoro; l’interruttore del testo chiaro c’è perché uno sfondo di tono medio può andare in entrambe le direzioni e a decidere deve essere l’occhio, non una soglia.
Aggiungere un logo, se ce n’è uno quadrato
Un PNG o un SVG quadrato è quello che si adatta meglio. Senza logo, al suo posto compare un blocco nel colore d’accento, che alla dimensione di una miniatura spesso basta.
Esportare il PNG e copiare i meta tag
I tag portano larghezza e altezza oltre all’URL, ed è ciò che permette a un crawler di impaginare la scheda prima che l’immagine sia arrivata. L’URL di esempio va cambiato con quello in cui il file viene messo davvero.
Domande frequenti
Perché 1200 × 630?
Perché Open Graph, la summary_large_image di X, KakaoTalk e Slack ritagliano tutti a qualcosa di vicino a 1,91:1, e questa dimensione è quella che ci perde meno su tutti. Andare più grandi non aiuta — ogni consumatore la ricampiona verso il basso — e andare più piccoli significa una scheda sfocata su uno schermo retina.
La scheda è un po’ diversa sul computer di un collega.
Il testo è disegnato con il font coreano che quel dispositivo ha — Pretendard se è installato, altrimenti Apple SD Gothic Neo, Malgun Gothic o Noto Sans KR — quindi le stesse impostazioni producono forme delle lettere e andate a capo leggermente diverse su macchine diverse. Il PNG esportato è fissato nel momento in cui lo si scarica; a variare è soltanto l’anteprima.
Il mio titolo si è rimpicciolito da solo.
Alla dimensione impostata superava le quattro righe, quindi la dimensione è stata ridotta finché non ci è stato, e la riga sotto l’anteprima lo dice. Un testo che deborda sarebbe peggio: nell’esportazione verrebbe tagliato in silenzio. Per riavere la dimensione grande, il titolo va accorciato.
Come verifico che la scheda venga disegnata davvero?
Prima si mette il file all’URL indicato nei meta tag, poi si usa lo strumento di anteprima OG, che recupera la pagina e mostra che cosa ciascuna piattaforma costruirà a partire dai suoi tag. Questa pagina disegna soltanto l’immagine: non può sapere se i tag sono nella pagina né se l’URL si risolve.
Può ricevere da
Anteprima di un link condiviso
Link Preview Debugger
Legge i tag Open Graph e Twitter card di un URL e disegna come apparirà il link una volta condiviso.
Generatore di sfondi a motivo
Background Pattern Generator
Genera motivi SVG ripetibili senza giunte — righe, pois, griglie, grana — con controlli di colore e di scala.
Mockup su dispositivo
Device Mockup
Mette una schermata dentro la cornice di un telefono, di un tablet, di un portatile o di un browser, con sfondo e ombra.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Mockup su dispositivo
Device Mockup
Mette una schermata dentro la cornice di un telefono, di un tablet, di un portatile o di un browser, con sfondo e ombra.
Anteprima di un link condiviso
Link Preview Debugger
Legge i tag Open Graph e Twitter card di un URL e disegna come apparirà il link una volta condiviso.
Generatore di sfondi a motivo
Background Pattern Generator
Genera motivi SVG ripetibili senza giunte — righe, pois, griglie, grana — con controlli di colore e di scala.
Comprimere PNG
PNG Compressor
Riduce la tavolozza e riscrive il flusso deflate per far dimagrire un PNG senza cambiarne le dimensioni in pixel.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.
Calcolatrice delle proporzioni
Aspect Ratio Calculator
Ricava il lato mancante per una proporzione data ed elenca i formati standard che le corrispondono.