1. November 13, 2015
Semantic Modelling
with JSON-LD
Sante J. Achille
Search Marketing Consultant
@sjachille

2. smxmilan.it
@sjachille
#SMX #22A
• Search Marketing Specialist
• Has analyzed and optimized hundreds of websites on 20 years of hands-on
professional activity
• Loves proverbs and traditions
• Motto: Why Be Normal?
http://achille.name/
@sjachille
sante@achille.name
TODAY WE’LL TALK ABOUT JSON-LD

3. smxmilan.it
@sjachille
#SMX #22A
Data
Information
The biggest challenge for Search Engines?
Reduce “Uncertaintiy” & “Ambiguity”

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.”
Why use structured data?

5. smxmilan.it
@sjachille
#SMX #22A
Why use structured data?
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.

6. smxmilan.it
@sjachille
#SMX #22A
Data
Information
Requirements
Available
Consistent
Non Ambiguous
Reliable

7. smxmilan.it
@sjachille
#SMX #22A
Data
Information
Attributes
• Characteristics (dimensions, weight,
name,… )
Properties (person, animal, or thing)
Location (Continent, Country, City … )

8. smxmilan.it
@sjachille
#SMX #22A
Data
Information
Entity

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

10. 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.

11. 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

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

13. 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>

14. 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"
} } } }}

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

16. 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/
• Information is represented by the Node-Arc

17. smxmilan.it
@sjachille
#SMX #22A
In RDF the description of a resource is represented by a series of triples.
The components of each triple are the Subject - Predicate – Object
A triple emulates the structure of a simple phrase such as "Sante live in
L'Aquila…

18. smxmilan.it
@sjachille
#SMX #22A
The Subject of the triple is the URI, identifying the resource being described
The Object may be a value (string, number, data, …) or the URI of another resource
which is somehow related to the subject
The Predicate explains the relationship between subject and object and is a URI
chosen amongst those available in the various Vocabularies …

19. 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…

20. smxmilan.it
@sjachille
#SMX #22A
JSON-LD Specification: 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…

21. smxmilan.it
@sjachille
#SMX #22A
Use JSON-LD to develop a model, which best
describes your content to reduce (minimize)
ambiguity and uncertainty
JSON-LD @work…

22. 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…

23. 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…

24. 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…

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

26. smxmilan.it
@sjachille
#SMX #22A
Use in-line schema.org markup to provide
detailed information about the page and the
various elements (for example images…)
SCHEMA.org @work…

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

28. 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>

29. smxmilan.it
@sjachille
#SMX #22A
This is an iterative process - almost impossible to
get it right and complete 1st time around
New properties are constantly published on
schema.org
Semantic models require periodic updating
Test, Test and Test again!

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