Come nascondere elementi CMS in Webflow: un tutorial pratico

In questo articolo, esploreremo un utile tutorial per Webflow preparato da Nikolai Bain e pubblicato su YouTube.

Il tutorial affronta un problema comune che molti web designer e sviluppatori incontrano quando lavorano con sistemi di gestione dei contenuti (CMS): la gestione di elementi che devono essere presenti in una griglia o elenco, ma che non necessariamente richiedono una pagina di approfondimento dedicata.

‍

Il problema: pagine dinamiche indesiderate

Prima di immergerci nella soluzione, è importante comprendere il problema che stiamo cercando di risolvere.

Webflow, come molti altri CMS, genera automaticamente una pagina dinamica con un URL unico per ogni elemento in una collezione. Questo può essere problematico per diverse ragioni:

1. Pagine vuote o incomplete: Alcuni elementi potrebbero non avere abbastanza contenuti per giustificare una pagina intera.
2. Indicizzazione indesiderata: I motori di ricerca potrebbero rilevare e indicizzare queste pagine, anche se non sono destinate al pubblico.
3. Navigazione confusa: Gli utenti potrebbero trovare link a pagine che in realtà non contengono informazioni utili.

‍

La soluzione: un  "trick" per il controllo della visibilità

Nikolai Bain presenta un metodo elegante per risolvere questo problema, permettendoci di definire quali pagine devono essere visibili e quali no, direttamente nella collezione CMS.

Inoltre, questo metodo ci consente di controllare la visibilità ai motori di ricerca, aggiungendo il suffisso "noindex" nel codice quando necessario.

Passiamo ora alla guida passo-passo per implementare questa soluzione.

‍

Passo 1: aggiornare la collezione CMS

1. Accedi alla tua collezione CMS in Webflow.
2. Vai alle impostazioni della collezione.
3. Aggiungi un nuovo campo di tipo "Option" (Opzione).
4. Nomina questo campo "Visibility" (Visibilità).
5. Crea due opzioni: "All" e "No Index".
6. Salva le modifiche alla collezione.

Questo nuovo campo ci permetterà di controllare la visibilità di ogni singolo elemento nella collezione.

‍

Passo 2: configurare gli elementi della collezione

Ora che abbiamo aggiunto il campo di visibilità, dobbiamo configurare ogni elemento nella nostra collezione:

1. Per gli elementi che devono avere una pagina completa e essere visibili, imposta la visibilità su "All".
2. Per gli elementi che non necessitano di una pagina dedicata o che non devono essere indicizzati, imposta la visibilità su "No Index".

Questa configurazione ci darà il controllo granulare necessario per gestire la visibilità di ogni elemento.

‍

Passo 3: aggiungere codice personalizzato alla pagina del template

Il prossimo passo è aggiungere del codice personalizzato al template della pagina della collezione. Questo codice dirà ai motori di ricerca se devono indicizzare la pagina o meno.

1. Vai alle impostazioni della pagina del template della collezione.
2. Scorri fino alla sezione "Custom Code" (Codice personalizzato).
3. Nel campo "Head", aggiungi il seguente codice:

‍

<meta name="robots" content="" />

tra le virgolette andremo ad inserire il campo dinamico creato nel CMS con il nome visibility

‍

Questo codice inserirà un meta tag che indica ai motori di ricerca come trattare la pagina, basandosi sul valore del campo "Visibility" che abbiamo creato.

‍

Passo 4: controllo della visibilità del contenuto della pagina

Ora vogliamo assicurarci che il contenuto della pagina sia visibile solo quando necessario:

1. Vai alla pagina del template della collezione.
2. Seleziona il wrapper principale del contenuto della pagina.
3. Nelle impostazioni di questo elemento, aggiungi una condizione di visibilità:
   • Mostra quando: Visibility equals All

Questo assicurerà che il contenuto della pagina sia visibile solo per gli elementi che abbiamo impostato come "All" nella collezione CMS.

‍

Passo 5: gestire i link nella pagina di elenco

L'ultimo passo è assicurarci che nella pagina che elenca tutti gli elementi della collezione, i link vengano mostrati solo per gli elementi che hanno una pagina completa:

1. Vai alla pagina che elenca tutti gli elementi della collezione.
2. Seleziona il pulsante o il link che porta alla pagina del singolo elemento.
3. Aggiungi la stessa condizione di visibilità:
   • Mostra quando: Visibility equals All

Questo nasconderà i link per gli elementi che non hanno una pagina completa, evitando confusione per gli utenti.

‍

Vantaggi di questo approccio

Implementando questo metodo, otteniamo diversi vantaggi:

1. Controllo granulare: Possiamo decidere elemento per elemento quali devono avere una pagina completa e quali no.
2. SEO ottimizzato: Evitiamo l'indicizzazione di pagine vuote o non necessarie, migliorando la struttura del nostro sito agli occhi dei motori di ricerca.
3. Esperienza utente migliorata: Gli utenti vedranno solo link a pagine con contenuti reali e utili.
4. Flessibilità: Possiamo facilmente cambiare la visibilità di un elemento in qualsiasi momento senza dover modificare il codice o la struttura del sito.

‍

Applicazioni pratiche

Questo trucco non si limita solo alle integrazioni di un prodotto. Ci sono molte altre situazioni in cui può essere utile:

1. Team Members: In una pagina "Chi siamo", potresti voler mostrare tutti i membri del team, ma avere pagine biografiche complete solo per alcuni di essi.
2. Caratteristiche del prodotto: Potresti elencare tutte le caratteristiche di un prodotto, ma avere pagine dettagliate solo per le caratteristiche principali.
3. Portfolio: In un portfolio di progetti, potresti voler mostrare tutti i lavori, ma avere case study dettagliati solo per alcuni.
4. Eventi: In un calendario di eventi, potresti voler elencare tutti gli eventi, ma avere pagine dettagliate solo per quelli principali o futuri.

‍

Considerazioni aggiuntive

Mentre questo metodo è estremamente utile, ci sono alcune considerazioni da tenere a mente:

1. Prestazioni: Assicurati che la creazione di pagine "nascoste" non impatti negativamente sulle prestazioni del tuo sito.
2. Manutenzione: Ricorda di aggiornare regolarmente lo stato di visibilità degli elementi man mano che il tuo contenuto evolve.
3. Coerenza del design: Assicurati che la tua interfaccia utente rimanga coerente, indipendentemente dal fatto che alcuni elementi abbiano o meno una pagina dedicata.

‍

‍

Il tutorial di Nikolai Bain ci offre una soluzione elegante e potente per un problema comune in Webflow e in altri CMS.

Implementando questo metodo, otteniamo un maggiore controllo sui nostri contenuti, miglioriamo l'esperienza utente e ottimizziamo il nostro sito per i motori di ricerca.

Ricorda che la chiave per utilizzare efficacemente questo metodo è la pianificazione.

Prima di implementarlo, prenditi del tempo per valutare attentamente quali elementi della tua collezione CMS necessitano di pagine complete e quali no. Inoltre, considera come questa struttura si adatterà alle future esigenze del tuo sito web.

Infine, non dimenticare di testare accuratamente dopo l'implementazione.

Assicurati che tutti gli elementi siano visualizzati correttamente, che i link funzionino come previsto e che i motori di ricerca stiano indicizzando (o non indicizzando) le pagine come desiderato.

Con questo potente strumento nel tuo arsenale di web design, sarai in grado di creare siti web più puliti, più organizzati e più efficaci in Webflow. Buon lavoro!

‍