Gestisci la semantica dei tuoi temi Genesis come un PRO

Da quando ho iniziato a usare costantemente Genesis nei miei progetti con WordPress ho sempre ammirato la facilità con cui mi permette di gestire il markup semantico e l’integrazione di microdati Schema.org senza dover impazzire a ristrutturare interi blochi di codice appositamente per questo scopo.

Come ho apertamente dichiarato in un post precedente, odio i page builder perché non mi permettono di costruire delle pagine web ottimizzate con criteri moderni per l’indicizzazione e per l’accesso ai microdati.

Li odio ancora di più dopo aver scoperto con che semplicità riesco a gestire la semantica con un framework pensato proprio per questo e che segna lo scarto tra l’uso professionale di WordPress e quello amatoriale e più personale.

All’interno di questo articolo ti parlerò di un’esperienza lavorativa che mi ha permesso di massimizzare i risultati di ottimizzazione lato SEO utilizzando questo framework professionale che da anni permette di mettere il turbo a centinaia di migliaia di siti in WordPress.

Durante il mio lavoro mi è capitato di dover creare un sito che rappresentasse una serie di eventi organizati ad-hoc e veicolati attraverso la piattaforma Eventbrite. Scritti i plugin necessari per permettermi di creare un Custom Post Type adatto e di incasellare i dati tramite custom field e la libreria CMB2 ho deciso di passare al front-end e di usare appunto Genesis come base.

Una volta individuato il CPT da personalizzare volevo renderlo semanticamente corretto e assegnargli uno Schema.org adeguato e mi sono rifatto a una serie di filtri utilissimi che già utilizzavo per passare le mie classi CSS agli elementi principali della pagina.

Preferisco però andare per ordine e chiarire bene alcuni aspetti di Schema.org, quindi non ti scoraggiare e se già conosci l’argomento puoi passare al paragrafo successivo senza indugi.

Come funziona Schema.org in breve e perché è utile

I microdati sono stati introdotti per dare più significato a un elemento specifico di una pagina web. Questo vuol dire che se prima avevamo un generico tag <article> che significava poco per un eventuale robot, ora possiamo specificare meglio il tipo di contenuto che contiene.

Partiamo dall’esempio del mio lavoro precedente.

La mia necessità era quella di specificare che non si trattava di una pagina a caso, ma che il contenuto di quell’articolo stava descrivendo un evento.

Questo compito è dato dall’attributo itemtype, che solitamente è un link verso Schema.org e alla relativa risorsa.

All’interno di una pagina HTML però i vari elementi che possono descrivere un tipo di contenuto sono tanti e distinti, magari annidati l’uno dentro l’altro, quindi ci serve un selettore più preciso per spiegarli ed ecco che entra in gioco itemprop che ci permette di specificare di cosa si tratta.

Come per itemtype dobbiamo rifarci alla lista di elementi disponibili presente su Schema.org.

Resta un altro elemento che possiamo specificare, che è itemscope e che descrive lo scopo del tag, ovvero se l’elemento fa parte di un altro o se costituisce un blocco a se stante da considerare indipendentemente dal resto del contenuto.

Un esempio possiamo prenderlo direttamente dalla sidebar di Genesis che costituisce un blocco separato dal resto del contenuto e che può avere come tipologia WPSideBar:

<aside class="sidebar sidebar-primary widget-area" role="complementary" itemscope="itemscope" itemtype="http://schema.org/WPSideBar">

C’è una intera letteratura su Schema.org quindi preferisco non approfondire oltre e andare avanti con l’applicazione pratica in Genesis di questi concetti.

Customizziamo i microdati del CPT eventi

Genesis costruisce un filtro per ogni elemento strutturale della pagina, quindi ci da la possibilità di estrarne e manipolarne gli attributi.

C’é una lista a cui attenersi ma copre la totalità degli elmenti generati dal framework mentre, ovviamente, per quelli generati custom da voi dovete provvedere da soli.

Una volta individuato l’elemento che vogliamo modificare possiamo tranquillamente ricavarne qualsiasi tipo di attributo e manipolarlo a nostro piacimento.

Vediamo l’esempio più classico, nel caso volessimo aggiungere una nostra classe CSS alla sidebar primaria.

add_filter( 'genesis_attr_sidebar-primary', 'sam_class_attr' ); 
function sam_class_attr( $attributes ) { 

	// Aggiungo la mia classe alle classi originarie 
	$attributes['class'] .= $attributes['class'] .' nuova-classe'; 

	return $attributes; 
}

Non ho fatto altro che agganciarmi all’apposito Hook di Genesis per gli attribui dell’elemento che mi interessava filtrare e gli ho aggiunto la mia classe extra con pochissime righe di PHP.

Abbiamo appena modificato uno degli aspetti degli attributi di un elemento generato da Genesis, ma come avrai notato $attributes ci restituisce un array sul quale operare in base a chiavi diverse per dati diversi, nel nostro caso abbiamo usato la chiave class per agire sulla classe CSS ma andiamo a vedere più nel dettaglio le chiavi sulle quali operare partendo sempre dalla nostra sidebar di esempio.

add_filter( 'genesis_attr_sidebar-primary', 'sam_attr_sidebar_primary' ); 
function sam_attr_sidebar_primary( $attributes ) { 

	$attributes['class'] = 'sidebar sidebar-primary widget-area'; 
	$attributes['role'] = 'complementary'; 
	$attributes['itemscope'] = 'itemscope'; 
	$attributes['itemtype'] = 'http://schema.org/WPSideBar'; 

	return $attributes; 
}

In questo caso abbiamo tutto quello che ci serve per poter modificare gli attributi di Schema.org e , volendo, anche per aggiungere i nostri dati custom. Per esempio se volessimo aggiungere un ID per usarlo con JavaScript potrei tranquillamente farlo in questo modo:

add_filter( 'genesis_attr_sidebar-primary', 'sam_id_sidebar_primary' ); 
function sam_id_sidebar_primary( $attributes ) { 

	$attributes['id'] = 'mio-ID'; 

	return $attributes; 
}

Ora che sappiamo tutto su come manipolare gli elementi strutturali di Genesis possiamo passare a risolvere il mio problema iniziale, ovvero sistemare la semantica del mio Custom Post Type eventi in modo che sia il più correto possibile agli occhi dei motori di ricerca.

[clickToTweet tweet=”Gestire la semantica di un tema #genesis è semplice come usare un filtro #WordPress!” quote=”Gestire la semantica di un tema #genesis è semplice come usare un filtro!”]

Aprendo l’apposita lista di Schema.org ci accorgiamo che esiste lo schema itemtype Event e che applicarlo è molto semplice, ci basta trovare i suoi sottoelementi principali e applicargli un itemprop event e description per poi iniettarli in Genesis come abbiamo visto prima.

add_action( 'get_header', 'sam_schema_eventi' ); 
function sam_schema_eventi() { 
	if ( 'eventi' == get_post_type() ) { 

		//applico lo schema solo al CPT eventi 
		add_filter( 'genesis_attr_entry', 'sam_schema_eventi_entry', 20 ); 

		function sam_schema_eventi_entry( $attributes ) { 
			$attributes['itemtype'] = 'http://schema.org/Event'; 
			return $attributes; 
		} 

		add_filter( 'genesis_attr_entry-title', 'sam_schema_eventi_entry_title', 20 ); 
		function sam_schema_eventi_entry_title( $attributes ) { 
			$attributes['itemprop'] = 'event'; 
			return $attributes; 
		} 

		add_filter( 'genesis_attr_entry-content', 'sam_schema_eventi_entry_content' , 20 ); 
		function sam_schema_eventi_entry_content( $attributes ) { 
			$attributes['itemprop'] = 'description'; 
			return $attributes; 
		} 
	} 
}

Se osservate il codice si spiega praticamente da solo e si è trattato semplicemente di individuare lo schema che volevo applicare per poi passarlo a una piccola funzione filtro. Non ti sembra facilissimo prendere il controllo della semantica del tuo sito web? Pensi di essere abbastanza PRO per abbandonare definitivamente l’idea dei page builder e di passare alla reale comprensione di cosa si può fare con pochissimo codice?

Bene, sappi che ci sono anche altre vie se usate Genesis Framework.

Ora ti lascio giocare e sperimentare un po’ con quello che è diventato il mio framework WordPress preferito, invitandoti a comprarlo se ancora non sei tra i possessori e a torna a trovarci per raccontarci la tua esperienza.

Non mi resta che darti appuntamento al prossimo articolo e intanto aspettare i tuoi feedback per capire se questo framework è riuscito a farti innamorare come ha fatto con noi.

Se questa lettura ti ha incuriosito e vuoi conoscere meglio Genesis prima ancora di acquistarlo, ti suggerisco di consultare i nostri precedenti articoli dove ti spieghiamo come approcciarti allo sviluppo in questo framework e dove ti consigliamo qualche utile strumento che ti sarà utile per semplificare il tuo lavoro.