Francesco Schettino

Favicon per la dark mode: Come configurarle

Francesco Schettino — Mon, 30 Mar 2026 11:10:33 +0000

Perché serve una favicon diversa in dark mode

Quando un utente attiva il tema scuro (dark mode), molti browser e sistemi operativi adattano l’interfaccia e i colori dei tab. Se la tua favicon è pensata solo per sfondi chiari (ad esempio un’icona nera su trasparente), su un tab scuro può diventare poco visibile.

Con una favicon per dark mode puoi:

migliorare la leggibilità del tab e dei preferiti
aumentare la riconoscibilità del brand
offrire un’esperienza più curata su macOS, Windows e mobile

Come funzionano le favicon in base al tema (prefers-color-scheme)

I browser moderni supportano le media query CSS anche nei tag link delle favicon. In pratica puoi dichiarare due icone diverse:

una per tema chiaro ((prefers-color-scheme: light))
una per tema scuro ((prefers-color-scheme: dark))

Il browser sceglierà automaticamente quella più adatta.

Requisiti (prima di iniziare)

due file favicon: uno per il tema chiaro e uno per il tema scuro
preferibilmente formati moderni: svg (ottimo), png (ok), ico (compatibilità)
una favicon “dark” con colori chiari (es. bianco) e una “light” con colori scuri

Codice HTML: esempio completo (consigliato)

Inserisci questi tag dentro :

Note:

usa percorsi assoluti (es. /favicon-dark.svg) per evitare problemi con route e sottocartelle
se usi png, sostituisci semplicemente l’estensione

Fallback per browser meno recenti

Alcuni browser potrebbero ignorare la media query. Per sicurezza, aggiungi anche una favicon di default (senza media), che fungerà da fallback:

Suggerimento: metti la favicon “più neutra” come default (spesso quella per light mode, oppure un’icona che regge su entrambi i temi).

Come verificare che funzioni

Apri il sito in Chrome/Edge/Safari.
Cambia tema del sistema (chiaro/scuro).
Ricarica la pagina (talvolta serve un hard refresh).
Se non cambia, prova a:
- svuotare la cache (le favicon vengono cache-ate aggressivamente)
- cambiare nome file (es. favicon-dark-v2.svg) e aggiornare l’href

FAQ

Funziona su tutti i browser?
- Funziona su molti browser moderni, ma non su tutti al 100%. Per questo è utile il fallback.
Meglio SVG o PNG?
- SVG è spesso la scelta migliore perché è leggero e nitido su qualsiasi dimensione, ma verifica la compatibilità del tuo target.
Posso usare più dimensioni?
- Sì, puoi aggiungere sizes (es. 16x16, 32x32) e dichiarare più icone per ciascun tema se necessario.

Conclusione

Configurare una favicon per la dark mode è una piccola modifica che migliora subito l’aspetto del sito. Usando prefers-color-scheme puoi servire automaticamente l’icona giusta in base al tema dell’utente, mantenendo sempre un fallback per la compatibilità.

L'articolo Favicon per la dark mode: Come configurarle proviene da Francesco Schettino.

Cos’è un feed reader?

Francesco Schettino — Tue, 09 Dec 2025 15:30:18 +0000

Un feed reader è uno strumento che raccoglie automaticamente gli aggiornamenti dai siti che segui, così non devi più aprirli uno a uno. Funziona grazie ai feed RSS o Atom, che sono flussi di contenuti standardizzati esposti dai siti.

Il vantaggio principale è l’attenzione: anziché subire gli algoritmi dei social, crei un tuo giornale personalizzato, ordinato per data e senza distrazioni. Se vuoi una panoramica più ampia su come organizzo le mie letture online, dai un’occhiata anche a questo approfondimento.

Come scegliere il feed reader giusto per te

La scelta dipende da tre fattori: dove leggi (desktop, mobile o entrambi), come gestisci l’archivio (salvataggi, tag, ricerca), e se ti servono funzioni extra (filtri, integrazioni, evidenziazioni). Le alternative vanno dalle app minimal alle piattaforme più complete con sincronizzazione multi‑device.

Valuta anche la qualità dell’import/export in formato OPML, utile per migrare facilmente i tuoi abbonamenti. Se ti interessa mantenere il controllo dei tuoi dati e delle tue fonti nel tempo, questo aspetto è fondamentale. Per esempi pratici sull’organizzazione dei contenuti, rimando a questa guida collegata.

Impostare il tuo primo flusso: buone pratiche

Inizia con una lista essenziale di fonti affidabili: blog tecnici, siti di settore e newsletter che offrono anche un feed. Raggruppa per tema, usa cartelle o tag chiari e rimuovi le fonti ridondanti. Meglio pochi flussi di qualità che un fiume di rumor.

Definisci una routine leggera: una o due finestre al giorno per scorrere i titoli, aprire ciò che conta e archiviare il resto. Quando serve, evidenzia e prendi appunti direttamente dal reader o con il tuo sistema di note, così trasformi la lettura in conoscenza riutilizzabile.

L'articolo Cos’è un feed reader? proviene da Francesco Schettino.

Come tracciare eventi Google Analytics tramite Google Tag Manager

Francesco Schettino — Tue, 09 Dec 2025 14:29:53 +0000

Cos’è un trigger in GTM

Un trigger è la condizione che “fa scattare” un tag. Per esempio: premi il pulsante di accensione (trigger) e il computer si avvia (azione). In GTM, quando il trigger si verifica, il tag viene eseguito.

Obiettivo

Tracciare tutti i click nel menu che portano alla pagina “Chi sono”. L’evento sarà inviato a GA4 come evento personalizzato.

Passo 1 – Abilita le variabili di click

In GTM vai su Variabili.
In “Variabili integrate” abilita le voci di Click, come “Click URL” e “Click Text”.

Passo 2 – Crea il trigger di Click

Vai su Trigger → Nuovo.
Tipo di trigger: Click → “Solo alcuni elementi”.
Condizione: “Click URL” contiene “chi-sono”.

Suggerimento: se il tuo URL usa uno slug diverso, adatta il valore. In alternativa puoi usare “Click Text” se la voce di menu ha testo stabile.

Passo 3 – Crea il Tag Evento GA4

Vai su Tag → Nuovo.
Tipo: “Evento Google Analytics: GA4”.
Configurazione tag: seleziona la tua “Configurazione GA4” (o crea un tag di configurazione se manca).
Nome evento: menu_click.
Parametri consigliati:
- link_text: Click Text
- link_url: Click URL
- menu_section: “nav”
Attiva il tag con il trigger creato al Passo 2.

Passo 4 – Debug con Anteprima

Clicca “Anteprima” in GTM e inserisci l’URL del sito.
Nel Tag Assistant, clicca sulla voce di menu “Chi sono”.
Verifica che si attivi il trigger e che il tag GA4 Evento venga eseguito.

Passo 5 – Pubblica

Se tutto è corretto, clicca su Invia → Pubblica per rendere attive le modifiche.

Verifica in GA4

In GA4 vai su DebugView per controllare l’evento in tempo reale.
Dopo la pubblicazione, verifica in “Eventi” che menu_click compaia con i parametri attesi.

Errori comuni e come risolverli

Il trigger non scatta: controlla che la condizione su “Click URL” corrisponda davvero al link del menu. Usa l’Anteprima per leggere i valori reali delle variabili.
Tag non inviato: verifica l’ordine dei tag e che la configurazione GA4 sia presente e pubblicata.
Parametri non visibili in GA4: ricontrolla i nomi dei parametri e attendi la raccolta dati. In Reports standard possono servire mappature personalizzate.

FAQ rapide

Posso usare il testo del link invece dell’URL? Sì, con la variabile “Click Text”. Utile se gli URL cambiano ma il copy resta fisso.
Posso tracciare solo i click del menu desktop? Sì, aggiungi condizioni aggiuntive sul selettore CSS o su attributi distintivi dell’elemento.

Conclusione

Con un trigger di click e un Tag Evento GA4 puoi tracciare le interazioni del menu senza toccare il codice. La stessa logica si applica a bottoni, CTA e link strategici.

Se vuoi una mano a impostare o ottimizzare il tracciamento degli eventi, scrivimi dal modulo di contatto a fondo pagina.

L'articolo Come tracciare eventi Google Analytics tramite Google Tag Manager proviene da Francesco Schettino.

Proprietà CSS text-wrap e text-box: Come Gestire il Wrapping del testo nel 2025

Francesco Schettino — Tue, 26 Aug 2025 11:43:52 +0000

Hai mai notato come alcuni siti web abbiano un testo che si adatta perfettamente al layout, mentre altri sembrano avere parole sparse qua e là senza criterio? Il segreto sta nel controllo del wrapping del testo, un aspetto fondamentale del web design che nel 2025 ha fatto passi da gigante grazie a due proprietà CSS rivoluzionarie: text-wrap e text-box.

Proprietà text-wrap: controllo avanzato del wrapping del testo

La proprietà text-wrap è come avere un assistente personale che sa esattamente come disporre il testo per ottenere il massimo impatto visivo. Non si tratta solo di andare a capo quando necessario, ma di creare un’esperienza di lettura che cattura l’attenzione e mantiene i visitatori incollati alla tua pagina.

Valori disponibili per text-wrap

Il classico wrap: la base di partenza

.element {
  text-wrap: wrap;
}

È il comportamento standard che tutti conosciamo: il testo si adatta automaticamente alla larghezza disponibile. Niente di rivoluzionario, ma sempre affidabile.

Quando serve nowrap: testo su singola riga

.element {
  text-wrap: nowrap;
}

Perfetto per quei momenti in cui vuoi che il testo rimanga su una singola riga, anche se significa uscire dai confini del contenitore. Ideale per navigazioni o elementi che devono mantenere la loro forma.

Il nuovo balance: bilanciamento automatico delle righe

.element {
  text-wrap: balance;
}

Questa è la vera novità del 2024/2025! Immagina di avere un designer che bilancia automaticamente le lunghezze delle righe per creare un aspetto armonioso. È particolarmente magico con titoli e intestazioni.

L’innovativo pretty: ottimizzazione della distribuzione del testo

.element {
  text-wrap: pretty;
}

Ancora in fase sperimentale, ma promette di ottimizzare la distribuzione del testo per eliminare quelle fastidiose righe orfane che rovinano l’estetica del paragrafo.

Esempi pratici di utilizzo

.title {
  text-wrap: balance;
  max-width: 300px;
}

.paragraph {
  text-wrap: pretty;
  line-height: 1.6;
}

Proprietà text-box: controllo preciso dell’allineamento verticale

Se text-wrap gestisce la larghezza, text-box si occupa dell’altezza e dell’allineamento verticale. È come avere un righello digitale che posiziona ogni carattere esattamente dove deve essere.

Valori disponibili per text-box

Il predefinito normal: comportamento standard

.element {
  text-box: normal;
}

Il comportamento predefinito che funziona nella maggior parte dei casi, senza sorprese.

Il preciso trim-start: rimozione spazio superiore

.element {
  text-box: trim-start;
}

Rimuove quello spazio fastidioso sopra la prima riga, permettendo allineamenti pixel-perfect con altri elementi.

Il pulito trim-end: rimozione spazio inferiore

.element {
  text-box: trim-end;
}

Taglia via lo spazio sotto l’ultima riga per un layout impeccabile.

Il completo trim-both: controllo totale degli spazi

.element {
  text-box: trim-both;
}

Combina start e end per un controllo totale degli spazi verticali.

Allineamenti tipografici avanzati: cap, ex e ic

.element {
  text-box: cap; /* Altezza delle maiuscole */
}

.another-element {
  text-box: ex; /* Altezza della 'x' */
}

.cjk-text {
  text-box: ic; /* Centro ideografico per testi asiatici */
}

Combinazioni efficaci per risultati ottimali

.precise-text {
  text-box: trim-both cap;
  text-wrap: balance;
}

Suggerimento importante: Non dimenticare mai i fallback! Anche le tecnologie più avanzate hanno bisogno di un piano B:

.title {
  /* Il tuo salvavita per browser meno recenti */
  white-space: normal;
  /* La magia del futuro */
  text-wrap: balance;
}

Casi d’uso pratici per progetti reali

Titoli ottimizzati per la lettura

h1, h2, h3 {
  text-wrap: balance;
  max-width: 60ch;
}

Paragrafi con distribuzione migliorata

p {
  text-wrap: pretty;
  text-box: trim-both;
  line-height: 1.5;
}

Card con allineamento perfetto

.card-title {
  text-wrap: balance;
  text-box: trim-start cap;
}

Conclusioni

Le proprietà text-wrap e text-box non sono solo strumenti tecnici: sono la chiave per creare esperienze web che i tuoi utenti ameranno. Mentre alcune funzionalità sono ancora in fase di perfezionamento, quelle già disponibili offrono possibilità concrete per distinguerti dalla concorrenza.

La tua roadmap per il 2025:

Inizia subito con text-wrap: balance per titoli e intestazioni

Sperimenta con text-wrap: pretty in progetti pilota

Proteggi sempre i tuoi utenti con fallback appropriati

Testa tutto su diversi browser prima di andare live

Il web del futuro sarà più bello, più leggibile e più coinvolgente. E con queste proprietà CSS, puoi essere parte di questa rivoluzione tipografica fin da oggi. I tuoi utenti (e i motori di ricerca) ti ringrazieranno!

L'articolo Proprietà CSS text-wrap e text-box: Come Gestire il Wrapping del testo nel 2025 proviene da Francesco Schettino.

Google Search Console: Come trovare le query da ottimizzare

Francesco Schettino — Tue, 11 Mar 2025 19:28:05 +0000

Se vuoi dare una marcia in più al tuo sito e scalare i risultati di Google, Google Search Console è il tuo migliore alleato. Ti permette di capire come il tuo sito sta performando, quali pagine hanno potenziale e dove puoi migliorare. Pronto a metterti al lavoro? Ecco una guida pratica e amichevole per ottimizzare la tua SEO passo dopo passo!

1. Trova le pagine con potenziale nascosto

Vai nella sezione “Rendimento” di Google Search Console. Qui trovi una tabella piena di dati preziosi: clic, impression, posizione media e CTR (percentuale di clic). Per iniziare, concentriamoci sulle pagine che possono fare un bel salto in avanti.

Filtra le posizioni: Clicca sul filtro in alto a destra della tabella, seleziona “Posizione” e impostalo su “inferiore a 8”. Perché proprio 8? Semplice: portare una pagina dalla posizione 8 (o meglio) alla prima o seconda pagina di Google è più fattibile rispetto a partire dalla nona pagina in poi.
Ordina per posizione: Scegli l’ordine decrescente (dall’8 in giù) per vedere subito le pagine più vicine al successo.
Scegli una query intelligente: Cerca una query con tante impression (più gente la vede, meglio è) e che abbia senso per il tuo sito. Scarta quelle strane o fuori tema che non vuoi davvero trattare.

Clicca sulla query che ti interessa e passa alla tab “Pagine” per scoprire quali pagine vengono indicizzate e cliccate per quella ricerca. Apri la pagina e chiediti: posso migliorarla? Ecco qualche idea:

Ottimizza il titolo per renderlo più accattivante.
Aggiungi link interni da altre pagine del sito.
Controlla se la homepage può aiutarti a spingere questa query.

2. Caccia al tesoro: trova pagine con alto posizionamento ma basso CTR

Non tutte le pagine in alto su Google ricevono i clic che meritano. Scoviamo quelle con tanto potenziale inespresso!

Filtra le posizioni minori di 3 (quindi 1 o 2).
Ordina la tabella per CTR dal più basso al più alto.
Cerca una query con tante impression ma un CTR deludente. Ad esempio:
- Posizione 2 dovrebbe avere un CTR intorno al 15-30%.
- Posizione 3 tra il 9-15%.

Se il CTR è più basso di così, qualcosa non torna. Cerca la query su Google e analizza:

Il titolo è chiaro e invitante?
La descrizione (meta description) convince a cliccare?
Ci sono immagini, video o snippet che rubano l’attenzione?

Trucco bonus: Se la pagina è schiacciata da snippet, video o annunci, prova a conquistare quegli spazi. Crea un video, ottimizza per uno snippet in evidenza o rendi il contenuto irresistibile.

Nota sugli annunci: Se ci sono pubblicità, significa che la query ha un valore commerciale. Ma se ce ne sono troppe, l’unico modo per emergere potrebbe essere puntare sugli snippet o contenuti multimediali.

3. Controlla la salute della tua sitemap

Una sitemap ben fatta aiuta Google a trovare e indicizzare le tue pagine. Vai su “Sitemap” dalla barra laterale, clicca sulla tua sitemap e dai un’occhiata:

Ci sono errori da correggere?
Pagine escluse che invece vorresti indicizzare?

Risolvere questi problemi è come oliare gli ingranaggi del tuo sito: tutto funzionerà meglio!

4. Dai una spinta ai link interni

I link interni sono come cartelli stradali che guidano Google (e i tuoi visitatori) verso le pagine importanti. Vai su “Links” in Google Search Console e clicca su “Link interni”.

Ordina la tabella per numero crescente di link: troverai le pagine “dimenticate” con pochi o zero collegamenti.
Se una pagina ti interessa, aggiornala con contenuti freschi e aggiungi link da altre parti del sito.

Come trovare dove inserirli? Usa Google: cerca site:tuodominio “parole” “chiave” per scovare pagine rilevanti dove piazzare i tuoi link. Attenzione, però: questo metodo non trova le pagine “orfane” (quelle senza link interni).

Inizia subito!

Con questi trucchi, Google Search Console diventa una miniera d’oro per migliorare la SEO del tuo sito. Filtra, analizza, ottimizza e vedrai le tue pagine salire nei risultati. Hai già provato qualcuno di questi passaggi? Raccontamelo nei commenti del blog, sono curioso di sapere come va!

L'articolo Google Search Console: Come trovare le query da ottimizzare proviene da Francesco Schettino.

Come ottenere il Ruolo di un Utente in WordPress

Francesco Schettino — Tue, 11 Mar 2025 09:10:25 +0000

Se devi assegnare un singolo Ruolo ad un Utente (o rimpiazzare quello attuale), usa quest’altro metodo.

Se devi assegnare multipli Ruoli ad un Utente (per Permessi sulle pagine o accesso a risorse), usa questo metodo.

// get and print the role of the user with user_id = 66

function get_user_role($user_id) {

$user = get_userdata($user_id);

if ($user) {

$roles = $user->roles;

if (count($roles) > 0) {

return $roles;

}

return null;

}

function print_user_role($user_id) {

// echo the ID of the logged user

if(get_current_user_id() != 10)

return;

// customer, remo_gas, remo_luce

// set the roles of user_id = 66 to customer, remo_gas and remo_luce

$user = new WP_User(66);

$roles = array(

‘customer’,

‘remo_gas’,

‘remo_luce’

);

$user->add_role(‘customer’);

$user->add_role(‘remo_gas’);

$user->add_role(‘remo_luce’);

// get the roles of user_id = 66

$role = get_user_role(66);

if ($role) {

foreach($role as $r) {

echo $r;

}

add_action(‘wp_head’, ‘print_user_role’);

L'articolo Come ottenere il Ruolo di un Utente in WordPress proviene da Francesco Schettino.

Come impostare il ruolo di un Utente in WordPress

Francesco Schettino — Tue, 11 Mar 2025 09:10:10 +0000

Scopri come leggere la slug di un Ruolo di uno specifico Utente.

Se devi assegnare multipli Ruoli ad un Utente (per Permessi sulle pagine o accesso a risorse), usa questo metodo.

// get and print the role of the user with user_id = 66

function get_user_role($user_id) {

$user = get_userdata($user_id);

if ($user) {

$roles = $user->roles;

if (count($roles) > 0) {

return $roles;

}

return null;

}

function print_user_role($user_id) {

// echo the ID of the logged user

if(get_current_user_id() != 10)

return;

// customer, remo_gas, remo_luce

// set the roles of user_id = 66 to customer, remo_gas and remo_luce

$user = new WP_User(66);

$roles = array(

‘customer’,

‘remo_gas’,

‘remo_luce’

);

$user->set_role('customer');

$user->add_role(‘remo_gas’);

$user->add_role(‘remo_luce’);

// get the roles of user_id = 66

$role = get_user_role(66);

if ($role) {

foreach($role as $r) {

echo $r;

}

add_action(‘wp_head’, ‘print_user_role’);

L'articolo Come impostare il ruolo di un Utente in WordPress proviene da Francesco Schettino.

Come assegnare multipli Ruoli ad un Utente WordPress

Francesco Schettino — Tue, 11 Mar 2025 09:09:33 +0000

Scopri come leggere la slug di un Ruolo di uno specifico Utente.

Se devi assegnare un singolo Ruolo ad un Utente (o rimpiazzare quello attuale), usa quest’altro metodo.

// get and print the role of the user with user_id = 66

function get_user_role($user_id) {

$user = get_userdata($user_id);

if ($user) {

$roles = $user->roles;

if (count($roles) > 0) {

return $roles;

}

return null;

}

function print_user_role($user_id) {

// echo the ID of the logged user

if(get_current_user_id() != 10)

return;

// customer, remo_gas, remo_luce

// set the roles of user_id = 66 to customer, remo_gas and remo_luce

$user = new WP_User(66);

$roles = array(

‘customer’,

‘remo_gas’,

‘remo_luce’

);

$user->add_role(‘customer’);

$user->add_role(‘remo_gas’);

$user->add_role(‘remo_luce’);

// get the roles of user_id = 66

$role = get_user_role(66);

if ($role) {

foreach($role as $r) {

echo $r;

}

add_action(‘wp_head’, ‘print_user_role’);

L'articolo Come assegnare multipli Ruoli ad un Utente WordPress proviene da Francesco Schettino.

Come ottimizzare PageSpeed Insights

Francesco Schettino — Thu, 06 Mar 2025 10:43:10 +0000

L'articolo Come ottimizzare PageSpeed Insights proviene da Francesco Schettino.

Come migliorare l’indicizzazione di un sito web

Francesco Schettino — Thu, 06 Mar 2025 10:41:46 +0000

Fai una ricerca Google con “site:IL_TUO_DOMINIO.com”, guarda i risultati, nascondi quelli inutili e migliora quelli utili

L'articolo Come migliorare l’indicizzazione di un sito web proviene da Francesco Schettino.