Pubblicato il 29/07/13 - aggiornato il  | 32 commenti :

Come inserire i microdati Blogposting nel modello di Blogger.

Come aggiornare il template di Blogger inserendo i Microdati BlogPosting di Schema.org per avere snippet più ricchi nei risultati delle ricerche di Google.
Nell'articolo sull'Evidenziatore di dati degli Strumenti per Webmaster ho accennato ai Rich Snippet e ai Dati Strutturati introdotti da Google per arricchire i risultati di ricerca. Gli snippet sono formati da poche righe visualizzate sotto alle ricerche con lo scopo di dare agli utenti delle informazioni aggiuntive e del motivo per cui tali link risultano pertinenti rispetto alla query ricercata. Bisogna fare in modo che Google comprenda i contenuti delle nostre pagine in modo da creare dei rich snippet che possano invogliare gli utenti a cliccare sul nostro risultato di ricerca piuttosto che su un altro.

In fatto di Dati Strutturati, Google supporta i Microdati, i Microformati e gli RDFa ma solo i Microdati sono consigliati. I microdati HTML5 servono appunto per descrivere un tipo specifico di informazioni come per esempio recensioni o notizie su persone o eventi. I microdati utilizzano degli attributi nei tag, <div> o <span> quasi sempre, per assegnare nomi brevi a elementi o a proprietà. Le proprietà sono dei tag di un particolare elemento. Per esempio un Elemento Evento ha come Proprietà il Luogo, l'Ora di Inizio, la Data e la Categoria. Si utilizzano i Microdati inserendo dei tag nel codice sorgente.

Se si mette dentro un <div> il tag itemscope si indica a Google che il contenuto racchiuso tra <div> e </div> è un Elemento. L'altro tag itemprop="name" denota un nome; itemtype="http://data-vocabulary.org/Person indica invece che quel dato elemento è una persona. Vengono usate a tale scopo le proprietà della sezione BlogPosting di Schema.org per arricchire il codice con questi microdati in modo che Google possa rilevare più facilmente gli snippet pertinenti.

COME INSERIRE I MICRODATI SU BLOGGER

I microdati del tipo BlogPosting sono stati già inseriti nei modelli di Blogger più recenti. Quindi se utilizzate un template ufficiale di Blogger solo da qualche settimana avrete questi tag già nel codice del modello. Evidentemente ci sono però utenti di Blogger che usano un modello di uno o due anni fa, che hanno modificato con pazienza e che non hanno questi microdati. Senza considerare i template scaricati da internet che oltre a non avere i microdati sono spesso mancanti di molte altre cose.

Si può fare una comparazione tra il codice del nostro template e quello magari di un blog di prova creato proprio oggi per rilevare i tag mancanti in modo da aggiungerli. Il nuovo Editor HTML di Blogger in un certo senso aiuta perché suddivide le aree del codice in sezioni in modo da rendere questa operazione meno difficoltosa. Ho fatto questo lavoro per il modello Simple (o Semplice) e non escludo che le modifiche dei tag possano andar bene anche per altri modelli.

Cosa fondamentale è quella di salvare il template prima di procedere a ogni modifica. Dopo essere andati su Modello > Modifica HTML si clicca su Vai al widget > Blog1. Si clicca sulla freccetta nera sulla sinistra per collassare il codice del widget Blog1 e si apre con la solita freccetta la sezione

<b:includable id='post' var='post'>   in questo modo

microdati-blogger-template
In sostanza bisogna trovare i tag dei microdati nel nuovo template per aggiungerli a quello vecchio. Il primo blocco che viene trovato è il seguente

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

dove le stringhe da aggiungere sono state colorate di rosso. Successivamente si aggiungono anche le parti in rosso alle seguenti righe:


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

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>

Si va quindi nella sezione

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

e si procede nello stesso modo con i seguenti blocchi di codice


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

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>

<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                     
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <span itemprop='name'><data:post.author/></span>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                      <span itemprop='name'><data:post.author/></span>
                    </span>
                  </b:if>
                </b:if>
              </span>


<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'>

Infine si clicca sulla sezione

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


e si apporta la seguente modifica

<h3 class='mobile-index-title entry-title' itemprop='name'>

Si salva il template. Dopo un po' potrete andare sugli Strumenti per Webmaster per verificare su Aspetto nella ricerca > Dati strutturati se sono stati rilevati i markup BlogPosting da Schema.org 

blogposting-schema-org


Una verifica immediata può però essere fatta usando lo Strumento dei dati strutturati e incollando l'URL del vostro dominio o di una qualsiasi pagina del sito per poi cliccare su Anteprima

blogposting-blogger

Scorrete la pagina fino a trovare type: schema.org/blogposting per verificare il corretto funzionamento del codice che è stato appena inserito.

MARKUP BLOGPOSTING PER ALTRI MODELLI DI BLOGGER

Se avete un template ufficiale di Blogger un po' datato, vale a dire che abbia almeno sei mesi, e che non sia il Modello Semplice potete ugualmente controllare se abbia o meno i Microdati BlogPosting e nel caso provvedere a inserirli. Dopo aver salvato il template, create un blog di prova con un modello che sia lo stesso di quello che state usando. Parlo come modello di partenza e non occorre che abbia ovviamente tutti i widget e le personalizzazioni che avete inserito nel frattempo.

Andate su Modello > Modifica HTML del blog di prova e, con l'ausilio di Ctrl+F, cercate tutte le occorrenze di itemprop, itemscope e itemtype. Estraete i blocchi di codice in cui sono inserite quindi andate su Modello > Modifica HTML del vostro blog e controllate tali blocchi nel template.

modello-markup-blogposting
Se il modello è di qualche mese o qualche anno fa non saranno presenti i tag di markup di BlogPosting che quindi dovranno essere incollati nella stessa posizione del blog di prova. Si salva il modello e si controlla con il Tool per i Dati Strutturati che non si siano fatti errori denotati da messaggi in rosso dopo aver cliccato su Anteprima.


32 commenti :

  1. Grazie Ernesto, il tuo blog è oramai un appuntamento essenziale per me. Ora provo subito a fare queste modifiche.
    Un saluto e buona Estate.

    Pamela

    RispondiElimina
  2. Io non ho capito molto bene a cosa serve. A livello estetico sulle ricerche cosa ci sarà in più facendo queste modifiche? Le hai fatte anche tu in questo blog?
    Comunque ho controllato (ancora non ho fatto alcuna modifica) e su hcard mi segna zero pagine.

    RispondiElimina
  3. Mi sono accorto che ci ha pensato Blogger a fare in automatico 'tutte' le modifiche nel modello, meglio così. Mi resta il dubbio sul funzionamento perchè su BlogPosting e hatom ci sono valori credibili mentre hcard è sempre fisso sullo zero.

    RispondiElimina
    Risposte
    1. Nel mio modello i tag su Blogposting li ho dovuti aggiungere ma non sono stati ancora rilevati mentre gli altri 2
      @#

      Elimina
  4. Ciao Ernesto, ho provato a modificare il mio template ma non solo non trovo (nonostante la ricerca col tasto F3) la stringa pur avendo il modello Simple, nemmeno dopo la creazione di un blog di prova la trovo, come non trovo le occorrenze itemtype etc... Possibile?
    Grazie

    RispondiElimina
    Risposte
    1. ...ops... la stringa "b:includable id='post' var='post'"

      Elimina
    2. Non si cerca più il codice con F3 ma si usa questo sistema
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      Guarda anche il video
      @#

      Elimina
    3. Come sempre, chiarissimo e utilissimo... Grazie!

      Elimina
  5. Salve, nella casella dati strutturali compare "Non rileviamo i dati strutturati sul tuo sito.", anche se nello strumento di test per i dati strutturati risulta che il sito non ha errori. Come posso fare?
    grazie

    RispondiElimina
    Risposte
    1. Io li ho visti dopo almeno una settimana che avevo modificato il modello secondo le istruzioni di questo post
      @#

      Elimina
  6. Ernesto ciao, sono andata nel mio modello per fare delle modifiche e mi è uscita la scritta Invalidy Security Token Error 403, mi è preso un accidente... che è successo? Il blog lo vedo ma non gli annunci, se entro nel modello c'è tutto, a parte questa scritta

    RispondiElimina
    Risposte
    1. Non ho capito bene. Riesci a entrare nel modello o c'è un redirect? Questa scritta dove la vedi? Nell'URL del redirect del modello? Se le risposte a queste domande sono positive si tratta dell'ultimo widget che hai installato che ha creato un loop. Devi quindi disinstallarlo e se non risolvi provare a disinstallare uno per uno anche gli altri.
      @#

      Elimina
    2. Ernesto, quando vado su modello, al posto dello sfondo c'è questa scritta in bianco e nero, nel blog non vedo gli annunci ne tutti i widget dei followers di google, se entro su modello c'è tutto, entro anche in designer, ma anche un'altra cosa è strana che ci mette tanto ad aprirsi la pagina come se girasse a vuoto, poi la vedo ma è lentissima... mamma mia che è successo aiuto. :(

      Elimina
  7. scusa ti lascio il link mi dici se tu vedi qualcosa per favore?
    lemedichessediclo.blogspot.it

    RispondiElimina
    Risposte
    1. Il sito funziona e anche gli annunci si vedono. Forse hai un widget che crea questi problemi. Dovresti andare su Layout e cominciare a togliere gli ultimi che hai inserito. Nel modello riesci a modificare il codice? Non è che hai un virus nel PC perché potrebbe anche essere quello anche se te lo dico solo per escludere tale eventualità
      @#

      Elimina
    2. ci ho pensato che potrebbe essere un virus sto monitorando ma non mi dice niente, non ho inserito widget nuovi in realtà ho solo spostato e messo dei margini, ho provato a mettere il bordo ma poi mi sono accorta di questa cosa, l'unica novità che avevo cambiato il codice di adsense perchè l'altro non funzionava e adesso io non li vedo

      Elimina
    3. Per cercare il codice Adsense devi pigiare su Ctrl+F e cercare googlesyndication
      @#

      Elimina
  8. allora adesso ho tolto proprio i widget che vedevo sia nella sidebar che nel footer,ho tolto anche quelli di adsense e adesso sono comparsi quelli di google, il sito gira veloce ma ancora c'è quella scritta sul modello

    RispondiElimina
  9. sono entrata nel modello ho trovato googlesyndication ma come li toglo questi? :)

    RispondiElimina
    Risposte
    1. Devi andare su Adsense e capire dove inizia e dove finisce il codice. Se hai seguito un mio tutorial io ci metto sempre dei commenti tipo e per capirlo più facilmente
      @#

      Elimina
    2. < !-- Inizio codice -- > < !-- Fine codice -- >

      Elimina
  10. Ciao Ernesto, scusami se sono fuori tema in questi commenti... certo che ho seguito tutto ma non ho mai inserito adsense nel modello ho sempre usato i codici nei widget, mi ero ripromessa in seguito di capire meglio come farlo usando il parse (che non ho mai usato)

    RispondiElimina
  11. Io credo invece che qualcosa sia successo quando ho provato a creare le tabelle con windows live dove avevo inserito anche questi codici (per fare delle prove) stupidamente non ho usato il blog di prova, infatti dimmi se sbaglio nel modello appare qualcosa tipo:

    td valign='top' width='300'><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- lemedichessediclo_300x250 --&gt

    che si ripete per due codici adsense,ma devo capire dove inizia e dove finisce per toglierli, altrimenti mi tocca tornare indietro all'ultimo salvataggio del modello e ripristinarlo, ora ho tolto tutti i contenuti nella sidebar ...
    però perchè tu vedevi tutto e io no? questo non me lo spiego

    RispondiElimina
    Risposte
    1. Il codice di una tabella inizia invariabilmente con < table > e finisce con < /table >. Però se vedi pagead2.googlesyndication.com significa che adsense avevi provato a inserirla nel modello appunto con una tabella. Dopo aver salvato il modello (va fatto sempre!!!!) prova a togliere il codice della tabella
      @#

      Elimina
  12. Questo commento è stato eliminato dall'autore.

    RispondiElimina
    Risposte
    1. Purtroppo non ho trovato un sistema funzionante per i metadati Blogposting per Blogger. Anche queste modifiche non risolvono
      @#

      Elimina
  13. AH ,ok Ernesto ho eliminato il commento perchè stavo aggiornandolo, nel frattempo che rispondessi ho controllato le stringhe che segni sopra e sono tutte aggiornate. Ma con il Tool per i Dati Strutturati segna sempre nessun dato presente.E ovviamente in strumenti per webmaster indica che manca autho e update. Ho letto che ovviamente ciò inficia le posizioni sui motori.........

    RispondiElimina
    Risposte
    1. Non credo influenzi il posizionamento più di tanto. Credo che Google stia rivedendo questi strumenti perché troppo complessi da utilizzare. Ha già cominciato eliminando l'Authorship
      @#

      Elimina
    2. Grazie, approfittando della tua pazienza: la dicitura che viene sempre rilevata con il tool per dati strutturati " La proprietà postId di un oggetto di tipo BlogPosting non viene riconosciuta da Google." è sempre da trascurare? Come saprai è un numero abbastanza lungo.......come ringraziarti ? posso mettere qualche indicazione sul tuo sito nel mio?

      Elimina
    3. Non posso sapere quale sia l'importanza di queste informazioni. Dalla mia esperienza con questo sito e con altri dico che è meglio focalizzarsi su altri temi. Nel tuo sito puoi mettere le indicazioni che vuoi, puoi anche riportare interi paragrafi inserendo un link al post originale
      @#

      Elimina
  14. Ciao Ernesto, domanda un pò difficile: è corretto avere per lo stesso blog più di un formato di microdati (ad esempio JSON-LD "Blogposting" e JSON-LD "Recipe")? Sarebbe invece corretto utilizzare, ad esempio, la combinazione JSO-LD "Blogposting" e microdati/microformati "Recipe"?
    Spero di essere stato chiaro...

    Grazie in anticipo
    Fabio

    RispondiElimina
    Risposte
    1. Dalla tua domanda arguisco che hai un blog di ricette 🙂. Onestamente non ti so rispondere con certezza però non vedo perché non avere si possano avere entrambi i formati di microdati. L'importante è che siano corretti sintatticamente. Puoi sempre testare con Google
      https://search.google.com/structured-data/testing-tool?hl=it
      per vedere se eventualmente sono presenti errori
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy