Come importare una pagina web da un URL e ottenere un’email che rende bene in tutti i client

Vuoi importare HTML da un URL per trasformare una pagina web (landing page, offerta, articolo, pagina prodotto) in una newsletter pronta da inviare? È uno dei workflow più richiesti perché fa risparmiare tempo… ma è anche uno dei motivi più frequenti per cui una campagna “perfetta sul sito” diventa un disastro in posta.

La realtà è semplice: un client email non è un browser. Gmail, Outlook, Apple Mail e le app mobili interpretano HTML e CSS in modo diverso, spesso con limitazioni importanti.

Con Mailpro puoi importare il codice direttamente da un URL: Importa Newsletter HTML da un URL. In questa guida ti mostro cosa si rompe più spesso, perché succede e come sistemarlo in modo pratico (senza perdere ore).

Perché “pagina web → newsletter” si rompe (quasi sempre) da qualche parte

Le pagine web moderne usano tecnologie che nelle email vengono bloccate o supportate solo in parte:

• JavaScript (nelle email è quasi sempre disabilitato)
• CSS moderno (flexbox/grid/positioning avanzato: spesso problematico, soprattutto in Outlook)
• CSS esterno (file .css linkati: possono essere ignorati o “ripuliti”)
• Font web (non sempre supportati)
• Percorsi relativi per immagini e risorse (es. /img/banner.jpg)
• Elementi interattivi (caroselli, menu, popup): in email non funzionano come sul web
• Blocchi immagini (molti provider mostrano le immagini solo dopo un clic dell’utente)

Se vuoi rinfrescare le basi, ecco due definizioni utili dal glossario Mailpro: Che cos’è HTML? e Che cos’è un’email responsive?.

Come importare HTML da un URL in Mailpro (passo dopo passo)

1. Scegli l’URL giusto
   Idealmente una pagina stabile, pubblica, con contenuti presenti già nel markup HTML (non generati solo via JS).
2. Importa l’HTML dall’URL
   Vai alla funzione: Importa Newsletter HTML da un URL e incolla l’indirizzo della pagina.
3. Controlla subito le 3 cose che rompono quasi sempre:
   • Immagini: si caricano tutte? Hanno URL assoluti?
   • Link: puntano al dominio giusto (non staging)? Sono cliccabili?
   • Layout: è “da browser” (grid/flex) o “da email” (blocchi semplici)?
4. Stabilizza in editor
   Se l’HTML importato è troppo “web”, spesso conviene ricostruire i blocchi critici (hero + CTA + footer) con il builder: Creare newsletter.
5. Test anti-spam prima dell’invio
   Testate la vostra newsletter con il nostro anti-spam
6. Invia test (Gmail + Outlook + almeno 1 telefono) e solo dopo manda la campagna.

Alternative utili in base al tuo scenario:

• Se hai già un template email “pulito” e vuoi incollare/importare codice: Importazione di HTML
• Se vuoi imparare rapidamente come fare import da file, URL o codice: Video tutorial

Prima di importare: rendi la pagina “import-friendly” (le regole 80/20)

Se controlli la pagina (o puoi chiedere al designer di prepararla), queste regole riducono drasticamente i problemi:

• Niente JS per contenuti essenziali: testo e CTA devono esistere già nell’HTML.
• CSS critico inline: le regole fondamentali (font, colori, spaziatura) meglio inserirle inline.
• Solo URL assoluti per immagini e link (sempre https://...).
• Layout semplice: 1 colonna o blocchi lineari (le email adorano la semplicità).
• Immagini ottimizzate: peso ridotto, dimensioni corrette, ALT text sempre.
• Larghezza email-friendly: spesso 500–600px per il contenuto principale è un valore “safe”.

A proposito di dimensioni e layout: utile anche questo articolo Dimensione ideale della newsletter.

Cosa si rompe più spesso dopo l’import da URL (e come risolverlo davvero)

Qui sotto trovi una tabella “problema → causa → fix” che puoi usare come checklist interna.

1) CSS che sparisce (o viene “ripulito”)

Sintomo: colori, font, colonne, allineamenti… sembrano diversi rispetto al sito. È normalissimo: molti client email limitano i CSS, soprattutto quelli esterni o avanzati.

Fix consigliati:

• Metti le regole essenziali in inline CSS (soprattutto su testi e bottoni).
• Riduci layout “complesso” e preferisci blocchi semplici.
• Se il design è critico: ricostruisci header/hero/CTA con il builder: Creare newsletter.

2) Immagini che non caricano: quasi sempre colpa dei percorsi

Sul web un /images/banner.jpg funziona. In email spesso no. Regola d’oro: ogni immagine deve avere un URL assoluto: https://tuodominio.it/images/banner.jpg

• Assicurati che le immagini siano pubbliche (niente login / niente blocchi IP).
• Aggiungi ALT text (molti inbox bloccano le immagini di default).
• Ottimizza peso e dimensioni (meno MB = più deliverability e più conversioni).

Approfondimento utile: Come usare le immagini nell’email marketing e Rapporto immagine/testo.

3) Outlook: il test più duro (e più importante)

Outlook (soprattutto su Windows) è famoso perché rende l’HTML in modo diverso dagli altri client. Quindi sì: può essere perfetto in Gmail e “rotto” in Outlook.

FAQ ufficiale Mailpro con spiegazione e consigli: La mia Campagna Email non viene visualizzata bene su Outlook.

Fix affidabili:

• Evita flex/grid per la struttura principale (specialmente per colonne critiche).
• Preferisci blocchi lineari o tabelle dove serve stabilità.
• Ricostruisci CTA importanti nel builder (più compatibile): Creare newsletter.

4) Responsive su mobile: leggibilità prima di tutto

Riutilizzi contenuti web? I piani di Mailpro importano l’HTML da qualsiasi URL nell’editor — trasforma una pagina in newsletter in pochi minuti.

Non basta “stare dentro lo schermo”. Una newsletter mobile-friendly deve essere: leggibile, cliccabile e senza scroll orizzontale.

Definizione e concetti: Email reattiva (responsive). Funzionalità dedicata: Progettazione di Newsletter Responsive.

5) Link e CTA: controlla ogni clic (davvero ogni clic)

Dopo l’import da URL, è comune trovare:

• link che puntano a staging o al dominio sbagliato
• link relativi (non funzionano bene in email)
• anchor interni (tipo “vai alla sezione prezzi”) non sempre affidabili
• URL lunghi che si spezzano male o vengono riscritti

Tip utile per SEO e chiarezza: usa un testo di ancoraggio descrittivo (non “clicca qui”). Definizione: Che cos’è il testo dell’ancora?. Se vuoi una definizione più generale: Che cos’è un iperlink?.

6) Spam score dopo import: testa prima di inviare

L’HTML importato dal web può aumentare il rischio spam, soprattutto se:

• ci sono link rotti o redirect strani
• il rapporto testo/immagini è sbilanciato
• ci sono parole “trigger” o formattazioni aggressive
• il messaggio è pesante e lento da caricare

Prima di inviare, usa: Test Anti-Spam e, se vuoi anche la FAQ pratica: Esiste un modo per verificare il mio livello di SPAM?. Per consigli generali: Come evitare i filtri antispam?.

7) Caratteri strani (accenti rotti, simboli “misteriosi”)

Questo succede spesso quando contenuti vengono copiati da Word o da editor che aggiungono formattazioni invisibili. Mailpro ha una FAQ passo-passo: Perché il mio messaggio mostra caratteri speciali?.

8) Disiscrizione e web-version: rendile “a prova di import”

Quando importi una pagina web, spesso mancano gli elementi tipici delle email (web version, disiscrizione). Con Mailpro le disiscrizioni sono gestite automaticamente: Gestione delle Disiscrizioni.

Ma se vuoi controllare testo e posizione dei link, usa le variabili: $WebVersion$ e $UnsubscriptionLink$. Guida pratica: Come eliminare o modificare un link di cancellazione?.

Due strategie “salvavita” quando l’import da URL è troppo “web”

Strategia A: importare un vero template email (non una pagina web)

Se il tuo team può produrre un HTML pensato per email (CSS inline, struttura semplice), spesso è più affidabile importare direttamente il codice: Importazione di HTML.

Strategia B: usare l’import come fonte contenuti, e ricostruire layout nel builder

Questo è il metodo “pro” quando la pagina originale usa grid/flex/JS: importi per recuperare testi e immagini, poi ricostruisci hero/CTA/sezioni nel builder per massima compatibilità. Strumento: Creare newsletter.

Bonus performance: personalizzazione (trasforma un “copia e incolla” in una campagna che converte)

Importare HTML ti fa risparmiare tempo. Ma spesso il salto di performance arriva dalla personalizzazione: nome, città, offerta, contenuti diversi per segmenti.

• Funzionalità dedicata: Uso dei campi dinamici
• Pagina campagne (con riferimenti a campi dinamici): Campagne Email
• Approfondimento: Consigli di personalizzazione email

Deliverability: un fix piccolo che aiuta tanto (SPF)

Se stai inviando newsletter, l’autenticazione aiuta a finire in inbox. Un ottimo primo passo è configurare SPF: Configurazione SPF. (Se vuoi anche una pagina “spiegata semplice”: Che cos’è SPF?)

Se l’import è troppo complicato: parti da un modello e incolla i contenuti

A volte il modo più veloce per avere un risultato stabile è scegliere un template responsive e sostituire testi/immagini. Galleria: Oltre 500 modelli email professionali e responsive.

FAQ rapide (importare HTML da URL)

Posso importare qualsiasi pagina web e inviarla così com’è?

Non sempre. Le pagine che dipendono da JavaScript o layout moderni complessi (grid/flex) spesso richiedono semplificazioni o una ricostruzione parziale nel builder. Se puoi, crea una versione “statica” della pagina (HTML con contenuti già presenti).

Perché in Gmail è ok e in Outlook no?

Outlook rende l’HTML in modo diverso e supporta meno CSS moderni. Vedi la FAQ: Problemi Outlook sulla campagna email. In pratica: semplifica struttura e fai test specifici su Outlook.

Cosa è meglio: import da URL o import del codice HTML?

Import da URL è perfetto per workflow “designer pubblica → marketing importa”: Importa da URL.
Import del codice HTML è spesso più stabile se il template è già ottimizzato per email: Importazione di HTML.

Come faccio a capire subito se finirò in spam?

Fai un controllo prima dell’invio: Test Anti-Spam. Per regole di base: Come evitare filtri antispam.

Checklist finale “prima di cliccare Invia”

• Immagini: URL assoluti HTTPS + pubbliche + ALT text
• Link/CTA: clicca tutto, evita link relativi, testo ancoraggio descrittivo
• CSS/Layout: inline per parti critiche, struttura semplice
• Outlook: test dedicato; se rompe, ricostruisci blocchi chiave
• Mobile: 1 colonna, font leggibile, bottoni grandi
• Anti-spam: test + bilanciamento testo/immagini
• Disiscrizione/WebVersion: gestite correttamente, eventualmente con $UnsubscriptionLink$ e $WebVersion$

Workflow super pratico: Importa da URL → aggiusta immagini/link/CSS → stabilizza con Creare newsletter → controlla con Anti-Spam → test → invio.