Risolvere gli errori nei Dati Strutturati BlogPosting di Blogger.

Testare se i Dati Strutturati HATOM e BlogPosting sono stati ben implementati nel modello di Blogger e come eliminare gli errori image_url, blogId, postId, datePublished, headline, image, e publisher.

Google ci ha informati che prossimamente modificherà il proprio algoritmo per dare un maggior rilievo ai contenuti presenti nella versione mobile dei siti. Quindi i più di 200 fattori di ranking si amplieranno ulteriormente e agli webmaster viene consigliato di porre maggior cura nel configurare correttamente la versione mobile.

Chi abbia un Modello Responsive di Blogger o un Tema Responsive di Wordpress in teoria non dovrebbe far nulla di più di quello che ha già fatto adesso. Quello che interessa a Google oltre ai contenuti è che vengano implementati quelli che vengono definiti Dati Strutturati.

Negli anni passati è stato creato uno standard internazionale a cui aderiscono i maggiori player del web denominato Schema.org per promuovere schemi dei dati strutturati per pagine web, messaggi email, ecc.  Si tratta di un vocabolario comune che permette agli webmaster di avere il massimo beneficio per i loro sforzi. Abbiamo già visto come con l'utilizzo di metatag si migliori la condivisione su Facebook, Google e Twitter. Vediamo adesso altri metatag e dati strutturati.

SCHEMA.ORG PER GLI UTENTI DI BLOGGER

Visto che la piattaforma Blogger fa parte di Google ci si aspetterebbe che i blog che la utilizzano siano già ottimizzati per lo Schema.org ma non è così. Apriamo il Tool che Testa i Dati Strutturati e incolliamo nel campo Recupera URL l'indirizzo di un post pubblicato in un blog con un modello ufficiale quindi clicchiamo su Esegui Test e visualizziamo il risultato

Si visualizzeranno ben 7 errori e 2 avvisi tutti nella sezione BlogPosting mentre in quella hatom non ci dovrebbero essere errori. Cliccando su hatom dovremo vedere tutti i markup del post

con titolo, data, autore, incipit e tag. Nella sezione BlogPosting ci sono invece errori e avvisi. I primi riguardano image_url, blogId, postId, datePublished, headline, image, e publisher mentre i secondi sono dovuti alla mancanza dei campi consigliati dateModified e mainEntityOfPage.

COME ELIMINARE GLI ERRORI BLOGPOSTING NELLA VERSIONE DESKTOP

Vediamo passo per passo come risolvere tutte queste problematiche per quello che riguarda la versione desktop e quindi successivamente di passare a quella mobile. Consiglio di procedere non solo salvando il template all'inizio delle modifiche ma di salvarlo periodicamente in file distinti tutte le volte che si operano delle modifiche. 

Si va su Modello -> Modifica HTML e si cerca la riga 

<b:includable id='post' var='post'>

che è quella in cui inizia la sezione desktop. Si scorre il codice fino a trovare la riga

<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

per i modelli ufficiali di Blogger che diventa la seguente per template scaricati da internet

<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

Tale riga va cancellata e sostituita con quest'altro codice

<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<meta expr:itemid='data:post.link ? data:post.link : data:post.url' itemType='https://schema.org/WebPage' itemprop='mainEntityOfPage' itemscope='itemscope'/>
                       <meta expr:content='data:post.timestampISO8601' itemprop='datePublished'/>
                       <meta expr:content='data:post.lastUpdatedISO8601' itemprop='dateModified'/>

Si salva il modello. Se adesso nel Test per i Dati Strutturati andiamo su Nuovo Test visualizzeremo sempre 7 errori ma non ci saranno più i 2 avvisi. Ci dovrebbero essere due righe come queste e vanno sostituite entrambe. La seconda fa parte della sezione per il mobile.

Scorrendo il codice verso il basso troveremo questo blocco

<b:if cond='data:post.thumbnailUrl'>
   <meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/>
</b:if>

Ce ne saranno due identici. Dovremo eliminarli entrambi. In questo modo verrà eliminato l'errore image_url. Ce ne possiamo rendere conto salvando il modello e ripetendo il test. Il secondo sarà nella sezione mobile che inizia con la riga

<b:includable id='mobile-post' var='post'>

Lo possiamo quindi anche eliminare in un secondo tempo quando ci occuperemo di tale sezione. Subito sotto a il codice da cancellare ci sono queste altre due righe

<meta expr:content='data:blog.blogId' itemprop='blogId'/>
          <meta expr:content='data:post.id' itemprop='postId'/>

che vanno anch'esse cancellate. Queste due righe sono presenti due volte in entrambe le sezioni. Dopo questa operazione e dopo aver salvato il modello saranno eliminati gli errori blogId e postId. Se ripetiamo il test gli errori saranno rimasti solo 4.

Per eliminare l'errore headline dobbiamo cercare questa riga

<h3 class='post-title entry-title' itemprop='name'>

che va sostituita con quest'altra

<h3 class='post-title entry-title' itemprop='headline'>

Anche in questo caso ci sono due occorrenze. Dopo aver salvato il modello e aver ripetuto il test gli errori saranno ridotti a 3 o anche meno.

Adesso cercate la riga <data:post.body/> che rappresenta i contenuti del post. Ce ne dovrebbero essere due nella versione desktop. Subito sotto a questa riga si incolla questo codice

<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
   <b:if cond='data:post.firstImageUrl'>
    <img expr:src='data:post.firstImageUrl' style='display:none;'/>
     <meta expr:content='data:post.firstImageUrl' itemprop='url'/>
  </b:if>
    <meta content='640' itemprop='width'/>
    <meta content='480' itemprop='height'/>
</div>
<div itemprop='publisher' itemscope='itemscope' itemtype='https://schema.org/Organization'>
    <div itemprop='logo' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAkj_n1ViUdE4CyURHj2hZuEFU5yQWU2dt5RxUyrLGB-s9WvwTcaNmxQNR9yB9Jul4Xgm3Hp7c81qwvY7jkj29uw5KH9rhF541J4y0Bgmn0mzQlRPF4BFRsaKfsN6iHv92xztQ1hkeq_k/s640-Ic42/logo800.png' style='display:none;'/>
      <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAkj_n1ViUdE4CyURHj2hZuEFU5yQWU2dt5RxUyrLGB-s9WvwTcaNmxQNR9yB9Jul4Xgm3Hp7c81qwvY7jkj29uw5KH9rhF541J4y0Bgmn0mzQlRPF4BFRsaKfsN6iHv92xztQ1hkeq_k/s640-Ic42/logo800.png' itemprop='url'/>
      <meta content='640' itemprop='width'/>
      <meta content='480' itemprop='height'/>
    </div>
    <meta expr:content='data:blog.title' itemprop='name'/>
</div>

Si salva il modello. Al posto degli URL colorati di rosso inserite l'indirizzo del logo del vostro blog mentre i valori 640 e 480 rappresentano le dimensioni delle foto che solitamente pubblicate. 

A questo punto non ci dovrebbero essere più errori. Se così non fosse si clicca sull'errore

Sulla sinistra si visualizzerà il codice a cui si riferisce l'errore in modo da provare a sanarlo.

APPLICARE I MARKUP BLOGPOSTING ALLA VERSIONE MOBILE DI BLOGGER

Per verificare se ci sono errori nella versione mobile di Blogger bisogna scegliere un qualsiasi post del nostro blog e aggiungere all'URL la stringa ?m=1 quindi inserirlo nel campo Recupera URL

Si va su Esegui Test. Se ci fossero degli Errori cercate la riga

<b:includable id='mobile-post' var='post'>

quindi scorrendo verso il basso cercate le stesse righe della versione desktop e cancellatele, modificatele o aggiungetevi altro codice come già fatto per la versione desktop.

CONSIDERAZIONI CONCLUSIVE

Penso che quello che maggiormente conta per un buon posizionamento nei risultati di ricerca sia il contenuto del post oltre a un titolo accattivante. Comunque l'implementazione di questi tag possono dare un aiuto a migliorare la SERP. Anche scalare una sola posizione per una o più parole chiave può portare a un significativo aumento del traffico. In un prossimo articolo mi occuperò dei tag BreadCrumbs ovvero Pangrattato che presumo possono essere implementati anche nel modello di Blogger. Attualmente non sono ancora riuscito a risolvere tutte le problematiche ma sono fiducioso di farlo in futuro. Chi abbia un template scaricato da internet potrebbe trovarsi di fronte a errori anche nella sezione hatom e a codici diversi da quelli mostrati in questo post. In tal caso posso essere di poco aiuto. 

Aggiornamento: Per evitare Errori nel campo "author" occorre aggiungere il nome utente nei post andando su Layout -> Post del blog -> Modifica e mettendo la spunta a Pubblicato da.... Chi volesse nascondere il nome autore senza avere Errori Blogsposting può seguire queste indicazioni. 

Aggiornamento n°2 27-8-2018 - Sono state modificate le regole per le dimensioni del logo delle immagini. Le nuove dimensioni da inserire sono le seguenti

<meta content='600' itemprop='width'/>
<meta content='60' itemprop='height'/>

pare per adattare i dati strutturati alle pagine AMP. Prima non c'era una regola per le dimensioni.