Microdati e WordPress. Due mondi che non sempre è intuitivo conciliare. In passato abbiamo già avuto modo di trattare l’argomento micordati in un precedente articolo titolato “esempi pratici di microdati sul sito“. Oggi approfondiamo andando a vedere come implementare i microdati su un sito realizzato con WordPress, ma gli esempi saranno adatti anche ad altri cms basati sul php. Con un po’ di attenzione, cercando di capire bene cosa si va a modificare, leggendo questo articolo si può imparare ad implementare i microdati anche su altri CMS.
Attenzione! I file da modificare che indico in questo articolo, sono quelli presenti nell’ultimo tema WordPress di default, il “twentyfifteen“. La posizione dei tag indicati dipendono molto dal tipo di tema utilizzato. Quindi se non li trovate sul file da me menzionato, provate a cercare negli altri. Mi dispiace ma non è possibile fare degli esempi per ogni tema di WordPress esistente.
Strumenti necessari: Editor di testo (notepad++ o blocco notes)
Indice dei contenuti
INIZIAMO DA UN BEL BACKUP
Già ti immagino con le tue belle manine piene di dita frementi, aprire il tuo WordPress e dirigerti verso l’editor. Fermo!
Innanzi tutto apri Filezilla o qualunque sistema tu utilizzi per il trasferimento dei files e scarica l’intero sito sul tuo disco locale. Poi torna qui e continuiamo.
Fatto? Perfetto! Iniziamo.
FILE HEADER.PHP (TESTATA)
Lavoriamo sui files del tema che hai appena scaricato in locale. Il primo file che andremo a modificare è l’header.php che troviamo all’interno del percorso “Wp-Contents — Themes —- Nome del tuo tema”. Facciamo una copia del file e salviamola su una cartella a parte.
Apriamo l’header.php copiato nella nuova cartella con l’editor di testo e cerchiamo l’istruzione
<body <?php body_class(); ?>>
e sovrascriviamola con l’istruzione
<body <?php body_class(); ?> itemscope=”itemscope” itemtype=”http://schema.org/WebPage”>
Abbiamo detto agli spider che si tratta di una pagina contenente microdati.
Cerchiamo ora l’apertura del tag <header> che si presenterà così:
<header id=”masthead” class=”site-header” role=”banner”>
e trasformiamo l’istruzione in questo modo:
<header id=”masthead” class=”site-header” itemscope=”itemscope” itemtype=”http://schema.org/WPHeader” role=”banner”>
Con role=”banner” diciamo che l’elemento header rappresenta la testata del sito.
Dato che stiamo mettendo mano al file header andiamo anche a scrivervi questa istruzione che comunica agli spider che il sito è dedicato a tutte le fasce di età e categoria.
<meta itemprop=’isFamilyFriendly’ content=’True’/>
Infine cerchiamo il tag <h1> che troveremo sotto questa forma: <h1 class=”site-title”> e trasformiamolo in questo modo: <h1 class=”site-title” itemprop=”headline”>. In questo modo abbiamo marcato come titolo principale il nome che abbiamo deciso di dare al nostro sito.
FILE INDEX.PHP
Una volta aperto il file index.php con il nostro editor di testo, cerchiamo il tag <main> che si presenta in questa forma: <main id=”main” class=”site-main” role=”main”>. Riscrivetelo così:
<main id=”main” class=”site-main” role=”main” itemprop=”mainContentOfPage” itemscope=”itemscope” itemtype=”http://schema.org/Blog”>
Se si tratta di un’attività commerciale possiamo anche sostituire “Blog” con “LocalBusiness” o lo schema di dati più idoneo al vostro sito che potete cercare su schema.org. Il tag main definisce il contenuto principale della nostra pagina. E’ il cuore della pagina stessa. Per questo è raccomandato inserirvi gli attributi necessari all’identificazione dell’argomento trattato.
Anche su questo file del tema twentyfifteen troviamo un tag <h1>. Questa volta si tratta del titolo del singolo articolo. Io sono del parere che avere due tag h1 sulla stessa pagina non sia dannoso se indicano due contenuti principali. Quindi cerchiamo l’istruzione <h1 class=”page-title screen-reader-text” ><?php single_post_title(); ?></h1> e riscriviamola così:
<h1 class=”page-title screen-reader-text” itemprop=”headline”><?php single_post_title(); ?></h1>
Se sul vostro tema trovaste questa istruzione marcata come h2, potete tranquillamente implementarla con la proprietà headline come nell’esempio sopra.
FILE SINGLE.PHP
E’ la volta di aprire il single.php e cercare questa istruzione:
<main id=”main” class=”site-main” role=”main”>
Del tag main abbiamo già parlato. Qui andiamo a modificarlo per facilitare la lettura agli spider della struttura della pagina di nostri articoli. Quindi la modifica che va fatta è questa:
<main id=”main” class=”site-main” role=”main” itemprop=”mainContentOfPage” itemscope=”itemscope” itemtype=”http://schema.org/Blog”>
FILE CONTENT.PHP
Spostiamoci sul file content.php e andiamo a cercare l’istruzione <article id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>. Modifichiamola in questo modo:
<article id=”post-<?php the_ID(); ?>” <?php post_class(); ?> itemscope=”itemscope” itemtype=”http://schema.org/BlogPosting” itemprop=”blogPost”>
Modifichiamo anche qui il tag <header> <header class=”entry-header”> riscrivendolo così:
<header class=”entry-header” itemscope=”itemscope” itemtype=”http://schema.org/WPHeader” role=”banner”>
Ed infine modifichiamo <div class=”entry-content”> in <div class=”entry-content” itemprop=”text”>
FILE CONTENT-PAGE.PHP
Qui troveremo il tag <article>, quello che introduce l’articolo vero e proprio contenuto nella nostra pagina. Questa la forma in cui si presenta:
<article id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
e questo il modo in cui dobbiamo trasformarlo
<article id=”post-<?php the_ID(); ?>” <?php post_class(); ?> itemscope=”itemscope” itemtype=”http://schema.org/BlogPosting” itemprop=”blogPost”>
L’esempio è indicato per un blog ma nel caso si tratti della pagina di un normalissimo sito potremmo sostituire “blogPost” con “Article”.
Ripetiamo la modifica al tag <header> <header class=”entry-header”> riscrivendolo così:
<header class=”entry-header” itemscope=”itemscope” itemtype=”http://schema.org/WPHeader” role=”banner”>
FILE SIDEBAR.PHP
Nel sidebar.php di questo tema troviamo il tag <nav>, quello che indica gli elementi del menù per la navigazione del sito. Nella maggior parte dei casi il nav si trova nell’header.php.
Sostituiamo l’istruzione <nav id=”site-navigation” class=”main-navigation” role=”navigation”> con
<nav id=”site-navigation” class=”main-navigation” role=”navigation” itemscope=”itemscope” itemtype=”http://schema.org/SiteNavigationElement“>
Definiamo inoltre il ruolo di questa area del sito modificando <div id=”secondary” class=”secondary”> trasformandola in
<div id=”secondary” class=”secondary” role=”complementary” itemscope itemtype=”http://schema.org/WPSideBar”>
FILE FOOTER.PHP
E’ la volta di andare a modificare il footer.php delegando al tag <footer> il compito di fornire informazioni circa il sito. Apriamo il file e andiamo a cercare <footer id=”colophon” class=”site-footer” role=”contentinfo”>. Implementiamolo così:
<footer id=”colophon” class=”site-footer” role=”contentinfo” itemscope=”itemscope” itemtype=”http://schema.org/WPFooter”>
TEST MICRODATI
Bene! Non avrai fatto tutto questo lavoro per niente vero? Vogliamo vedere se hai implementato correttamente i microdati sul tuo WordPress? Si??? Ottimo. Allora, carica i files modificati sul server, sovrascrivendo gli esistenti (hai fatto il backup che ti dicevo all’inizio? Se non l’hai fatto sei un asino e fallo immediatamente. Poi torna qui e sovrascrivi i files modificati).
Apri il test per i microdati e verificane la correttezza. Potresti trovare qualche errore ma fortunatamente lo strumento te lo indica e ti da lo spunto per correggere. Basta applicarsi un po e tutti gli errori saranno risolti! Bello e Facile!
SCHERMATA BIANCA?
Può anche succedere che dopo aver modificato i files ci appaia una bella schermata bianca al posto del sito. Succede se abbiamo sbagliato qualcosa durante le modifiche. Magari abbiamo cancellato un’apice o messo una virgola in più o addirittura cancellato una porzione di codice di qualcuno dei files che stavamo modificando! Niente paura! Ricarichiamo i files originali contenuti nel backup ed il problema è risolto.
Ma ora sei al punto di partenza e non hai più i microdati sul sito. Hai perso due ore senza concludere nulla! Ricominciare da capo? Noooooooo!!! Sei matto?
Scaricati un programma che permette di confrontare due files uguali e che ne evidenzia le differenze (per esempio “Kompare” per Linux o “WinMerge” per Windows). Apri ad uno ad uno i files modificati confrontandoli con gli originali. Vedi dove ti evidenzia le differenze così capisci facilmente dove sta il problema. Una volta corretto e salvato il file (o i files) che provoca l’errore, ricaricalo sul server e goditi il tuo sito con i micordati.
CONFRONTO FRA DUE FILES PHP CON WINMERGE
CONCLUSIONI
Queste sono a mio parere, le sezioni principali dove implementare il codice con i microdati per un sito realizzato con WordPress. Sono gli elementi base per identificarne inequivocabilmente le varie sezioni e la loro funzione. Ciò aiuta i motori di ricerca a comprenderlo meglio ed a restituirlo, sui risultati di ricerca, nella posizione più attinente possibile alle parole chiave digitate dagli utenti in relazione ai suoi contenuti.
C’è da dire che ogni sito tratta il suo argomento: potrebbe essere un ristorante, un’azienda che sviluppa software, uno studio notarile, un gruppo musicale o una ditta di costruzioni. Non importa. Per ogni categoria possiamo utilizzare microdati specifici che troviamo sul sito “schema.org”. Troviamo “Organization” per le organizzazioni , “LocalBusiness” per aziende locali, “Place” per i luoghi, “Product” per i prodotti, “Offer” per le offerte, “Person” per le persone, ecc… E per ogni tipo di “Schema” esistono delle proprietà annidate che se utilizzate correttamente, ci permettono di dare in pasto ai motori di ricerca un sito che fornisce in maniera semplice e ordinata, tutte le informazioni necessarie per essere indicizzato e posizionato correttamente.
Be the first to comment