What is JSON-LD?

JSON-LD stands for JavaScript Object Notation for Linked Data and is a lightweight Linked Data format to easy read and write metadata on the Web. Recommended by the World Wide Web Consortium, JSON-LD is the heir of the JSON format and allows JSON data to operate in a Web-scale environment. The concept behind this notation is identifying the context in order to provide more information and generate more knowledge. This kind of coding is also used by Google to extract structured data from existing websites and store it in its Knowledge Graph.

How can I use JSON-LD on my website?

JSON has been traditionally used by UX designers to feed widgets with data. With the advent of JSON-LD, developers can reuse this same data structures to create new front-end UI widgets as well as feeding search engine crawlers with the metadata that describe the exact meaning of page’s content.

JSON-LD uses the vocabulary of Schema.org to describe what a web page is about. A presentation layer can be added with custom UI elements developed in either Polymer or React components. 

How can I add JSON-LD to my WordPress website?

There are various plugin to include Schema.org JSON-LD syntax markup to your WordPress website. WordLift is one of these options that above all has the advantage of adding this tags automatically based on the analysis of the content being written. WordLift uses Natural Language Processing to extract named entities that are proposed to the editor to tag his/her content. These entities have unique IDs (unique resource identifier) in the web of data, with this IDs WordLift extracts the information and automatically injects it in the web pages using JSON-LD. 

What if – instead – you’d like to give your readers the opportunity to go deeper into some entity, but don’t want them to leave your article? Well, we are also thinking about that…

How to embed the content of an entity into your article

Below, switching to HTML, you can see a simple code you can use to embed the content of any entity created with WordLift (we used WordPress) to your article or web page.

See the Pen Parsing JSON-LD by nicola bertelloni (@wanbinkimoon) on CodePen.

Entity: WordPress

Don’t know what WordPress is or just want to see how this cool embed code works? Just click on the button below. ?

function loadContent() {
// Store te space in a constant.
const space = document.getElementById(‘jsonSpace’);
const magic = document.getElementById(‘magicBtn’);
// Importing and parse JSON.
const pagejson = JSON.parse(jQuery(‘script[type=”application/ld+json”]’).text());
// Looping the array for WordPress entity
pagejson.forEach(function(element) {
if (element.name == ‘WordPress’) {
// Log some infos
// console.log(element.image[“0”].url);
if (!space.hasChildNodes()) {
// Print the name.
var heading = document.createElement(‘H1’);
heading.innerHTML = element.name;
// Print the image.
var image = document.createElement(‘img’);
image.setAttribute(‘src’, element.image[“0”].url);
// Print the description.
var description = document.createElement(‘p’);
description.innerHTML = element.description;
// Change the btn copy
magic.innerHTML = ‘Hide the content’;
} else {
// Remove any child
while (space.firstChild) {
// Change the btn copy
magic.innerHTML = ‘Load the content’;