Fri Mar 27 2026 20:00:00 GMT-0400 (北美东部夏令时间)

Lista di controllo per la dimensione e l'anteprima delle immagini Twitter Card

Scegli la dimensione corretta dell'immagine Twitter Card, i metadati, l'esportazione WebP e controlli di risoluzione dei problemi in modo che i link condivisi vengano visualizzati correttamente su X e altri feed social.

Lista di controllo per la dimensione e l'anteprima delle immagini Twitter Card

Ultimo aggiornamento: June 28, 2026

Un'immagine per la card di Twitter è l'immagine di anteprima che appare quando qualcuno condivide un URL su X. Dovrebbe essere abbastanza grande da apparire nitida, abbastanza piccola da poter essere recuperata velocemente dai crawler e dichiarata con metadati che funzionano anche quando una piattaforma fa affidamento sui tag Open Graph.

Questa guida ti fornisce una checklist pratica per la pubblicazione: dimensioni, tag, formato file, controlli CDN e soluzioni per le card che rifiutano di aggiornarsi.

Risposta rapida: quale immagine per la card di Twitter dovresti usare?

Usa un WebP o JPEG da 1200 by 630 pixel per la maggior parte dei link condivisi, specialmente quando desideri una grande card immagine. Tieni il soggetto importante lontano dai bordi, rendi il testo leggibile anche in miniatura e usa un URL HTTPS assoluto sia in twitter:image che in og:image.

Per X, imposta twitter:card su summary_large_image quando l'immagine è l'attrazione principale. Mantieni il file comodamente al di sotto dei limiti documentati per le immagini card e verifica che l'URL finale CDN restituisca HTTP 200 prima della pubblicazione.

L'impostazione affidabile è semplice:

  • Esporta un'immagine da 1200 by 630 per l'anteprima.
  • Usa un URL CDN finale, non un percorso relativo.
  • Aggiungi twitter:title, twitter:description e twitter:image.
  • Aggiungi i corrispondenti og:title, og:description e og:image come fallback.
  • Testa l'URL live dopo il deploy, quindi aggiorna le cache della piattaforma se l'immagine vecchia appare ancora.

Cos'è un'immagine per la card di Twitter?

Un'immagine per la card di Twitter è l'URL immagine dichiarato nei metadati della pagina in modo che X possa costruire un'anteprima ricca. Non è la stessa cosa del primo immagine nel tuo articolo. Un crawler legge l'head HTML, trova i tag della card, recupera l'immagine e memorizza un'anteprima in cache per l'URL condiviso.

Gli esempi di markup di card di X descrivono ancora summary e summary_large_image tipi di card nella sua documentazione e negli esempi per sviluppatori. La differenza pratica è la dimensione dell'anteprima: summary_large_image dà all'immagine abbastanza spazio per contenere un blog, un prodotto, uno strumento o un link di campagna.

Open Graph è importante perché molte piattaforme social, app di chat e sistemi di anteprima link leggono og:image. Il Open Graph protocol definisce og:title, og:type, og:image e og:url come metadati core. Usa sia i tag Twitter/X che i tag Open Graph in modo che un parser mancante non rompa ogni anteprima.

Metadata field Use it for Practical note
twitter:card Chooses summary or large-image layout Use summary_large_image for most article and landing-page shares
twitter:image Primary X preview image Use an absolute HTTPS image URL
og:image Fallback preview image for social and messaging apps Usually match twitter:image unless a platform needs a different crop
og:url Canonical URL for the shared page Match the public canonical page URL
title and description tags Browser and search context Keep them consistent with social metadata

Per lavori correlati ai metadati immagine, abbina questo alla guida Image Optimization for SEO e alla Complete Image Optimization Checklist.

Quale dimensione dovrebbe avere un'immagine per la card di Twitter?

Inizia con 1200 by 630 pixels. Corrisponde al comune ritaglio social preview 1.91:1, dà alle piattaforme abbastanza pixel per ridimensionare in modo pulito e funziona bene quando la stessa immagine viene riutilizzata come og:image.

Evita di disegnare una card che funzioni solo a dimensione intera. I feed ritagliano, ridimensionano e posizionano il testo attorno all'immagine. Piccole etichette, sottili screenshot UI e sfondi affollati spesso sembrano perfetti in uno strumento di design ma diventano illeggibili in una vera card condivisa.

Graphic showing a 1200 by 630 Twitter card image with WebP, file size, HTTPS, and edge-safe design notes

Use case Recommended image Why it works Watch for
Blog post or guide 1200 x 630 WebP Large preview crop, broad platform compatibility Tiny headline text
Product launch 1200 x 630 WebP o JPEG Product remains visible after downscaling Cropping the product edge
Tool page 1200 x 630 screenshot-based graphic Shows what the tool does before the click UI text too small to read
Logo-only page 1200 x 630 with generous padding Keeps the logo from feeling cramped Empty-looking preview
Square-friendly campaign Separate 1200 x 1200 variant when needed Useful for platforms with square crops Do not reuse it blindly as the X card

Usa l'articolo Best Image Resizer for Social Media quando hai bisogno di ritagli per più piattaforme e usa Facebook Ad Image Sizes quando la stessa creatività alimenta anche i social paid.

Come si scrivono i metadati?

Inserisci i tag in HTML renderizzato sul server, all'interno del <head> della pagina. Non fare affidamento su JavaScript client-side per iniettare i tag social dopo il caricamento. I crawler di anteprima link potrebbero non eseguire la tua app nello stesso modo di un browser.

Three-row metadata diagram showing twitter card, twitter image, and open graph image tags for social previews

Usa questo pattern per un normale articolo o pagina strumento:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Twitter Card Image Size and Preview Checklist">
<meta name="twitter:description" content="Choose the right image size, format, and tags for clean shared links.">
<meta name="twitter:image" content="https://cdn.example.com/blog/twitter-card-image.webp">

<meta property="og:type" content="article">
<meta property="og:title" content="Twitter Card Image Size and Preview Checklist">
<meta property="og:description" content="Choose the right image size, format, and tags for clean shared links.">
<meta property="og:image" content="https://cdn.example.com/blog/twitter-card-image.webp">
<meta property="og:url" content="https://example.com/blog/twitter-card-image">

Mantieni questi controlli nella revisione del codice:

  1. L'URL immagine è assoluto e inizia con https://.
  2. L'URL immagine è l'URL CDN finale, non un percorso di build locale.
  3. Il titolo della pagina e il titolo social descrivono la stessa pagina.
  4. La descrizione social è abbastanza breve da essere scansionata in anteprima.
  5. L'URL canonico e og:url puntano alla stessa pagina pubblica.
  6. L'immagine card non è bloccata da robots.txt, autenticazione o regole hotlink.
  7. La risposta del server include un tipo di contenuto immagine corretto.

Anche la guida SEO per immagini di Google raccomanda contesto immagine descrittivo, URL immagine crawlable e formati supportati in Google Images best practices. Questo consiglio non è specifico di Twitter, ma è la stessa disciplina di pubblicazione: rendere facile per i crawler scoprire, recuperare e comprendere l'immagine importante.

Dovresti usare WebP, JPEG o PNG per un'immagine per la card di Twitter?

Usa WebP quando la tua piattaforma e gli obiettivi di anteprima lo supportano, specialmente per grafiche di articoli, anteprime di prodotti e screenshot con colori misti. Usa JPEG per ampia compatibilità o card ricche di foto. Usa PNG solo quando la trasparenza o i bordi lossless sono abbastanza importanti da giustificare il file più grande.

La image file type guide di MDN spiega che WebP supporta sia la compressione lossy che quella lossless. Questa flessibilità è utile per le card social perché un'unica immagine può contenere texture fotografica, colore brand piatto e testo.

Per questo articolo, ho codificato e testato quattro grafiche WebP da 1200 by 630 localmente con ImageMagick e controllato le dimensioni dell'output prima di pubblicare. Sono risultate tra 14 KB e 28 KB perché sono grafiche pulite con texture limitata. Foto di prodotti reali e screenshot dettagliati saranno generalmente più grandi.

Format Good fit Typical risk Practical starting point
WebP Most social preview graphics and mixed image cards Some older tools may not preview local drafts Export lossy WebP around quality 80-85
JPEG Photo-heavy previews and conservative compatibility needs No transparency, possible ringing around text Export around quality 82-88
PNG Logos, transparency, sharp flat graphics Large file size Use only when lossless is necessary
AVIF Very small modern images Preview ecosystem can be less predictable Test carefully before using as the only card image

Se l'immagine card è anche un hero della pagina, segui la guida Image Compression Ratio in modo che l'anteprima appaia pulita senza rendere pesante la pagina. Se stai confrontando formati moderni, leggi AVIF vs WebP Comparison.

Come rendere leggibile l'immagine nel feed?

Disegna la card per il posto più piccolo in cui verrà vista, non per l'artboard del tuo editor. Un'anteprima del feed può essere più stretta dell'originale e l'UI circostante compete per l'attenzione.

Usa queste regole di design:

  • Metti il soggetto principale o il titolo nell'area sicura centrale.
  • Lascia padding attorno a volti, prodotti, loghi e testo.
  • Usa un messaggio breve, non un intero titolo articolo più sottotitolo più badge.
  • Controlla l'immagine a 600 pixels di larghezza prima di approvarla.
  • Evita screenshot con etichette minuscole a meno che l'UI stessa non sia la storia.
  • Mantieni il contrasto abbastanza alto per un rapido sguardo.
  • Non usare un generico stock image quando la pagina riguarda uno strumento, un prodotto o un flusso di lavoro tecnico.

Un'immagine card utile dovrebbe rispondere alla domanda "di cosa parla questo link?" prima che il lettore studi il titolo. Per un post blog, potrebbe essere un semplice diagramma. Per una guida e-commerce, potrebbe essere un esempio foto-prodotto. Per un convertitore o ridimensionatore, potrebbe essere uno screenshot di strumento ritagliato.

Perché la mia immagine per la card di Twitter non appare?

La maggior parte delle immagini card rotte deriva da una delle quattro cause: il crawler non riesce a recuperare l'URL, i metadati puntano all'immagine sbagliata, la piattaforma ha memorizzato una versione vecchia o l'immagine è tecnicamente valida ma un candidato anteprima scadente.

Troubleshooting checklist graphic showing relative image URLs, crawler blocks, stale cached cards, and oversized files

Esegui questa sequenza prima di cambiare la creatività:

  1. Apri la sorgente della pagina finale e conferma che il tag twitter:image esista.
  2. Copia l'esatto URL immagine dal HTML renderizzato.
  3. Esegui curl -I sull'URL immagine e conferma HTTP 200.
  4. Conferma che il tipo di contenuto della risposta sia un tipo immagine.
  5. Controlla che l'URL immagine non venga reindirizzato attraverso un muro di autenticazione.
  6. Assicurati che il file immagine non sia enorme.
  7. Conferma che robots.txt non blocchi l'immagine o la pagina.
  8. Cambia il nome del file immagine quando devi forzare una cache fresca.
  9. Ritesta la pagina deployata, non un URL di anteprima locale.
  10. Controlla i tag Open Graph se la card funziona in un'app ma non in un'altra.
Symptom Likely cause Fix
No image appears Missing or relative twitter:image Use a full HTTPS CDN URL
Old image appears Cached preview Publish a new filename and refresh the shared URL
Image appears cropped badly Unsafe composition Re-export with more padding and a central subject
Preview title is wrong Metadata mismatch Align twitter:title, og:title, and the page title
Works locally but not live Local path, auth, or blocked CDN Test the production URL with curl -I

La Crop Image Online Guide è utile quando il soggetto ha bisogno di un ritaglio più sicuro, e Image Aspect Ratio Changer copre la modifica della creatività da quadrato o ritratto in un frame anteprima social.

Checklist pre-pubblicazione

Prima di pubblicare una pagina che dipende dalla condivisione social, rivedi l'immagine e i metadati insieme. Un file WebP perfetto fallirà comunque se il tag punta all'URL di ieri. Metadati perfetti deluderanno comunque se l'immagine è illeggibile nel feed.

Usa questa checklist finale:

  • Il frontmatter o l'immagine CMS è la stessa immagine utilizzata per i metadati social.
  • L'immagine è unica per la pagina o chiaramente rilevante per la pagina.
  • L'URL immagine è HTTPS e pubblico.
  • L'estensione del file corrisponde al formato di risposta effettivo.
  • L'immagine restituisce HTTP 200 dal CDN.
  • Il titolo e la descrizione non sono riempiti di parole chiave.
  • L'immagine di anteprima ha un alt text descrittivo dove appare nel corpo dell'articolo.
  • L'immagine è controllata visivamente a dimensioni desktop e mobile preview.
  • La pagina ha un URL canonico stabile.
  • La card viene ritestata dopo il deployment.

Una buona immagine per la card di Twitter è un piccolo sistema di pubblicazione: un visual chiaro, metadati stabili, un URL CDN veloce e un controllo finale del recupero. Una volta che questi pezzi sono in posizione, l'anteprima ha molta meno probabilità di rompersi durante un lancio o un refresh dei contenuti.

Usa gli strumenti gratuiti mentre segui la guida.

Comprimi un'immagineRimuovi uno sfondo

Continua a leggere

Immagine di copertina di Come Ridimensionare Immagini in Blocco: Strumenti e Script Gratuiti

Tue Mar 03 2026 19:00:00 GMT-0500 (北美东部标准时间)

Come Ridimensionare Immagini in Blocco: Strumenti e Script Gratuiti

Ridimensiona centinaia di immagini contemporaneamente con strumenti online gratuiti, ImageMagick, XnConvert e script Python. Comandi da copiare/incollare, dimensioni predefinite e un flusso di lavoro pratico.