Barbarian Meets Coding
barbarianmeetscoding

WebDev, UX & a Pinch of Fantasy

6 minutes readstructured-data

Structured Data

Structured data is a standardized format for providing information about web content (and other creative works or entities within the internet). This allows search engines and other web tools and platforms (like social media) to extract useful information from a website and improve its discoverability and usefulness.

How does it work? How does structured data look like?

The way that structured data works is that we have different protocols that allow us to annotate web content with metadata that can be consumed by search engines, social networks and other web platforms.

In the case of Search engines, the schema for web content and other entities (like a person or publisher) is defined in schema.org. For example, a blog post may use the BlogPosting schema that has fields to describe the title, description, author, keywords, images, etc.

Your content can be enriched with structured data by following the appropriate schema and using json-ld, RDFa or Microdata to embed that data.

Google Search recommends using the json-ld data format to describe your web content within a script tag in your page’s head element. For example:

<html>
  <head>
    <title>Article headline</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
        "@type": "BlogPosting",
        "headline": "TypeScript Types Deep Dive | Barbarian Meets Coding",
        "image": "https://www.barbarianmeetscoding.com/static/b55e45ba2b6b5f9e387bd17eb054e7cd/47498/typescript-types-deep-dive.jpg",
        "abstract": "An epic journey of discovery into the mysterious world of TypeScript's type system.",
        "keywords": "blog, coding, software, software development, dev, development, .net, javascript, js, webdev, web, front-end, frontend, front end development, node.js, c#, angular.js, angular, reactjs, programming",
        "dateCreated": "2019-12-07 13:33",
        "datePublished": "2019-12-07 13:33",
        "dateModified": "2019-12-07 13:33",
        "author": {
          "@type": "Person",
          "name": "Jaime González García",
          "url": "https://www.barbarianmeetscoding.com/about",
          "image": {
            "@type": "ImageObject",
            "url": "https://www.barbarianmeetscoding.com/images/jaime-google.jpg"
          },
          "description": "Written by Jaime González García, Dad, Husband, Senior software engineer at Google, UX designer, author, amateur pixel artist, tinkerer and master of the arcane arts."
        },
        "publisher": {
          "@type": "Person",
          "name": "Jaime González García",
          "url": "https://www.barbarianmeetscoding.com/about",
          "image": {
            "@type": "ImageObject",
            "url": "https://www.barbarianmeetscoding.com/images/jaime-google.jpg"
          },
          "description": "Written by Jaime González García, Dad, Husband, Senior software engineer at Google, UX designer, author, amateur pixel artist, tinkerer and master of the arcane arts."
        }
    }
    </script>
  </head>
  <body>
  </body>
</html>

RDFa is also a popular data format to apply your structured data. It uses meta tags inside your page’s head element:

<head>
 <meta name="author" content="Jaime González García">
 <meta name="description" content="Treatises, articles, tutorials and thoughts on JavaScript, Software and Web Development, User Experience, Philosophy and Life.">
 <meta name="keywords" content="blog, coding, software, software development, dev, development, .net, javascript, js, webdev, web, front-end, frontend, front end development, node.js, c#, angular.js, angular, reactjs, programming">
 <!-- etc --->
</head>

Structured Data and Social Media

Social media sites prefer using the Open Graph Protocol to describe your content as structured data. This protocol relies on RDFa to enhance your content with metadata that can be used to turn that content into a graph object that can be understood and incorporated into social networks. RDFa relies on <meta> tags within the <head> element of your website:

<html prefix="og: https://ogp.me/ns#">
<head>
  <title>The Rock (1996)</title>
  <meta property="og:title" content="The Rock" />
  <meta property="og:type" content="video.movie" />
  <meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
  <meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
  ...
</head>
...
</html>

Implementing support for structured data in your website

For an interactive step by step tutorial on how to implement structured data in your website take a look at this structured data codelab. This advanced guide for structured data in articles is also very helpful.

Implementing Structured data in React

A nice example of using structured data in a modern React web application can be found in the Gatsby docs for creating a SEO component

If you want to use the json-LD approach recommended by Google, consider extending the SEO compnent in the above tutorial to inject a script tag that includes the necessary structured data (based on the appropriate schema) in json-LD format.

Validating your Structured data

Some really useful tools to validate your structured are:

How does structured data look like? Where can I find more schemas?

Schema.org is a collaborative initiative to create, maintain and promote schemas for structured data on the internet. For example:

Resources

Jaime González García

Written by Jaime González García , dad, husband, software engineer, ux designer, amateur pixel artist, tinkerer and master of the arcane arts. You can also find him on Twitter jabbering about random stuff.Jaime González García