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

Making the web better one site at a time, with a focus on performance, usability & SEO

2017.02.11 · 5 min read ·

JSON-LD, Structured Data and Erotica

JSON-LD Structured Data is a big deal for the “Semantic Web.” Google cares about it. Apple cares about it. You should, too.

JSON-LD Structured Data is a somewhat mystical beast. Like a unicorn, many people have heard of it, but no one has every really seen one. However, it’s very real, and is going to be a big deal.

Google cares about it. Apple cares about it. This article 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 pretty good about returning search results; almost scarily so sometimes. As good as Google is, however, one thing that humans are very good at, but computers are not, is understanding context.

Let’s say there’s a headline on my webpage that is called Avatar. Is this about Avatar the movie? Is it about an avatar image for a person? Or is it something else entirely?

This is something that we meat-puppets can figure out pretty easily, but computers have a hard time with it. Additionally, understanding the relationship between things—such as this avatar image is for Bill Perkins, who owns Acme, Inc., which sells these products—can be challenging for computers to figure out.

Enter Structured Data. Simply put, it’s a way to express this contextual and relationship information in a way that computers 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 meaningful communication, you need a language. We all need to agree on what the air vibrations that represent the word “dog” mean before it’s useful.

Schema.org provides that language for Structured Data. Consider it a dictionary for the semantic web, and just like a dictionary, it’s not all that fun to read. But it’s incredibly useful.

Schema.org defines a hierarchical set of schemas that define various objects and actions. For instance, there’s an Organization schema that defines things about an organization, including more specific sub-types of organizations.

This gives us a vocabulary we can use for expressing structured data. So instead of Google guessing that a particular web page is about a certain organization, we can tell it. And we can tell it more than it might glean by just indexing the page (and potentially getting it wrong), including the relationships between this organization and other affiliate organizations, products it offers for sale, people who work for it, and so on and so forth.

Show me that beautiful structured data!

So for a practical example, check out the Google Structured Data Testing Tool output for this very website that you’re reading now. Here’s what it looks like for the A Pretty Website Isn’t Enough article:

Structured Data Overview

This is essentially showing us how Google has parsed and consumed the Structured Data on this webpage. We can see that there is an Organization associated with this website, a BreadcumbList of the pages, information about the WebSite itself, a Place, and also a few BlogPostings.

Let’s drill down and take a look at the organization that this website is about:

Structured Data Organization

Now, we all know that Google is smart. But look at all of the information that we’re presenting to Google here. We’re letting it know all of the social media outlets that are the sameAs this organization.

Probably Google could figure out some of these on its own, but we’re explicitly telling it what this organization is about, and the things that are related to it. Google can then add this information to its Knowledge Graph so that it can understand the context where this Organization is relevant, and the relationships between it and other things like social media sites.

We’re also telling it “Hey, when you represent this organization, use this image for the logo.” And we’re giving it a location, and a ton of other useful information. We can even provide it with hours of operation for this organization, the how to reach various departments by phone, and a whole lot more.

That’s some powerful stuff.

You’ll also notice that there are ten BlogPostings listed on the page. There is one BlogPosting for the blog entry itself, and the others are the “recent articles” listed at the bottom of the page. Let’s have a look:

Structured Data BlogPosting

Once again, we can see a boatload of useful information that we’re telling Google about the actual content of this page. Since there are several BlogPostings listed on this page, the mainEntityOfPage lists the URL where this BlogPosting is the main thing that the webpage 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 article was published, the headline, the description, the keywords, the image we want associated with the article, and a whole lot more. Google might figure some of this out; it might get some of it wrong.

In addition to checking on the validity of your Structured Data with Google’s Structured Data Testing Tool, you can also check on how Google has consumed your Structured Data with the Google Search Console:

Google Search Console

Here you can get a bird’s eye view of all of the Structured Data that Google has consumed on your website over time, as well as check for errors, etc. It can sometimes take a bit of time before Google starts consuming your Structured Data, so be patient.

So… does it help SEO?

A question that might immediately occur to people is “Wow, does this help with SEO?” The answer is “Not really. Maybe. It’s classified.”

I’ll explain. Google doesn’t want to see a repeat of the bad old days where sketchy SEO firms attempted to game the system by “keyword stuffing” and the like. So they are taking a measured approach with how they utilize the data provided by websites. 

So Google is keeping it close to the vest in terms of how they are utilizing this JSON-LD Structured Data as part of the PageRank algorithm. But they are smart guys & gals, they’ll figure it out.

Using Structured data—as of this writing—will not directly affect your Search Engine Results Page (SERP) ranking. It is, however, consumed by Google into is Knowledge Graph, and importantly it is used as Rich Cards (aka “Rich Snippets” aka “Rich Results”) on the SERP. So your users will see a much richer experience… and be more likely to click.

Here are a few examples of Rich Cards, directly from Google:

Recipe Rich Card

Event Rich Card

Product Rich Card

I think it should be pretty obvious how compelling this is. It’s also clear that Google is putting its weight behind JSON-LD Structured Data in a big way; it’s listing it as its preferred format for Structured Data.

So I think it’s certainly possible that JSON-LD Structured Data will eventually be an influencing factor for SERP; Google has hinted at such already.

Google’s not the only one; in iOS 10, Apple announced that it parses web pages, looking for JSON-LD Structured Data. Right now they are just looking for address information, but they have made it clear that they will be expanding on this in the future. So the time to get on board is now!

Apple’s iOS 10 JSON-LD Structured Data

If you look at the image above, the Get Directions to link at the bottom appears only if your website has JSON-LD Structured Data with a postalAddress on it. It appears when you go to switch between apps, and are coming from a webpage with said postalAddress JSON-LD Structured Data on it.

Pretty compelling to help people who were just checking out your website get directions to your store, so that they can come in and buy something.

You can read more about SEO in the Modern SEO: Snake Oil vs. Substance article.

So what’s this JSON-LD thing?

When I introduced the SEOmatic plugin for Craft CMS at the end of 2015, one of this things it supported out of the box was JSON-LD Structured Data.

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

We know that JSON is JavaScript Object Notation, basically a convenient way to pass data around via JavaScript as nested 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 meaning, it needs to be linked to other data. Incidentally, this seems remarkably similar to the concept of Google’s Knowledge Graph. Hmmm… coincidence? 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 Structured Data has been around for some time, one of the first incarnations of it that came to the attention of frontend developers was microdata. While some adopted it, it never really took off. Because frankly, it sucked.

Here’s an example of it taken right from the Schema.org website (remember, Schema.org is just about the vocabulary, it is agnostic about the implementation):

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

So add microdata to the above text on a webpage, you’d end up with an abomination 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 intertwining of HTML code and microdata markup makes it difficult to read, and difficult to work with, because there’s a specific hierarchy that the microdata needs to be in. Move the HTML around, and you might break it.

You were also sometimes forced to add weird structural things like <div>’s where you didn’t need them, just to provide this hierarchy for the microdata. It also forced the person doing the SEO work to be the same as the person writing the HTML, which is rarely the case. And it was exceedingly difficult to automate the generation of it due to how it was intertwined with the HTML code.

Enter JSON-LD. Here’s the same Schema.org Structured 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>

Ahhhhhhh. So much cleaner. And it is completely separate from the HTML markup, so we can automate its creation, and the person editing the SEO can be different from the person editing the HTML.

The important thing to note is that this is the same exact thing as the microdata example. It’s like the difference between writing something out by hand in cursive vs. typing it on a keyboard: the words are the same, but one is a whole lot more efficient and useful (hipsters, please don’t send me hate-mail).

Astute readers will notice the <script type="application/ld+json"> tag. The cool thing about this is that browsers completely ignore it. When parsing a HTML page, the browser sees that this <script> is of the type application/ld+json and it just ignores it (it even works in Lynx!). But Google doesn’t ignore it.

The JSON-LD format also happens to be very easy for computers to consume, without having to do messy things like parsing the DOM for microdata properties. It’s hard to get excited about a data format, but JSON-LD comes close, especially for those who suffered through implementing microdata on their webpages.

Wrapping Up

Hopefully this gave you an idea of what JSON-LD Structured Data is, and why it matters. With industry behemoths like Google and Apple behind it—and because it fills an obvious need—I think it’s going to be a very important thing going forward.

As frontend developers and designers, we spend a ton of time making sure the websites we make look good and are easily understandable by humans. JSON-LD Structured Data helps us make those same websites reliably understood by search engines.

That’s something that you can use when relating the concept of JSON-LD Structured Data to clients: optimizing your website for search engines. The prettiest website in the world is meaningless if no one can find it.

And yes, you should charge more for adding JSON-LD Structured Data to your client’s websites. The benefit is tangible, and you’re doing cutting-edge work for your clients.

Have fun enriching your websites with JSON-LD Structured Data!

Hey wait… where’s the erotica?

Clickbait.

Insights · 2017.05.24

So You Wanna Make a Craft 3 Plugin?

#homestead #PhpStorm #craft-3

Insights · 2017.05.10

A/B Split Testing with Nginx & Craft CMS

#devops #frontend #split testing

Insights · 2017.05.06

Mobile Testing & Local Dev Sharing with Homestead

#devops #homestead #sharing

Insights · 2017.05.05

Simple Static Asset Versioning in Craft CMS

#frontend #devops #craftcms

· 2017.04.19

Tags Gone Wild! Managing Tag Managers

#frontend #devops #performance

Insights · 2017.03.31

Local Development with Vagrant / Homestead

#devops #frontend #homestead

Insights · 2017.03.20

Mitigating Disaster via Website Backups

#backups #devops #craftcms

Insights · 2017.03.09

How Agencies & Freelancers Should Do Web Hosting

#devops #hosting #vps

Insights · 2017.02.28

Implementing Critical CSS on your website

#critical-css #frontend #performance