GioNery

JSON Schema Markup

Schema Markup is used by search engines to better read and understand the content of your website to be displayed, this will help your content to have more enriching results.

Creating Schema Markup from Scratch

There are many website that will help you in the creation of schemas, generating the structure, but there are a few cases in which there are no generators for such a schema, and you will have to create from scratch.

1. Read the documentation

Inside the website, https://schema.org/ let’s search for the schema requested by the customer

Once we find the schema it will display the information that can be added, in this case within the schema “Apartment” and it will specify which is the function of each property.

2. Get the properties within the post provided by the customer.

Inside the post/page, you will search for the information required for that schema. Once we have this information, we will proceed to create the schema.

3. Create the Schema

Generally, the structure comes as an example within the documentation, to the bottom of the page, but this is not always the case.
This is the basic structure of all schemas is as fallows:

  1. <script type=”application/ld+json”>
  2.     {
  3.         “@context”: “https://schema.org”,
  4.         “@type”: “Schema Name”,
  5.  }
  6. </script>

It is highly important to read the documentation to know how to add each property.

4. Validate that the schema is added correctly

We already have the schema created

  1. <script type=”application/ld+json”>
  2.     {
  3.         “@context”: “https://schema.org”,
  4.         “@type”: “Apartment”,
  5.         “name”: “227  Lynn Street – Medium apartment”,
  6.         “description”: “Great downtown accommodation for family or group of friends.”,
  7.         “numberOfRooms”: 3,
  8.         “occupancy”: {
  9.             “@type”: “QuantitativeValue”,
  10.             “minValue”: 1,
  11.             “maxValue”: 4
  12.         },
  13.         “floorLevel”: 5,
  14.         “floorSize”: {
  15.             “@type”: “QuantitativeValue”,
  16.             “value”: 81,
  17.             “unitCode”: “MTK”
  18.         },
  19.         “numberOfBathroomsTotal”: 2,
  20.         “numberOfBedrooms”: 2,
  21.         “petsAllowed”: true,
  22.         “tourBookingPage”: “http://example.com”,
  23.         “yearBuilt”: 2005
  24. }
  25. </script>

Now we will go to https://validator.schema.org/ to make sure that the schema is correctly added.

Inside the page, click on “New test”.

A small window will open, click on “code snippet”

Add the code and run the test

Once the schema shows 0 errors and 0 warning, it is ready to be added to the page!

Schema Markup Generators

Fortunately, there are many websites that will be able to help us with the most used schemas.
This is one of the most popular pages, which you can use to create a schema without the need to generate the structure using code.
https://technicalseo.com/tools/schema-markup-generator/

For example, this page will make it easy to add a FAQ schema, simply by adding the questions and answers from the page provided by the client.

It generates the code automatically, now you only need to copy the code!

I also recommend using this Chrome extension
Schema Builder for Structured Data

It is very practical since it tells you which schema is currently added inside the post/page, and so avoid confusion by having two equal schemas inside.

It also allows you to create your own schemas easily.

Google Rich Results

This tool will aid in achieving improved search results by ensuring that the schema includes the necessary information for a more visually appealing display, such as the inclusion of images, ratings, and other metadata, thereby driving increased clicks to your website.

I will provide a brief example of how it works

We have two options, one (URL) is to add the URL of the post and the other (CODE) is to add the JSON schema

In this case, we are going to add the code inside “CODE”.

And then click on “TEST CODE”.

Here it will show us if the code has a warning or is correctly added.

Keep in mind that not all schemas are in the “Google Rich Results” database, so there will be times when it does not show information, in that case you just have to check it inside https://validator.schema.org/.

Where Should I Add the Schema Markup?

It is recommended to add it in the head section of the HTML document, since this is where the page metadata is specified.

There are multiple ways to add it inside the header of the post, there are plugins, there are custom sites that already have by default the section to add content.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top