Sep 5, 2019 - By Saumil

What JSON-LD?

Very simply put JSON-LD (JavaScript Object Notation for Linked Data) is a way to represent linked-data in a machine-readable format by structuring it with a predefined vocabulary from open projects such as schema.org.

Most commonly used for search engine optimization (SEO) JSON-LD allows you to inform search engines like Google, Bing, Yahoo, Yandex and DuckDuckGo about the structure of your data on the current page as well as any other linked content.

How can I use JSON-LD?

To begin using JSON-LD you first need to identify a schema that fits the contents of your webpage. You can do this by going to https://schema.org/docs/schemas.html and browsing the various search engine friendly schemas available.

For simplicity, let’s use an overarching description of a website. (https://schema.org/WebSite)

<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "WebSite",
    "url": "http://example.com/",
    "potentialAction": {
      "@type": "SearchAction",
      "target": "http://example.com/search?&q={query}",
      "query": "required"
    }
}
</script>

Here you’re able to define several different attributes:
“@context”: which in our case will be “http://schema.org” since that is where our schema resides.

“@type”: which will be WebSite for this example as thats the schema we’ve chosen.

“url”: As defined on our chosen schema URL will be the “URL of the item.” which for us is the current page.

“potentialAction”: As described in the example above allows our potential readers/crawlers to understand how a search action could be performed on our example site.

These are just a few properties defined in the example that we’ve looked at but based on your webpage’s content you can employ different schemas and add more properties to your JSON-LD object to further improve the outcome of your SEO efforts.

Some resources to help you make your implementation of JSON-LD easier.

You can always devise your own solution to implement JSON-LD as its not exactly rocket science but for some of the more complex implementations such as SPAs you can always rely on useful libraries to help you along the way.

Angular:
https://ngxlite.com/docs/json-ld “npm install @ngx-lite/json-ld –save”
Ngxlite makes it extremely easy to add JSON-LD to your views dynamically.

React:
https://github.com/nfl/react-helmet “npm install –save react-helmet”

React-helmet allows you to manage changes to your head and is very easy to use. You can find an example in the readme of the repo.