The JSON-LD is one of several types of Schema, as well as the Microdata, it does not do anything pro javascript or pro HTML itself, in fact it is used by searchers, like Google, it is a "data standard" that you use to instruct the searchers pro type of content that the site offers or how is the organization of the pages, the name of this is "structured data markup" (Structured Data Markup).
Search engines are smart to detect the content, navigation and functionality of the site, but not smart enough, because no one writes HTML the same way, the solution found was to create methods to organize the data, so searchers can identify and even customize the pagination result, for example:
Veja has the price the rating and the Reviews for each result, the searchers can sometimes do it by themselves with your site, but it is not always possible.
An example of navigation:
There are other types of data proposed by http://schema.org/docs/schemas.html as:
Microdata example:
See this is the information about a person, but the searchers probably won’t understand so well:
<section> Hello, my name is John Doe, I am a graduate research assistant at
the University of Dreams.
My friends call me Johnny.
You can visit my homepage at <a href="http://www.JohnnyD.com">www.JohnnyD.com</a>.
I live at 1234 Peach Drive, Warner Robins, Georgia.</section>
Now with Microdata, this way you use normal html and still explain to the searcher the information of the person:
<section itemscope itemtype="http://schema.org/Person">
Hello, my name is
<span itemprop="name">John Doe</span>,
I am a
<span itemprop="jobTitle">graduate research assistant</span>
at the
<span itemprop="affiliation">University of Dreams</span>.
My friends call me
<span itemprop="additionalName">Johnny</span>.
You can visit my homepage at
<a href="http://www.JohnnyD.com" itemprop="url">www.JohnnyD.com</a>.
<section itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
I live at
<span itemprop="streetAddress">1234 Peach Drive</span>,
<span itemprop="addressLocality">Warner Robins</span>,
<span itemprop="addressRegion">Georgia</span>.
</section>
</section>
Rdfa example:
Using Rdfa to explain to the searcher a person’s information:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
"http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:foaf="http://xmlns.com/foaf/0.1/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
version="XHTML+RDFa 1.0" xml:lang="en">
<head>
<title>John's Home Page</title>
<base href="http://example.org/john-d/" />
<meta property="dc:creator" content="Jonathan Doe" />
<link rel="foaf:primaryTopic" href="http://example.org/john-d/#me" />
</head>
<body about="http://example.org/john-d/#me">
<h1>John's Home Page</h1>
<p>My name is <span property="foaf:nick">John D</span> and I like
<a href="http://www.neubauten.org/" rel="foaf:interest"
xml:lang="de">Einstürzende Neubauten</a>.
</p>
<p>
My <span rel="foaf:interest" resource="urn:ISBN:0752820907">favorite
book is the inspiring <span about="urn:ISBN:0752820907"><cite
property="dc:title">Weaving the Web</cite> by
<span property="dc:creator">Tim Berners-Lee</span></span></span>.
</p>
</body>
</html>
The problem with Rdfa and Microdata is that you have to use HTML5+xml, this mixes html with "schemas", it gets in the way a little bit, so JSON-LD can be easier to implement, because the data is in a separate tag, like describing a person:
{
"@context": {
"name": "http://xmlns.com/foaf/0.1/name",
"homepage": {
"@id": "http://xmlns.com/foaf/0.1/workplaceHomepage",
"@type": "@id"
},
"Person": "http://xmlns.com/foaf/0.1/Person"
},
"@id": "http://me.example.com",
"@type": "Person",
"name": "John Smith",
"homepage": "http://www.example.com/"
}
Read more on: http://schema.org/docs/gs.html
Navigation (Breadcrumbs)
Not only of information of people is made the "Structured Data" (Structured Data), for some time the sites as Mercadolivre and Uol see using the navigation so with Microdata:
Home > Products > Computer > Dell i5 Computer
This is a good reason to use Json and "teach" search engines how your site navigation works, examples:
JSON-LD:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://example.com/arts",
"name": "Arts"
}
},{
"@type": "ListItem",
"position": 2,
"item": {
"@id": "https://example.com/arts/books",
"name": "Books"
}
},{
"@type": "ListItem",
"position": 3,
"item": {
"@id": "https://example.com/arts/books/poetry",
"name": "Poetry"
}
}]
}
</script>
Rdfa:
<ol vocab="http://schema.org/" typeof="BreadcrumbList">
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage"
href="https://example.com/arts">
<span property="name">Arts</span></a>
<meta property="position" content="1">
</li>
›
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage"
href="https://example.com/arts/books">
<span property="name">Books</span></a>
<meta property="position" content="2">
</li>
›
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage"
href="https://example.com/arts/books/poetry">
<span property="name">Poetry</span></a>
<meta property="position" content="3">
</li>
</ol>
Testing
Google provides a test tool https://developers.google.com/structured-data/testing-tool/ that supports Urls or typing in the text field, to validate your marking.
Quickly creating your own marking
Google has a tool that helps the rapid creation of structured data:
Note:
I don’t remember exactly, but I think 2 years ago Google strongly encouraged Microdata in the documentation, I noticed that many sites quickly adapted to this format, but now in the documentation seems to encourage JSON-LD strongly and Rdfa
For the eventual navigator who wants to know how to access this object easily, has in the OS
– brasofilo