Uno degli aspetti fondamentali per l’ottimizzazione di una pagina web – sia in termini SEO che di user experience – è la cura che puoi avere nei confronti della hero image. Vale a dire l’immagine principale che caratterizza la prima schermata visualizzata sia dall’utente che dal motore di ricerca. Questo contenuto si trova nell’above the fold, vale a dire la parte al di sopra della linea di scrolling.
Non devi lasciare nulla al caso in queste circostanze: sia le conversioni che i parametri di Core Web Vitals si collegano a un buon lavoro di miglioramento dell’immagine principale. Scegliere una buona hero image non è facile e la sua ottimizzazione può avere ripercussioni significative sulle vendite: ecco perché oggi abbiamo deciso di ottimizzare ogni dettaglio di questo contenuto strategico.
Argomenti
Ecco una definizione chiara di questo elemento: la hero image (o hero header) è un elemento visivo di grande impatto, che cattura l’attenzione del lettore, posizionato nella parte superiore di una pagina web, subito sotto la barra di navigazione.
Se ipotizziamo la classica pagina internet votata alla conversione, questo visual occupa parte della sezione above the fold insieme a una headline principale, vale a dire l’H1 della pagina internet, un bottone con call to action e una descrizione. Ovviamente le opzioni sono diverse e devono essere ottimizzate per il mobile. Aspetta, ma perché si chiama così la hero image? Il nome di questo elemento grafico forse ha catturato la tua attenzione: il termine deriva dal mondo della comunicazione pubblicitaria: come un eroe è il centro di una storia, la hero image è l’elemento visivo dominante.
Da leggere: acquista un dominio con nome e cognome
La funzione di questa immagine primaria è stabilire l’identità visiva del brand, comunicare la unique selling proposition o USP – il fattore differenziante che rende un prodotto o un servizio superiore rispetto alla concorrenza – e guidare l’utente verso una call to action.
Grazie all’elemento grafico puoi accogliere il visitatore mostrando cosa puoi offrire, quale sarà il risultato finale nel momento in cui cliccherà sul bottone che consente di acquistare/prenotare il prodotto o il servizio. Ecco perché è importante gestire questo dettaglio.
Per capire meglio di cosa stiamo parlando, può essere utile elencare alcuni esempi di hero shot presi dai siti web di grandi aziende. In questo modo è possibile avere un’idea chiara di come si utilizza, dal punto di vista del marketing, questo prezioso strumento visual.
Come puoi notare, le opzioni sono diverse e possono variare in base al tipo di prodotto o servizio venduto. Calcola che, in alcuni casi, soprattutto per i beni di lusso, al posto del classico hero shot abbiamo un video che fa da sfondo a schermo intero.
Anche se oggi usiamo il termine per qualsiasi foto a tutta larghezza, tecnicamente un’immagine è hero solo se assolve alla funzione di presentare il nucleo centrale del messaggio di quel sito o brand. Questo significa che dovrebbe essere rappresentato il bene che stiamo vendendo. Inserire il bene nell’hero shot è la scelta migliore se vendi un oggetto fisico o un software. Ma non mostrare solo il prodotto isolato, presentalo mentre risolve il problema, aiuta l’utente a immedesimarsi e a capire immediatamente l’utilità.
E se ci occupiamo di servizi? Devi mostrare la condizione che puoi dare al cliente nel momento in cui ti sceglie. Se vendi un servizio o un percorso di trasformazione, non mostrare il processo ma il successo che ne deriva. Un dettaglio tecnico: se nell’immagine c’è una persona, i suoi occhi dovrebbero guardare verso il testo o verso il pulsante (CTA). Il nostro cervello segue naturalmente lo sguardo altrui.
Come ci ricorda questo articolo di hype4.academy, anche fonte immagine, quando la persona nella foto guarda direttamente in camera, la maggior parte dell’attenzione si concentra sugli occhi. Ma se la persona guarda verso la call to action, l’attenzione si sposta. Dove? Esattamente dove vogliamo, ovviamente il tutto deve essere fatto con il giusto equilibrio e senza forzature grafiche.
Come puoi immaginare, stiamo parlando della vetrina che mette in evidenza chi sei, cosa fai e cosa vendi. Quindi devi bilanciare alta qualità e velocità di caricamento. Si utilizzano formati moderni come WebP o AVIF per ridurre il peso del file, mantenendo una risoluzione adeguata senza caricare file troppo pesanti che potrebbero incidere sul largest contentful paint.
Lo stesso vale per le dimensioni: devono essere quelle precise per occupare lo spazio, non maggiori ma neanche inferiori. E oltre a inserire un alt tag descrittivo, nel codice HTML devi aggiungere larghezza e altezza sempre per velocizzare i tempi di caricamento.
Dal punto di vista tecnico e di ottimizzazione Core Web Vitals, la hero image è spesso l’elemento che determina il LCP. Non bisogna caricarla in lazy loading (qui ti spiego come disattivare questa funzione): è il primo elemento visibile, deve essere caricata immediatamente. E se decidi di utilizzare un video breve come hero shot ricorda di rimanere sotto i 5-10 secondi, senza audio.
Hosting gestito: veloce, affidabile, performante
E l’hosting? Il server di qualità è sempre alla base del risultato finale. Puoi ottimizzare l’hero image come preferisci ma se a monte non hai una macchina ben settata, di qualità, pensata per avere le giuste performance con dischi NVMe e cache già installata non si procede. O almeno non come auspichiamo noi quando ci immaginiamo un sito web veloce e stabile fin dalla prima immagine.
