JSON-LD, Structured Data and Erotica
Tags: seo, jsonld, structureddata
Published: 2020-02-15 23:25:22

---
title: JSON-LD, Structured Data and Erotica
published: true
date: 2017-02-11 17:07:00 UTC
tags: seo,json-ld,structured-data
canonical_url: https://nystudio107.com/blog/json-ld-structured-data-and-erotica
---

# 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.

Andrew Welch / [nystudio107](https://nystudio107.com)

![Structured Data](https://nystudio107-ems2qegf7x6qiqq.netdna-ssl.com/img/blog/_1200x675_crop_center-center_82_line/structured-data.jpg)

[JSON-LD Struc­tured Data](https://developers.google.com/search/docs/guides/intro-structured-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](https://developers.google.com/search/docs/guides/intro-structured-data) about it. [Apple cares](https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewIniOS/Articles/iOS10.html#//apple_ref/doc/uid/TP40017084-DontLinkElementID_2) about it. This arti­cle will explain what it is, and why you should care, too.

Back in the day, [AltaVista](https://en.wikipedia.org/wiki/AltaVista) was the search engine of choice, along with Yahoo. Then Google came along, and blew their doors off.

<aside>
                                Google suc­ceed­ed because of one rea­son: it returned search results that peo­ple wanted.
                            </aside>

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.

<aside>
                                Rather than hav­ing to parse a web­page and guess what it’s about, Struc­tured Data allows you to tell Google what it’s about.
                            </aside>

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](http://schema.org/docs/gs.html) 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](http://schema.org/docs/full.html) that define var­i­ous objects and actions. For instance, there’s an [Orga­ni­za­tion schema](http://schema.org/Organization) 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.

## Show me that beau­ti­ful struc­tured data!

So for a prac­ti­cal exam­ples, check out the [Anno­tat­ed JSON-LD Struc­tured Data Exam­ples](https://nystudio107.com/blog/annotated-json-ld-structured-data-examples) arti­cle. Here’s what it looks like for the [A Pret­ty Web­site Isn’t Enough](https://dev.to/gaijinity/a-pretty-website-isn-8217-t-enough-1nbj-temp-slug-3932740) article:

![Structured Data Overview](https://nystudio107-ems2qegf7x6qiqq.netdna-ssl.com/img/blog/_576x377_crop_center-center_100_line/structured-data-overview.png)

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 <kbd>Organization</kbd> asso­ci­at­ed with this web­site, a <kbd>BreadcumbList</kbd> of the pages, infor­ma­tion about the <kbd>WebSite</kbd> itself, a <kbd>Place</kbd>, and also a few <kbd>BlogPosting</kbd>s.

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

![Structured Data Organization](https://nystudio107-ems2qegf7x6qiqq.netdna-ssl.com/img/blog/_576x1029_crop_center-center_100_line/structured-data-organization.png)

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](https://www.google.com/intl/es419/insidesearch/features/search/knowledge.html) 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](https://developers.google.com/search/docs/data-types/local-businesses) for this orga­ni­za­tion, the how to [reach var­i­ous depart­ments](https://developers.google.com/schemas/reference/types/ContactPoint) by phone, and a whole lot more.

That’s some pow­er­ful stuff.

You’ll also notice that there are ten <kbd>BlogPosting</kbd>s list­ed on the page. There is one <kbd>BlogPosting</kbd> 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:

![Structured Data Blog Posting](https://nystudio107-ems2qegf7x6qiqq.netdna-ssl.com/img/blog/_576x932_crop_center-center_100_line/structured-data-blog-posting.png)

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 <kbd>BlogPosting</kbd>s list­ed on this page, the <kbd>mainEntityOfPage</kbd> lists the URL where this <kbd>BlogPosting</kbd> is the main thing that the web­page is about.

<aside>
                                Would­n’t you rather be able to tell Google what your web­site is about, instead of hav­ing it guess?
                            </aside>

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](https://search.google.com/structured-data/testing-tool/u/0/), you can also check on how Google has con­sumed your Struc­tured Data with the [Google Search Con­sole](https://www.google.com/webmasters/tools/home):

![Google Search Console](https://nystudio107-ems2qegf7x6qiqq.netdna-ssl.com/img/blog/_1200x772_crop_center-center_100_line/google-search-console.png)

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.

## 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](https://developers.google.com/search/docs/guides/search-gallery) (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](https://developers.google.com/search/docs/guides/search-gallery), direct­ly from Google:

![Search Gallery Pie](https://nystudio107-ems2qegf7x6qiqq.netdna-ssl.com/img/blog/_430x296_crop_center-center_line/search-gallery-pie.png)

![Search Gallery Events](https://nystudio107-ems2qegf7x6qiqq.netdna-ssl.com/img/blog/_355x282_crop_center-center_line/search-gallery-events.png)

![Search Gallery Products](https://nystudio107-ems2qegf7x6qiqq.netdna-ssl.com/img/blog/_357x198_crop_center-center_line/search-gallery-products.png)

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](https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewIniOS/Articles/iOS10.html#//apple_ref/doc/uid/TP40017084-DontLinkElementID_2) 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 Json Ld Support](https://nystudio107-ems2qegf7x6qiqq.netdna-ssl.com/img/blog/_375x375_crop_center-center_line/apple-json-ld-support.jpg)

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 <kbd>postalAddress</kbd> on it. It appears when you go to switch between apps, and are com­ing from a web­page with said <kbd>postalAddress</kbd> 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](https://dev.to/gaijinity/modern-seo-snake-oil-vs-substance-4l5k-temp-slug-8632935) article.

## So what’s this JSON-LD thing?

When I intro­duced the [SEO­mat­ic plu­g­in](https://nystudio107.com/plugins/seomatic) for [Craft CMS](https://craftcms.com/) at the end of 2015, one of this things it sup­port­ed out of the box was JSON-LD Struc­tured Data.

<aside>
                                Most peo­ple’s reac­tion was <span></span>​<span>“</span>JSON-wut?”
                            </aside>

We know that <kbd>JSON</kbd> 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 <kbd>LD</kbd> 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](https://www.google.com/intl/es419/insidesearch/features/search/knowledge.html). Hmmm… coin­ci­dence? I think not!

If you want to learn more about JSON-LD, check out the video [What is JSON-LD](https://www.youtube.com/watch?v=vioCbTo3C-4), 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](https://en.wikipedia.org/wiki/Microdata_(HTML)). 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](http://schema.org/Organization) 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 <kbd>&lt;div&gt;</kbd>​‘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](http://json-ld.org/). 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.

![Breath Of Fresh Air](https://nystudio107-ems2qegf7x6qiqq.netdna-ssl.com/img/blog/_1200x675_crop_center-center_82_line/breath-of-fresh-air.jpg)

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 <kbd>&lt;script type="application/ld+json"&gt;</kbd> 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 <kbd>&lt;script&gt;</kbd> is of the type <kbd>application/ld+json</kbd> and it just ignores it (it even works in [Lynx](http://lynx.browser.org/)!). 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.

## Wrap­ping 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!

## Hey wait… where’s the erotica?

Click­bait.

## Further Reading

_If you want to be notified about new articles, follow [nystudio107](https://twitter.com/nystudio107) on Twitter._

<small>Copyright ©2020 nystudio107. Designed by nystudio107</small>