Andrew Welch · Insights · #json-ld #structured-data #SEO

Published , updated · 5 min read ·


Please consider 🎗 sponsoring me 🎗 to keep writing articles like this.

JSON-LD, Structured Data and Erotica

JSON-LD Struc­tured Data is a big deal for the ​“Seman­tic Web.” Google cares about it. Apple cares about it. You should, too.

JSON-LD Struc­tured Data is a some­what mys­ti­cal beast. Like a uni­corn, many peo­ple have heard of it, but no one has every real­ly seen one. How­ev­er, it’s very real, and is going to be a big deal.

Google cares about it. Apple cares about it. This arti­cle will explain what it is, and why you should care, too.

Back in the day, AltaVista was the search engine of choice, along with Yahoo. Then Google came along, and blew their doors off.

Google succeeded because of one reason: it returned search results that people wanted.

So Google is pret­ty good about return­ing search results; almost scar­i­ly so some­times. As good as Google is, how­ev­er, one thing that humans are very good at, but com­put­ers are not, is under­stand­ing con­text.

Let’s say there’s a head­line on my web­page that is called Avatar. Is this about Avatar the movie? Is it about an avatar image for a per­son? Or is it some­thing else entirely?

This is some­thing that we meat-pup­pets can fig­ure out pret­ty eas­i­ly, but com­put­ers have a hard time with it. Addi­tion­al­ly, under­stand­ing the rela­tion­ship between things — such as this avatar image is for Bill Perkins, who owns Acme, Inc., which sells these prod­ucts — can be chal­leng­ing for com­put­ers to fig­ure out.

Enter Struc­tured Data. Sim­ply put, it’s a way to express this con­tex­tu­al and rela­tion­ship infor­ma­tion in a way that com­put­ers can understand.

Rather than having to parse a webpage and guess what it’s about, Structured Data allows you to tell Google what it’s about.

But before you can have mean­ing­ful com­mu­ni­ca­tion, you need a lan­guage. We all need to agree on what the air vibra­tions that rep­re­sent the word ​“dog” mean before it’s useful.

Schema​.org pro­vides that lan­guage for Struc­tured Data. Con­sid­er it a dic­tio­nary for the seman­tic web, and just like a dic­tio­nary, it’s not all that fun to read. But it’s incred­i­bly useful.

Schema​.org defines a hier­ar­chi­cal set of schemas that define var­i­ous objects and actions. For instance, there’s an Orga­ni­za­tion schema that defines things about an orga­ni­za­tion, includ­ing more spe­cif­ic sub-types of organizations.

This gives us a vocab­u­lary we can use for express­ing struc­tured data. So instead of Google guess­ing that a par­tic­u­lar web page is about a cer­tain orga­ni­za­tion, we can tell it. And we can tell it more than it might glean by just index­ing the page (and poten­tial­ly get­ting it wrong), includ­ing the rela­tion­ships between this orga­ni­za­tion and oth­er affil­i­ate orga­ni­za­tions, prod­ucts it offers for sale, peo­ple who work for it, and so on and so forth.

Link Show me that beautiful structured data!

So for a prac­ti­cal exam­ples, check out the Anno­tat­ed JSON-LD Struc­tured Data Exam­ples arti­cle. Here’s what it looks like for the A Pret­ty Web­site Isn’t Enough article:

Struc­tured Data Overview

This is essen­tial­ly show­ing us how Google has parsed and con­sumed the Struc­tured Data on this web­page. We can see that there is an Organization asso­ci­at­ed with this web­site, a BreadcumbList of the pages, infor­ma­tion about the WebSite itself, a Place, and also a few BlogPostings.

Let’s drill down and take a look at the orga­ni­za­tion that this web­site is about:

Struc­tured Data Organization

Now, we all know that Google is smart. But look at all of the infor­ma­tion that we’re pre­sent­ing to Google here. We’re let­ting it know all of the social media out­lets that are the sameAs this organization.

Prob­a­bly Google could fig­ure out some of these on its own, but we’re explic­it­ly telling it what this orga­ni­za­tion is about, and the things that are relat­ed to it. Google can then add this infor­ma­tion to its Knowl­edge Graph so that it can under­stand the con­text where this Orga­ni­za­tion is rel­e­vant, and the rela­tion­ships between it and oth­er things like social media sites.

We’re also telling it ​“Hey, when you rep­re­sent this orga­ni­za­tion, use this image for the logo.” And we’re giv­ing it a loca­tion, and a ton of oth­er use­ful infor­ma­tion. We can even pro­vide it with hours of oper­a­tion for this orga­ni­za­tion, the how to reach var­i­ous depart­ments by phone, and a whole lot more.

That’s some pow­er­ful stuff.

You’ll also notice that there are ten BlogPostings list­ed on the page. There is one BlogPosting for the blog entry itself, and the oth­ers are the ​“recent arti­cles” list­ed at the bot­tom of the page. Let’s have a look:

Struc­tured Data BlogPosting

Once again, we can see a boat­load of use­ful infor­ma­tion that we’re telling Google about the actu­al con­tent of this page. Since there are sev­er­al BlogPostings list­ed on this page, the mainEntityOfPage lists the URL where this BlogPosting is the main thing that the web­page is about.

Wouldn’t you rather be able to tell Google what your website is about, instead of having it guess?

We can also see the date the arti­cle was pub­lished, the head­line, the descrip­tion, the key­words, the image we want asso­ci­at­ed with the arti­cle, and a whole lot more. Google might fig­ure some of this out; it might get some of it wrong.

In addi­tion to check­ing on the valid­i­ty of your Struc­tured Data with Google’s Struc­tured Data Test­ing Tool, you can also check on how Google has con­sumed your Struc­tured Data with the Google Search Con­sole:

Google Search Console

Here you can get a bird’s eye view of all of the Struc­tured Data that Google has con­sumed on your web­site over time, as well as check for errors, etc. It can some­times take a bit of time before Google starts con­sum­ing your Struc­tured Data, so be patient.

Link So… does it help SEO?

A ques­tion that might imme­di­ate­ly occur to peo­ple is ​“Wow, does this help with SEO?” The answer is ​“Not real­ly. Maybe. It’s classified.”

I’ll explain. Google does­n’t want to see a repeat of the bad old days where sketchy SEO firms attempt­ed to game the sys­tem by ​“key­word stuff­ing” and the like. So they are tak­ing a mea­sured approach with how they uti­lize the data pro­vid­ed by websites. 

So Google is keep­ing it close to the vest in terms of how they are uti­liz­ing this JSON-LD Struc­tured Data as part of the PageR­ank algo­rithm. But they are smart guys & gals, they’ll fig­ure it out.

Using Struc­tured data — as of this writ­ing — will not direct­ly affect your Search Engine Results Page (SERP) rank­ing. It is, how­ev­er, con­sumed by Google into is Knowl­edge Graph, and impor­tant­ly it is used as Rich Cards (aka ​“Rich Snip­pets” aka ​“Rich Results”) on the SERP. So your users will see a much rich­er expe­ri­ence… and be more like­ly to click.

Here are a few exam­ples of Rich Cards, direct­ly from Google:

Recipe Rich Card

Event Rich Card

Prod­uct Rich Card

I think it should be pret­ty obvi­ous how com­pelling this is. It’s also clear that Google is putting its weight behind JSON-LD Struc­tured Data in a big way; it’s list­ing it as its pre­ferred for­mat for Struc­tured Data.

So I think it’s cer­tain­ly pos­si­ble that JSON-LD Struc­tured Data will even­tu­al­ly be an influ­enc­ing fac­tor for SERP; Google has hint­ed at such already.

Google’s not the only one; in iOS 10, Apple announced that it pars­es web pages, look­ing for JSON-LD Struc­tured Data. Right now they are just look­ing for address infor­ma­tion, but they have made it clear that they will be expand­ing on this in the future. So the time to get on board is now!

Apple’s iOS 10 JSON-LD Struc­tured Data

If you look at the image above, the Get Direc­tions to link at the bot­tom appears only if your web­site has JSON-LD Struc­tured Data with a postalAddress on it. It appears when you go to switch between apps, and are com­ing from a web­page with said postalAddress JSON-LD Struc­tured Data on it.

Pret­ty com­pelling to help peo­ple who were just check­ing out your web­site get direc­tions to your store, so that they can come in and buy something.

You can read more about SEO in the Mod­ern SEO: Snake Oil vs. Sub­stance article.

Link So what’s this JSON-LD thing?

When I intro­duced the SEO­mat­ic plu­g­in for Craft CMS at the end of 2015, one of this things it sup­port­ed out of the box was JSON-LD Struc­tured Data.

Most people’s reaction was “JSON-wut?”

We know that JSON is JavaScript Object Nota­tion, basi­cal­ly a con­ve­nient way to pass data around via JavaScript as nest­ed key/​value pairs. The LD part of JSON-LD stands for Linked Data. Because the idea behind JSON-LD is that data does not live as an island; to have mean­ing, it needs to be linked to oth­er data. Inci­den­tal­ly, this seems remark­ably sim­i­lar to the con­cept of Google’s Knowl­edge Graph. Hmmm… coin­ci­dence? I think not!

If you want to learn more about JSON-LD, check out the video What is JSON-LD, it gives a nice overview of it, and why it matters.

The idea of Struc­tured Data has been around for some time, one of the first incar­na­tions of it that came to the atten­tion of fron­tend devel­op­ers was micro­da­ta. While some adopt­ed it, it nev­er real­ly took off. Because frankly, it sucked.

Here’s an exam­ple of it tak­en right from the Schema​.org web­site (remem­ber, Schema​.org is just about the vocab­u­lary, it is agnos­tic about the imple­men­ta­tion):

WAAY is an affiliate of the ABC network and broadcasts in SD.

So add micro­da­ta to the above text on a web­page, you’d end up with an abom­i­na­tion like this:

<div itemscope itemtype="http://schema.org/BroadcastService">
  <span itemprop="name">WAAY-TV</span>
  <span itemprop="broadcastDisplayName">ABC</span>
  <span itemprop="videoFormat">SD</span>
  <span itemprop="broadcastTimezone" content="-8:00">PST</span>
  <div itemprop="broadcastAffiliateOf" itemscope itemtype="http://schema.org/Organization">
    <span itemprop="name">ABC</span>
  </div>
</div>

This inter­twin­ing of HTML code and micro­da­ta markup makes it dif­fi­cult to read, and dif­fi­cult to work with, because there’s a spe­cif­ic hier­ar­chy that the micro­da­ta needs to be in. Move the HTML around, and you might break it.

You were also some­times forced to add weird struc­tur­al things like <div>​‘s where you did­n’t need them, just to pro­vide this hier­ar­chy for the micro­da­ta. It also forced the per­son doing the SEO work to be the same as the per­son writ­ing the HTML, which is rarely the case. And it was exceed­ing­ly dif­fi­cult to auto­mate the gen­er­a­tion of it due to how it was inter­twined with the HTML code.

Enter JSON-LD. Here’s the same Schema​.org Struc­tured Data, but in JSON-LD format:

<script type="application/ld+json">
{
  "@context":"http://schema.org",
  "@type":"BroadcastService",
  "name":"WAAY-TV",
  "broadcastDisplayName":"ABC",
  "videoFormat":"SD",
  "broadcastTimezone": "-8:00",
  "broadcastAffiliateOf":{
    "@type":"Organization",
    "name":"ABC"
  }
}
</script>

Ahh­h­h­h­hh. So much clean­er. And it is com­plete­ly sep­a­rate from the HTML markup, so we can auto­mate its cre­ation, and the per­son edit­ing the SEO can be dif­fer­ent from the per­son edit­ing the HTML.

The impor­tant thing to note is that this is the same exact thing as the micro­da­ta exam­ple. It’s like the dif­fer­ence between writ­ing some­thing out by hand in cur­sive vs. typ­ing it on a key­board: the words are the same, but one is a whole lot more effi­cient and use­ful (hip­sters, please don’t send me hate-mail).

Astute read­ers will notice the <script type="application/ld+json"> tag. The cool thing about this is that browsers com­plete­ly ignore it. When pars­ing a HTML page, the brows­er sees that this <script> is of the type application/ld+json and it just ignores it (it even works in Lynx!). But Google does­n’t ignore it.

The JSON-LD for­mat also hap­pens to be very easy for com­put­ers to con­sume, with­out hav­ing to do messy things like pars­ing the DOM for micro­da­ta prop­er­ties. It’s hard to get excit­ed about a data for­mat, but JSON-LD comes close, espe­cial­ly for those who suf­fered through imple­ment­ing micro­da­ta on their webpages.

Link Wrapping Up

Hope­ful­ly this gave you an idea of what JSON-LD Struc­tured Data is, and why it mat­ters. With indus­try behe­moths like Google and Apple behind it — and because it fills an obvi­ous need — I think it’s going to be a very impor­tant thing going forward.

As fron­tend devel­op­ers and design­ers, we spend a ton of time mak­ing sure the web­sites we make look good and are eas­i­ly under­stand­able by humans. JSON-LD Struc­tured Data helps us make those same web­sites reli­ably under­stood by search engines.

That’s some­thing that you can use when relat­ing the con­cept of JSON-LD Struc­tured Data to clients: opti­miz­ing your web­site for search engines. The pret­ti­est web­site in the world is mean­ing­less if no one can find it.

And yes, you should charge more for adding JSON-LD Struc­tured Data to your clien­t’s web­sites. The ben­e­fit is tan­gi­ble, and you’re doing cut­ting-edge work for your clients.

Have fun enrich­ing your web­sites with JSON-LD Struc­tured Data!

Link Hey wait… where’s the erotica?

Click­bait.