Metadata & enhanced semantics

There are a bunch of standards to enhance the semantics of our websites. Search engines look for these semantics, infer information from them, and adapt their search results to them. Also, when people link to your website from social media sites you can provide defaults for the displayed content.

Structured data

There are three major standards for structured data: Microdata, Microformats, and RDFa Lite. Microdata is quickly becoming the most popular and is the format that Google encourages authors to use.

Using structured data, we can enhance the semantics of our website so search engines more thoroughly understand our content.

This metadata can be used to display different results and different layouts. For example, here’s how a recipe marked up with extra metadata shows on Pinterest. Google will show ratings for movies, recipe calories and much more if the information is present on the website.

The Microdata extends all the semantics you choose in HTML—concentrate on choosing the best HTML tags first then add Microdata.

Here’s an example person/contact marked up with Microdata:

<div itemscope itemtype="http://schema.org/Person">
  <h1 itemprop="name">Sir John A. Macdonald</h1>
  <span itemprop="jobTitle">Prime Minister of Canada</span>
  <p itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">24 Sussex Dr.</span>
    <br>
    <span itemprop="addressLocality">Ottawa</span>,
    <span itemprop="addressRegion">ON</span>,
    <span itemprop="addressCountry">Canada</span>
    <br>
    <span itemprop="postalCode">K1A 0A3</span>
  </p>
  <dl>
    <dt>E-mail:</dt>
    <dd><a href="mailto:primeminister@canada.ca" itemprop="email">primeminister@canada.ca</a></dd>
    <dt>Tel:</dt>
    <dd><a href="tel:+16139416900" itemprop="telephone">613-941-6900</a></dd>
    <dt>Website:</dt>
    <dd><a href="http://canada.ca/" itemprop="url">http://canada.ca/</a></dd>
  </dl>
</div>

There are a few attributes to understand form the Microdata specification:

itemtype — what kind of thing you’re marking up, there’s a big list.
itemscope — defines the HTML element that surrounds all the content related to the item.
itemprop — defines a single piece on content for the item.

☛ Browse the code to see a recipe.

Links

Validators

Examples

Structure data with JSON-LD

An alternative format for writing structured data that is very popular is JSON-LD. It has a very different syntax from MicroData but still uses the same schema.

The syntax is based on JavaScript, hence the “JS” in the title; the full title being: “JavaScript Object Notation Linked Data”.

Marking up a CreativeWork

Here’s an example of a creative work marked up in JSON-LD—something all graphic designers would want to do on their portfolio pieces:

{
  "@context": "https://schema.org",
  "@type": "CreativeWork",
  "name": "Branding for Dino ’R’ Us",
  "author": {
    "@type": "Person",
    "name": "Thomas J Bradley"
  },
  "image": "https://thomasjbradley.ca/images/dinos-r-us-logo.jpg",
  "url": "https://thomasjbradley.ca/dino-r-us/",
  "dateCreated": "2017-11-23",
  "description": "A massive rebrand for the Dinos ’R’ Us company.",
  "keywords": "dinosaurs, graphic, design, brand, logo"
}

Inserting the JSON-LD into your HTML

When inserting the JSON-LD into your HTML there’s a few important things to remember:

The same information must be represented in the HTML too or search engines may ignore it.
It’s separate from your visible HTML, usually at the bottom of the page, and always contained in a <script> tag.

⋮
<body>

  <!-- The rest of the HTML representing a creative work/portfolio piece would be here -->

  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "CreativeWork",
      "name": "Branding for Dino ’R’ Us",
      ⋮
    }
  </script>
</body>
</html>

Linking JSON-LD blocks together

We want to try and avoid copying-and-pasting code as much as possible because it’s bad practice and can lead to silly mistakes.

With JSON-LD we can link different JSON-LD blocks together using the @id property.

Let’s say we have multiple creative works on a page all created by the same person. We could write the person information once and link all the creative works to the single person.

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "CreativeWork",
    "name": "Branding for Dino ’R’ Us",
    "author": {
      "@type": "Person",
      "@id": "#thomasjbradley"
    }
  }
</script>

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "CreativeWork",
    "name": "Branding for DinoMeeples, Inc.",
    "author": {
      "@type": "Person",
      "@id": "#thomasjbradley"
    }
  }
</script>

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Person",
    "@id": "#thomasjbradley",
    "name": "Thomas J Bradley",
  }
</script>

In the above example we have two different creative works, each have the same author. Instead of write all the author details in both after the standard @type property we add an @id property. This @id property points to another ID on the page.

Further down in the person definition we’ve added the @id property to define where the creative works should look for the author information.

Links

The web is an inherently social place. To encourage finding and understanding social connections we can define them in HTML using the relationship (rel) attribute.

Relationships

Relationships can be defined in HTML using the rel attribute. These relationships semantically connect people together on the web.

<!-- Linking to `me` -->
<a href="http://thomasjbradley.ca" rel="me">Thomas J Bradley</a>
<!-- Linking to my `spouse` -->
<a href="http://elizabethandjane.ca" rel="spouse">elizabeth&amp;jane photography</a>
<!-- Linking to a `friend` and a `colleague` -->
<a href="http://jedlooker.com/" rel="friend colleague">Jed Looker</a>
<!-- Linking to an `external` website -->
<a href="http://gmpg.org/xfn/creator" rel="external">XFN Creator</a>
<!-- Defining a link that represents the `home` page of your website -->
<a href="/index.html" rel="home">Home</a>
<!--
  Defining that the linked item is a download using `enclosure`
  Using the `download=""` attribute, the file will be downloaded to the computer instead of opening
  The content inside the download attribute can define its final file name
-->
<a href="/files/download.pdf" download="Download.pdf" rel="enclosure">Download Now!</a>
<!-- Linking to the `license` for this document -->
<a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" rel="license">License</a>
<!-- For advertiser or untrusted links -->
<a href="http://badwebsite.thing" rel="nofollow">Advertiser</a>

Links

Open Graph

The Open Graph Protocol can be used to extract information from your website when a user links to it. It’s used by Facebook, Twitter, Instagram, LinkedIn, Pinterest and more.

You can control the information in the share preview box using the Open Graph meta tags.

Four tags are required to support the Open Graph Protocol:

<head>
  ⋮
  <meta property="og:type" content="website">
  <meta property="og:title" content="Title of this page, same as title tag">
  <meta property="og:url" content="http://fullurl.com/to-this/page/">
  <!-- Image dimensions: minimum 200x200; recommended 1500x1500 -->
  <meta property="og:image" content="http://fullurl.com/to-this/image.jpg">
  <!-- `og:site_name` is optional but highly recommended -->
  <meta property="og:site_name" content="Name of your website">
  <!-- `og:description` is also optional, but could easily be filled with the meta description -->
  <meta property="og:description" content="Description of this page, same as meta description">
  <!-- `og:locale` is the language of the website -->
  <meta property="og:locale" content="en_CA">
  ⋮
</head>

There are plenty of optional tags for descriptions, author info—and more specific forms of content like: music, video, books, etc.

Links

Twitter Cards

Twitter Cards allow designers to attach supplemental information to tweets when people link to your website.

You can control the information in the Twitter Card box using the Twitter meta tags.

By default the OpenGraph data will be used. But there are a few extra Twitter tags that should be included.

The default card is the “summary” card:

<head>
  ⋮
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@yourtwitterhandle">
  ⋮
</head>

There are many optional tags for larger images and different types of content like: photos, apps, and media.

Links

Geotagging

With a few more meta tags in our HTML we can specify a location for what the website represents on Earth—it’s great for stores and websites that represent physical locations.

<head>
  ⋮
  <!-- The longitude and latitude of the location -->
  <meta name="ICBM" content="45.41117,-75.69812">
  <meta name="geo.position" content="45.41117;-75.69812">
  <!-- The country and province/state -->
  <meta name="geo.region" content="ca-on">
  <!-- The town or city of the location -->
  <meta name="geo.placename" content="Ottawa">
  ⋮
</head>

Links

Supplemental links

HEAD

Metadata & enhanced semantics

Structured data

Structure data with JSON-LD

Marking up a CreativeWork

Inserting the JSON-LD into your HTML

Linking JSON-LD blocks together

Social semantics

Relationships

Open Graph

Twitter Cards

Geotagging

Video list

Supplemental links