Nell'ultimo giorno del Search Marketing Connect, in Plenatia, dopo che @giocappellotto aveva anticipato l'argomento (sulla tematica e-commerce), ho approfondito le architetture "headless".

In questo thread, sintetizzo l'intervento in un take away, e possiamo parlarne insieme

1) Quali sono i 3 desideri delle aziende relativamente allo stack tecnologico?
La risposta che mi sono dato è questa: flessibilità, scalabilità e prestazioni su tutti i touchpoint. Quindi una struttura che si innesta facilmente nei flussi dei brand, che può evolversi rapidamente e che offre un’esperienza straordinaria agli utenti. Questi sono esattamente gli obiettivi di un’architettura "headless"!

2) Cos'è un CMS Headless?
Si tratta di un sistema che fa quello che dovrebbe fare un Content Management System, ovvero gestire i contenuti. E lo fa in una struttura che separa il back-end, che metaforicamente rappresenta il “corpo” del sistema, dal front-end, che invece rappresenta la "testa". Un’altra caratteristica fondamentale di questa architettura è che i contenuti vengono gestiti attraverso API, per ottenere l’esposizione a diversi tipi di dispositivi e piattaforme.
Nei post linkati in precedenza e nel video che segue riporto alcuni schemi che approfondiscono più dettagliatamente il funzionamento.

3) È solo questione di stack tecnologico?
No, non è solo questione di stack tecnologico, infatti il sistema che segue potrebbe non essere considerato un sistema headless.

Perché? Perché va considerata anche la modalità con la quale vengono gestiti i dati!
In un sistema headless i dati devono essere salvati per essere visualizzati indipendentemente dalla piattaforma di destinazione.
Questo significa che non possono essere contaminati da parti di front-end.

4) Perché oggi sta aumentando l’interesse verso i sistemi headless?
Prima di tutto si tratta di un’evoluzione naturale dell’architettura: separare le componenti, e quindi svincolarle l'una dall'altra, permette ad ognuna di raggiungere livelli superiori in termini proprio di scalabilità, flessibilità e prestazioni! Quindi abbracciamo il concetto iniziale (punto 1) e aggiungiamo che i brand hanno la necessità di strutturazione e di creare esperienze sempre migliori per gli utenti.. il tutto supportato da una forte accelerazione tecnologica.

5) Come si sta evolvendo l'architettura nel mondo?
Lo vediamo in alcuni punti.

• Automattic, gruppo che possiede WordPress, ha acquisito Frontity (un framework React) per potenziare il front-end. Ma di fatto inizia un percorso per rendere il CMS più diffuso al mondo, un CMS headless.
• In casa Salesforce, leader mondiale in ambito di CRM, si parla di headless commerce, che si innesta nel loro ecosistema per migliorare la customer experience. Non a caso hanno acquisito Mobify recentemente: un brand specializzato in API e front-end dedicati all’e-commerce.
• Lo scenario dei CMS headless si sta espandendo sempre maggiormente. Tra i più noti possiamo nominare Ghost, Contentful e Sanity.
• Magento e Shopify possiedono già la loro versione headless. Entrambi, per descriverla, parlano di "nuove e performanti esperienze su tutti i touchpoint".

6) L'evoluzione del front-end
L'evoluzione dei CMS headless, comporta un'enorme crescita anche in ambito front-end, grazie, ad esempio ad architetture definite JAMstack, quindi basate su Javascript. Durante l'intervento ho parlato dei framework Javascript che sono stati definiti i migliori nel 2021, e sono Gatsby a Hugo, NuxtJS, Jekyll e NextJS.
Secondo Http Archive, la page experience dei siti web sta migliorando, e quelli con front-end sviluppato attraverso un framework Javascript, sono proprio quelli con il maggior incremento di miglioramento.

7) I pro e i contro di un'architettura headless
Un'architettura headless, come abbiamo visto, ha diversi pro: possiamo ottenere una gestione dei dati migliore, e una migliore qualità di sviluppo, uniti ad una User Experience straordinaria su tutti i touchpoint.
Il contro? Le competenze richieste. Un sistema headless non è semplice da gestire. Serve un pensiero digitale maturo e un grande know-how tecnico.

Quindi.. Lo scenario digital sarà sempre più "headless"? La risposta è nel far quadrare questo bilancio.

Risorse

• Magento Headless
• Shopify Headless
• CMS Headless e JAMstack: un nuovo paradigma all'insegna delle prestazioni
• Contentful
• Sanity
• Ghost

Voi cosa ne pensate?

Chrome 97, nella console, ha una nuova tab denominata "Recorder".
A cosa serve?
Serve a registrare una sessione di navigazione, con la possibilità di rivederla (anche simulando connessioni più lente e aggiungendo/rimuovendo azioni post registrazione), e di misurare le performance di tutto il flusso.
Infine è possibile esportare lo script JS per automatizzare l'azione con Puppeteer.

La documentazione: https://developer.chrome.com/docs/devtools/recorder/

Buon divertimento

Ho scritto una piccola guida per chi vuole avvicinarsi (da zero) al mondo della Browser Automation.
L'evoluzione della SEO, anche non il con il concetto di Page Experience, credo debba affacciarsi anche a strumenti di questo tipo.

Per farlo ho utilizzato Puppeteer, una libreria in Node.JS (suggerita da Google) che permette di usare Chrome via API. Fondamentalmente è in grado di fare tutte le operazioni che potrebbe mettere in atto un utente all'interno di un sito web.

Alcuni esempi di attività per la quali è davvero molto utile possono essere le seguenti:

• generare screenshot (anche in PDF) di pagine web,
• scansionarle e creare contenuti pre-renderizzati,
• automatizzare l'invio di form, testare le interfacce, input da tastiera, ecc.,
• misurare le prestazioni e diagnosticare problemi tracciando la "timeline",
• creare un ambiente di test automatizzato e sempre aggiornato.

Sono solo esempi, ma le potenzialità sono pressoché infinite.

Questo è un esempio in cui attraverso un'automazione apre il sito web di Amazon, clicca l'accettazione dei cookie (e fa il primo screenshot), scrive "smart speaker" nel campo di ricerca (e salva il secondo screenshot), avvia la ricerca (terzo screenshot), infine fa uno scroll-down (e fa il quarto screenshot). Il tutto emulando la navigazione da un iPhone 6, e in modalità headless (senza aprire il browser).

Nella guida faccio vedere altri esempi di automazioni come il crawling di un sito web salvando l'alberatura in Json e facendo uno screenshot di tutte le pagine, oppure un testa a testa per mettere a confronto le velocità di caricamento dei siti web emulando il dispositivo, la CPU e anche la velocità di connessione.

Con un'automazione, ad esempio, puoi vedere tutta l'evoluzione delle SERP features per determinate query, su dei report che arrivano in mail. Oppure capire velocemente come i competitor dispongono gli elementi in pagina.

Ecco la guida: http://bit.ly/browser-automation-puppeteer

#UX #CRO

Come dico sempre, si tratta di uno strumento. Io non ho la minima pretesa di avere un copy virtuale basato su algoritmi che scrive per me o su progetti in cui lavoro.

Però posso ottenere un valido aiuto. Un aiuto che mi permette di non dover leggere, magari 50 post prima di poter scrivere qualcosa di sensato sul tema, perché un algoritmo può farlo al posto mio in qualche secondo, sintetizzando ed estraendo anche le tematiche trattate.

Idem per i video. Stamattina ho pubblicato un esperimento in cui do in pasto a due algoritmi dei video ed ottengo la trascrizione, una descrizione breve, una lista dei topic e il riassunto. Se devo scrivere su un tema, posso evitare di guardare 10 ore di video perché un algoritmo lo fa al posto mio.

A questo servono gli algoritmi: sono strumenti che riducono l'effort dando spazio ad altro che ci può differenziare maggiormente.

Aggiungo.. cosa significa "qualcosa di nuovo"? Nel mio blog tratto tematiche in cui rifletto e racconto i miei pensieri. Ma non sono temi nuovi. Per poter fare delle riflessioni, però ho bisogno di studiare, di leggere, di fare test , di guardare video. Se posso ridurre parte di questo lavoro, magari abbattendo barriere come la lingua, per me è un enorme plus. Perché posso concentrarmi maggiormente sui test e sul pensiero.

NOTA: io sono il nemico numero uno dei contenuti spazzatura! Infatti quando parlo di questi temi, racconto di come si integrano in un flusso di produzione di contenuti (ovviamente "human in the loop"), e non di come produrre sistemi per pubblicare automaticamente schifezze

Perché ricordiamoci sempre che (ogni tanto me lo ripeto) i nostri figli useranno/usano il web che noi popoliamo.

Attraverso le API di Business Messages sarà possibile creare esperienze conversazionali attraverso un agente #Dialogflow direttamente in SERP.

Grazie a questa funzionalità, i brand potranno integrare i loro sistemi di customer service ai Business Messages, e dialogare con gli utenti che arrivano dalle ricerche (Search e Maps), attraverso Google My Business.

Attraverso strumenti come Dialogflow e le API di Business Messages sarà possibile accedere al catalogo prodotti e alle informazioni degli store. Sarà possibile rispondere alle domande ricorrenti e consigliare un prodotto direttamente in SERP.

Un test sul campo

Per approfondire

• Il post di Google: https://www.blog.google/products/maps/now-sending-business-messages-google-maps-and-search/
• Il Tweet di Dialogflow: https://twitter.com/Dialogflow/status/1278378146526629889

#chatbot #conversationalAI #BusinessMessages #GMB

Due esempi di utilizzo di ChatGPT a supporto di analisi SEO tecniche.

1) Generazione di uno script JavaScript che, incollato nella console di Chrome, evidenzia tutti i tag heading e li riepiloga.

Il prompt:

Il risultato inserendo il JS nella console di Chrome:

Aggiungo un dettaglio, ovvero chiedo il riepilogo dei tag heading della pagina nella console:

Il risultato nella console:

2) In evidenza tutte le immagini con controllo del testo alternativo e riepilogo in console.

Il prompt:

Il risultato:

In console il riepilogo:

Sono esempi molto semplici che fanno capire come possiamo usare ChatGPT per creare script che analizzano e modificano il DOM per velocizzare il nostro lavoro.

Questi script, messi ad esempio in un segnalibro diventano sempre disponibili con un clic.

Non poteva mancare un plugin per #WordPress che offre "l'ottimizzazione con un clic per Web Core Vitals".
Mi viene da urlare
Giuro che mi stavo chiedendo come mai nessuno fosse ancora uscito con la genialata.

E cosa fa? Andiamo a vedere:

• Optimize CSS Loading
• Defer Non-Essential JavaScript
• Lazy Image Loading

Io vorrei fare un appello.
Prima di installare plugin come se piovesse, va capito cosa fanno, va capito dove agiscono, va studiato il tema.
E' necessario essere "padroni" del mezzo: non possiamo pensare che uno, due, dieci plugin siano sempre la soluzione ottimale a tutto.. soprattutto se ragioniamo in termini di prestazioni.

Anche perché le funzionalità che questo plugin va ad implementare, molto probabilmente sono già svolte anche da altri già installati.. ne butto là due a caso? Autoptimize e W3 Total Cache?
Forse questo plugin svolge meglio queste operazioni? Può essere, ma non è questo il punto.

Io credo che oggi, l'improvvisazione sia alle strette, e l'opzione "no-code", o comunque "no-studio" e "no-rotture", non possano essere prese in considerazione da chi vuole avere una soluzione professionale e performante.

Grazie

Qui ne parlano: https://www.searchenginejournal.com/jetpack-boost-for-core-web-vitals-optimization/403166/
Qui, il luogo del delitto: https://wordpress.org/plugins/jetpack-boost/

#CoreWebVitals

Il titolo è già abbastanza "parlante"
Ecco le note di rilascio: https://helpx.adobe.com/photoshop/using/whats-new/2022-1.html

Considerando i tempi, consiglierei ad Adobe di mettersi già a lavorare su #AVIF

Ora, visto che per qualcuno il motivo della diffusione pigra di #WebP era proprio la mancanza di supporto di Photoshop, direi che non ci sono più scuse, alla luce di quello che dicevamo qui: https://connect.gt/topic/242508/avif-in-arrivo-il-nuovo-formato-immagini-di-casa-netflix-in-un-browser-vicino-a-te/5?_=1645092972311

Chrome può misurare la quantità di JavaScript inutilizzato nelle pagine web? Si tratta della tab "copertura".
Utilissimo per riuscire a migliorare le performance!

Come attivare la tab: DevTools > opzioni (menu a 3 pallini a dx) > altri strumenti > copertura

La documentazione: https://web.dev/remove-unused-code/

#JavaScript #performance

Search Console introduce il monitoraggio delle pagine pubblicate attraverso HTTPS.

Utilissimo per avere la situazione sotto controllo (per eventuali problemi con risorse di terze parti, ad esempio), anche se oggi l'88% delle pagine web in versione desktop e l'85% in versione mobile utilizzano HTTPS (dato di Web Almanac di HTTP Archive).

Che per me, comunque, è un dato ancora scarso!

Lancio una nuova idea.

La generazione di FAQ (domande e risposte) partendo dai dati del prodotto, con relativi dati strutturati.
Potrebbe essere fatto tutto con le API di GPT-3, ma è interessante anche usare un mix con la ChatGPT, comoda per la formattazione del JSON e il tasto "copia".

Quindi..

• il prompt per GPT-3 trasforma i dati del prodotto in FAQ (nell'esempio anche categorizzate);
• l'output va a comporre dinamicamente il prompt per per un'altra richiesta che genera i dati strutturati.

Ciao ragazzi,
con emozione, metto il mio primo post sulla nuova categoria dedicata a Voice e Podcast.

E lo faccio presentandovi proprio un podcast sulla Voice Technology.
Si tratta di un mio progetto in cui, in una "pillola" settimanale, racconto questo mondo

Eccolo nei diversi canali:

• Apple Podcast: http://bit.ly/apple-vt-podcast
• Spotify: http://bit.ly/spotify-vt-podcast
• Spreaker: http://bit.ly/spreaker-vt-podcast
• Google Podcasts: http://bit.ly/google-vt-podcast

Lo trovate anche a disposizione via Google Action e Skill, pronunciando:

• Google Assistant: "Hey Google, parla con Voice Technology Podcast"
• Alexa: "Alexa, apri Voice Technology Podcast"

Cosa ne pensate?
Ogni feedback è ben accetto

Grazie.

Ricordi il vecchio tool di Google per l'analisi dei dati strutturati? Quello che più o meno tutti i SEO temono venga deprecato a favore del nuovo Test dei Risultati Multimediali..

Bene, da oggi è a disposizione su Schema.org!
Eccolo: https://validator.schema.org/

Si tratta di una versione beta, ma di fatto è lo stesso strumento, che verrà migliorato ed integrato in tutto il sito.

Il post ufficiale di Schema.org: http://blog.schema.org/2021/05/announcing-schema-markup-validator.html
(notare che hanno il sito web senza https.. resto calmo solo perché sono il riferimento per i dati strutturati )

Molto interessante anche il riferimento alle tipologie di dati strutturati ottenuto scansionando svariati milioni di pagine web nel 2020: http://webdatacommons.org/structureddata/#results-2020-1
Sono molto stupito dall'ancora elevato utilizzo di microdati, rispetto al formato JSON-LD. Ma credo che per buona parte derivi dal fatto che molti temi per i vari CMS li incorporano già.

#DatiStrutturati

Per chi utilizza l'analisi della "copertura" dei DevTools di Chrome, segnalo un tool interessante per separare facilmente il CSS utilizzato in pagina da quello non utilizzato.

PREMESSA
La "copertura" nei DevTools, permette di individuare quali parti dei CSS vengono effettivamente utilizzati in pagina.
Tale visualizzazione consente di esportare un file JSON con tutti i dettagli.
Caricando quel file JSON nel tool che segue, questo permette di separare il CSS usato da quello non usato.
Questo è un primo passo per alleggerire i CSS in pagina per progetti non troppo strutturati.

IL TOOL
Copiando ed incollando la stringa JSON, otterremo il CSS necessario e quello non utilizzato.
https://nachovz.github.io/devtools-coverage-css-generator/

@giorgiotave, bel caso ed osservazione.
Faccio due riflessioni cogliendo questi risultati.

La prima è che potrebbe essere che "label" sia ormai un termine utilizzato abitualmente in lingua italiana. Magari in determinati settori maggiormente. Altri segnali.

La seconda è che comunque, indipendentemente dal primo punto, la direzione dell'abbattimento delle barriere linguistiche ci porterà probabilmente ad ottenere sempre più uniformità tra i termini, sempre più traduzioni automatiche, sempre più risultati estratti da fonti in lingue diverse. Ne ha parlato Google quando ha introdotto MUM, ma vediamo anche i recenti test con gli audio nella tua lingua dentro i knowledge panel (indipendentemente dalla lingua del pannello), ma anche dai progetti Aloud e Relate (e qui si tratta solo di barriere di lingua, ma anche di linguaggio), fino ad arrivare a Facebook, che come molti altri top player della tecnologia, sta lavorando alla traduzione in real-time mantenendo la voce di chi si esprime.

Nel panorama dei framework JavaScript più interessanti aggiungerei Astro.
Funziona in maniera molto simile ad un generatore di siti statici come i vari Hugo e Jekyll.

Lo sviluppo del front-end può avvenire con qualunque framework web JS (React, Vue, ecc.).

Astro esegue il rendering statico delle pagine, ottenendo HTML rimuovendo tutto il JS.
Ovviamente, spesso il JS lato client è necessario (caroselli, barre di ricerca, carrelli, ecc.), e qui la parte interessante.
Astro ha un'architettura "a isole", dove ogni isola è una parte interattiva del front-end in un mare di HTML statico.

Quindi, attraverso l'idratazione parziale alimenta le isole: quando un componente ha bisogno di JavaScript, viene caricato solo quel componente, mantenendo statico tutto il resto (non carica l'intera pagina in JS).
Inoltre è possibile ritardare il caricamento dei componenti fino a quando diventano visibili.

Queste nuovi paradigmi, oltre ad essere affascinanti, permetteranno performance sempre più elevate.

Il framework: https://astro.build/

Con grande gioia, ebbene sì, sto usando immagini WebP su tutti i post da un po' di giorni ormai, e ho sostituito le "featured image" degli ultimi post in modo che le anteprime della home pesino meno della metà.

I siti web che ho in test sono migliorati in termini di presentazioni. È abbastanza ovvio, ma lasciatemelo scrivere, ero qua che aspettavo questo supporto

Ma cosa scopro condividendo alcuni contenuti?
LinkedIn non supporta le WebP per le preview in condivisione

Un trucchetto: caricando le jpg compresse su Twitter card e Facebook card, il problema si risolve senza alcun contro.

#Ghost #SEO

#TikTok introduce un sistema di Text-To-Image basato sull'#AI direttamente in app.

Si tratta del filtro "AI greenscreen", che genera un'immagine partendo da un prompt testuale, che potrà essere usata come sfondo per i #video dei creator.

Fonte dell'immagine: The Verge.

La velocità con cui questi sistemi possono diventare mainstream sono impressionanti.

Il post di The Verge che ne parla: https://www.theverge.com/2022/8/15/23306101/tiktok-ai-greenscreen-filter-text-to-image-mainstream

Ho scritto qualche riga di approfondimento sugli algoritmi generativi dedicati alle immagini. Per chi è interessato, basta cliccare QUI.

Google sta testando un nuovo bottone di ricerca vocale su Chrome.

Il team di XDA, infatti, ha rilevato una modifica al sorgente di Chromium con l'aggiunta di una nuova funzionalità commentata come segue: "abilita la visualizzazione del pulsante di ricerca vocale nella barra degli strumenti in alto".

Un aspetto moto interessante: in base alla configurazione, il bottone fa aprire Google Assistant, oppure la normale interfaccia di ricerca vocale.

Chiaramente fa parte di test costanti che Google svolge per testare novità e funzionalità.
Per adesso, nella versione beta di Chrome non c'è l'impostazione.

Per approfondire: https://bit.ly/xda-chrome-voice

Durante il Google I/O Jeffery Jose ha dichiarato che i siti web dotati di signed exchanges (SXG) verranno precaricati (traduzione più vicina al termine più corretto, "prefetch") da Google.

Oltre a risolvere il "problema" dell'URL della versione AMP diverso da quello della risorsa originale, il principale vantaggio riguarda l'esperienza utente in termini di velocità. Avendo precaricato molti degli elementi della pagina, il caricamento diventa pressoché istantaneo. Inoltre ci sono casi di miglioramento anche del della metrica LCP.

Prepariamoci ad una nuova generazione di siti web con una velocità "supersonica" e non solo per gli SXG.
Ma prepariamoci anche alla necessità di conoscenze sempre più tecniche.

Per approfondire: https://web.dev/signed-exchanges/

#SEO #UX