Darren Lester

JSON-LD Structured Data for Web Applications

Structured Data

Structured data allows web pages to provide more information to search engines about their content and context. Using this information search engines can provide more useful and relevant search results.

Schema.org structured data can be implemented in two main flavours: microdata (based on RDFa) and JSON-LD (JavaScript Object Notation for Linked Data) .

Microdata

Microdata directly marks up content in the document body. Here is an example for a fictional local business. Search engines may use such markup to create a rich snippet from the business details, creating a better user experience and likely improved click through rate for the site.

<div itemscope itemtype="http://schema.org/LocalBusiness">
  <div itemprop="name">Darren's Cookies</div>
  <a itemprop="url" href="https://www.darrenscookies.com">www.darrenscookies.com</a>
  <img itemprop="logo" src="/images/logo.gif"/>
  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">123 Choc Chip Road</span>
    <span itemprop="addressRegion">Dundee</span>
    <span itemprop="postalCode">DD0 1DD</span>
    <span itemprop="addressCountry">United Kingdom</span>
  </div>
  <div itemprop="telephone">01234 56789</div>
  <div itemprop="email">info@darrenscookies.com</div>
  <div itemprop="openingHours" content="Mo-Sa 09:00-18:00">Mon - Sat, 9am - 6pm</div>
  <img itemprop="image" src="/images/cookies.jpg"
       alt="Mouth-watering gooey chocolate chip cookies."/>
</div>

JSON-LD

JSON-LD is inserted into the document head like so:

<head>
  <script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "LocalBusiness",
    "name": "Darren's Cookies",
    "url": "https://www.darrenscookies.com",
    "logo": "https://www.darrenscookies.com/images/logo.gif",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "123 Choc Chip Road",
      "addressRegion": "Dundee",
      "postalCode": "DD0 1DD",
      "addressCountry": "United Kingdom"
    },
    "telephone": "01234 56789",
    "email": "info@darrenscookies.com",
    "openingHours": "Mo-Sa 09:00-18:00",
    "image": "https://www.darrenscookies.com/images/cookies.jpg"
  }
  </script>
</head>

It separates out the structured data from the document body making it a bit easier to read and maintain. A possible drawback is the duplication of data contained within the body.

Improving Web Application Contextualisation

Many web applications may feature little text and emphasise visual content, perhaps generated via JavaScript on user interaction and thus not visible during search engine crawling. However, quality text content is a cornerstone of any good Search Engine Optimisation strategy. How will search engines be able to understand content and return it in relevant search engine results pages if it features little text?

This is where JSON-LD comes in! As we don't need to have the text explicitly in our application we can simply put the structured data in the head. This allows a more full representation of the context of your application without having to display this data directly to the user when it may be inappropriate. I see this as being a major benefit of JSON-LD.

Using the Schema type WebApplication we can alert search engines to many important facts about our application which they may use to understand its intention and context.

Here are some of the properties which can be useful:

  • name
  • url
  • genre
  • about
  • description
  • softwareVersion
  • applicationCategory (and applicationSubCategory) - e.g. Game (Quiz)
  • softwareHelp - a CreativeWork object describing the help for the app.
  • browserRequirements - Any specific browser requirements may be specified e.g. &dquo;Requires JavaScript to be enabled&dquo;, &dquo;Requires HTML5 support&dquo;

An example:

{
  "@context": "http://schema.org",
  "@type": "WebApplication",
  "name": "Cookie Creator",
  "url": "https://www.darrenscookies.com/cookie-creator",
  description: "Create your own delicious cookie recipes with our fun cookie creator game!",
  "applicationCategory": "Game",
  "genre": "food",
  "about": {
    "@type": "Thing",
    description: "cookies, baking, food"
  },
  "browserRequirements": "Requires JavaScript. Requires HTML5.",
  "softwareVersion": "1.0.0",
  "softwareHelp": {
    "@type": "CreativeWork",
  	"url": "https://www.darrenscookies.com/cookie-creator/help"
  },
  "operatingSystem": "All"
}

Hopefully the above example would help search engines to return the app for searches like &dquo;food game&dquo; or &dquo;cookie game&dquo;.

Conclusion

Creating a more structured web is a win for everyone. Search engines benefit from the more organised web. Users get richer, more useful and relevant search results. Content makers benefit from their site beng delivered to relevant users and possible increased click through rate. In a world with increasing numbers of Single Page Applications structured data helps to keep the web understandable, indexable, organised and useful.

If you want to try experimenting with JSON-LD Google's Structured Data Testing Tool is an invaluable resource along with the Schema.org documentation.

Let me know of any interesting experiences you may have had with structured data or what you think of microdata vs. JSON-LD!

Tags: SEO, Structured Data, Web