Pubblicato il 07/11/16e aggiornato il

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

schema-org-blogger
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

hatom-blogger

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.

errori-blogposting

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.

blogposting-errori

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://lh3.googleusercontent.com/-n1toMHyv6BM/VtrRhf612gI/AAAAAAAA0io/W8YAXrP3Z30/s640-Ic42/logo800.png' style='display:none;'/>
      <meta content='https://lh3.googleusercontent.com/-n1toMHyv6BM/VtrRhf612gI/AAAAAAAA0io/W8YAXrP3Z30/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

errore-datepublished

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

blogposting-senza-errori


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

test-dati-strutturati

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. 




17 commenti :

  1. Non lo potevi far prima questo post? La scorsa estate ho perso mezza giornata per risolvere gli errori nei dati strutturati.

    RispondiElimina
  2. Ciao Ernesto e complimenti come sempre per le dritte che ci dai. Ho seguito passo passo la tua guida ed ho risolto quasi tutti gli errori. Ne rimane uno che persiste in tutti i miei blog ed è quello legato al campo author (Devi specificare un valore per il campo author). Sapresti per cortesia dirmi quali modifiche fare nel codice per risolvere questo problema?Grazie mille

    RispondiElimina
    Risposte
    1. Il campo author credo sia riferito ai dati strutturati hatom. Dovresti cliccare sull'errore per poi vedere a quale riga di codice del tuo template si riferisce e fare riferimento magari a un blog di prova creato sul momento che non dovrebbe avere quell'errore.
      @#

      Elimina
    2. Per Fabio, l'errore si risolve andando su Layout > Post del blog > e poi mettere la spunta per far apparire il tuo nome sotto agli articoli.
      Guida perfetta, grazie.

      Elimina
  3. Ciao Ernesto e grazie : ho risolto quasi tutti gli errori salvo uno : inserendo il codice sotto la stringa che rappresenta i contenuti del post mi segnala errore XML nella parte dove viene inserito l'indirizzo del logo . Dice che va seguito da "> oppure "/> . ma anche apportando queste modifiche mi segnala errore XML. Come posso fare ? ti ringrazio anticipatamente ma soprattutto per aver più che dimezzato gli errori ( da 7 a 3) .

    RispondiElimina
  4. Devi inserire una slash cioè / prima del segno di maggiore cioè /> però nel codice del post c'è quindi è strano
    @#

    RispondiElimina
    Risposte
    1. può essere che dia errore poiché l'url del logo inizia con HTTP e non HTTPS ? ho solo inserito l'indirizzo del logo e di tutto il codice l'unico errore XML me lo segnala nella stringa dove è inserito l'url del logo non su altre parti del codice

      Elimina
    2. Non credo. Prova con l'URL del mio logo per poi eventualmente cambiarlo. Non è che hai abilitato HTTPS in Impostazioni -> Di Base? In ogni caso non vedo che c'entri con il modello
      @#

      Elimina
  5. Ciao Ernesto, prima di tutto grazie per i preziosi consigli, ma ho un problema. Ho seguito attentamente tutti i passaggi e nella versione Desktop riscontro come unico errore "image_url" mentre nella versione da cellulare "blogld", "postld" e "name". Come potrei risolverli?

    RispondiElimina
    Risposte
    1. Per image_url cerca la stringa nel modello e cancella le tre righe mostrate nel post che la contengono. Per il resto devi cercare questa riga
      <b:includable id='mobile-post' var='post'>
      e subito sotto troverai queste altre righe
      <meta expr:content='data:blog.blogId' itemprop='blogId'/>
      <meta expr:content='data:post.id' itemprop='postId'/>

      che dovrai cancellare

      Elimina
  6. Ciao Ernesto, prima di tutto GRAZIE! perché ho risolto quasi tutti gli errori, me ne rimangono due, che il Test dei Dati Strutturati mi segnala come Image e Publisher. Quando vado a controllare il codice, mi segnala con la x rossa tutta la striscia div con post hentry uncustomized-post-template (non te la metto perché altrimenti non mi fa inviare il commento); però mi segnala solo quella parte con il div, tutti i meta che lo seguono, nel codice che hai indicato li considera corretti, per cui non so cosa sia che non va.

    Ho un dubbio per Non ho effettuato per questo alcuna modifica, aspettando una tua indicazione. Io non ne ho 2, ne ho 4, per cui non so sotto quali devo andare ad aggiungere la stringa che tu indichi.
    Sempre a proposito di questa stringa da te indicata, il mio blog non ha un logo (il suo nome è scritto con caratteri modificabili perché mi piace di più), dovrei aggiungere tutta la striscia, logo compreso, non potendo sostituire le parti in rosso? Avevo pensato che forse dovrei mettere solo questa prima parte, quella che termina subito dopo i meta con le dimensioni delle immagini, con la chiusura de div (scusa se non metto il codice, ma altrimenti non mi fa spedire il messaggio perché dice che non può accettare i tag ecc ecc). Ovviamente non lo so, conosco il linguaggio html in modo elementare e non sono sicura.
    Di nuovo grazie per tutto, il tuo blog è sempre una miniera preziosissima!

    RispondiElimina
    Risposte
    1. Perdona, con tutte le modifiche che ho dovuto fare al commento per far passare i vari codici, non mi sono accorta che è saltata la striscia di cui ti parlavo nella seconda parte. Il dubbio che ho riguarda , ne ho 4, non 2 e non so dove aggiungere il codice da te indicato: sotto tutti e 4? e, non avendo il logo, devo aggiungere anche la parte comprendente il testo in rosso?
      Grazie di nuovo e scusa il doppio messaggio...

      Elimina
    2. Per pubblicare questo post ho preso come test un modello ufficiale di Blogger. Ogni modello fa storia a sé. Non sono in grado di dirti nulla di certo specie se hai un template scaricato da internet.
      Il consiglio che ti do è quello di eliminare più errori possibili. Se non hai un logo per il tuo sito lo puoi sempre creare così elimini quell'errore. Segui questo post per caricare la foto
      http://www.ideepercomputeredinternet.com/2016/10/hotlink-direct-link-google-photos.html
      Non mi dovevi dire tanto la riga che dava errore ma il tipo di errore. Dalla riga penso che potrebbe mancare il link al tuo profilo. Leggi il commento 2.b
      @#

      Elimina
    3. Grazie mille per la risposta, Ernesto, ho un modello Fantastico di Blogger modificato da me per colori, caratteri, ecc, secondo il procedimento guidato che c'è su Blogger. L'errore che mi dà riguarda Image e Publisher. Mi dice

      image
      Devi specificare un valore per il campo image.
      publisher
      Devi specificare un valore per il campo publisher.

      poi se clicco sopra, per entrambi, sulla colonna di sinistra del Test di controllo dei Dati strutturati, mi manda alla striscia 'post hentry uncustomized-post-template' e mi evidenzia solo quella parte compresa tra le graffe, non i meta sottostanti aggiunti con il tuo codice.
      MA se io non ho un logo e non lo voglio, non c'è una soluzione per evitare l'errore? Devo essere obbligata a fare quello che dice Google?!
      Un'altra cosa, nella pagina per i webmaster, nei Dati strutturati mi segnala come errore Manca Author e Manca updated... ma l'author adesso c'è (e infatti il Test non me lo dà più come errore, nonostante a me non piaccia per niente avere il mio nome sotto ogni post...). Di nuovo GRAZIE!!!

      Elimina
    4. Per il campo publisher dovresti avere già questa riga

      <div itemprop='publisher' itemscope='itemscope' itemtype='https://schema.org/Organization'>

      copiata da questo post. Aggiungi quest'altra

      <link href='https://plus.google.com/109971217617812630980' rel='publisher'/>

      subito prima di </head>
      Dove al posto di 109971217617812630980 devi mettere il tuo ID Google+.

      Elimina
    5. Grazie mille, Ernesto, proverò queste indicazioni che mi hai dato. La cosa che me le fa girare è obbligarmi a fare cose che non voglio (il logo, il profilo Google+, lo lascerò vuoto, che devo fa'?! ;) ) Grazie per la tua gentilezza e disponibilità, come sempre!

      Elimina
    6. Grazie Ernesto, ho risolto tutto e non ho più errori. Per il campo publisher nessuna delle soluzioni da te indicate era sufficiente senza dare l'ok a "mostra l'autore" in Layout - Post del Blog - Modifica. O mostra autore è spuntato o niente (mi piacerebbe, a questo punto, che il profilo autore fosse 'sopra' tutti i pulsanti della condivisione, immediatamente sotto il testo dell'articolo, ma da Modifica Post non me lo fa fare, per cui cercherò altre soluzioni).
      Così non è stato necessario completare il profilo di Google+, perché non ci tenevo per niente.
      Di nuovo grazie!!

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.