Categoria: Web design

Cos’è il Critical CSS? Definizione

Il Critical CSS è una tecnica di ottimizzazione delle prestazioni web che consiste nell’identificare e inlineare i CSS essenziali per il rendering del contenuto above-the-fold di una pagina web. Il contenuto above-the-fold è la parte della pagina web che è visibile senza scorrere.

Perché è importante il Critical CSS?

Il Critical CSS è importante perché può migliorare significativamente i tempi di caricamento delle pagine web. Quando un browser carica una pagina web, deve scaricare tutti i file CSS necessari per renderizzare la pagina. I file CSS possono essere di grandi dimensioni, e questo può rallentare il caricamento della pagina.

Il Critical CSS inlinea i CSS essenziali per il rendering del contenuto above-the-fold, il che significa che il browser non deve scaricare tutti i file CSS necessari per renderizzare la pagina. Questo può migliorare significativamente i tempi di caricamento della pagina, soprattutto per gli utenti che hanno connessioni internet lente.

Come implementare il Critical CSS

Esistono diversi modi per implementare il Critical CSS. Un modo è quello di utilizzare un Critical CSS Generator. Un Critical CSS Generator è un tool che analizza una pagina web e identifica i CSS essenziali per il rendering del contenuto above-the-fold. Il tool genera quindi un file CSS contenente i CSS essenziali, che può essere inlineato nella pagina web.

Un altro modo per implementare il Critical CSS è quello di estrarre manualmente i CSS essenziali per il rendering del contenuto above-the-fold. Questo può essere fatto utilizzando uno strumento di sviluppo web come Chrome DevTools.

Critical CSS Generator

Esistono diversi Critical CSS Generator disponibili online. Alcuni dei più popolari sono:

• Critical CSS Generator by Corewebvitals.io
• Critical CSS Generator by TestingBot
• Critical Path CSS Generatori by Jonas Ohlsson

Come “defer” il non critical CSS

Una volta identificati i CSS essenziali per il rendering del contenuto above-the-fold, è possibile utilizzare l’attributo defer per posticipare il caricamento dei CSS non essenziali. L’attributo defer indica al browser di caricare i CSS non essenziali solo dopo che il contenuto above-the-fold è stato visualizzato.

Come estrarre manualmente il critical CSS

Per estrarre manualmente i CSS essenziali per il rendering del contenuto above-the-fold, è possibile utilizzare uno strumento di sviluppo web come

Per fare ciò, seguire questi passaggi:

1. Apri la pagina web in Chrome DevTools (F12).
2. Clicca sulla scheda “Network”.
3. Ricarica la pagina web.
4. Nella scheda “Network”, seleziona il file CSS che vuoi estrarre.
5. Clicca sulla scheda “Headers”.
6. Copia il contenuto del campo “Content-Type”.
7. Crea un nuovo file CSS e incolla il contenuto del campo “Content-Type” all’inizio del file.
8. Copia il contenuto del file CSS originale nel nuovo file CSS.
9. Salva il nuovo file CSS.

Come trovare il critical CSS

Un altro modo per trovare i CSS essenziali per il rendering del contenuto above-the-fold è quello di utilizzare uno strumento di analisi delle prestazioni web come PageSpeed Insights. PageSpeed Insights analizza una pagina web e fornisce consigli su come migliorare le prestazioni della pagina. Uno dei consigli che PageSpeed Insights può fornire è quello di inlineare il Critical CSS.

Critical CSS: plugin WordPress

Esistono diversi plugin WordPress che possono essere utilizzati per implementare il Critical CSS in WordPress. Alcuni dei plugin più popolari sono:

• Jetpack Boost: velocità, prestazioni e CSS critici del sito web
• 10Web Booster – Ottimizzazione della velocità del sito web, Cache & Ottimizzatore della velocità della pagina
• PageSpeed Ninja

Critical CSS Magento 2

Esistono diverse estensioni Magento 2 che possono essere utilizzate per implementare il Critical CSS in Magento 2. Alcuni dei plugin più popolari sono:

• Critical CSS by Mageworx
• Critical CSS by Amasty

Conclusione

Il Critical CSS è una tecnica di ottimizzazione delle prestazioni web che può migliorare significativamente i tempi di caricamento delle pagine web. Esistono diversi modi per implementare il Critical CSS, tra cui l’utilizzo di un Critical CSS Generator o l’estrazione manuale dei CSS essenziali. Se stai cercando un modo per migliorare le prestazioni del tuo sito web, l’implementazione del Critical CSS è un ottimo punto di partenza.

AMP, acronimo di Accelerated Mobile Pages, è un framework open source che consente di creare pagine web veloci e responsive per dispositivi mobili. Le pagine AMP sono ottimizzate per il caricamento rapido e la visualizzazione fluida su smartphone e tablet, anche con una connessione a internet lenta.

Indice

• La nascita di AMP
• Come funziona AMP
• Perché AMP è utile per la SEO
• Quali sono i plugin migliori per WordPress
• Codice per crearle manualmente
• Link utili
• Conclusione

La nascita di AMP

AMP è stato sviluppato da Google nel 2015 in collaborazione con altri grandi publisher e aziende tecnologiche. L’obiettivo era quello di creare un modo per migliorare l’esperienza di navigazione mobile, rendendo le pagine web più veloci e facili da usare.

Come funziona AMP

Le pagine AMP sono basate su un set di regole e specifiche che limitano l’uso di JavaScript, CSS e HTML per migliorare le prestazioni. Le pagine AMP sono inoltre cacheate dai server di Google, il che significa che vengono caricate più velocemente dai dispositivi mobili.

Perché AMP è utile per la SEO

Le pagine AMP sono ottimizzate per la SEO, il che significa che hanno maggiori probabilità di essere visualizzate nei risultati di ricerca di Google.

Per l’esperto seo AMP è un fattore di ranking mobile, il che significa che le pagine AMP possono essere posizionate più in alto nei risultati di ricerca per dispositivi mobili.

Quali sono i plugin migliori per WordPress

Esistono diversi plugin per WordPress che consentono di creare pagine AMP. Alcuni dei plugin più popolari includono:

• AMP for WordPress
• AMP Plugin by Automattic
• AMP by Jetpack

Codice per crearle manualmente

Ecco un esempio di codice per creare una pagina AMP manualmente:

HTML

<!DOCTYPE html>
<html amp lang="it">
<head>
  <title>Il mio sito AMP</title>
  <link rel="canonical" href="https://www.mio-sito.it/pagina-amp">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-custom>
    /* CSS personalizzato per la pagina AMP */
  </style>
</head>
<body>
  <header>
    <h1>Il mio sito AMP</h1>
  </header>
  <main>
    <p>Questo è un esempio di pagina AMP.</p>
    <img src="https://www.mio-sito.it/immagine.jpg" alt="Immagine">
  </main>
  <footer>
    <p>Copyright © 2023</p>
  </footer>
</body>
</html>

Link utili

• Sito ufficiale di AMP
• Documentazione di AMP
• Plugin AMP per WordPress

Conclusione

AMP è una tecnologia che può essere utilizzata per migliorare l’esperienza di navigazione mobile. Le pagine AMP sono veloci, responsive e ottimizzate per la SEO. Se stai cercando un modo per migliorare le tue pagine web per dispositivi mobili, AMP è una soluzione da considerare.

Un mio cliente mi ha chiesto di iniziare una campagna test con Google ADS e tra le domande poste vi era questa: “E’ necessario costruire una landing page?”. Vi sembrerà strano ma la risposta non è scontata per i seguenti motivi:

• non è detto che una sola landing page sia sufficiente. Anche per una sola campagna potrebbero ben prevedersi più pagine di atterraggio (anche solo per il test A/B)
• non è detto che il consulente web marketing opti per la landing page in quanto in determinati casi potrebbe essere utile puntare su una “normale” pagina interna.

Scrivo dunque questi appunti non solo per il mio cliente che li leggerà con calma ma anche per chiunque voglia giovare di questi dati di esperienza.

Indice

• Cos’è la landing page?
• Scopo di una pagina di destinazione
• Tipologie di landing page
• Utilizzo delle landing page
  • Google ADS
  • Campagne social a pagamento
  • Campagne di retargeting
  • SEO
• Come creare una landing page efficace
• Consigli grafici per creare una landing page efficace
• Differenze tra una home page e una pagina di destinazione
• Esempi di landing page

Cos’è la landing page?

Una landing page (dall’inglese “pagina di atterraggio” detta anche “pagina di destinazione”) è la pagina web a cui si giunge dopo aver cliccato un link contenuto ad esempio in un banner o un annuncio pubblicitario.

In senso stretto si tratta di una pagina web autonoma, creata appositamente ai fini di ottenere una conversione in una strategia di una campagna pubblicitaria o di digital marketing.

Scopo di una pagina di destinazione

Le pagine di destinazione sono progettate con un unico obiettivo focalizzato: convertire in seguito ad una azione richiesta da un invito noto anche con il nome di Call to Action (CTA).

Tipologie di landing page

Esistono due tipologie di landing page:

• landing page in senso lato: si tratta di qualsiasi pagina di atterraggio dopo aver cliccato un link.
• landing page in senso stretto: è la pagina di destinazione contenente una call to action a cui si accede solitamente dopo aver cliccato un annuncio, un banner o un risultato di ricerca sponsorizzato. Si tratta di pagine studiate per aumentare le percentuali di conversione soprattutto di campagne payperclick come per esempio Google ADS o Facebook ADS.

La prima può essere raggiunta da un link esterno e da un link interno ad esempio una voce di menu di navigazione.

La comunicazione di una pagina di atterraggio in senso lato risponde comunque alla necessità di costruire un percorso di comunicazione del sito web che punti ad una conversione.

La pagina di atterraggio in senso stretto, della quale tratteremo ora in avanti, è molto importante ed utilizzata dai consulenti di web marketing come strumento del processo di conversione soprattutto nelle campagne pay per click.

In questo senso la landing page deve essere concisa (preferibilmente visibile above the fold) e contenere una call to action che porti ad una conversione, ad esempio un pulsante che (click-through) o la compilazione del form (lead generation vera e propria).

Utilizzo delle landing page

Google ADS

Le pagine di destinazione sono particolarmente utilizzate nelle campagne di pubblicità su internet come Google ADS.

In questo caso la pagina di destinazione va costruita avendo ben presente lo scopo di ottenere l’effetto positivo del Quality Score, il punteggio di qualità richiesto da Google ADS per poter posizionare meglio il proprio annuncio.

Campagne social a pagamento

Le pagine di destinazione sono fondamentali anche per le campagne social. Più mirata e targetizzata è una campagna social, più è necessario avere una landing page ad hoc che rappresenti velocemente la soluzione di un problema specifico.

Campagne di retargeting

Lo strumento del retargeting permette creare annunci basati sul comportamento dei potenziali clienti (o dei clienti già acquisiti).
Anche in questo caso la landing page va confezionata ad hoc per offrire la migliore esperienza possibile al visitatore a cui si chiede una determinata azione (ad esempio comprare se non lo si è già fatto, ricomprare se lo si è già fatto in precedenza).

SEO

Negli ultimi anni le landing page sono molto utilizzate anche per specifiche tecniche di SEO, in particolare la generazione di contenuti automatici su un database di parole chiave. I contenuti del sito (di solito un sito satellite rispetto a quello istituzionale) sono spesso soltanto landing page con poche parole chiave (quelle estratte dal database) e una chiamata in azione (CTA).

Questo tipo di tecnica SEO mira a dotare il sito migliaia di pagine da far posizionare con più parole chiave possibili o frasi chiave soprattutto unite ai nomi delle città di una intera provincia o regione.

Come creare una landing page efficace

Una landing page efficace è fondamentale per convertire i visitatori in azioni desiderate, come l’iscrizione a una newsletter, il download di un ebook o l’acquisto di un prodotto. Ecco alcuni elementi essenziali di una landing page efficace:

1. Titolo accattivante: Il titolo deve catturare l’attenzione del visitatore e comunicare chiaramente il valore dell’offerta o dell’azione che si desidera che il visitatore compia.
2. Sottotitolo o descrizione: Un breve testo o una descrizione chiara e concisa che spiega in dettaglio ciò che l’utente otterrà o farà se compie l’azione desiderata.
3. Immagine o video rilevante: Un elemento multimediale, come un’immagine o un video, che supporta e illustra il messaggio principale della landing page.
4. Call to Action (CTA): Un pulsante ben visibile e ben posizionato che invita l’utente a compiere l’azione desiderata, come “Iscriviti ora,” “Scarica l’ebook,” o “Acquista ora.”
5. Form di contatto: Se si desidera raccogliere informazioni dai visitatori, come indirizzi email o dati personali, un modulo di contatto ben progettato è essenziale. Tuttavia, è importante non richiedere troppe informazioni, altrimenti si rischia di scoraggiare i visitatori.
6. Testimonianze o recensioni: Feedback positivo da parte di clienti o utenti precedenti può aumentare la fiducia e la credibilità della tua offerta.
7. Garanzie o promesse: Se applicabile, includere garanzie o promesse che riducano l’ansia del visitatore, ad esempio una politica di rimborso o una garanzia di soddisfazione.
8. Elementi di fiducia: Includere loghi di aziende partner, certificazioni o riconoscimenti che dimostrino l’affidabilità e la credibilità del tuo brand.
9. Contenuto persuasivo: Il testo e il design della landing page dovrebbero essere persuasivi, focalizzati sul vantaggio per il visitatore e orientati all’azione.
10. Mobile Responsiveness: Assicurarsi che la landing page sia ottimizzata per i dispositivi mobili, poiché sempre più utenti accedono al web tramite smartphone.
11. Chiaro flusso di conversione: Assicurarsi che il visitatore sappia chiaramente cosa fare e quali passaggi seguire per compiere l’azione desiderata.
12. Design pulito e attraente: Una presentazione visuale pulita e attraente è essenziale. Utilizzare colori, tipografia e layout che enfatizzino il messaggio principale.
13. Rimozione di distrazioni: Evitare elementi o link che possano distogliere l’attenzione del visitatore dalla call to action principale.
14. Test A/B: Effettuare test A/B per sperimentare con diverse versioni della landing page e determinare quale ottiene migliori risultati in termini di conversioni.
15. Analisi e monitoraggio: Utilizzare strumenti di analisi web per monitorare le prestazioni della landing page e apportare miglioramenti in base ai dati raccolti.

Ogni landing page può avere scopi diversi, quindi è importante adattare questi elementi in base agli obiettivi specifici della pagina e al pubblico di destinazione.

La maggior parte delle landing page sono veri e propri strumenti creati sotto la supervisione del consulente web marketing e puntano alla lead generation.

Esistono tantissimi tipi diversi di landing page in rete ma pochi e circoscritti sono gli elementi fondamentali e necessari che non devono mai mancare in una pagina di destinazione efficace nel condurre i visitatori del sito ad effettuare una conversione che può ad esempio consistere nell’acquisto di un prodotto o servizio.

1. Navigazione inesistente: al visitatore si richiede un’azione precisa. Ulteriori links o addirittura la presenza di un menu di navigazione potrebbero distrarlo dal compimento dell’azione richiesta.
2. Titolo affascinante: titolo ed eventuale sottotitolo devono persuadere. Spesso sono poste in forma di domanda e risposta dando al visitatore la sensazione di aver trovato il posto giusto per risolvere il proprio problema (Leggi anche i consigli per un titolo SEO efficace).
3. Call to action convincente: che sia costituito da un pulsante o un form, l’accettazione dell’invito all’azione determina la conversione vera e propria. Nel caso di utilizzo di form si consiglia di fare attenzione all’usabilità dello stesso da ogni dispositivo come raccomanda il Nielsen Norman Group.
4. Usare piccoli blocchi di testo: più tempo il visitatore passa a cercare di capire cosa gli offriamo più c’è il rischio che lo perdiamo. Testi lunghi sono da evitare.

Creare una landing page efficace significa non far mancare questi elementi e aggiungerne altri (come ad esempio video esplicativi brevi o testimonianze) che possono essere utili nel caso concreto a seconda della strategia di web marketing che si voglia adottare.

Consigli grafici per creare una landing page efficace

Analizzando il comportamento di milioni di utenti si è giunti a delle regole di base che gli esperti di digital marketing seguono nella costruzione delle landing pages.

• Dimensioni: gli elementi importanti hanno una dimensione maggiore di quelli meno importanti. Solitamente Titolo e pulsante CTA hanno le dimensioni maggiori.
• Peso: il grassetto evidenzia le parole più importanti nel testo che elenca i benefici. Senza grassetto quelle meno importanti.
• Colore: si usa maggiore contrasto per gli elementi più importanti (per esempio il pulsante CTA).
• Spazio bianco: di norma si mette più spazio bianco intorno agli elementi più importanti per permetterne la migliore visualizzazione possibile.
• Densità: Evitare troppo testo in piccoli spazi. Maggiore densità significa minore leggibilità e dunque efficacia.

Differenze tra una home page e una pagina di destinazione

La home page di un sito web risulta essere poco utile ad una strategia di paid advertising in quanto contiene molto contenuto e soprattutto molti link (menu di navigazione, link dai blocchi di testo ecc.) che possono distrarre il visitatore dal capire e accettare l’invito a convertire.

Una scelta corretta in una campagna Ads è dunque quella di non puntare sulla generica home page ma creare una pagina di destinazione appositamente studiata per permettere in pochissimo tempo all’utente di percepire un messaggio chiaro, un invito con beneficio e richiedere un’azione il cui compimento comporterà una conversione.

Tuttavia notiamo come molti web marketing strategist a volte puntano i link delle campagne ADS verso home page o pagine interne che, in quanto tali non rientrano nella categoria di pagine di destinazione in senso stretto.

In questo caso lo scopo non è l’aumento di lead generation e del ROI, ma soprattutto di brand awareness offrendo al visitatore un percorso di navigazione e comunicazione più vario e personalizzato per fargli prima acquisire consapevolezza del brand, dei propri servizi e poi eventualmente chiedere una scelta e la relativa azione di conversione.

Esempi di landing page

Sotto tre esempi di tre tipologie di landing page apparentemente completamente diverse ma che dimostrano in modo diverso la presenza degli elementi fondamentali.

Nella landing di Uber è evidente la presenza di elementi fondamenti: in una unica schermata above the fold è presente un chiaro messaggio che invita all’azione e prospetta un beneficio ed un form di iscrizione al servizio.

La landing di Moz è certamente più complessa:

• vi è un titolo più lungo e un sottotitolo che rappresentano la proposta
• il pulsante permette la conversione
• il body elenca i vantaggi dell’utilizzo di questa piattaforma

La landing di Linkedin Marketing Solutions contiene:

• un testo che comunica in modo immediato i vantaggi e l’utilità della piattaforma di marketing del famoso social media
• l’immagine mostra chiaramente una funzionalità interessante
• Il form permette la conversione
• un valore aggiunto è dato dall’auto fill del form tramite apposito pulsante posto all’inizio dello stesso.

Un buon progetto web non può prescindere dall’identificazione degli obiettivi che il progetto stesso deve perseguire.

Un errore che spesso si compie è di fare questa operazione senza considerare di coinvolgere anche un professionista che offre consulenza seo che, invece, spesso viene investito solo quando il sito è già stato pubblicato.

Come leggerete di seguito, tra le operazioni fondamentali da compiere per l’identificazione degli obiettivi di un progetto web vi sono alcune attività che richiedono l’esperienza di un esperto seo.

L’identificazione degli obiettivi del progetto web è una fase cruciale nella progettazione di un sito web, poiché aiuta a stabilire chiaramente cosa si vuole ottenere con il sito e a guidare tutte le decisioni di progettazione e sviluppo.

Ecco come effettuiamo l’identificazione degli obiettivi del progetto web:

1. Raccogliamo Informazioni Preliminari:
   • Conduciamo ricerche di mercato per comprendere il settore in cui il cliente opera.
   • Analizziamo la concorrenza e studiamo i loro siti web per identificare punti di forza e debolezza.
2. Coinvolgiamo le Parti Interessate:
   • Coinvolgiamo il team interno, i dirigenti aziendali e qualsiasi altra parte interessata nel processo decisionale.
   • Chiediamo feedback e opinioni su cosa dovrebbe realizzare il sito web.
3. Definiamo Obiettivi SMART:
   • Gli obiettivi dovrebbero essere Specifici, Misurabili, Attribuibili, Realistici e Temporizzati (SMART). Ad esempio, invece di “Aumentare le vendite”, preferiamo fissare un obiettivo specifico come “Aumentare le vendite online del 20% entro 12 mesi”.
4. Priorità degli Obiettivi:
   • Identifichiamo gli obiettivi principali e quelli secondari. Quali obiettivi sono più critici per il successo del tuo business?
5. Segmentiamo il Pubblico Target:
   • Chi è il pubblico target? Identifichiamo le diverse fasce di utenti e quali obiettivi potrebbero avere quando visitano il tuo sito.
6. Definiamo Obiettivi Specifici:
   • Gli obiettivi potrebbero riguardare la vendita di prodotti, la generazione di lead, l’aumento del traffico, la brand awareness, la condivisione di contenuti, ecc.
7. Misurabilità e KPI:
   • Determiniamo come misurare il successo degli obiettivi. Ad esempio, utilizziamo indicatori performance (KPI) come il tasso di conversione, il traffico organico, il tempo medio trascorso sul sito, ecc.
8. Valore e ROI:
   • Consideriamo quale valore porteranno gli obiettivi al business del cliente. Calcoliamo il possibile ritorno sugli investimenti (ROI) associato al raggiungimento di ciascun obiettivo.
9. Sviluppiamo una Strategia:
   • Basandoci sugli obiettivi, sviluppiamo una strategia SEO per il tuo web del cliente. Pianifichiamo il design, il contenuto, le funzionalità e il marketing del sito, tutti fattori che contribuiranno a raggiungere quegli obiettivi.
10. Comunicazione Chiara:
    • Ci assicuriamo che tutti i membri del team coinvolto comprendano chiaramente gli obiettivi del progetto web e siano allineati sulla loro importanza.
11. Monitoraggio e Ottimizzazione Continua:
    • Una volta che il sito è online, impostiamo sistemi di monitoraggio per misurare il progresso verso gli obiettivi. Prevediamo anche come apportare aggiustamenti e ottimizzazioni in base ai risultati ottenuti.

Il markup JSON-LD (JavaScript Object Notation for Linked Data) è un formato di dati strutturato utilizzato per arricchire il contenuto di una pagina web con informazioni semantiche che aiutano i motori di ricerca a comprendere meglio il significato del contenuto.

Questo markup è particolarmente utile per l’implementazione del Structured Data Markup, che è un insieme di metadati standardizzato utilizzato per descrivere i contenuti presenti su una pagina web in un formato che può essere facilmente compreso dalle macchine.

Caratteristiche principali del markup JSON-LD

Le principali caratteristiche del markup JSON-LD includono:

1. Sintassi JSON: È scritto nel formato JSON, che è ampiamente utilizzato e facilmente leggibile sia dagli esseri umani che dalle macchine.
2. Linked Data: JSON-LD è progettato per essere integrato in Linked Data, il che significa che è possibile collegare i dati in modo significativo ad altri dati presenti sul web.
3. Flessibilità: È flessibile e può essere incorporato direttamente nelle pagine web o incluso tramite script esterni.
4. Struttura gerarchica: I dati sono organizzati in una struttura gerarchica che consente di rappresentare facilmente relazioni complesse tra gli oggetti.
5. Concetto di contesto: Utilizza un “contesto” che definisce il significato dei termini utilizzati nei dati strutturati, consentendo una migliore interpretazione da parte delle macchine.
6. Utilizzo comune: È ampiamente utilizzato per l’implementazione di markup Schema.org, che è uno standard di settore per la descrizione di dati strutturati.

L’uso del markup JSON-LD è essenziale per migliorare la visibilità del contenuto sui motori di ricerca, poiché aiuta a fornire informazioni chiare e strutturate sulle pagine web.

Questo markup può essere utilizzato per descrivere una vasta gamma di contenuti, tra cui eventi, prodotti, organizzazioni, recensioni, ricette e molto altro ancora.

Come configurare il markup JSON-LD

La configurazione del markup JSON-LD per arricchire il contenuto di una pagina web richiede alcuni passaggi. Ecco come puoi farlo:

1. Identifica le informazioni da marcire: Prima di iniziare, determina quali informazioni desideri marcire sulla tua pagina web. Questo potrebbe includere dati come eventi, prodotti, organizzazioni, recensioni, dati strutturati per articoli di notizie e altro ancora. Schema.org fornisce una vasta gamma di tipi di dati strutturati che è possibile utilizzare.
2. Scegli il tipo di dati strutturati: Utilizza il sito web Schema.org per trovare il tipo di dati strutturati appropriato per le informazioni che desideri marcire. Ogni tipo di dati ha una pagina dedicata che fornisce dettagli su come utilizzarlo.
3. Crea il markup JSON-LD: Utilizza JSON-LD per creare il markup dei dati strutturati. Puoi farlo direttamente nella pagina HTML o utilizzare uno script esterno. Ecco un esempio di markup JSON-LD per un evento:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Event",
  "name": "Nome dell'evento",
  "startDate": "2023-09-30T19:00:00+02:00",
  "endDate": "2023-09-30T21:00:00+02:00",
  "location": {
    "@type": "Place",
    "name": "Luogo dell'evento",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "Indirizzo",
      "addressLocality": "Città",
      "postalCode": "CAP",
      "addressRegion": "Provincia",
      "addressCountry": "Paese"
    }
  }
}
</script>

4. Personalizza il markup: Modifica il markup JSON-LD per riflettere le informazioni specifiche del tuo contenuto. Assicurati di seguire le specifiche del tipo di dati Schema.org che stai utilizzando.
5. Includi il markup nella pagina: Se stai lavorando direttamente nel codice HTML della pagina, inserisci il markup JSON-LD all’interno del tag <head> o <body> della pagina. Assicurati che sia posizionato correttamente nel codice HTML.
6. Valida il markup: Prima di pubblicare la pagina, è una buona pratica convalidare il tuo markup JSON-LD utilizzando strumenti di testing strutturati come il “Markup Helper” di Google o il “Rich Results Test”. Questo ti aiuterà a identificare e correggere eventuali errori.
7. Monitora i risultati: Dopo aver pubblicato la pagina con il markup JSON-LD, monitora come viene visualizzato nei motori di ricerca. Controlla se i dati strutturati sono correttamente interpretati e visualizzati nei risultati di ricerca.

Assicurati di seguire le linee guida specifiche per i tipi di dati strutturati che stai utilizzando e consulta sempre la documentazione di Schema.org per ulteriori dettagli e suggerimenti specifici.

Maggiori info e risorse le trovi sul sito ufficiale di LSON-LD

Ci troviamo oggi ad affrontare e a suggerire una soluzione per una delle problematiche tipiche in cui si potrebbe trovare un web designer che realizza un sito con WordPress: inserire un widget direttamente all’interno di un articolo o di una pagina.

Può essere infatti necessario che un certo widget operi esclusivamente in una certa pagina.

Per questa operazione ci vengono incontro gli shortcodes generati dal plugin amr shortcode any widget.

Come fare?

Per prima cosa installate il plugin amr shortcode any widget (potete scaricarlo da qui).

Attivando il plugin nella sezione widget di WordPress vi apparirà una nuova zona chiamata Widgets for Shortcodes. 

Inserite in questa zona il widget che volete aggiungere alla pagina, personalizzatene eventualmente le impostazioni e poi cliccate su “Salva”.

In calce al widget salvato apparirà magicamente il shortcode da copiare e incollare nell’articolo o nella pagina desiderata.

Facciamo un test passo passo

Ecco un esempio concreto di come faccio ad inserire un certo widget proprio sotto questo articolo.

Per prima cosa installo il plugin amr shortcode any widget tramite la funzione aggiungi plugin di WordPress.

Una volta attivato vedrò apparire la nuova zona nella sezione “Widget” come nella figura di seguito:

Diciamo che voglio inserire all’interno di questo articolo la situazione meteo di Roma. Ho ovviamente un plugin meteo installato che mi permette di aggiungere widget.

Inserisco il widget relativo all’interno della nuova zona, ne personalizzo eventualmente le impostazioni e poi clicco su “Salva“.

Apparirà dunque lo shortcode da utilizzare nella pagina o nell’articolo.

Inserite lo shortcode all’interno della pagina o dell’articolo con il formato proposto ed ecco in widget in azione.

[do_widget id=td_block_weather_widget-2] 

Per altre informazioni e faq sul plugin cliccate qui.

Perché Ottimizzare WordPress

Ottimizzare WordPress significa rendere l’esperienza utente migliore.

WordPress è certamente tra i cms più utilizzati al mondo. Secondo il sito ufficiale il 27% di Internet utilizza wordpress.

Anche noi utilizziamo questo content management system quando realizziamo un sito web e provvediamo ad ottimizzarlo per rendere il prodotto finale migliore.

Un wordpress ottimizzato significa sito più veloce e maggiore fruibilità dello stesso da ogni tipo di device.

In questo articolo riprendiamo quanto scritto nella guida GT Metrix sull’ottimizzazione di un sito web in WordPress.

GT Metrix è un celebre sistema on line di analisi delle performances di un sito web secondo i parametri di Google PageSpeed e YSlow.

Testiamo quanto consigliato direttamente sul sito web della nostra web agency e vediamone i risultati.

1- Analizziamo il sito web con GT Metrix

Vediamo cosa e quanto c’è da ottimizzare di un sito web facendo un’analisi iniziale.
E’ possibile operare l’analisi in due modi:

Installando nel proprio cms WordPress il plugin GTMetrix for WordPress
Operando l’analisi sul tool on line direttamente su https://gtmetrix.com/

Nel primo caso è necessario inserire l’API key disponibile a questo link. Sarà necessario registrarsi e loggarsi per accedere alle informazioni della propria chiave API.

Il responso dell’analisi GTMetrix per dopstart è il seguente:

Insomma una situazione non proprio rosea. Dobbiamo dunque assolutamente migliorare. Continuiamo con i prossimi passaggi e vedremo se e quanto riusciremo ad ottimizzare wordpress.

2- Installiamo ed attiviamo UpdraftPlus

Prima di mettere mano all’ottimizzazione di WordPress per le modifiche necessarie è sempre importante eseguire un backup completo del sito.

Per questo installiamo il plugin UpdraftPlus e facciamo un backup.

3- Ottimizziamo le immagini in automatico

La grandezza delle immagini incide non poco sulla velocità di caricamento delle pagine web.
Ottimizzare e comprimere le immagini è possibile farlo in automatico installando e utilizzando il plugin WP Smush (Smush Image Compression and Optimization)  

Con questo plugin provvediamo ad ottimizzare le immagini già presenti sul sito. Le prossime che inseriremo saranno già automaticamente ottimizzate

4-Installiamo e attiviamo WP fastest cache

Un plugin completo di cache è WP Fastest Cache.

Con questo plugin è possibile :

[su_list icon=”icon:thumbs-o-up” icon_color=”#d45500″ class=””]

• Abilitare la memorizzazione delle pagine nella cache per un caricamento più veloce delle stesse;
• Impostare il preload
• Il bypass della cache per gli utenti registrati
• Minify HTML, cioè la riduzione delle dimensioni dei file html
• Minify CSS, cioè la riduzione delle dimensioni dei file CSS
• Combine CSS, cioè la possibilità di riunire tutti i file css in un unica risorsa riducendo le richieste http
• Combine JS riunendo tutti i file js in un unica risorsa
• GZIP per l’ulteriore compressione delle pagine acquisendo ancora più velocità
• Impostare il caching del Browser

[/su_list]

[su_note note_color=”#FFFF66″ text_color=”#333333″ radius=”3″ class=””]Nota: E’ importante controllare sempre le funzionalità del sito web dopo le minimizzazioni e combinazioni di file in quanto potrebbero verificarsi errori o problemi di funzionalità.[/su_note]

5- Rianalizziamo il sito web con GTMetrix

Con i passaggi precedenti abbiamo migliorato molto soprattutto in termini di caricamento della pagina e ridotto di molto le richieste http. C’è ovviamente ancora qualcosa da fare ma per ora va bene così.