speakable schema.org

Come inserire la proprietà speakable utilizzato il markup Schema.org

02 Mar 2020    Giacomo Marzolla    02 Mar 2020 05:59 pm

L’aggiunta del markup speakable al tuo sito web può essere molto utile. Questo permette di far fruire un contenuto tramite assistants di Google, quindi utilizzando la sintesi vocale. In questo articolo mostrerò tre modi per implementare questo utile markup.

Il markup da utilizzare è quello presente su schema.org, e si, schema.org è sempre in costante aggiornamento. I motori di ricerca utilizzano tutto il vocabolario di schema.org per donare un’esperienza migliore agli utenti che svolgono ricerche. Quindi è diventato quasi obbligatorio sfruttare questa tecnologia per migliorare il sito web, per farci comprendere meglio dal motore di ricerca e allo stesso tempo donare una miglior esperienza utente ai nostri visitatori.

Qui segnalo la definizione presa su Schema.org per la proprietà speakable.

Indicates sections of a Web page that are particularly ‘speakable’ in the sense of being highlighted as being especially appropriate for text-to-speech conversion. Other sections of a page may also be usefully spoken in particular circumstances; the ‘speakable’ property serves to indicate the parts most likely to be generally useful for speech.

Traduzione:

Indica sezioni di una pagina Web che sono particolarmente ” speakable”, nel senso che sono delle sezioni particolarmente appropriate per la conversione da sintesi vocale. Altre sezioni di una pagina possono anche essere utilmente pronunciate in circostanze particolari; la proprietà ” speakable ” serve a indicare le parti che sono più probabilmente utili per il parlato.

In questo momento lo “speakable” è lo standard migliore per la pubblicazione di contenuti web progettati per essere fruito dagli assistenti vocali come Alexa, Google Assistant. Lo stesso Google fornisce delle linee guide

Come posso rendere il mio contenuto speakable (parlante)

Per contrassegnare il tuo contenuto come contenuto adatto alla sintesi vocale, devi utilizzare i dati strutturati e aggiungerli alla tua pagina web, così indichi ai motori di ricerca quali parti del tuo contenuto prendere.

Esistono diversi formati per implementare i dati strutturati (Microdata, RDFa e JSON-LD), personalmente consiglio di utilizzare il JSON-LD è il formato più apprezzato da Google.

Ci tre modi per segnalare la posizione del contenuto “speakable”, tramite ID di un elemento html, con selettore CSS o selettore XPath.

Speakable utilizzando ID

JSON-LD

{
  "@context": "https://schema.org/",
  "@type": "WebPage",
  "speakable":["id1","id2"]
}

HTML

<div id="id1"> Qui và il contenuto che sarà letto dai motori di ricerca </div>

Speakable utilizzando i selettori CSS

Ideale per gestire dei casi di utilizzo un pò più complessi

JSON-LD

{  
  "@context": "https://schema.org/",  
  "@type": "WebPage",  
  "speakable": {
    "@type": "SpeakableSpecification",    
    "cssSelector": [".soundcheck-speakable"]
  }
}

HTML

<div class="soundcheck-speakable"> Qui và il contenuto che sarà letto dai motori di ricerca</div>

Speakable utilizzando i selettori XPath

La terza opzione che ti segnalo, utilizza i metadati di una pagina web, nello specifico title e metadescription.

JSON-LD

{
  "@context": "https://schema.org/",
  "@type": "WebPage",
  "speakable": {
    "@type": "SpeakableSpecification",
    "xpath": [
    "/html/head/title",
    "/html/head/meta[@name='description']/@content"
    ]
  }
}

HTML

<head>
  <title>This is the speakable title</title>
  <meta name="description">This is the speakable description</meta>
</head>

Questa piccola guida spiega da punto di vista tecnico, su come implementare questa nuova proprietà, se vuoi condividere la tua conoscenza per migliorare questo articolo, puoi utilizzare i commenti.