O JSON-LD é um dos vários tipos de Schema, assim como o Microdata, ele não faz nada pro javascript ou pro HTML em si, na verdade ele é usado por buscadores, como o Google, ele é um "padrão de dados" que você usa pra instruir os buscadores pro tipo de conteúdo que o site oferece ou como é a organização das páginas, o nome disto é "marcação de dados estruturados" (Structured Data Markup).
Buscadores são inteligentes pra detectar o conteúdo, navegação e funcionalidades do site, mas não o suficiente, pois ninguém escreve HTML do mesmo jeito, a solução encontrada foi criar métodos de organizar os dados, assim os buscadores podem identificar e até personalizar o resultado da paginação, como por exemplo:
Veja tem o preço o rating e as reviews pra cada resultado, os buscadores as vezes conseguem fazer isso por si só com o seu site, mas nem sempre é possível.
Um exemplo de navegação:
Existem outros tipos de dados que foram propostos pelo http://schema.org/docs/schemas.html como:
Microdata exemplo:
Veja esta é a informação sobre uma pessoa, mas os buscadores provavelmente não entenderão tão bem:
<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>
Agora com Microdata, desta maneira você usa html normal e ainda explica pro buscador as informações da pessoa:
<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 exemplo:
Usando RDFa pra explicar pro buscador as informações de uma pessoa:
<?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>
O problema do RDFa e do Microdata é que tem que usar HTML5+xml, isto mistura o html com os "esquemas", atrapalha um pouco, por isso o JSON-LD pode ser mais fácil de implementar, pois os dados ficam em uma tag separada, como descrever uma pessoa:
{
"@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/"
}
Leia mais em: http://schema.org/docs/gs.html
Navegação (Breadcrumbs)
Nem só de informações de pessoas é feito os "Dados estruturados" (Structured Data), a algum tempo os sites como Mercadolivre e Uol veem usando a navegação assim com Microdata:
Home > Produtos > Informática > Computador Dell i5
Este é um bom motivo pra usar o Json e "ensinar" aos buscadores como funciona a navegação do seu site, exemplos:
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>
Testando
O Google fornece uma ferramenta de teste https://developers.google.com/structured-data/testing-tool/ que suporta URLs ou digitar no campo de texto, pra validar a sua marcação.
Criando rapidamente a sua própria marcação
O google tem uma ferramente que auxilia a rápida criação dos dados estruturados:
Nota:
Não me lembro ao certo, mas acho que 2 anos atrás o Google incentivava fortemente o Microdata na documentação, notei que muitos sites rapidamente se adaptaram a este formato, mas agora na documentação parece incentivar o JSON-LD fortemente e o RDFa