Home
  1. Informatica
  2. Creare siti web
  3. Come inserire dati strutturati schema.org per 'Articoli AMP'

Come inserire dati strutturati schema.org per 'Articoli AMP'

Google innalza gli standard per i dati strutturati di Article, NewsArticle, TechArticle e BlogPosting

Vediamo come implementare nel nostro sito le proprietà diventate obbligatorie, per rispettare i nuovi standard Google.

    Livello: Intermedio
 


Chi utilizza i dati strutturati nelle proprie pagine web, in particolare quelli di schema.org, avrà notato che i suoi test perfetti, forse, da alcuni giorni restituiscono qualche errore. Questo quando si usa lo strumento di Google Structured Data Testing. In particolare mi riferisco agli schemi Article, NewsArticle, TechArticle, BlogPosting.

Gli errori riguardano alcune proprietà specifiche degli schemi, che ora Google chiede di perfezionare con più informazioni.

Ciò è probabilmente dovuto al recente accordo internazionale tra Google e alcune tra le maggiori testate giornalistiche della carta stampa mondiale, leader dell'informazione online. Il progetto prende il nome di AMP, Accelerated Mobile Pages.

Cosa è AMP

Il neonato progetto AMP servirà ai grandi "dispensatori di notizie" nel web, per realizzare pagine html più veloci per i dispositivi mobili quali gli smartphone.

Adottando il nuovo codice AMP HTML per le vostre pagine, le renderete compatibili con il servizio di Google. Questi, infatti, si occuperà di caricare tutte le pagine di news sui suoi server, per distribuirle agli utenti che le richiederanno, molto più velocemente di ora. Esse si adatteranno meglio ai social network a tutti i newsreaders, come anche sulle messaging apps.

Il motivo è economico. Attualmente un'ampia fetta di utenti abbandona la notizia prima di visualizzarla, a causa degli alti tempi di caricamento.

Come adattarsi nell'immediato

Accanto al più complesso lavoro sul codice del sito, da effettuare da parte dei webmaster, c'è un piccolo suggerimento fornito da Google, per adattare i dati strutturati alle nuove richieste.

Nello Structured Data Testing Tool, viene fatta differenza tra risultati "Rich snippet articoli" e "Articoli AMP". Si può essere OK con il primo, ma non con i secondi.

Cosa viene richiesto dagli Articoli AMP

Dobbiamo aggiungere il logo, il publisher, la data di modifica dell'articolo e non più solo quella di pubblicazione, il mainEntityOfPage. Per le immagini non può bastare il semplice itemprop="image". Andrà aggiunto un po' di codice in più per indicare larghezza e altezza dell'immagine.

L'esempio che segue è fornito da Google, in Google Developers, sezione "Structured Data". Pagina appena aggiornata il 14 dicembre 2015: da tenere d'occhio perché probabilmente subirà nuovi aggiornamenti nel 2016. Ripropongo l'esempio con i microdata, perché è il metodo che utilizzo io. Più comprensibile per chiunque conosce un po' il linguaggio HTML. JSON-LD mi risulta più da programmatori.

<div itemscope itemtype="http://schema.org/NewsArticle">
<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://www.tuo-sito.it/article"/>
<h2 itemprop="headline">Article headline</h2>
<h3 itemprop="author" itemscope itemtype="https://schema.org/Person">
Di <span itemprop="name">Antonio Rossi</span></h3>
<span itemprop="description">Questa è una prova per Articoli AMP</span>
<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<img src="https://www.tuo-sito.it/immagine-articolo.jpg"/>
<meta itemprop="url" content="https://www.tuo-sito.it/immagine-articolo.jpg">
<meta itemprop="width" content="800">
<meta itemprop="height" content="800">
</div>
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<img src="https://www.tuo-sito.it/immagine-logo.jpg"/>
<meta itemprop="url" content="https://www.tuo-sito.it/immagine-logo.jpg">
<meta itemprop="width" content="600">
<meta itemprop="height" content="60">
</div>
<meta itemprop="name" content="WebInserzionista">
</div>
<meta itemprop="datePublished" content="2015-02-05T08:00:00+01:00"/>
<meta itemprop="dateModified" content="2015-02-05T09:20:00+01:00"/>
</div>

Se copi l'esempio in una pagina html tra <body> e </body>, la pubblichi sul vtuo sito e la provi con lo strumento di Google, avrai un risultato "Articoli AMP" senza nessun problema. Così potrai vedere come deve funzionare il tutto.

Come procedere

Personalmente ho apportato qualche modifica per fare sintesi ed evitare inutile codice in più. Nel mio caso utilizzo schema.org/TechArticle.

Partiamo da mainEntityOfPage, l'ho riscritto così:

<name itemprop="mainEntityOfPage" content="https://www.nome-sito.it"/nome-articolo.html>

Leggi le istruzioni fornite da schema.org per usare al meglio la proprietà secondo le tue esigenze: ha delle particolarità.

La proprietà author l'ho adottata come suggerita da Google. Cambia solo il tag h3 con il tag p.

Per quanto riguarda le immagini dell'articolo, ho tolto <meta itemprop="url"....>; la proprietà url l'ho inserita direttamente in

<img itemprop="url" src="nomeimmagine.jpg"/>

Publisher e logo sono dichiarati nel modo proposto nell'esempio. Quanti nell'intestazione del sito riportano il logo e il nome del sito coincidente con il nome dell'Organizzazione, troveranno semplice effettuare l'aggiunta. Sempre che il passaggio non sia stato compiuto in fase di progettazione del sito. Devono essere dichiarate le dimensioni del logo. Google consiglia una larghezza massima di 600px e altezza 60px. itemprop="name" indica il nome dell'organizzazione.

datePublished e dateModified. Siccome le pagine del mio sito, una volta creato il contenuto, difficilmente le modifico, ho aggiunto la proprietà dateModified a datePublished:

itemprop="datePublished"

Se usate piattaforme come Wordpress, molti temi hanno la doppia data: pubblicazione e ultima modifica. In questi casi dovrete necessariamente distinguere.

Consigli finali

Per le immagini. ciascuna immagine inserita nella pagina web, andrà "contornata" dei dati richiesti, secondo l'esempio riportato. Ciò renderà la composizione delle pagine più elaborata.

Conviene adottare il codice proposto e solo in seguito testare qualche adattamento.

Quasi dimenticavo. il sito del progetto AMP è www.ampproject.org. Opensource, tutti vi possono contribuire.

 

Leggi Pure

⟩⟩ TransferWise Opinioni: La mia Esperienza | Recensione Reale    ⟩⟩ Ledger Nano S Promo Code e Promozioni    ⟩⟩ Promozioni e Nuovi Listing su CEX.io Exchange    ⟩⟩ Come conseguire la Certificazione G Suite    ⟩⟩ OneDrive for Business: Come Funziona, Caratteristiche, Costi