SEOWordPress

What is schema mark-up JSON-LD

Schema markup is probably one of the most under used SEO techniques.

Correctly adding schema markup might not get you better rankings, but it will indirectly make your site a better search result option.

Shema markup, produced by Schema.org, is the result of collaboration between Google, Bing, Yandex, and Yahoo! to help you provide the information their search engines need to understand your content and provide the best search results for you. Adding Schema markup to your website code, improves the way your page displays when people search by enhancing the rich snippets that are displayed beneath the page title.

If you have a well structured website, that follows best practice and it has the proper schema markup, it fares better than a website made by cousin Joey who learned how to code by YouTube.

Smart web designers and webmasters take their time to learn schema properly, as it helps clients thrive, and clients are our bread and butter. It’s how we get the edge over contractors that churn out websites that may look OK, but don’t make you money. Wouldn’t you rather pay for a website that pays for itself?

Anyway…..back to schema mark-up….

Schema.org says “Schema.org vocabulary can be used with many different encodings, including RDFa, Microdata and JSON-LD. These vocabularies cover entities, relationships between entities and actions, and can easily be extended through a well-documented extension model.

Over 10 million sites use Schema.org to markup their web pages and email messages. Many applications from Google, Microsoft, Pinterest, Yandex and others already use these vocabularies to power rich, extensible experiences”

Put simply, “schema markup” is code you put in the backend of your website to add meaning to your content for bots eg: Google and Bing robots. It gives them information in a way that is easier for them to process, which in turn allows Google and Bing to understand your content and serve the content to searchers.

Using schema markup on your site increases the chances that search engines will show rich snippets for your site, which increases the CTR for search results (CTR stands for “Click Through Rate”).

There are different types of schema to apply to different sorts of websites or blogs and there are different types, Microdata, RDFa and JSON-LD.

This following examples are JSON-LD markup

  • Local businesses
  • Events
  • Products
  • Recipes
  • How to
  • Restaurants
  • TV episodes and ratings
  • Book reviews
  • Movies
  • Software applications
  • Articles

1. Organisation & local business schema

Organisation and local business schema is a staple schema markup that every business should have implemented on their site. This schema includes markup for your business’s location, images, exact coordinates (if you want), contact information, social links and lots of extra information including ratings and amenities – for example, car park public wi-fi, ramps etc.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Hobart",
    "addressRegion": "TAS",
    "streetAddress": "3102 Highway Road"
  },
  "description": "A fabulous gym made for people needing to get fit.",
  "name": "Jim's Gym",
  "telephone": "+61-0400-000-000"
}
</script>

2. Event schema markup

This schema is for websites that organise public or paid for events that people rely on attendance. Event schema markup allows clickable listings of upcoming events in the snippet.

Many organisers miss this handy snippet to get Google juice.

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Article",
  "name": "Apple announces new iPhone SE",
  "description": "New iPhone announced at 11:30 in Australia.",
  "about": {
    "@type": "Event",
    "name": "Apple's New iPhone Announcement in Australia"
  },
  "contentReferenceTime": "2020-03-21T11:30:00-07:00"
}
</script>

3. Products & offer markup

For websites that sell products. Product schema offers up clear, helpful information regarding prices, stock levels, product reviews and deals on particular products.

This schema is a must for ecommerce websites.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "aggregateRating": {
    "@type": "AggregateRating",
    "bestRating": "100",
    "ratingCount": "24",
    "ratingValue": "99"
  },
  "image": "joes-gadgets-gizmo.jpg",
  "name": "Gadget Gizmo",
  "offers": {
    "@type": "AggregateOffer",
    "highPrice": "$4.95",
    "lowPrice": "$2.50",
    "offerCount": "10",
    "offers": [
      {
        "@type": "Offer",
        "url": "http://joesgadjets.com.au/"
      },
     ]
  }
}
</script>

4. Recipe Schema

This is the reason you see so much information and pictures when you search for a recipe.

If you have a cooking-based website or blog, then this schema is a must. This is widely used on assistant devices such as Google Home, so make sure your recipe is readable by bots.

Below is a very popular JSON-LD example schema for a recipe.

type=“application/ld+json”>
{
  “@context”: “https://schema.org”,
  “@type”: “Recipe”,
  “author”: “Tanzi Bee”,
  “cookTime”: “PT1H”,
  “datePublished”: “2020-05-08”,
  “description”: “Classic banana bread recipe.”,
  “image”: “bananabread.jpg”,
  “recipeIngredient”: [
    “3 or 4 ripe bananas, smashed”,
    “1 egg”,
    “3/4 cup of sugar”
  ],
  “interactionStatistic”: {
    “@type”: “InteractionCounter”,
    “interactionType”: “https://schema.org/Comment”,
    “userInteractionCount”: “140”
  },
  “name”: “Classic Banana Bread”,
  “nutrition”: {
    “@type”: “NutritionInformation”,
    “calories”: “240 calories”,
    “fatContent”: “9 grams fat”
  },
  “prepTime”: “PT15M”,
  “recipeInstructions”: “Preheat the oven to 180 celcius. Mix in the ingredients in a bowl. Add the flour last. Pour the mixture into a loaf pan and bake for one hour.”,
  “recipeYield”: “1 loaf”,
  “suitableForDiet”: “https://schema.org/PescatarianDiet”
}

The outcome of your schema mark up being implemented correctly MAY result in rich snippets which show up at the top of the page where everyone wants their website to show. This is a possible maybe as there is more at play than having scema markup on your page to feature. That’s another aticle.

This image is of the grid carousel for recipes on Google which includes schema markup for reviews.

5. How-to markup

Not to be confused with recipe dchema, How-to schema markup takes users through a sequential set of steps to complete a task. It is best suited for content that has a main focus on instructing users how to do something.

How-to schema markup is only available on mobile devices at present, not desktop. Images are not required but are recommended to support your written steps.

In addition to written steps and images, you can also say what materials and tools are required.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "Change a Flat Tire",
  "estimatedCost": {
    "@type": "MonetaryAmount",
    "currency": "USD",
    "value": "20"
  },
  "totalTime": "PT30M",
  "tool": [
    {
      "@type": "HowToTool",
      "name": "Spare tire"
    },
    {
      "@type": "HowToTool",
      "name": "Lug wrench",
      "image": "lug-wrench.jpg"
    },
    {
      "@type": "HowToTool",
      "name": "Jack"
    },
    {
      "@type": "HowToTool",
      "name": "Wheel wedges",
      "image": "wheel-wedges.jpg"
    }
  ],
  "supply": {
    "@type": "HowToSupply",
    "name": "Flares",
    "image": "flares.jpg"
  },
  "step": [
    {
      "@type": "HowToSection",
      "name": "Preparation",
      "position": "1",
      "itemListElement": [
        {
          "@type": "HowToStep",
          "position": "1",
          "itemListElement": [
            {
              "@type": "HowToDirection",
              "position": "1",
              "text": "Turn on your hazard lights and set the flares."
            },
            {
              "@type": "HowToTip",
              "position": "2",
              "text": "You're going to need space and want to be visible."
            }
          ]
        },
        {
          "@type": "HowToStep",
          "position": "2",
          "itemListElement": [
            {
              "@type": "HowToDirection",
              "position": "1",
              "text": "Position your wheel wedges in front of the front tires if a rear tire is flat, or behind the rear tires if a front tire is flat"
            },
            {
              "@type": "HowToTip",
              "position": "2",
              "text": "You don't want the car to move while you're working on it."
            }
          ]
        }
      ]
    },
    {
      "@type": "HowToSection",
      "name": "Raise the car",
      "position": "2",
      "itemListElement": [
        {
          "@type": "HowToStep",
          "position": "1",
          "itemListElement": [
            {
              "@type": "HowToDirection",
              "position": "1",
              "duringMedia": "position-jack.jpg",
              "text": "Position the jack underneath the car, next to the flat tire."
            }
          ]
        },
        {
          "@type": "HowToStep",
          "position": "2",
          "itemListElement": [
            {
              "@type": "HowToDirection",
              "position": "1",
              "beforeMedia": {
                  "@type": "ImageObject",
                  "contentUrl": "car-on-ground.jpg"
              },
              "afterMedia": {
                  "@type": "ImageObject",
                  "contentUrl": "car-raised.jpg"
              },
              "text": "Raise the jack until the flat tire is just barely off of the ground."
            },
            {
              "@type": "HowToTip",
              "position": "2",
              "text": "It doesn't need to be too high."
            }
          ]
        },
        {
          "@type": "HowToStep",
          "position": "3",
          "itemListElement": [
            {
              "@type": "HowToDirection",
              "position": "1",
              "text": "Remove the hubcap and loosen the lug nuts."
            }
          ]
        },
        {
          "@type": "HowToStep",
          "position": "4",
          "itemListElement": [
            {
              "@type": "HowToDirection",
              "position": "1",
              "text": "Remove the flat tire and put the spare tire on the exposed lug bolts."
            }
          ]
        },
        {
          "@type": "HowToStep",
          "position": "5",
          "itemListElement": [
            {
              "@type": "HowToDirection",
              "position": "1",
              "text": "Tighten the lug nuts by hand."
            },
            {
              "@type": "HowToTip",
              "position": "2",
              "text": "Don't use the wrench just yet."
            }
          ]
        }
      ]
    },
    {
      "@type": "HowToSection",
      "name": "Finishing up",
      "position": "3",
      "itemListElement": [
        {
          "@type": "HowToStep",
          "position": "1",
          "itemListElement": [
            {
              "@type": "HowToDirection",
              "position": "1",
              "text": "Lower the jack and tighten the lug nuts with the wrench."
            }
          ]
        },
        {
          "@type": "HowToStep",
          "position": "2",
          "itemListElement": [
            {
              "@type": "HowToDirection",
              "position": "1",
              "text": "Replace the hubcap."
            }
          ]
        },
        {
          "@type": "HowToStep",
          "position": "3",
          "itemListElement": [
            {
              "@type": "HowToDirection",
              "position": "1",
              "text": "Put the equipment and the flat tire away."
            }
          ]
        }
      ]
    }
  ]
}
</script>

There are more “Schema Types” and even more coming.

What Next?

Now work out what schema type you need,

before adding it to your website, run it through the structured data testing tool to make sure it isn’t throwing any errors.

Add it to your web page footer and wait for the bots. If you can’t manage and it becomes all too much, contact Web Honey, we’ll fix your schema markup for you