Una scheda prodotto deve portare molte informazioni senza diventare un muro di testo. Le schede a linguetta rispondono a questa esigenza, a patto di non seppellirvi ciò che decide l’acquisto e di restare leggibili dai motori.
Cosa offre PrestaShop in modo nativo
Il tema predefinito mostra linguette già impostate: descrizione, dettagli del prodotto ed eventuali allegati. I moduli installati possono aggiungerne altre, ciascuna agganciandosi allo stesso punto.
Due limiti. Il contenuto di ogni linguetta corrisponde a un campo fisso del prodotto, senza possibilità di crearne altri. E l’ordine è determinato dalla posizione dei moduli, non da un’intenzione editoriale.
Risultato frequente: una linguetta «Recensioni» prima di una linguetta «Caratteristiche», mentre il cliente vuole prima verificare le specifiche.
Linguette o fisarmonica
La questione si risolve in base al formato dello schermo.
Su desktop le linguette orizzontali funzionano bene: tutte le etichette sono visibili, il visitatore vede cosa esiste e sceglie.
Su mobile le linguette orizzontali diventano problematiche. Quattro o cinque etichette non stanno nella larghezza e lo scorrimento orizzontale nasconde le ultime. La fisarmonica verticale, dove ogni sezione si apre sul posto, è nettamente più usabile.
La soluzione che funziona consiste nel passare da un formato all’altro secondo la larghezza, mantenendo lo stesso contenuto e la stessa struttura HTML.
L’indicizzabilità, punto critico
È l’aspetto che la maggior parte delle implementazioni tratta male.
Un contenuto chiuso in una linguetta resta indicizzabile a condizione che sia presente nel codice HTML della pagina, semplicemente nascosto dallo stile. È il comportamento standard e non pone alcun problema.
Un contenuto caricato al clic tramite una chiamata asincrona, invece, non esiste al momento dell’analisi iniziale. Può essere visto in un rendering successivo, ma nulla lo garantisce, e il suo peso nella valutazione della pagina resta incerto.
La regola è quindi semplice: tutto il contenuto delle linguette deve essere presente nell’HTML servito. Il caricamento differito si giustifica solo per elementi pesanti come un video o un elenco di recensioni paginato.
Un punto complementare spesso ignorato: Google dichiara di trattare il contenuto nascosto dietro un’interazione come contenuto di minore importanza nella versione mobile. Non lo squalifica, ma è un argomento per lasciare aperto ciò che conta di più.
Schede Scheda Prodotto PrestaShop — Gestore Drag & DropSchede prodotto su misura, riordinate tramite trascinamento.€79.00
Quali linguette secondo il tipo di prodotto
Tre configurazioni, secondo la natura del catalogo.
Prodotto tecnico. Caratteristiche, compatibilità, documentazione, garanzia e assistenza. La descrizione commerciale resta breve e aperta sopra.
Prodotto tessile o moda. Descrizione, composizione e cura, guida alle taglie, spedizione e resi. La guida alle taglie non dovrebbe stare in una linguetta ma accanto al selettore, mentre la linguetta ospita la versione dettagliata.
Prodotto alimentare o cosmetico. Descrizione, composizione e allergeni, valori nutrizionali o elenco ingredienti, conservazione, origine. Attenzione: le indicazioni obbligatorie devono restare accessibili prima dell’acquisto, cosa che una linguetta consente, ma non devono essere difficili da trovare.
L’ordine
Tre principi.
La prima linguetta è aperta per impostazione predefinita e viene vista dalla quasi totalità dei visitatori. Le successive da una frazione decrescente. Mettete quindi per prima ciò che risolve l’obiezione più frequente su quella categoria.
L’ordine segue il percorso decisionale, non l’ordine amministrativo dei vostri campi. Descrizione, poi verifica tecnica, poi rassicurazione, poi logistica.
L’ordine può variare per categoria. Sui prodotti tecnici le caratteristiche precedono la descrizione. Sull’arredo, il contrario.
Le linguette vuote
Problema sistematico appena la configurazione viene applicata a tutto il catalogo: una linguetta «Documentazione» mostrata su prodotti che non ne hanno.
Il comportamento atteso è la scomparsa automatica di ogni linguetta senza contenuto. È evidente eppure raramente implementato, perché la configurazione si fa prodotto per prodotto nei casi semplici e globalmente negli altri.
Prevedete anche il caso inverso: un contenuto inserito ma nessuna linguetta configurata per accoglierlo, il che rende l’informazione invisibile.
Quante linguette
Quattro o cinque al massimo. Oltre, due effetti si sommano: le etichette non stanno più su una riga e il visitatore smette di leggerle.
Se avete più contenuto, la domanda non è come aggiungere una linguetta, ma se quel contenuto meriti di stare sulla scheda. Un manuale completo sta meglio come download che come sesta linguetta.
Il link diretto a una linguetta
Dettaglio utile e poco costoso: permettere di puntare a una linguetta precisa da un link.
Serve in tre casi: un link «vedi le recensioni» accanto al voto in cima alla scheda, un rimando da una email del servizio clienti e un link da un articolo del blog alla sezione tecnica di un prodotto.
Tecnicamente presuppone che ogni linguetta abbia un identificatore e che lo script apra quella giusta all’arrivo sulla pagina.
Il modulo Linguette Scheda Prodotto per PrestaShop gestisce questa configurazione su PrestaShop 8 e 9: creazione di linguette personalizzate con ordine a trascinamento, configurazione per categoria di prodotto, contenuto presente nell’HTML per restare indicizzabile, scomparsa automatica delle linguette vuote e passaggio a fisarmonica su mobile.