Gestisci la semantica dei tuoi temi Genesis come un PRO

Sapere come poter personalizzare lo Schema.org delle tue pagine è un'attività fondamentale per passare un maggior numero di informazioni ai motori di ricerca, ma in alcuni casi può sembrare un compito davvero arduo. Ovviamente non se usi Genesis!

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 visual composer 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 visto con che semplicità riuscivo a gestire la cosa con un framework che fosse 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.

Sei curioso di scoprire come poter personalizzare facilmente la struttura dei microdati e di Schema.org che questo framework mette a disposizione? Non ti resta altro che continuare a leggere e scoprire quanto sia semplice da mettere in atto.

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 va a descrivere.

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:

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.

Context/HTML Genesis Filter
body genesis_attr_body
site-header genesis_attr_site-header
site-title genesis_attr_site-title
site-description genesis_attr_site-description
header-widget-area genesis_attr_header-widget-area
nav-primary genesis_attr_nav-primary
nav-secondary genesis_attr_nav-secondary
nav-header genesis_attr_nav-header
structural-wrap genesis_attr_structural-wrap
content genesis_attr_content
entry genesis_attr_entry
entry-image genesis_attr_entry-image
entry-image-widget genesis_attr_entry-image-widget
entry-image-grid-loop genesis_attr_entry-image-grid-loop
entry-author genesis_attr_entry-author
entry-author-link genesis_attr_entry-author-link
entry-author-name genesis_attr_entry-author-name
entry-time genesis_attr_entry-time
entry-modified-time genesis_attr_entry-modified-time
entry-title genesis_attr_entry-title
entry-content genesis_attr_entry-content
entry-meta-before-content genesis_attr_entry-meta-before-content
entry-meta-after-content genesis_attr_entry-meta-after-content
archive-pagination genesis_attr_archive-pagination
entry-pagination genesis_attr_entry-pagination
adjacent-entry-pagination genesis_attr_adjacent-entry-pagination
comments-pagination genesis_attr_comments-pagination
entry-comments genesis_attr_entry-comments
comment genesis_attr_comment
comment-author genesis_attr_comment-author
comment-author-link genesis_attr_comment-author-link
comment-time genesis_attr_comment-time
comment-time-link genesis_attr_comment-time-link
comment-content genesis_attr_comment-content
author-box genesis_attr_author-box
sidebar-primary genesis_attr_sidebar-primary
sidebar-secondary genesis_attr_sidebar-secondary
site-footer genesis_attr_site-footer

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.

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 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.

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:

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

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.

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 vi sembra facilissimo ora prendere il controllo della semantica del vostro sito web? Pensate di essere abbastanza PRO per abbandonare definitivamente l’idea di visual composer e di passare alla reale comprensione di cosa si può fare con pochissimo codice? Bene, sappiate che ci sono anche altre vie se usate Genesis Framework.

Se l’approccio coding di Genesis non fa per voi e preferite avere una interfaccia grafica allora potete anche utilizzare l’apposito plugin scritto molto bene (e che sotto al cofano non fa altro che applciare queste funzioni) a disposizione gratuitamente attraverso GitHub.

genesis-microdata-schema

Ora ti lascio giocare e sperimentare un po’ con quello che è diventato il mio framework WordPress preferito, invitandovi a comprarlo se ancora non sei tra i possessori e a tornare 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.

Lascia il tuo Pensiero