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

Julianna Tetreault — Thu, 14 May 2020 15:11:37 +0000

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?

I Just Joined the DEV Team

Julianna Tetreault — Mon, 03 Feb 2020 20:02:24 +0000

Hi, DEV! 👋🏼

My name is Julianna and I am incredibly excited to announce that I have joined the DEV team as an Associate Software Engineer! This will be my second week working with the wonderful team behind DEV and I am thrilled to be here.

My first introduction to DEV was in September of 2018 while I was attending the Flatiron School’s full-stack software engineering bootcamp, but I didn’t seriously start using the platform until October of 2019.

I have been so inspired by the DEV community and cannot wait to give back to the amazing people who make DEV such a special place to be a part of.

About Me

I am an East Coast native currently residing in the mountains of Colorado.

I began as a self-taught programmer, working on open-source software over three years ago and graduated from a full-stack software engineering bootcamp a little over a year and a half ago.

Since graduating, I have primarily worked on the backend of the stack, focusing on Ruby and Rails development and I am currently teaching myself how to program in Python.

When I’m not writing code, I really enjoy reading, running, writing, traveling, and attempting to be a plant mom.

Why DEV?

My resume is eclectic—I am a published writer turned software engineer, making DEV the ultimate intersection of my skills. Being able to do what I love, while still continuing to be immersed in the world of writing is a dream come true.

Coming from a non-traditional background, I cannot overemphasize how important it is to have an inclusive, supportive, and transparent community to learn and grow from, especially when you’re just starting out as a developer.

Open-source software has been a large part of my journey as a developer. I first learned how to program through an open-source community and I began contributing (albeit, very minimally) to open-source within my first few months of programming. The open-source community was what made me feel comfortable as a new developer and helped me grow into the software engineer that I am today. Giving back to the community that gave so much to me is something I hold near-and-dear to my heart.

I am so dedicated to making sure that I do my part in maintaining what makes DEV the amazing platform that it is.