SEO

What is schema markup JSON-LD and how to use it?

Written by Amit Pandey

If you want to improve your search engine ranking, then you must need to implement JSON-LD in your project.

What is schema markup (JSON-LD)

Schema markup is a special technique used for search engine optimization. Under schema markup, we set it in different ways on our website with the help of JSON LD.

How to use it?

We write JSON LD in a special way with the help of JavaScript inside a script block. By writing this, the written content of our website is displayed on search engines. If the JSON LD script is put on our site, then search engines show our results much better and more upwards than the other sites.

Why?

It is obvious that if the result will show upwards on the search engine, then people will also come to our website more. That is why such special technology is used.

How to implemnt

JSON LD can be written in several ways. All its formats have been displayed on Google, its link is mentioned below, you can know about it in a better way by visiting that link.

Example

We are showing you here some special types of JSON LD format, out of which you can choose for your website and install it on your website.

<html>
  <head>
    <title>Party Coffee Cake</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Party Coffee Cake",
      "author": {
        "@type": "Person",
        "name": "Mary Stone"
      },
      "datePublished": "2018-03-10",
      "description": "This coffee cake is awesome and perfect for parties.",
      "prepTime": "PT20M"
    }
    </script>
  </head>
  <body>
    <h2>Party coffee cake recipe</h2>
    <p>
      <i>by Mary Stone, 2018-03-10</i>
    </p>
    <p>
      This coffee cake is awesome and perfect for parties.
    </p>
    <p>
      Preparation time: 20 minutes
    </p>
  </body>
</html>

If you are using WordPress, then you do not need to use the JSON LD format, as it can be installed with the help of the Yoast plugin.

Example for AMP

Let’s take an example for an article.

<html amp>
  <head>
    <title>Article headline</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "NewsArticle",
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://google.com/article"
      },
      "headline": "Article headline",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
      ],
      "datePublished": "2015-02-05T08:00:00+08:00",
      "dateModified": "2015-02-05T09:20:00+08:00",
      "author": {
        "@type": "Person",
        "name": "John Doe",
        "url": "http://example.com/profile/johndoe123"
      },
      "publisher": {
        "@type": "Organization",
        "name": "Google",
        "logo": {
          "@type": "ImageObject",
          "url": "https://google.com/logo.jpg"
        }
      }
    }
    </script>
  </head>
  <body>
  </body>
</html>

Example for NON-AMP

<html>
  <head>
    <title>Article headline</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "NewsArticle",
      "headline": "Article headline",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
       ],
      "datePublished": "2015-02-05T08:00:00+08:00",
      "dateModified": "2015-02-05T09:20:00+08:00",
      "author": [{
          "@type": "Person",
          "name": "Jane Doe",
          "url": "http://example.com/profile/janedoe123"
        },{
          "@type": "Person",
          "name": "John Doe",
          "url": "http://example.com/profile/johndoe123"
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>

You must have used Yoast plug-in for search engine optimization and JSON LD schema markup is used in that plugin. So that the written content of our website can be seen easily and upwards on the search engines.

By using schema markup, we can list our product content or anything else that we put on our website directly on Google.

Understand how structured data works

For example, you must have ever searched about any mobile on Google and you must have seen that on Google itself, you get the photo of that mobile and the price of that mobile by writing it there, it is possible only with the help of this schema markup.

According to us, by using this example, you must have understood how important it is for us to use it.

If you are using or are going to use Schema Markup on your website, then by commenting below, do tell which schema markup you have used and how convenient it has been for you.

About the author

Amit Pandey

Professional Android App and Full Stack Web Developer, Blogger, Entrepreneur And Founder of Coding Issue and Legend Blogs. I am always trying to learn new things or new possible ways to do things.

Leave a Comment