background

Before we explore how to add JSON-LD to your website, what is JSON-LD and why use it? Next to writing awesome content, you’ve got to be able to technically SEO your site. One way of doing this is using Structured Data with Schema.org. JSON-LD is a modern way of presenting Schema that contextualises your websites content to search engines. Using Schema increases the chances that Google will show rich snippets about your website content which can really make your website stand out in search engine result pages (SERPs).

Why should I want rich snippets in SERPs?

According to recent studies by Search Engine Land, click-through rates (CTR) have increased by up to four times when rich snippets appear, resulting in significant increases in website traffic from organic search as a result. Here's some examples of what rich snippets look like in SERPs:

Sitelink Extensions

Sitelink Extensions

Ratings

Ratings Rich Snippet

Local Business - Address, Logo, Map

Local Business Markup


Reviews

Online Reviews

So, by using JSON-LD you can collect all the data about your product, address, events, website, and services and show them in one, small, piece of JavaScript code, that can just be pushed anywhere on a web page. In it’s own documentation, Google often states JSON-LD is the easiest way to add metadata to sites. It’s the option that is least likely to break when you make other changes to your site.

So, what does JSON-LD mean?

JavaScript Object Notation for Linked Data. This basically means it’s a lightweight data-interchange format easy for users to write and easy for search engines to parse and generate. The “linked data” means it uses the internet to connect related data.

In layman's English, JSON-LD is a code snippet that tells search engines a specific price belongs to a specific product, or a postcode belongs to a business address, or that an event has a specific date - you get the idea. So instead of having to individually markup elements on a page with schema attributes, you can now write a block of JavaScript code that has all the info.

Ok, so now what is Schema?

A joint effort by Google, Bing, Yahoo!, and Yandex in 2011 to create a unified structured data vocabulary for the web. Schema presents data to search engines in a readable and contextual way to create Structured Data. Using Structured Data increases your chance of your website content appearing in SERPs as rich snippets, which means your contextual content appears in your organic search results such as price of product, rating, availability. Please see an example for the Google Home below:


Google Home

You can also increase the chances of a Sitelinks Search Box appearing dedicated to searching your website within Google’s search engine result pages. See an example for Pinterest below:


Google Search

You will also start seeing the content within the Knowledge Graph cards, similar to the Local Business information we used earlier in this article..

Let BarkWeb do it for you

To find out more about how our marketing professionals can implement mark-up on your website and increase it's visibility.


Start a Conversation

How to add JSON-LD to your website?

Before adding any JSON-LD to your website you’ll want to ask yourself “what do I want to mark up?” for example, you might want to markup that your website refers to a local business. “Why do I want to mark up that my website is a local business?” you don’t want to write JSON-LD just for the sake of it. There’s got to be a business case for it. You want to markup content that will be useful for search engines to know, to help search engines understand the most vital information about your website.

Luckily JSON-LD is written in a standard format, so you've got clear instruction and direction to follow. Even better, Jolojo uses a built-in JSON-LD generator to easily create standard markup for some popular Schema item types such as Local Business, Website and Events. With more to come. As you will soon be able to see from my demonstration, adding information to your web pages using JSON-LD is easily achieved using the Jolojo platform. Jolojo also allows free coding JSON-LD using the JSON-LD editor where you can use any Schema markup and publish it to any page, or pages, of the website.

Step 1 - Create Linked Data Using Jolojo's Built-In JSON-LD Generator

When logged into the Jolojo CMS, navigate to the Admin section > Linked Data, as per the screenshot below:

JSON-LD Linked data in Jolojo CMS


Step 2 - Select Your Item Type To Markup

In this example, we're using the dropdown within the JSON-LD Generator to markup Local Business information.

JSON-LD Type in Jolojo CMS



Once you've names the Linked Data tag, it will open a Modal window for you to complete the relevant markup based on the Item Type, in this example, Local Business info such as name, address, contact information etc. See below a screenshot of the fields:

JSON-LD Empty fields in Jolojo CMS


Step 3 - Complete The Fields Using The JSON-LD Generator

Complete all the information as accurately as possible, in this example I've completed the Local Business markup for BarkWeb:

JSON-LD Fields in Jolojo CMS


Step 4 - Choose Pages

Once you've updated the fields within the JSON-LD Generator, you'll need to choose what pages you want the JSON-LD code snippet to load on:

JSON-LD Choosing pages in Jolojo CMS


Step 5 - Create the Linked Data

Once you've completed all the fields within the tag, and chosen the pages you want the JSON-LD to load on, you simply need to hit the Create button to save the tag and generate your JSON-LD, without having to write a single line of code.

Final Step - Validate Your Markup

Be sure to validate your code using Google’s Structured Data Testing Tool.

Briefly recap

JSON-LD is a great way to contextualise your website to search engines in a really efficient way. Using Jolojo’s inbuilt JSON-LD generator means you don’t need to know any JavaScript to be able to markup your website, so there’s nothing holding you back. Next time I’ll be taking a look at the free coding aspect of Jolojo’s JSON-LD tool, so keep a look out for that. If you want to find out more about Jolojo, visit the Jolojo website at jolojo.com.

Further reading:

JSON-LD; The Time Efficient Method To Schema Markup, BarkWeb - https://www.barkweb.co.uk/blog/json-ld-the-time-efficient-method-to-schema-markup 

Mark Up Your Content Items, Google - https://developers.google.com/search/docs/guides/mark-up-content 

Search Gallery, Google - https://developers.google.com/search/docs/guides/search-gallery