Presentazione all'SMX Milano 2015. Fondamenti di JSON-LD, principi dell'uso di RDF: perché JSON-LD è Schema.org sono Importanti per il SEO e come utilizzarli per avere un vantaggio competitivo nel nuovo ed emergente Web Semantico.

1. 13 Novembre, 2015
Modellazione Semantica
con JSON-LD
Sante J. Achille
Search Marketing Consultant
@sjachille

2. smxmilan.it
@sjachille
#SMX #22A
• Ingegnere, Search Marketing Specialist
• Ha analizzato, ottimizzato e gestito numerosi siti in 20 anni di attività
professionale
• Ama proverbi ed usanze della tradizione popolare
• Motto: Why Be Normal?
http://achille.name/
Oggi parliamo di semantica per il web

3. smxmilan.it
@sjachille
#SMX #22A
Dati
Informazioni
La più grande sfida dei motori di ricerca?
Ridurre “Incertezza” e “Ambiguità”

4. smxmilan.it
@sjachille
#SMX #22A
“Your web pages have an underlying meaning that
people understand when they read the web
pages.
But search engines have a limited
understanding of what is being discussed on those
pages.”
Perché dati Strutturati?

6. smxmilan.it
@sjachille
#SMX #22A
Perché dati Strutturati?
By adding additional tags to the
HTML of your web pages … you can
help search engines and other
applications better understand
your content and display it in a
useful, relevant way.

7. smxmilan.it
@sjachille
#SMX #22A
Dati
Informazioni
Requisiti
Disponibilità
Consistenza
Non Ambiguità
Affidabilità

8. smxmilan.it
@sjachille
#SMX #22A
Dati
Informazioni
Attributi
Proprietà (persona, animale, o cosa)
Caratteristiche (dimensioni, peso, nome, … )
Location (Continent, Country, City … )

9. smxmilan.it
@sjachille
#SMX #22A
Dati
Informazioni
Entità

10. smxmilan.it
@sjachille
#SMX #22A
http://schema.org/docs/full.html

11. smxmilan.it
@sjachille
#SMX #22A
JSON (JavaScript Object Notation) is a
lightweight data-interchange format. … It is
easy for machines to parse and generate. It is
based on …
JSON is a text format that is completely
language independent but uses conventions
that are familiar to programmers of the C-
family of languages, including C, C++, C#,
Java, JavaScript, Perl, Python, and many
others.
These properties make JSON an ideal data-
interchange language.

12. smxmilan.it
@sjachille
#SMX #22A
“JSON-LD is a lightweight
Linked Data format that is easy
for humans to read and write”
http://www.w3.org/TR/2013/CR-json-ld-20130910/
http://www.w3.org/TR/2013/CR-json-ld-api-20130910/
Creating semantic sites with Web Components and JSON-LD

13. smxmilan.it
@sjachille
#SMX #22A
Schema.org e JSON-LD

14. smxmilan.it
@sjachille
#SMX #22A
Schema.org …
<div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<div itemprop="director" itemscope
itemtype="http://schema.org/Person">
Director: <span itemprop="givenName"> James</span> <span
itemprop="familyName">Cameron</span> (born August 16, 1954)
<meta itemprop="birthDate" content ="1954-08-16" />
</div>
<span itemprop="genre">Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

15. smxmilan.it
@sjachille
#SMX #22A
JSON-LD…
{
"@context":
{
"rdf": "http://www.w3.org/1999/02/22-rdf-syntax-ns#",
"foaf": "http://xmlns.com/foaf/0.1/",
"rel": "purl.org/vocab/relationship/",
"schema": "https://www.schema.org/"
},
"@id": "http://example.com/people/mario-rossi/",
"@type" : "foaf:Person",
"foaf:name": ”Mario Rossi",
"foaf:based_near": "http://www.geonames.org/3333125",
"rel:employerOf": "http://example.com/people/joe-smoe/",
"schema:worksFor" : {
"@type" : "schema:Organization",
"schema:legalName" : ”Mario Rossi Inc.",
"schema:vatID" : "XXXXXXXXX",
"schema:email" : “mario@rossi.com",
"schema:telephone" : "+39.xxx xx xx xxx"
} } } }}

16. smxmilan.it
@sjachille
#SMX #22A

17. smxmilan.it
@sjachille
#SMX #22A
The Resource Description Framework (RDF) is a framework for
expressing information about resources. Resources can be
anything, including documents, people, physical objects, and
abstract concepts.
http://www.w3.org/TR/rdf11-primer/
• Le informazioni sono rappresentate ed interconnesse utilizzando il
modello vettoriale Nodo - Arco del Grafo

18. smxmilan.it
@sjachille
#SMX #22A
In RDF la descrizione di una risorsa è rappresentata da una serie di triple.
Le componenti di ciascuna tripla sono il Soggetto - Predicato - Oggetto
Una tripla emula la struttura di una frase semplice come questa:

19. smxmilan.it
@sjachille
#SMX #22A
Il Soggetto della tripla è la URI che identifica la risorsa che si sta descrivendo
L’Oggetto può essere un valore (stringa, numero, data, …) oppure la URI di un’altra
risorsa che in qualche modo è in relazione con il soggetto
Il Predicato esplicita la relazione che intercorre tra soggetto ed oggetto ed è una URI
scelto tra quelli disponibili nei vari Vocabolari …

20. smxmilan.it
@sjachille
#SMX #22A
{
"@context":
{
"rdf": "http://www.w3.org/1999/02/22-rdf-syntax-ns#",
"foaf": "http://xmlns.com/foaf/0.1/",
"rel": "purl.org/vocab/relationship/",
"schema": "https://www.schema.org/"
},
"@id": "http://example.com/people/mario-rossi/",
"@type" : "foaf:Person",
"foaf:name": ”Mario Rossi",
"foaf:based_near": "http://www.geonames.org/3333125",
"rel:employerOf": "http://example.com/people/mario-rossi/",
"schema:worksFor" : {
"@type" : "schema:Organization",
"schema:legalName" : "Mario Rossi Srl",
"schema:vatID" : "XXXXXXXXX",
"schema:email" : “mario.rossi@dominio.com",
"schema:telephone" : "+39.123 45 67 890"
} } } }}
JSON-LD @work…

21. smxmilan.it
@sjachille
#SMX #22A
Specifica di JSON-LD: http://www.w3.org/TR/json-ld/#syntax-tokens-and-keywords
3.3 Syntax Tokens and Keywords
@context
Used to define the short-hand names that are used throughout a JSON-LD document…
@id
Used to uniquely identify things that are being described in the document with IRIs …
@type
Used to set the data type of a node or typed value…
@vocab
Used to expand properties and values in @type with a common prefix IRI…
JSON-LD @work…

22. smxmilan.it
@sjachille
#SMX #22A
Usare JSON-LD per lo sviluppo del modello
semantico dei contenuti per minimizzare
ambiguità ed indeterminazione
JSON-LD @work…

23. smxmilan.it
@sjachille
#SMX #22A
{
"@context": {
"schema": "https://schema.org/"
},
"@id" : "https://mywebsite.com/blogposturl/",
"@type": "schema:BlogPosting",
"schema:datePublished" : "YYYY-MM-DD",
"schema:name": "BLOGPOST NAME",
"schema:headline" : "POST TITLE",
"schema:description": "A DESCRIPTION - LIKE META DESCRIPTION
TAG",
"schema:mainEntityOfPage" : "URL",
"schema:image" : "https://mywebsite.com/wp-content/themes/DD-
MM-YYYY/images/majestic_large.png",
JSON-LD @work…

24. smxmilan.it
@sjachille
#SMX #22A
"schema:isPartOf" : {
"@id" : "https://mywebsite.com/",
"@type" : "schema:Blog",
"schema:name" : "My Blog",
"schema:description": "A DESCRIPTION OF MY BLOG - HOW
BEAUTIFUL AND INTERESTING MY CONTENT IS AND WHY EVERBODY
SHOULD READ IT!"
},
JSON-LD @work…

25. smxmilan.it
@sjachille
#SMX #22A
"schema:author" : {
"@id" : "http://blog.achille.name/",
"@type" : "schema:Person",
"schema:givenName": "FIRST NAME",
"schema:additionalName": "MIDDLE NAME OR INITIAL",
"schema:familyName": "FAMILY NAME (SURNAME)",
"schema:jobTitle" : "SEARCH MARKETING CONSULTANT",
"schema:sameAs" : "https://twitter.com/sjachille",
"schema:sameAs" : "https://plus.google.com/+SanteJAchille/",
"schema:sameAs" : "https://www.facebook.com/sjachille"
}
}
JSON-LD @work…

26. smxmilan.it
@sjachille
#SMX #22A

27. smxmilan.it
@sjachille
#SMX #22A
Usare SCHEMA.org per ulteriori informazioni di
dettaglio “in line” nelle pagine (definizione
della struttura della pagina, informazioni su
prodotti per Ecommerce… in generale tutto
quello che può essere caratterizzato per
fornire contesto e struttura alle informazioni)
SCHEMA.org @work…

28. smxmilan.it
@sjachille
#SMX #22A
Schema Markup Model for IMAGES

29. smxmilan.it
@sjachille
#SMX #22A
Schema Markup for Documents
<div itemprop="image" itemscope=""
itemtype="http://schema.org/ImageObject">
<meta itemprop="description" content="I-797, Notice of Action: I-601,
application for travel document: approval notice. " />
<div itemprop="exampleOfWork" itemscope=""
itemtype="http://schema.org/CreativeWork" >
<meta itemprop="isBasedOnUrl" content="http://www.uscis.gov/i-601" />
</div>
[caption]<a itemprop="url" href="XXX"><img itemprop="image"
src="XXX" alt="XXX" width="" height="" class="XXX" /></a> [/caption]
</div>

30. smxmilan.it
@sjachille
#SMX #22A
Il processo è iterativo - quasi impossibile arrivare
ad un modello definitivo subito
Nuove proprietà sono introdotte di continuo su
schema.org
I modelli vanno aggiornati periodicamente
Prova, Riprova ed Aggiorna!

31. smxmilan.it
@sjachille
#SMX #22A