Thursday, September 4, 2014

schema.org actions implementations

... a random collection of screenshots/snippets of actions in practice.

Since it was announced earlier this year, I get often asked how and where schema.org/Actions are used in practice: what real life products it enables.

I was preparing a presentation for a talk to a local workshop, and I was asked for that exact same content, so I figure I'd just copy-paste it here and update it as I find more (most of the content is linked from here).

A caveat: some products launched before the final specification went out (i.e. the official documentation still contains older markup), so I updated the code snippets to the current state (for consistency).

So, here it goes (in no particular order).

Google Search Sitelinks Search Box

Official docs:

Here is what you write:
<script type="application/ld+json">
{
   "@context": "http://schema.org",
   "@type": "WebSite",
   "url": "https://www.example-petstore.com/",
   "potentialAction": {
     "@type": "SearchAction",
     "target": "https://host.example-petstore.com/search?q={search_term}",
     "query-input": "required name=search_term"
   }
}
</script>

This is what you get:



Google Knowledge Graph

Here is what you write:

http://insidesearch.blogspot.com/2014/06/find-music-on-google-and-start-playing.html
http://blog.sgo.to/2014/09/listen-action-in-practice.html

<div itemscope itemtype="http://schema.org/MusicGroup">
  <meta itemprop="description" content="Lady Gaga, an artist on Spotify">
  <meta itemprop="url"
      content="http://open.spotify.com/artist/1HY2Jd0NmPuamShAr6KMms" />
  <div itemprop="potentialAction" itemscope
      itemtype="http://schema.org/ListenAction">
    <meta itemprop="target"
        content="http://open.spotify.com/artist/1HY2Jd0NmPuamShAr6KMms" />
  </div>
</div>

And this is what you get:


Gmail

Here is what you write:

https://developers.google.com/gmail/actions/reference/rsvp-action

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Event",
  "name": "Taco Night",
  "startDate": "2015-04-18T15:30:00Z",
  "endDate": "2015-04-18T16:30:00Z",
  "location": {
    "@type": "Place",
    "address": {
      "@type": "PostalAddress",
      "name": "Google",
      "streetAddress": "24 Willie Mays Plaza",
      "addressLocality": "San Francisco",
      "addressRegion": "CA",
      "postalCode": "94107",
      "addressCountry": "USA"
    }
  },
  "potentialAction": {
    "@type": "RsvpAction",
    "target": "http://mysite.com/rsvp?eventId=123"
    "attendance-input": "required"
  }
}</script>

And here is what you get:




Here is one example of an implementer:

https://github.com/blog/1891-view-issue-pull-request-buttons-for-gmail


Google Search App Indexing

Here is what you write for servers:


<script type="application/ld+json">
{
  "@context": "http://schema.org", 
  "@type": "WebPage", 
  "@id": "http://example.com/gizmos", 
  "potentialAction": {
    "@type": "ViewAction", 
    "target": "android-app://com.example.android/http/example.com/gizmos"
  }
}
</script>

And what you'd write for native android clients:


    // Define a title for your current page, shown in autocompletion UI
    final String title = "App Indexing API Title";

    // Call the App Indexing API view method
    AppIndex.AppIndexApi.view(mClient, this, APP_URI, TITLE, WEB_URL, null);

And this is what you get:


(link to original image)

Google Search Social App Activities

Here is what you write:


<script type="application/ld+json">
{
  "type": "http://schema.org/ListenAction",
  "object": {
    "@type": "MusicRecording",
    "url": "https://developers.google.com/+/web/snippet/examples/song",
    "name": "When Johnny Comes Marching Home",
  }
}
</script>

And this what you get:


Yandex Islands

This what you write:

https://help.yandex.com/webmaster/interactive-answers/buttons-description.xml
https://github.com/bobuk/islands/blob/master/interactive-answers-eng.md

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "CheckInAction",
  "object": {
    "@type": "Flight"
  },
  "target" : "http://www.example.com/check_in"
}
</script>

And here is what you get:



Microsoft's App Linking

Here is what you write:

http://msdn.microsoft.com/en-us/library/dn614166.aspx

<span itemscope itemtype="http://schema.org/WebPage"> 
  <span itemprop="potentialAction" itemscope
      itemtype="http://schema.org/ViewAction">
    <span itemprop="target" itemscope
        itemtype="http://schema.org/WindowsActionHandler"> 
    </span>
    <span itemprop="target" itemscope
        itemtype="http://schema.org/WindowsPhoneActionHandler">
    </span>
  </span>
</span>

And this is what you get:




What's next?

Holograms :) JK :) But I promise it will be exciting, stay tuned!

In the meantime, you might want to read what I'm up to (and my quest to make APIs suck less) if you are bored and care about the geeky details :)

I'll try to keep this page updated as I find more usages. If you know of cool ways your company/partners/webmasters are using http://schema.org/Action, drop me a line in the comments below and I'll make sure to add them here!