256 Kilobytes

Structured Data: Schema and JSON-LD, why does it even matter?

Articles in Search Engine Optimization | By Hash Brown

Published 6 months agoFri, 22 Mar 2019 05:22:14 -0700 | Last update 6 months agoMon, 15 Apr 2019 15:55:04 -0700 📌

Structured Data opens up a whole new world for websites, helping them understand what it is your content actually is.

1,736 view, 2 RAMs, and 5 comments

Structured Data

Everyone believes Google is smart, that it’s indexing the worlds information and it cannot be beaten. Sure, those fuckers do a decent job, but when you think of all the retarded people out there building websites you quickly realise, they are doing an impossible job.

If you have 10,000 recipe websites you’re going to find 10,000 different formats, broken code, broken links, redirect loops, server issues, important text within an image and other stupid shit.

A lot of SEO is very basic, our job is to make sure search engines understand what our page is about and how it solves the users query. It’s as simple as that.

Structured data can help tremendously with that.

What is structured data?

Structured data allows search engines to understand what your content is about. It’s mark-up language added to the web page(s) HTML (or JSON) that explicitly states what sort of content the crawler is reading as well as important information like ratings, contact information and much more.

For example, if you run a recipes website as outlined above you may want to add structured data that outlines information such as ingredients, calories, fat content, prep time and more. Using structured data, you know that the search engine bots will understand your web pages information in much more depth, you can’t trust search engines to pull out this data from plain text.

Just because something is screamingly obvious for us, does not mean a crawler will understand it.

How do search engines use structured data?

Search engines can use structured data in several ways, but the most obvious way you may have seen and be aware of is in what is called a rich snippet on Google searches.

A page with structured data will look like this in Google:

Google SERP result

A page with no structured data will look like this:

Google SERP result

The extra information on the structured data goes towards what you see in the former example. This is good for several reasons:

  • Users know what to expect before clicking
  • Compared to regular search results, you’re far more likely to get the click
  • You’re more likely to rank higher as Google now expects this information

You will also see structured data used in tables within search results like so:

Google rich snippet answer box

If you’re an Amazon Affiliate you will see these a lot on just about every keyword with "best" in it. These answer boxes really attract clicks from users getting as much as 70% CTR’s from searches. This is massive and results in a lot of extra affiliate earnings.

That’s not all though, if you sell products online you may have seen competitors who display their prices in the SERPs or product review ratings. You may have also seen videos or images displaying in the SERPs. This is all done with featured snippets and the number of results like this that Google are picking up on it only likely to increase.

What types of structured data can we use?

There are many types of structured data standards. You may have used some already such as facebooks Open Graph which allows you to set the image, title and text used when your link is shared on social media.

But for SEO, the main standards you want to use are JSON-LD, RDFa and Schema. All three can be used independently or together and the one you want to go with depends on how your website is built, what you finder easier to implement and what data you’re trying to highlight.

For the record, while all these methods work Google recommend that people use JSON-LD. If you’re adding structured data for the search engine benefits it brings you should try and use this.

JSON-LD

JSON-LD stands for JSON Linking Data. In my opinion it’s by far the easiest way to add structured data to a page as it requires almost no code editing. All you need to do is add the JSON in the correct format inside the head of the document and you’re away.

An example of JSON-LD data can be seen here:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "ScreeningEvent",
  "name": "Jaws 3-D",
  "description": "Jaws 3-D shown in 3D.",
  "location": {
    "@type": "MovieTheater",
    "name": "ACME Cinemas 10",
    "screenCount": 10
  },
  "workPresented": {
    "@type": "Movie",
    "name": "Jaws 3-D",
    "sameAs": "www.imdb.com/title/tt0085750/"
  },
  "inLanguage": "en",
  "videoFormat": "3D"
}
</script>

Microdata

Microdata is the older method of adding structured data but it’s still valid if you see it in the wild. Rather than output the values in a JSON string you add attributes directly to the HTML elements that you want to add to the structured data.

This can become very time consuming to implement and it’s far more complicated than JSON.

Example of Microdata:

<div itemscope itemtype="http://schema.org/ScreeningEvent">
  <h1 itemprop="name">Jaws 3-D"</h1>
  <div itemprop="description">Jaws 3-D shown in 3D.</div>
  <p>Location: <span itemprop="location" itemscope itemtype="http://schema.org/MovieTheater">
    <span itemprop="name">ACME Cinemas 10</span>
    <span itemprop="screenCount">10</span>
    </span>
  </p>
  <div itemprop="workPresented" itemscope itemtype="http://schema.org/Movie">
    <span itemprop="name">Jaws 3-D</span>
    <link itemprop="sameAs" href="www.imdb.com/title/tt0085750/"/>
  </div>
  <p>Language: <span itemprop="inLanguage" content="en">English</span></p>
  <p>Film format: <span itemprop="videoFormat">3D</span></p>
</div>

RDFa

RDFa is very similar to microdata, except rather than rely exclusively on HTML attributes it also picks up on some of the HTML5 tags too. The implementation is much the same and looks like this:

<div vocab="http://schema.org/" typeof="http://schema.org/ScreeningEvent">
  <h1 property="name">Jaws 3-D"</h1>
  <div property="description">Jaws 3-D shown in 3D.</div>
  <p>Location: <div property="location" typeof="http://schema.org/MovieTheater">
    <span property="name">ACME Cinemas 10</span>
    <span property="screenCount">10</span>
  </p>
  <div property="workPresented" typeof="http://schema.org/Movie">
    <span property="name">Jaws 3-D</span>
    <link property="sameAs" href="www.imdb.com/title/tt0085750/"/>
  </div>
  <p>Language: <span property="inLanguage" content="en">English</span></p>
  <p>Film format: <span property="videoFormat">3D</span></p>
</div>

As you can see from the three options, JSON-LD is by far the eaiest to implement, just requiring a simple JSON list formatted correctly.

Keep in mind while Google use JSON-LD, other search engines such as Bing do not.

Common uses for Structured Data in SEO

Theres a endless and ever expanding set of options for structured data that web sites might wish to implement and it's important to understand that just because one website uses a particular structured data implementation doesn't mean you should also.

So, running you through some sort of tutorial for all of this is kind of pointless. However, what I can do is show you some of the most common things you may wish to set up in structured data and give you a complete list of resources for the rest.

Local Business Markup

Local businesses have a lot of options which search engines can use for the knowledge panel when people search for your brand name, it looks something like this:

knowledge panel from Google search

Information such as opening times, image, logo, description, location, contact information, type of business can all be displayed and easily implemented with JSON-LD. Here is example code I mate for a 256kb Animal Shelter.

<script type='application/ld+json'> 
{
  "@context": "http://www.schema.org",
  "@type": "AnimalShelter",
  "name": "256kb Animal Shelter",
  "url": "https://www.256kilobytes.com",
  "logo": "logo.png",
  "image": "url-to-image-of-building.jpg",
  "description": "Description for 256kb animal shelter.",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "1 some road",
    "addressLocality": "A city",
    "addressRegion": "California",
    "postalCode": "12345",
    "addressCountry": "United States"
  },
  "geo": {
    "@type": "GeoCoordinates",
    "latitude": "90.0000",
    "longitude": "135.0000"
  },
  "openingHours": "Mo, Tu, We, Th, Fr, Sa, Su 09:00-19:00",
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "01890123456",
    "contactType": "Front Desk"
  }
}
 </script>

Person Markup

If you are a blogger or have a personal website, there is also the option to use JSON-LD to implement information similar to how a local business does it.

This is useful for telling search engines what social profiles belong to you. If you are the sort of person people are likely to search for this can be useful, you can't always trust Google to get it right.

<script type="application/ld+json">// <![CDATA[
{ "@context" : "http://schema.org",
  "@type" : "Person",
  "name" : "Your Name",
  "url" : "http://www.yourdomain.com",
  "sameAs" : [ "https://twitter.com/username",
      "https://instagram.com/username/",
      "https://plus.google.com/blah-blah",
      "http://www.youtube.com/yourchannel"]
}
// ]]></script>

Enable Site Search Within Google

You may have seen some websites (mainly larger brands) have this search bar when people search their brand:

SERP Search Bar

Do you want this too? It's fairly easy to add and can be done with structured data.

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "url": "http://www.256kilobytes.com/",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://www.256kilobytes.com/content/search?q={search_term}",
    "query-input": "required name=search_term" }
}
</script>

If dear sir wanted to implement this kind of this for this very website, this is how they would do it! However, this is of course no kind of promise Google would choose to take notice.

Article Markup

Telling search engines what kind of content your page is can really help them understand site structure.

This is the markup for an article.

<script type="application/ld+json">
[{
  "@context": "http://schema.org",
  "@type": "Article",
  "author": { "name": "Hash Brown", "sameAs": ["https://twitter.com/LiterallyHitler"] },
  "name": "Structured Data: Schema and JSON-LD, why does it even matter?",
  "headline": "Structured Data: Schema and JSON-LD, why does it even matter?",
  "datePublished": "2019-03-22",
  "image": ["https://www.256kilobytes.com/images/image.jpg"],
  "description": "Structured Data opens up a whole new world for websites, helping them understand what it is your content actually is."
}]
</script>

There are also a number of extra items you could add if you included a video or the content won an award even.

For full article markup take a look here:

Product Markup

For people who run an Ecommerce store or even an affiliate site that reviews products, you may want to take a look at product schema.

<script type='application/ld+json'> 
{
  "@context": "http://www.schema.org",
  "@type": "product",
  "brand": "Harley Davidson",
  "name": "Helmet",
  "image": "helmet.jpg",
  "description": "This is a great helmet.",
  "aggregateRating": {
    "@type": "aggregateRating",
    "ratingValue": "4",
    "reviewCount": "15"
  }
}
 </script>

In this example you can see we have added a products brand, product name, desciption, image and rating.

This would look like this in search results:

Product schema

You could also add things such as price, width/height, weight, offers, colour and more. Product markup is extensive and widely underused.

If you are doing things such as Google product feed adverts you may already have all this information.

Event Markup

For people selling tickets or running events, this may enlighten you and bring you to a higher being.

This is markup for an event, lising the event, description, image, ticket information and more.

<script type='application/ld+json'> 
{
  "@context": "http://www.schema.org",
  "@type": "Festival",
  "name": "256kb Festival",
  "url": "256kilobytes.com",
  "description": "We are going to get a load of cheap dogs and set them on fire to please the Gods.",
  "startDate": "2019-02-23T22:00",
  "endDate": "2019-02-23T23:45",
  "location": {
    "@type": "Place",
    "name": "South Grand Avenue",
    "sameAs": "https://convene.com/location/333-south-grand-avenue/",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "333 South Grand Avenue",
      "addressLocality": "Los Angeles",
      "addressRegion": "California",
      "postalCode": "90071",
      "addressCountry": "United States"
    }
  },
  "offers": {
    "@type": "Offer",
    "description": "$99 for early bird tickets",
    "url": "256kilobytes.com/tickets",
    "price": "$99"
  }
}
 </script>

Misc Markup

For people who have websites for weird shit you may be reading this and think this is "normie" and they don't have data items for you to use.

Here are some Misc things you can markup:

  • Music -  If you have a lyric site or stream illegal things you may want to take a look.
  • Recipes - Teaching people to cook with schema is haram.
  • Games - Tell Google about your game homie.
  • Invoice - This is not something you would want to use on your website, but many popular email services also recognise Schema.

How do I add JSON-LD to my website?

This will clearly depend on what kind of website you have set up, but basically you add the JSON into your <head>

How to add structured data to a website

Adding Schema to websites is fairly easy. You just need to add the data somewhere inside the head.

If you are using a Content Management System or custom framework speak to a developer or find out how to edit head information.

Web pages are structured like this:

<!DOCTYPE HTML>
<html>
<head>
<title>Who did 911? Was it Obama? Saudi? No. We have the information from the deep state</title>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
<h1>WHO DID 911?</h1>
<p>After months of investigation WE HAVE THE DOCUMENTS RIGHT HERE. Black HELICOPTERS are circling the building as we speak.</p>
</body>
</html>

We need to add our information inbetween <head> and </head>, it should look like this.

<!DOCTYPE HTML>
<html>
<head>
<title>Who did 911? Was it Obama? Saudi? No. We have the information from the deep state</title>
<link rel="stylesheet" type="text/css" href="theme.css">

<!-- Schema -->
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "NewsArticle",
  "headline": "WHO DID 911?",
  "datePublished": "2019/03/22",
  "description": "WE HAVE THE INFORMATION AFTER A REAL INVESTIGATION BY THE DEEP STATE",
  "image": {
    "@type": "ImageObject",
    "url": "image.jpg"
  },
  "author": "Alex Jones",
  "publisher": {
    "@type": "Organization",
    "logo": {
      "@type": "ImageObject",
      "url": "infowars-logo.jpg"
    },
    "name": "Infowars.com"
  }
}
</script>

</head>
<body>
<h1>WHO DID 911?</h1>
<p>After months of investigation WE HAVE THE DOCUMENTS RIGHT HERE. Black HELICOPTERS are circling the building as we speak.</p>
</body>
</html>

If you have any kind of framework or your content is loaded from a database it might be worth speaking to a developer who can load this information into your template/framework and get this information out there automatically. Doing all this by hand can be annoying.

How to add structured data to my WordPress website

Adding structured data to WordPress can be kind of hard for people who may not be able to code properly, but using a plugin such as Rank Math can mean it's very simple indeed.

Once installed and activated you will see something like this, click on the Rich Snippet tab.

Rank Math Options

Once you're in the Rich Snippet area take a look around, you have a drop down that will enable you to set up Schema for a HUGE number of things from Job Postings to Blog Posts. They make ALL of schema very simple and have a lot of preset variables that you can just pick from drop downs such as tags, titles, date published and much more.

Rank Math Rich Snippets

Implementing schema on WordPress has never been easier. Rank Math is so easy to use, even for people with no experience of coding.

Structured Data Resources

  • Schema.org - The official schema website is a great resource with working examples for every piece of data that is recognised to date.
  • Googles Structured Data Testing Tool - Once you have implemented your JSON-LD, you may want to test it.
  • JSON-LD Generator - Very easy to use for those who are not used to dealing with JSON
  • Rank Math - A SEO plugin for WordPress that supports Schema and makes implentation very simple for WordPress
Users Who Have Downloaded More RAM:
August R. Garcia (6 months ago)
Huevos Rancheros (6 months ago)
🐏 ⨉ 2
Posted by Hash Brown 6 months ago

Edit History

• [2019-03-22 5:22 PDT] Hash Brown (6 months ago)
🕓 Posted at 22 March, 2019 05:22 AM PDT

Profile Photo - Hash Brown Hash Brown Internet Activist &... United State of Euro...
🗎 61 🗨 447 🐏 209
Staff

Some other content you may like:

SEO:

Affiliate Marketing:

Other:


Account created 10 months ago.
61 posts, 447 comments, and 209 RAMs.

Last active 4 days ago:
Commented in thread It's Sunday

Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
🗎 192 🗨 947 🐏 287
Site Owner

If you're using WordPress, this extremely basic plugin is an easy way to set up your site to show star ratings in search results by allowing users to rate articles, product pages, and other content:

Used to use for an eCommerce site.

Users Who Have Downloaded More RAM:
Hash Brown (6 months ago)
🐏 ⨉ 1
Posted by August R. Garcia 6 months ago

Edit History

• [2019-04-14 3:46 PDT] August R. Garcia (6 months ago)
🕓 Posted at 14 April, 2019 03:46 AM PDT

Sir, I can do you a nice SEO.

Profile Photo - Hash Brown Hash Brown Internet Activist &... United State of Euro...
🗎 61 🗨 447 🐏 209
Staff

Rank Math also allows this too, with a short code to place the rating system where ever you wish dear.

Download more RAM. 🐏 ⨉ 0 Posted by Hash Brown 6 months ago 🕓 Posted at 15 April, 2019 10:49 AM PDT

"THAT DOG IS GETTING RAPED" - Terry A. Davis

Profile Photo - papaalphanovember papaalphanovember
🗎 0 🗨 19 🐏 8

Great article Hash Brown.

I even registered just to tell you that!
Keep up the good, informative work, thanks.

Users Who Have Downloaded More RAM:
August R. Garcia (5 months ago)
Hash Brown (5 months ago)
Huevos Rancheros (5 months ago)
🐏 ⨉ 3
Posted by papaalphanovember 5 months ago 🕓 Posted at 24 April, 2019 01:59 AM PDT
Profile Photo - Hash Brown Hash Brown Internet Activist &... United State of Euro...
🗎 61 🗨 447 🐏 209
Staff

Thank you dear!

Download more RAM. 🐏 ⨉ 0 Posted by Hash Brown 5 months ago 🕓 Posted at 24 April, 2019 10:30 AM PDT

"THAT DOG IS GETTING RAPED" - Terry A. Davis

Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
🗎 192 🗨 947 🐏 287
Site Owner

There are some more of these now:

Such as how-to markup and FAQ markup:

Users Who Have Downloaded More RAM:
Hash Brown (4 months ago)
🐏 ⨉ 1
Posted by August R. Garcia 4 months ago 🕓 Posted at 29 May, 2019 14:58 PM PDT

Sir, I can do you a nice SEO.

Post a New Comment

To leave a comment, login to your account or create an account.

Do you like having a good time?

Read Quality Articles

Read some quality articles. If you can manage to not get banned for like five minutes, you can even post your own articles.

View Articles →

Argue with People on the Internet

Use your account to explain why people are wrong on the Internet forum.

View Forum →

Vandalize the Wiki

Or don't. I'm not your dad.

View Wiki →

Ask and/or Answer Questions

If someone asks a terrible question, post a LMGTFY link.

View Answers →

Make Some Money

Hire freelancers and/or advertise your goods and/or services. Hire people directly. We're not a middleman or your dad. Manage your own business transactions.

Register an Account
You can also login to an existing account or recover your password. All use of this site is subject to terms outlined in the terms of service and privacy policy.