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?
Top comments (6)
I had no idea about JSON-LD but I plan to use it now! My SEO knowledge seems so out of date. TY for the informative post. Oh my goodness this is going to be easy to integrate into my new dev environment.
You are most welcome, Steve! Here's a great resource containing a ton of JSON-LD examples that you might find useful: jsonld.com/
Best of luck in integrating it! 🎉
Oh that is a good site! I worked JSON-LD into my site in about 1 hour. It is glorious.
Nice overview. I've recently added JSON-LD too but it's at the bottom of my code, and still seems to show up just fine on Google. Is there any documentation indicating that it really should be in the head preferably?
Oh actually we just put it in the body as well.... Instructions say
head.As mentioned in the post
I love It! JSON-LD is awesome! JSON-LD is more than SEO, you can build Web Component and Hypermedia APIs with it. bit.ly/3weft3t It compiles to RDFs that can be used for querying with SPARQL. It stands for linked data. Here is a playground to play and read with it, you can also sign it with Bitcoin in the this example: json-ld.org/playground/ There is also JSON-LD query language: json-rql.org/ It can also help with Semantic Interoperability the @context is designed to link to a vocabulary. There are hundreds of Types and Properties at Schema.org located here schema.org/docs/full.html There are tons of Linked Open Vocabularies that can be represented in JSON-LD Schema.org and FOAF are my favorite FOAF stands for Friend Of A Friend and it is designed to build a Social Network, under the hood Facebook is build on this technology and there is a major project going on at the core of the web to make Social Linked Data and open protocol. You can find out more here solidproject.org
Here is a resource to learn about all the different Linked Open Vocabularies you will Schema.org and FOAF there: lov.linkeddata.es/dataset/lov/