A Guide to JSON-LD for Beginners
By aipl in Technical SEO
The intention of our blog is always to spread knowledge and share what we know, with everyone, especially the beginners in SEO. So, this time we thought of doing a technical blog that can help you with setting up schema code. There are different ways of doing this but here we are discussing only the JSON-LD format. We hope that you find this guide to JSON-LD useful and entertaining.
What exactly is JSON-LD?
JSON-LD is a javascript function which can help organize website’s data and can be found in an array. JSON-LD stands for Javascript Object Notation for Linked Data. Why is JSON-LD very important to know? It is because JSON-LD is one of the simplest javascript functions to implement and is good for SEO purposes, which will definitely be needed for your website.
JSON-LD is one of the most widely chosen functions for SEO purposes because it is so easy to use, and you don’t need to have the skills of a developer to understand how it works. JSON-LD also has fewer chances of errors because it is simply added between two <script> tags without much another coding necessary. As you can tell, JSON-LD is useful if you want to promote a website for conversion purposes. Here are a few things that you should know about the function and how to use it.
What Exactly Does This Function Do?
In a nutshell, the JSON-LD function simply expounds all of the elements in a given page and structures data. The reason as to why this function is very important to SEO is because search engines tend to organize facts when it is going through web pages during a search. The more organized the data of a website is, the more crawlable it is for search engines. You can say that JSON-LD makes organizing website data, easy.
How to Implement This Function
To implement the JSON-LD function into your coding, you just have to take note of one simple tag.
<script type=”application/ld+json”>{}
You don’t really need to memorize the code as you can just copy paste it in your script tag whenever you want to use it. Also, don’t forget to close the script tag with a </script>.
Another thing to know would be where to place the JSON-LD tag. Google would recommend that the best place to put the tag would be in the header of the website or simply in between the <head> and the </head> tags. If you do that, it will look something like this:
<head>
<script type=”application/ld+json”>
{
…..
}
</script>
</head>
Although it is recommended that you place the script tag in the header part of the website, other people would place it in the body part, as well or between the <body> and the </body> tags. This is also acceptable since Google can still read it. However, for this, you will need the values typed in the code to be available in the body part otherwise its text will show up alongside other body elements, thus disturbing the look of the page.
Another tag that you must know about would be the @context tag which would reference the JSON-LD Schema items found in Schema.org. The tag would look like this:
“@context”: “http://schema.org”,
The benefit of doing this is that it tells your browser to reference the item types, properties, and vocabulary that can be found on the website– which is all good for SEO.
Please note that there is a comma placed at the end of the tag. Always take note that in coding, a comma means that there is still a continuation of commands after that one. A coder would know that even something as small as a missed comma will end up with an incomplete command or a botched-up website, so do not ever forget your commas.
Now that you’re finished with the JSON-LD Schema tags, the last tag would be the type tags which are represented by @type.
While the @context tag specifies where you will reference the item types and properties, the @type tag will specify which specific type you want to use from the reference (the same reference that you have provided earlier with the @context tag). The @type tag will look like this:
“@type”:”…”,
To further illustrate, let’s use an example. The “Types” can be found on this website https://schema.org/docs/full.html. All you have to do is to choose which item type you’d like to reference from the list and use it on the @type tag. For this example, let’s choose the “corporation” type which can be found at https://schema.org/Corporation.
When you place that item type in the tag, it will look like this:
“@type”:”https://schema.org/Corporation”
This tag will tell your browser to specifically use the properties of the “corporation” item in its data. The item’s technical specs, details, and other properties will appear on your browser.
How to Annotate Attribute Value Pairs
When you annotate attribute value pairs, there are two elements to put into mind. These are the item property element (which can be found from http://schema.org) and the value element which defines the value or what the item type contains. Values can be words, names, numbers, or even links. In coding, it would look like this:
“Item type”: “Value” or “Item type”: [“Values”] for multiple values
In an example, it would look something like this:
“Name” : “John”
In this example, you are specifying a value to the item “Name” wherein the name of the person is “John”.
Putting it All Together
When you put it all together, your JSON-LD code will look like this:
<script type=”application/ld+json”>
{
“@context” : “http://schema.org/”,
“@type” : “http://schema.org/Person”,
“Name” : “John”,
“Surname” : “Smith”
},
This is a simple example of how the tags of the JSON-LD function work together to organize data. In this simple example, we see how the JSON-LD function organizes the information about a person named John Smith and how Schema plays a role in defining item types and properties.
Conclusion to the Guide to JSON-LD
These are the basic details that you should know when you start using the JSON-LD function. The only reason why other websites don’t use JSON-LD function is that not many website owners know what it is. By knowing what JSON-LD is and how it can work for you, you can actually discover a very useful trick to increase the SEO value of your website.If done successfully, this will then make your website better and more effective on search engines. The more crawl ability your website has, the more visitors you’ll have. The more visitors your website gains, the higher your site’s conversion rates will be, and that would translate into more tangible rewards.
Leave a Comment