Pubblicato il 01/09/16 - aggiornato il  | 16 commenti :

Come mostrare la meta descrizione di Blogger prima del contenuto dell'articolo.

Come mostrare la metadescrizione della ricerca nel contenuto dei post di Blogger subito sotto al titolo nella versione desktop e/o mobile.
Una delle più importanti funzionalità a livello di SEO aggiunte da Blogger è stata indubbiamente quella organizzata nella sezione delle Preferenze di Ricerca che si trova in Bacheca -> Impostazioni. Si possono personalizzare le pagine non trovate, modificare il file robots.txt e creare dei reindirizzamenti 301 all'interno dello stesso blog.

La funzione più importante a mio parere è però quella della metadescrizione che può essere inserita in ciascun post che si pubblica o che si è già pubblicato. In questo modo i motori di ricerca ma anche i social network potranno rilevare tale descrizione e inserirla come snippet sotto il titolo del post nei risultati di ricerca o nelle condivisioni via Facebook

COME ABILITARE LA METADESCRIZIONE

Se ancora non avete abilitato questa importante opzione andate su Bacheca -> Impostazioni -> Preferenze di Ricerca -> Metatag -> Descrizione -> Modifica

metadescrizione-blogger

Si mette la spunta sul quindi si digita una descrizione degli argomenti trattati sul sito fino a un massimo di 150 caratteri quindi si va su Salva Modifiche. Tale descrizione è relativa a tutto il blog e non a un singolo articolo. Infatti in Blogger ci sono ben tre tipologie di Descrizione. Attivando tale opzione verrà mostrato nell'Editor sotto Impostazioni Post la Descrizione della Ricerca

descrizione-ricerca

In tale campo potremo digitare il sommario del tema trattato nel post in oggetto. Si va su Completato quando si è terminato di digitare. La Descrizione delle Ricerca può anche essere modificata cliccandoci sopra. È consigliabile digitare non più di 150 caratteri visto che quelli eccedenti non saranno mostrati da Google nei risultati di ricerca.





COME MOSTRARE LA DESCRIZONE DI RICERCA NEI POST


Tale descrizione non sarà visibile dal lettore che apre l'articolo ma sarà presente solo nel codice sorgente. Utilizzando i Tag dei dati per il layout di Blogger si può mostrare tale descrizione anche all'interno del post magari come riassunto del post stesso in una posizione simile a quella che ha il Cappello nel layout dei quotidiani cartacei. In sostanza vogliamo ottenere questo risultato

metadescrizione-articolo-blogger

Le metadescrizioni verranno aggiunte automaticamente con una semplice modifica del modello. Dopo aver salvato il template si va su Modello -> Modifica HTML e si cerca la sezione <b:skin>. Si clicca sulla freccetta nera posta a sinistra per visualizzare tutto il codice della sezione quindi con Ctrl+F si cerca la riga ]]></b:skin> e, subito sopra a questa, si incolla questo codice

/* Snippet Descrizione */
.ipcei-snippet {
clear: both;
float: none;
margin: 10px;
padding: 5px;
text-align:center;
border: dotted 2px #F95B5B;
background: #e1fbf8;
border-radius:8px;
}
span.ipcei-summary {
color: #393939;
font: italic 14px Georgia;
}

Successivamente si cerca la riga

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


che indica l'inizio della versione desktop del blog. Si scorre il codice verso il basso fino a che non si trova la riga   <data:post.body/> che è il tag del contenuto del post. Se si vuole mostrare la metadescrizione sopra al contenuto del post si incolla subito sopra a tale riga questo codice

 <b:if cond='data:blog.pageType == "item"'>
 <b:if cond='data:blog.metaDescription'>
<div class='ipcei-snippet'>
<span class='ipcei-summary' itemprop='description'>
<data:blog.metaDescription/>
</span></div>
</b:if>
</b:if>

Si salva il modello. Se avete un blog da molti anni è possibile che alcuni articoli non abbiano la metadescrizione e i due tag condizionali evidenziati di giallo servono proprio per non mostrare nulla nei post senza metadescrizione che altrimenti avrebbero questo aspetto

no-metadescrizione

che comunque non è neppure tanto male. Chi preferisce tale aspetto nei post senza metadescrizione può togliere i due tag evidenziati di giallo. I due tag evidenziati di verde servono invece per mostrare la metadescrizione solo nei post e non nella homepage o pagine di etichette. La riga evidenziata di beige è invece il tag che rappresenta la meta descrizione mostrandola prima del contenuto.  

PERSONALIZZAZIONE DELLA METADESCRIZIONE


Ho colorato di rosso i parametri più importanti da personalizzare per adattare l'aspetto e i colori della metadescrizione a quelli del nostro sito. Lo stile del bordo è punteggiato dello spessore di 2 pixel mentre il contenitore ha un arrotondamento di 8 pixel con sfondo di colore #e1fbf8;. Questo come gli altri codici dei colori possono essere modificati a piacere. Il testo della metadescrizione è centrato (tag center), in corsivo (tag italic) e con Georgia come famiglia di font da 14 pixel di dimensione. Ricordo anche che clear: both; serve per non avere altri elementi né a destra né a sinistra della metadescrizione e che i parametri margin e padding determinano rispettivamente le distanze esterne e interne del contenitore.

MOSTRARE LA METADESCRIZIONE ANCHE NELLA VERSIONE MOBILE DEI POST


Se si volesse mostrare la metadescrizione anche nella versione mobile si cerca nel modello la riga

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

e si scorre il codice verso il basso fino a che si trova il tag <data:post.body/> che indica il posizionamento del contenuto del post. Per mostrare la metadescrizione sopra al contenuto si incolla il secondo codice anche subito sopra a tale riga quindi si salva il modello.  

metadescrizione-versione-mobile

Naturalmente si può mostrare la metadescrizione solo nei dispositivi mobili e non in quelli desktop incollando il secondo codice solo nella sezione per il mobile. I più bravi possono creare anche dei CSS diversi (p.e ipcei-snippet, ipcei-snippet-m, ipcei-summary, ipcei-summary-m) per creare due codici distinti per mostrare la metadescrizione di aspetto diverso da desktop e mobile.

Aggiornamento: Ho aggiunto il tag itemprop='description' per attivare lo Schema.org.


16 commenti :

  1. Grazie per questo utilissimo post. Nella versione desktop sono riuscita facilmente, in quella mobile no: il secondo codice alla prima riga si trasforma automaticamente in questa riga: e, dal telefonino, non compare la metadescrizione. Mi puoi aiutare? Grazie e buon sabato, Rossana (moglie di Gian Maria).

    RispondiElimina
  2. Non prende il codice. Provo a dirlo così: alla fine della prima riga ad item si aggiunge automaticamente equot prima e dopo.

    RispondiElimina
  3. È normale. Il template di Blogger non supporta le virgolette inglese quindi l'ultima parte della riga diventa così
    "item"
    Se non ti funziona nella versione mobile dipende da altro. Spero che tu abbia letto tutto il post e che tu abbia inserito il codice una seconda volta nella sezione giusta
    @#

    RispondiElimina
  4. Grazie Ernesto. Sì, hai ragione. Ho riprovato a inserirlo diverse volte. Niente. Non so. Forse interferisce con qualcos'altro. Un saluto.

    RispondiElimina
  5. Allora vai su Modello > Cellulare e abilità la visualizzazione da mobile. Se lo hai già fatto controlla di aver scelto Personalizza tra i modelli disponibili per il mobile
    @#

    RispondiElimina
    Risposte
    1. Grazie Ernesto! Non avevo scelto Personalizza! Buona serata.

      Elimina
  6. Ciao, mi puoi aiutare? Sto cercando di inserire la metadescription dei post (oppure lo snippet con le prime righe dei post) all'interno della home page, sotto all'immagine. https://provambblog.blogspot.com
    Grazie se puoi consigliarmi qualche HTML da inserire. Le ho provate tutte ma non ci riesco.

    RispondiElimina
    Risposte
    1. Non è possibile. La homepage è una soltanto e non si possono inserire le metadescizioni di tutti i post che si possono aggiungere solo ai singoli articoli come illustrato in questo post.
      Puoi provare a inserire il codice di questo post in un'altra posizione che cmq non può essere all'interno del contenuto. O prima o dopo.
      @#

      Elimina
  7. buona sera
    ho inserito il codice per le descrizioni tempo fa e mi sembra di ricordare che prima vedevo la descrizione mentre ora invece, nella ricerca di ggole, vedo le prime righe del post.
    il codice è inserito (desktop) come descritto.

    ma sembra non funzionare.
    posso cercare qualcos'altro nel codice che mi può essere sfuggito ?
    grazie

    RispondiElimina
    Risposte
    1. Vero. Ho guardato il codice sorgente e nelle due righe
      meta content='.....' name='description'
      meta content='.....' property='og:description'
      al posto dei puntini c'è l'incipit del post invece della metadescrizione.
      Le istruzioni per visualizzare la descrizione di ricerca sono in questi post. Non so perché non ti funzioni. Forse hai cambiato qualcosa nel tema.
      @#

      Elimina
    2. ho provato a guardare anche io il sorgente della pagina ma name=descr e property:og:descr sembrano visualizzare correttamente al descrizione. c'è solo un punto dove trovo l'incipit
      ed e questo
      script type='application/ld+json'
      {
      "@context": "http://schema.org",
      "@type": "BlogPosting",
      "mainEntityOfPage": {
      . . . .
      },
      "headline": "E' una HOKA ONE ONE VENICEMARATHON davvero worldwide!","description": "Partita col botto
      puo essere questo il problema ?
      grazie

      Elimina
    3. Non te lo so dire. Stai usando un metodo di inserimento di Schema.org con uno script mentre io ho sempre usato il Blogposting quindi non ti so aiutare, mi spiace
      @#

      Elimina
    4. buona sera. alla fine mi son deciso e ho cambiato template. ne ho trovato uno in rete che mi piaceva e dopo averlo importato con gli opportuni adattamenti sembra funzionare.

      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