JSON-LD: What It Is and How DEV Uses It

Over the last six weeks, DEV has focused on improving its search engine optimization, and conforming the site to best practices. As the team member running point on this project, I've immersed myself in all things SEO.

This article is an attempt to distill and un-silo my knowledge—we will briefly discuss JSON-LD versus traditional implementations that leverage meta tags and then explore how DEV has migrated to using JSON-LD for our site.

JSON- What?

JSON-LD stands for JavaScript Object Notion for Linked Data. JSON-LD makes it simple to structure the data on a site for web crawlers by disambiguating elements, thus making the webpage using it more indexable, in turn bolstering the site’s SEO. The JSON-LD for a page is generally found within a <script> tag in a page’s <head> tag, though finding the data within a <body> tag is not uncommon. Placing structured data within the <head> tag is considered best practice, though, since crawlers generally begin searching for metadata in <head> tags.

What makes JSON-LD so usable is its syntax, which makes it easily readable by humans and machines. The linked data format consists of key-value pairs, containing Schema.org vocabulary, a shared vocabulary for structuring data, so machines can quickly interpret the content of the page. Leveraging the Schema.org vocabulary makes it possible to describe a litany of item types and item properties, with varying detail—types can inherit from parent properties and other types.

There a few basic attributes that make up the general JSON-LD structure, aside from essential<script> tags: @context, @type, and the attribute-value pairs for the given object. All of the essential elements that make up a basic JSON-LD structure, aside from the <script> tags, can be found wrapped in double quotation marks (“”) and ending with a comma. The <script> tags containing the structured data will always specify its type as JSON-LD: <script type=“application/ld+json”>. Similar to the <script> tags, the @context attribute should always specify Schema.org: ”@context”: “Schema.org”,. Unlike the other essential attributes that make up the data structure, @type and the structure’s attribute-value pairs change depending on the item’s type and properties.

For our visual learners, I have included an example below of what the structured data for a DEV Organization looks like:

<script type=“application/ld+json”>
{
"@context": "http://schema.org",
"@type": "Organization",
"mainEntityOfPage": {
   "@type": "WebPage",
    "@id": URL.organization(@organization)  
  },
  "url": URL.organization(@organization),
  "image": ProfileImage.new(@organization).get(width: 320),
  "name": @organization.name,
  "description": @organization.summary.presence || "404 bio not found"
}
</script>

Looking at the above structure, you’ll see the necessary attributes that make up the skeleton of a JSON-LD structure: "<script type=“application/ld+json”>","@context", "@type". There are some additional attribute-value pairs pointing to necessary information that we at DEV have aimed to disambiguate for search crawlers, like Google's, as well.

DEV- How?

Now that we’ve covered the basics of JSON-LD and the vocabulary that it uses, it’s time to talk briefly about how DEV uses JSON-LD to structure its data and boost its SEO.

Prior to switching to JSON-LD in the last six weeks, the DEV codebase previously relied on <meta> tags in addition to specifying itemTypes and itemProps. While this approach works, it wasn’t working as well as JSON-LD could and we weren’t feeling satisfied with its results. With our SEO plateauing, it was time to make our data more structured. The solution? Move away from using <meta> tags, itemTypes, and itemProps and migrate towards structuring our data using JSON-LD.

The switch to JSON-LD was nice because it is well documented, there are many examples to draw inspiration from, and there are useful testing tools, like Google’s own Google Structured Data Testing Tool. The same is true for Schema.org—the vocabulary’s documentation is easy to parse and item type and property examples are plentiful.

This being said, implementing JSON-LD was a learning experience for the entire team (as is any new coding endeavor!). Through our joint effort, we were able to structure the data for many of our major pages and our most important data in only a couple of weeks. Currently, the data for Article show pages, User profile pages, Organization profile pages, and Video show pages are structured using JSON-LD and the Schema.org vocabulary.

This snippet shows what the structured data for a User’s profile page looks like. Note: For brevity, I’ve included most, but not all, of the code for that makes up the structured data within the Stories::Controller.

In the Stories::Controller:

def set_user_json_ld
 @user_json_ld = {
"@context": "http://schema.org",
"@type": "Person",
"mainEntityOfPage": {
  "@type": "WebPage",
  "@id": URL.user(@user)
  },
"url": URL.user(@user),
"sameAs": [],
"image": ProfileImage.new(@user).get(width: 320),
"name": @user.name,
"email": “”,
"jobTitle": “”,
"description": @user.summary.presence || "404 bio not found",
"disambiguatingDescription": [],
"worksFor": [
  {
    "@type": "Organization"
  },
],
"alumniOf": “”
}
end

And in the users/show Template:

<% unless internal_navigation? || user_signed_in? %>
  <script type="application/ld+json">
    <%= @user_json_ld.to_json.html_safe %>
  </script>
<% end %>

I should also note that in order to make our structured data reusable and to keep our views clean, we opted to extract all of the logic for our structured data out into the set_user_json_ld method within the Stories::Controller—we found that this implementation works best for us.

Since switching to JSON-LD, DEV has seen a dramatic increase in its SEO. Through disambiguating elements and organization, we were able to boost our SEO by making it easier for Google and its crawlers to navigate our site and its pertinent information.

How do you plan on implementing JSON-LD to improve your SEO?

Blog

JSON-LD: What It Is and How DEV Uses It

Julianna Tetreault

JSON- What?

DEV- How?

Join Our Newsletter. No Spam, Only the good stuff.

Related