My presentation at SMX Milan 2015. New ways to compile and offer structured data to search engines for improved online visibility. Real life examples ready to use for websites and blogs.

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