In this tutorial we’ll look at building meaning into your content with open graph, Twitter cards, and microdata. By doing so your content will be more attractive, more relevant, and more discoverable to potential users.
Google, Facebook, Twitter, and the other platforms you and I use to share and discover content are still unable to read our minds. The machines powering the cloud rely on you and I, designers and developers, to teach them about the meaning contained in our content and how it relates to our target audience. By teaching these platforms about abstraction and meaning we allow them to display more relevant, provocative, and discoverable content.
What is Discoverability?
Discoverability is the ease with which a machine or person can find a bit of relevant information online.
Which one of these Facebook posts gets more of your attention?
Which one of these tweets is the more provocative?
And which one of these Google search results appears more relevant to your interests?
The differences above are clear. If you are not implementing Facebook’s Open Graph Protocol, Twitter’s Card system, and Microdata for search engines, your content is likely being ignored in favor of your competitors’ more relevantly displayed content. In this article I will show you the importance of understanding your target audience while implementing these systems into your semantic markup.
Markup
Firstly, what exactly is markup?
“A document markup language is a modern system for annotating a document in a way that is syntactically distinguishable from the text. - Wikipedia
In simpler terms, it’s a way to mark, annotate, or style a document with pens, pencils or computers in a way that looks symbolically different than the text you are marking up. The term comes from proofreaders who would markup manuscripts for edits.
Proofreaders’ marks are a form of markup. Remember these from middle school English class (or were you too busy playing with your fancy Walkman to pay attention?!)
Here are three ways you can markup a digital document to indicate a heading:
<h1>I Am the Best Heading</h1>
##No I Am the Best Heading
\section{I'm LaTeX}Now that you have a clearer understanding of what LaTeX... err, markup is, we will create a basic HTML5 document with a single piece of content. We’ll use it to illustrate the different ways we can build meaning into that content, leading to an increase in its discoverability.
HTML
First, create the initial HTML document in the text editor of your choice.
<!DOCTYPE html><html><head></head><body></body></html>
That is so much simpler than the ways it used to be. Now let’s add some content!
Content
Here’s our single piece of content, an image of a very unhappy cat, in a section inside our document body.
<body><section><img
src="http://ryanallen.com/img/forlorn-feline.gif"></section></body>Title
Now that we know what content we are working with we can add the first bit of context to our page. Our old friend, <title> tag in the document's <head>.
<head><title>
Forlorn Feline</title></head>Let’s move on to something a bit more challenging (though still simple) with Facebook’s Open Graph Protocol!
Facebook’s Open Graph Protocol
The Open Graph Protocol enables any web page to become a rich object in Facebook’s social graph. It allows any web page to have similar functionality to an object on Facebook.
Facebook’s open graph (as well as Twitter’s card system, which we will look at next) works with meta data that you add inside your web pages’ <head>. The same place we just put our <title>. In the case of Facebook’s open graph protocol there are four properties which are required.
Required Open Graph Markup
The four required open graph properties Facebook requires are:
Title
The first of these is the title tag, which is the title of your object as it should appear on Facebook.
Here is how my example will be titled when the HTML document is shared on Facebook.
<meta property="og:title" content="Forlorn Feline">
Note: If you create a title which is different than the original title, Facebook will give you an error when debugging your page. Facebook allows the difference but it won't validate 100%. I don’t know why Facebook frowns on this, if you have any ideas why let me know!
Type
The second property Facebook requires is the type of object it will be showing users on its platform.
Our content doesn’t represent music or video. It isn’t an article, book, or profile either. All we are left with is the fact that our content lives inside an HTML document, which when uploaded to a web server, becomes a website.
<meta property="og:type" content="website">
Image
The third property Facebook requires is an image which represents our object. This one is pretty simple!
<meta property="og:image" content="http://ryanallen.com/img/forlorn-feline.gif">
URL
The fourth and final property Facebook requires is the URL users will experience when interacting with the object.
Just like the image property this one is pretty straightforward.
<meta property="og:url" content="http://ryanallen.com/forlorn-feline.html">
That does it for everything that is required. It's time to get more abstract with the meaning we are injecting into our content, and for that we need to identify our target audience.
Target Audience
The point of this article isn’t to teach you how to identify your target audience. I do however, want to impress upon you the importance of knowing who that is. When you are building context into your content you need to know who you want discovering your content, and what they should learn about that content.
For the content in this article, the image of the unhappy looking cat, the target audience is a web designer looking to learn more about discoverability (you). Let’s see what that looks like next in the optional markup Facebook understands.
Optional Abstract Markup
We can add some additional markup like a description, which, while not required, makes it much more interesting for anyone who happens upon our content.
So what should our description be? It should be relative to the target audience.
<meta property="og:description" content="Vincenzo the cat is sad that no one is discovering the online content he worked so hard to create. Such hurt. Very Sadness.">
Great! Remember how I told you that Twitter works in a similar way to Facebook’s Open Graph Protocol? Let’s take a look at it next!
Twitter requires different properties depending on the card type you are using. For this example we will be using the default Summary Card which requires these four properties:
Most of these properties don’t actually require us to do any additional work. Why is that?
“When the Twitter card processor looks for tags on your page, it first checks for the Twitter property, and if not present, falls back to the supported Open Graph property. This allows for both to be defined on the page independently, and minimizes the amount of duplicate markup required to describe your content and experience. - Twitter
Minimizing Duplicate Markup
That’s great! The tags we don’t need to duplicate (though you could if you had a reason to) are:
og:titleog:descriptionog:image
Three down, two to go!
Card Type
First let’s tell Twitter the type of content we are sharing. We’ll set this card to the default Summary Card when the HTML document is shared on Twitter.
<meta name="twitter:card" content="summary">
That was simple, what’s next? I hope it’s something awesome!
Attribution
Twitter requires an account to be attributed with a Twitter account belonging to the content creator and/or content owner. If the content is owned by a company page, or a company department, (or exists on the company site but isn’t owned by the company) you can use a site style attribution.
Here is how this will look if hosted on my personal site:
<meta name="twitter:creator" content="@ryanallen_com">
Here is how it would look if Tuts+ Web Design hosted the HTML:
<meta name="twitter:creator" content="@ryanallen_com"><meta name="twitter:site" content="@wdtuts">
Twitter will need to authenticate and white-list the domain for each type of Twitter Card. This is simple and automated, though I don’t know what’s involved if you get black-listed. If anyone has experience with this I would enjoy learning more.
That’s it for Twitter! Good thing we did Open Graph first, Twitter saves a lot of time by working with other platforms to the best of its ability. Thanks Twitter!
Time to revisit the search engines for some new, contextual, and exciting ways to optimize your content.
Microdata and Search Engine Optimization
First, a quick word from Microsoft:
“On June 2nd [2011] we [Microsoft] announced a collaboration between Bing, Google and Yahoo to create and support a standard set of schemas for structured data markup on web pages. Although our companies compete in many ways, it was evident to us that collaboration in this space would be good for each search engine individually and for the industry as a whole. - Michael O'Connor
Microdata is different from the other markup we have already structured in that it does not live in the document head.
We will use microdata to infuse context into our content in our HTML document’s body. Search engines will use our data to improve the discoverability of our content for their users.
The machines believe what we tell them. For now at least...
Required Microdata Markup
The following tags are required for every item you wish to build meaning into.
First we need to identify the thing we are describing. Let’s have some fun with semantics and build some context or meaning into our content aimed at our target audience.
Remember we have only one singular piece of content. What is one obvious bit of meaning contained within our image?
Well, it sure looks like a cat. That’s great since the internet loves cats! What thing best represents a cat in the schemas markup available to us?
The meaning contained in this image is probably not an action, broadcast service, event medical entity, or place. It is definitely a Creative Work, more specifically it is an example of a Visual Artwork, although Google is currently making some changes which might affect the use of this markup in the short term:
@ryanallen_com@googledevs@google no, rather we've some (hopefully one off) delays integrating Feb's additions i.e. http://t.co/09JUDuUIwW
— Dan Brickley (@danbri) March 2, 2015
Let’s declare the itemtype inside the section tag:
<section
itemscope
itemtype="https://schema.org/CreativeWork"><img
src="http://ryanallen.com/img/forlorn-feline.gif"></section>That’s a good start, though our content is still mostly meaningless. Google, Bing, Yahoo and Yandex are now 100% certain that our content is a creative work, but nothing else. Let’s add some more meaningful context aimed at our target market: web designers.
Optional Microdata Properties
It isn’t necessary for me to list all of the properties you can use with the Creative Work item type, here instead are some relative to web designers, who we identified as our target audience.
Let’s start by declaring all the things about this content that aren’t abstract but are instead concrete, firm, and unchanging in their meaning.
Image
First, this is an image with a source location (src) on the web.
<img
itemprop="image"
src="http://ryanallen.com/img/forlorn-feline.gif">Author
I am the author, or creator, of the digital illustration.
<meta
itemprop="author"
content="Ryan Allen">Audience
Looking good! Let’s now add our target audience.
<meta
itemprop="audience"
content="web designers">Educational Use
Now we’ll set the type of educational use we intend for this image, which is an example in this case.
<meta
itemprop="educationalUse"
content="example">Family Friendly
Nothing about this is NSFW, so let’s make sure that is clear.
<meta
itemprop="isFamilyFriendly"
content="true">Character
What did we name our cat character?
<meta
itemprop="character"
content="Vincenzo">Oh yeah. That’s a pretty awesome name, though it is moving into a more abstract realm. Things are about to get all abstract now.
About
Let’s add some more context about the situation in our image related to our target audience.
<meta
itemprop="about"
content="Vincenzo the cat is sad that no one is
discovering the online content he worked so hard
to create. Such hurt. Very Sadness.">
Let’s finish this off with a list of comma delimited, targeted, and relative keywords to bump our content’s discoverability factor over 9000.
<meta
itemprop="keywords"
content="designer, design, web design, seo,
discoverability, open graph, twitter cards,
microdata, google, bing, microsoft, yahoo,
yandex, content, context, semantics, meaning,
sad, cat, animation, gif, cute, illustration, tutsplus"> Validate
All that is left to do is validate your code with Google, then Facebook, and finally with Twitter. Here’s what that looks like in:
Summary
So what does everything look like together?
<!DOCTYPE html><html><head><title>
Forlorn Feline</title><!-- FACEBOOK'S OPEN GRAPH PROTOCOL --><meta
property="og:title"
content="Forlorn Feline"><meta
property="og:type"
content="website"><meta
property="og:image"
content="http://ryanallen.com/img/forlorn-feline.gif"><meta
property="og:url"
content="http://ryanallen.com/forlorn-feline.html"><meta
property="og:description"
content="Vincenzo the cat is sad that no one is
discovering the online content he worked so hard
to create. Such hurt. Very Sadness."><!-- TWITTER CARDS --><meta
name="twitter:card"
content="summary"><meta
name="twitter:creator"
content="@ryanallen_com"></head><body><section
itemscope
itemtype="https://schema.org/CreativeWork"><img
itemprop="image"
src="http://ryanallen.com/img/forlorn-feline.gif"><meta
itemprop="author"
content="Ryan Allen"><meta
itemprop="audience"
content="web designers"><meta
itemprop="educationalUse"
content="example"><meta
itemprop="isFamilyFriendly"
content="true"><meta
itemprop="character"
content="Vincenzo"><meta
itemprop="about"
content="Vincenzo the cat is sad that no one is
discovering the online content he worked so hard
to create. Such hurt. Very Sadness."><meta
itemprop="keywords"
content="designer, design, web design, seo,
discoverability, open graph, twitter cards,
microdata, google, bing, microsoft, yahoo,
yandex, content, context, semantics, meaning,
sad, cat, animation, gif, cute, illustration, tutsplus"></section></body></html>By building meaning into our singular piece of content with open graph, Twitter cards, and microdata, we have improved the chance that our target audience will discover it, share it, and create t-shirts with it printed on the front in bright, bold colors. Good luck implementing meaningful markup in your own websites!
