Why and how does structured data work?

23/02/2019

By: Andres Castillo Ormaechea

For now we have two types of structured data which are Schema.org and Open Graph Protocol.

Schema.org

Schema.org is intended to help search engines understand, structure and link your data to avoid ambiguity (avoid having two different meanings at the same time). For example if you are talking about "apple" is the fruit or the company? Schema.org helps circumvent that problem for search engines.

Another plus of structured data is that search engines can deliver rich results which means results in a fancy display like this:

Hamburguer recipe

Here you can see how Google picks up Schema structured data the website provided in the three red squares that are: rating/reviews, cooking time and calories. You will get a higher click through rate with this kind of results display. Here is a further list on possible rich results.

There are three ways or types to structure your website data in Schema:

  • JSON-LD
  • Microdata
  • RDFa

The recommended standard is JSON-LD and I personally use this format since it is easier to implement on your website rather than mutating your html. Just throw a piece of JSON-LD inside of a JavaScript tag and your done.

Below I will list an example for each type:

JSON-LD


      <script type="application/ld+json">
      { "@context": "http://schema.org",
       "@type": "Person",
       "name": "Andres Castillo",
       "additionalName" : "Andres Castillo Ormaechea",
       "birthdate": "1992-08-08",
       "birthPlace": "Caracas, Venezuela",
       "jobTitle": "Software Engineer",
       "image": "https://www.castilloandres.com/images/andres-castillo.jpg",
       "mainEntityOfPage": "https://www.castilloandres.com/about.html",
       "knowsLanguage": "Spanish, English, French",
       "sameAs": [
          "https://www.linkedin.com/in/andrescastillo1/",
          "https://github.com/castilloandres",
          "https://www.instagram.com/castillodres/",
          "https://twitter.com/castillodres"
        ]
      }
      </script>
    

Microdata


      <div itemscope itemtype="https://schema.org/Person">
       <p>My name is <span itemprop="name">Neil</span>.</p>
       <p>My band is called <span itemprop="band">Four Parts Water</span>.</p>
       <p>I am <span itemprop="nationality">British</span>.</p>
      </div>
    

RDFa: Resource Description Framework in Attributes


        <div vocab="http://schema.org/" typeof="Person">
          <a property="image" href="http://manu.sporny.org/images/manu.png">
            <span property="name">Manu Sporny</span></a>, 
          <span property="jobTitle">Founder/CEO</span>
          <div>
            Phone: <span property="telephone">(540) 961-4469</span>
          </div>
          <div>
            E-mail: <a property="email" href="mailto:msporny@digitalbazaar.com">msporny@digitalbazaar.com</a>
          </div>
          <div>
            Links: <a property="url" href="http://manu.sporny.org/">Manu's homepage</a>
          </div>
        </div>
        
      

Open Graph Protocol

On the other hand we have the Open Graph Protocol that are a way of structuring your data so your content can be represented like rich objects in a social graph. In other words when you share a link it is nicely displayed in the social platform you are sharing it. Let's show that in an example to get a better understanding of it.

Open graph facebook

Here we see that when we add the CNN link to share it in our Facebook timeline it picks up some specific information so it can display it in a nice way. As we show it we can see that the properties are the image, url, title and description of the article which is a nice way to digest the information when we are scrolling thru a feed.

Another example where we can see the Open Graph Protocol is when we share a link in a Whatsapp conversation:

Open graph whatsapp

Let's see now how machines or computers see this data or information:


        <meta property="og:title" content="Andres Castillo's Blog" />
        <meta property="og:description" content="Andres Castillo Ormaechea's blog is a detailed narrative on technical and non-technical experiments and past experiences focusing on tech travel and sports." />
        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://www.castilloandres.com/" />
        <meta property="og:locale" content="en_US" />
        <meta property="og:image" content="https://www.castilloandres.com/images/banner.jpg" />
      

The code or meta data can be placed just below the title tag of the page. Open Graph's use can be seen in the following social platforms:

  • Facebook posts
  • Twitter Cards
  • Whatsapp messages

Why Schema.org and Open Graph can be confusing?

The story behind it (AFAIK) appears to be that big companies like Google, Bing, Yandex and Yahoo are behind Schema.org and on the otherside you have companies like Facebook and Twitter behind the Open Graph Protocol. It turns a bit confusing not from the technical side but on why there are two ways of achieving more or less the same goal which is to have a semantic on how humans and bots communicate about data. To me it sounds a bit like this:

Open graph vs. Schema.org

Or maybe the NIH stance?

But anyways. Furthermore both projects are open source so feel free if you want to contribute to Open Graph Protocol or Schema.org

Tools for checking structured data:

There are several tools for structured data that can help you check if your content is correctly structured: