DEV Community: BrandVantage

What is Structured Data?

James Turner — Fri, 29 Oct 2021 10:03:47 +0000

Structured data is data that is structured - that is perhaps the most succinct summary of it without telling you anything you didn't already expect. To take away something more than that, it can be useful to break down what structured data can look like.

When we say a set of data is structured, it has properties and values that hold a specific meaning. One value might represent some amount of money, another value might represent a date, and a third might be an address. When labelled appropriately, these values can then represent a greater context - perhaps they represent details on an invoice or payslip.

{
  "amount": 20.00,
  "datePaid": "2017-08-12T12:56:00",
  "address": "123 Example Street, Some Suburb, Some City"
}

This data could be in a database, a spreadsheet, a JSON blob - it doesn't matter. If there is data and a defined data model, that is structured data. When data is structured well, it makes it easier to query, process and generally use the data.

In contrast, there is also unstructured data. The value for our address property in the example above is itself unstructured data.

123 Example Street, Some Suburb, Some City

That single value has multiple internal components we would need to parse out depending what we are wanting to do. If we wanted to group all the records on the same street, we'd need to carefully parse the street, suburb and city out of our data. Different countries can have different formats and rules for addresses it is hard to process. Making the wrong assumption when parsing the data can lead to irregularities in the data, causing problems for whatever we wanted to consume that data. For instance, depending where you are in the world, can you assume all streets even have names?

While structured data can definitely be easier to work with, it doesn't make unstructured data useless. Instead, think of unstructured data as untapped potential - useful data exists but is difficult to get to.

Structured Data and Web Pages

Web pages are an interesting example of both structured and unstructured data. There are specific elements one could look at for certain information like the <title> element or other semantic elements like <article> or <section>. The problem though is that these elements are more like our "address" example earlier - they often contain more than just the strict data we are looking for. A title might have a prefix or suffix of the website's name. An article or section might have many other layers of <div>, <span> or any other elements to help form the site's structure. To top it off, the HTML structure can vary wildly from site to site. If you were wanting to extract data from multiple websites, it can get very hard very fast.

That said, there are a number of ways to embed structured data into web pages. A web page could use Microdata, RDFa, JSON-LD or Open Graph to express structured data. More than that though, a web page can use multiple of these at the same time. Open Graph is commonly used as a method of defining details for a link preview while the others might express more complex data like product pricing or reviews.

Having standard formats like Microdata or JSON-LD are a good start but only represent the format of the data - we need a common vocabulary so we can understand the data those formats encode. One common vocabulary used is called Schema.org and provides over 700 types including types to describe people, places, products, recipes, reviews, vehicles, movies and medical devices. Using Schema.org for structured data on a website can help search engines provide richer experiences in the search results.

Summary

Structured data, through standardising expected properties and value formats, makes the sharing and processing of data easier. Web pages in particular benefit from encoding structured data in their mark-up where it can be used by search engines and other tools.

What is Microdata?

James Turner — Sun, 20 Sep 2020 12:09:42 +0000

Microdata is a HTML standard, created by WHATWG, for describing rich metadata in web pages. This rich metadata can be used by search engines or other computer systems to better understand the content of the web page.

Microdata is made of up a number of attributes including itemscope, itemprop and itemtype. Below is an example of a basic web page using Microdata.

<html>
  <head>
    <title>What is Microdata?</title>
  </head>
  <body itemscope itemtype="https://schema.org/WebPage">
    <article itemscope itemtype="http://schema.org/Article" itemprop="mainEntity">
      <meta itemprop="url" content="https://brandvantage.co/blog/what-is-microdata">
      <meta itemprop="image" content="https://brandvantage.co/blog/2020/images/what-is-microdata-cover.png">
      <h1 itemprop="name headline">What is Microdata?</h1>
      <time itemprop="datePublished" datetime="2020-09-20">20th of September, 2020</time>
      <div itemprop="articleBody">
        Hello and welcome to this example!
      </div>
    </article>
  </body>
</html>

The "itemprop" Attribute

The itemprop attribute defines a name-value pair for data. The value associated to the property can be derived from:

The inner text content of the tag
The content attribute (if defined)
The src attribute (for img, audio, video, iframe etc tags)
The href attribute (for link or a tags)
The value attribute (for data or meter tags)
The datetime attribute (for time tags)

An item property can also contain a group of name-value pairs through the use of the itemscope attribute. Additionally, the value on the itemprop attribute may refer to multiple properties.

You can see a number of different examples of itemprop in the previous example.

Grouping Properties Together

<article itemscope itemtype="http://schema.org/Article" itemprop="mainEntity">

With the use of itemscope attribute here, the "mainEntity" property is grouping other name-value pairs together.

Value from a "content" Attribute

<meta itemprop="url" content="https://brandvantage.co/blog/what-is-microdata">
<meta itemprop="image" content="https://brandvantage.co/blog/2020/images/what-is-microdata-cover.png">

Here we have two properties ("url" and "image") with their values defined from the content attribute.

Setting Two Properties at Once

<h1 itemprop="name headline">What is Microdata?</h1>

The itemprop here is setting two properties at once ("name" and "headline") with the value from the inner text.

Value from a "datetime" Attribute

<time itemprop="datePublished" datetime="2020-09-20">20th of September, 2020</time>

The "datePublished" property uses the time tag with the datetime attribute. The date is formatted as an ISO 8601 date.

Value from Inner Text

<div itemprop="articleBody">
    Hello and welcome to this example!
</div>

The "articleBody" property uses the inner content for its value.

The "itemtype" Attribute

While itemprop helps set the values of properties, without a method to define what properties to expect, the usefulness can be called into question. This is where itemtype comes in, giving context to the properties used through a URL which identifies the vocabularly.

One common vocabularly to use is Schema.org, a joint venture between Google, Microsoft, Yahoo and Yandex. A shared vocabularly like Schema.org makes interoperability easier for third parties who want or need to use the data. This being said, there is nothing stopping you from using other vocabularies or even making your own. If a third party doesn't understand your vocabularly, your metadata may not be processed and used.

In the previous example, there were two uses of itemtype:

  <body itemscope itemtype="https://schema.org/WebPage">
    <article itemscope itemtype="http://schema.org/Article" itemprop="mainEntity">

The first is defining the scope as a WebPage schema object which has a number of useful properties including "breadcrumb" and "significantLink". In the Schema.org vocabularly, a WebPage extends CreativeWork which has a property "mainEntity". This property can be any Thing, the base type in the Schema.org vocabularly.

Now for the "mainEntity" property, we are defining the type to be an Article schema object for the scope. This means for all subsequent properties inside the article tag are properties of our Article.

The "itemscope" Attribute

The itemscope defines a group (scope) of name-value pairs (properties), effectively treating the property value as an object. It doesn't require the presences of an itemtype however without one, the interoperability between systems can be very limited without a common vocabularly.

Summary

Microdata allows website developers to enrich a webpage with rich metadata, allowing for search engines and other systems to integrate the data into their systems. You can define individual properties with different values including nesting values through scopes.

While there are a number of other aspects about Microdata including additional attributes, this should serve as a basic introduction to the world of Microdata.

DEV Community: BrandVantage

What is Structured Data?

Structured Data and Web Pages

Summary

What is Microdata?

The "itemprop" Attribute

Grouping Properties Together

Value from a "content" Attribute

Setting Two Properties at Once

Value from a "datetime" Attribute

Value from Inner Text

The "itemtype" Attribute

The "itemscope" Attribute

Summary

Additional Resources