S-E-"Oh Myyy"

Using Structured, Semantic Data for Stellar Content

Who's Presenting?

This Guy... and No One Else.

Who's Presenting?

This Guy... and No One Else.

{
  "@context": "http://schema.org",
  "@type": "Person",
  "name": "Eric Carlisle",
  "givenName": "Eric",
  "familyName": "Carlisle",
  "email": "eric@ericcarlisle.com",
  "image": "http://www.ericcarlisle.comimg/global/eric-carlisle-800x800.png",
  "jobTitle": "UI Developer, UX Designer",
  "url": "http://www.ericcarlisle.com",
  "sameAs" : [
    "https://twitter.com/eric_carlisle",
    "https://www.linkedin.com/in/ericcarlisle",
    "https://github.com/ecarlisle",
    "https://www.slideshare.net/ericcarlisle",
    "https://medium.com/@eric_carlisle"
  ]
}

Why are We Here? (not rhetoric)

  • A Brief History of Web Metadata
  • The Schema.org Vocabulary
  • How do I use it?
  • Why should I use it?
  • What's the rub?

A Brief History of Web Metadata

Way back when...

The Yo-Yo Page...
<html>
  </head>
    <meta name="keywords" content="yo-yo, axle, string, finger, play, gravity, exploit" />
    <meta name="description"
       content="A Yo-Yo is a toy with a string. You unroll, gravity happens and...
                Was that 160 characters already?"/>
  </head>
  <body>
    <h1>The Yo-Yo</h1>
    <p>
      A Yo-yo is a toy consisting of an axle connected to two disks, and a string looped
      around the axle. It has some similarties to a slender spool. A Yo-yo is played by
      holding the free end of the string known as the handle, allowing gravity to spin
      the yo-yo and unwind the string. The player then allows the yo-yo to wind itself back
      to the player's hand, exploiting its spin.
    </p>
  </body>
</html>

This was Tough!

Questions

  • Did the metadata represent the content or sabotage it?
  • Was context lost in the summary?
  • Was I distracting users with keyword overload in the content?
  • Can i do any of this better? How?


Results

  • Wait and see...
  • Trial and error. Rinse and repeat.

And then...

  • The Open Graph Protocol
  • Meta was more specific, relational
  • Queries via a Social Graph
"Lieutenant Bacon, set phasers to Footloose!"

But With That...

"Well Spock, looks like everyone else wants A Piece of the Action."

Apocryphal Einstein on KISS

"Insanity is doing the same thing over and over again and expecting different results."
"It can scarcely be denied that the supreme goal of all theory is to make the irreducible basic elements as simple and as few as possible without having to surrender the adequate representation of a single datum of experience."
Everything should be made as simple as possible, but not simpler.

Schema.org

Schema.org is...

Founded By:

  • A relational vocabulary used for detailed, precise, contextual metadata.
  • Used for many encodings, including RDFa, Microdata, and JSON-LD.
  • Used by over 10 million sites for markup their web pages and email messages.
  • Also used for application integration, especially with mobile.

Schema.org Common Vocabulary

  • Thing > Action (Taxonomy Base)
  • > Person
  • > Location
  • > Creative Work > Review
  • > Creative Work > Media Object > ImageObject
  • > Creative Work > Article > Social Media Posting > BlogPosting
  • > Intangible > Enumeration > Flight

Schema.org Encoding Example (figure)

Initial HTML

<figure>
  <img src="http://www.ericcarlisle.comimg/logo.png" alt="Logo" />
  <figcaption>Eric Carlisle's Logo</figcaption>
</figure>

Microdata

<figure itemscope itemtype="http://schema.org/ImageObject">
  <img itemprop="contentUrl" src="http://www.ericcarlisle.comimg/logo.png" alt="Logo" />
  <meta itemprop="width" content="600">
  <meta itemprop="height" content="100">
  <figcaption itemprop="caption">Eric Carlisle's Logo</figcaption>
</figure>

Schema.org Encoding Example (figure)

RDFa

<figure vocab="http://schema.org/" typeof="ImageObject">
  <img property="contentUrl" src="http://www.ericcarlisle.comimg/logo.png" alt="Logo" />
  <meta property="width" content="600">
  <meta property="height" content="100">
  <figcaption property="caption">Eric Carlisle's Logo</figcaption>
</figure>

JSON-LD

{
  "@context": "http://schema.org",
  "@type": "ImageObject",
  "author": "Jane Doe",
  "contentUrl": "http://www.ericcarlisle.comimg/logo.png",
  "width": 600,
  "height": 100,
  "caption": "Eric Carlisle's Logo",

}

Schema.org Encoding Example - Person

{
  "@context": "http://schema.org",
  "@type": "Person",
  "name": "Eric Carlisle",
  "givenName": "Eric",
  "familyName": "Carlisle",
  "email": "eric@ericcarlisle.com",
  "image": "http://www.ericcarlisle.comimg/global/eric-carlisle-800x800.png",
  "jobTitle": "UI Developer, UX Designer",
  "url": "http://www.ericcarlisle.com",
  "sameAs" : [
    "https://twitter.com/eric_carlisle",
    "https://www.linkedin.com/in/ericcarlisle",
    "https://github.com/ecarlisle",
    "https://www.slideshare.net/ericcarlisle",
    "https://medium.com/@eric_carlisle"
  ]
}
(Can be under the covers in either <head> or <body>)

Schema.org Encoding Example - BlogPosting

Why Should I use it?

Search Result Coolness

SearchAction is used with Website
Google Structured Data Search Gallery

Great Documentation and Tooling!

Ok, FINALLY! Why the Star Trek theme?

Google is building the Star Trek computer!

Where we were forever...

Where we are...

Where we'll be in...

?
SEO? Yes, but Automation & Personalization as well!

And... What's the Rub?

schema.org

Microdata

RDFa

JSON-LD

ARE ALL STANDARDS!

(mileage may vary)