“A day wasted on others is not wasted on one’s self.” - Charles Dickens, A Tale of Two Cities

What does this quote have to do with Semantic Markup? Read on to learn more.

Classify your Itemscope:

The first step in preparing your content is to classify what it is all about.  This is called the “ itemscope”.  An itemscope allows you to  specifically define blocks of code and assist the search engines in determining  what your code block is about.

There are 12 itemscopes that you can start with. These are the most generic classifications that you can choose from. As you work your way down, the classifications your options will become more specific.

Action

Broadcast Service  

Class

Creative Work   

Event   

Intangible   

Medical Entity

Organization  

Person

Place     

Product

Property

 

 

 

Here is our website content that we want to work with. For this example we are going define our content as a Creative Work.

<h1>RESPONSIVE LAYOUT MAKER</h1> 
<h2>Rapid Browser Based Website Prototyping and Wireframing.</h2> 
<p> Content is king! But to make him rule effectively and be loved, he needs the support of a strong layout that works on any screen or device size. One that gives the content room to flourish and adapts to it's unique character. Responsive Layout Maker is the only App that creates fluid CSS layouts with custom breakpoints, making content universally usable and readable. </p> <p> This App offers everything from flexible grids (including Bootstrap) to custom breakpoints. Prototype simple, or utterly complex, responsive design scenarios from the content out. Cumbersome and unrealistic static representations are a thing of the past. Instead kickstart projects with adaptive content and layout code that is crisp, clean and production ready. </p> 
<p> For more information, visit https://www.coffeecup.com/responsive-layout-maker </p>
If we only only selected Creative Work, this would tell the search engines that this content is a creative work about “something”, but we have not really gotten specific as to what exactly the content is. The more specific you are, the better the page will be indexed.  To do this, the second step is to further expand upon the itemscope.    

Classify your Itemprop:

Under each itemscope you will find itemproperties which are specific to the itemscope currently selected. For Creative Work, we will now have these itemproperties to choose from. For this example we want to classify this page as an Article.

Article

Blog

Book

Clip

Code

Comment

Data Catalog

Dataset

Diet

Episode

Exercise Plan

ItemList

Map

Media Object

Movie

Music Playlist

Music Recording

Painting

Photograph

Recipe

Review

Sculpture

Series

Season

Software Application

Tv Season

TV Series

Webpage

WebPage Element

 

Now with this further classification, we know this is a Creative Works > Article which would give us this markup around our content:

<div itemscope itemtype="http://schema.org/Article"> 
<h1>RESPONSIVE LAYOUT MAKER</h1> 
<h2>Rapid Browser Based Website Prototyping and Wireframing.</h2> 
<p> Content is king! But to make him rule effectively and be loved, he needs the support of a strong layout that works on any screen or device size. One that gives the content room to flourish and adapts to it's unique character. Responsive Layout Maker is the only App that creates fluid CSS layouts with custom breakpoints, making content universally usable and readable. </p> 
<p> This App offers everything from flexible grids (including Bootstrap) to custom breakpoints. Prototype simple, or utterly complex, responsive design scenarios from the content out. Cumbersome and unrealistic static representations are a thing of the past. Instead kickstart projects with adaptive content and layout code that is crisp, clean and production ready. </p> 
<p>For more information, visit https://www.coffeecup.com/responsive-layout-maker</p> </div>

Refining your Itemprop:

Now that the content is correctly classified, you can further classify and define a variety of code blocks within the itemscope with specific itemproperties.  

Under each itemscope you have many itemproperties to choose from. This will then allow us to further classify how the other code blocks categorized. Here we can define how our header texts, URL’s and paragraphs blocks should be classified.

about

accountablePerson

aggregateRating

alternativeHeadLine

associatedMedia

audience

audio

author

award

awards

citation

comment

contentLocation

contentRating

contributor

copyrightHolder

copyrightYear

creator

dateCreated

DateModified

datePublished

discussionURL

editor

educationalAlignment

educationalUse

encoding

encodings

genre

headline

inLanguage

interactionCount

interactivityType

isBasedOnURL

isFamilyFriendly

keywords

learningResourceType

mentions

offers

provider

publisher

publishingPrinciples

review

reviews

sourceOrganization

text

thumbnailURL

timeRequired

typicalAgeRange

version

video

 

 

For the rest of our content we will want to use the itemprops name, headline and text.

<div itemscope itemtype="http://schema.org/Article"> 
<span itemprop="name"> <h1>RESPONSIVE LAYOUT MAKER</h1> </span> 
<span itemprop="headline"> <h2>Rapid Browser Based Website Prototyping and Wireframing.</h2> </span> 
<span itemprop="text"> <p> Content is king! But to make him rule effectively and be loved, he needs the support of a strong layout that works on any screen or device size. One that gives the content room to flourish and adapts to it's unique character. Responsive Layout Maker is the only App that creates fluid CSS layouts with custom breakpoints, making content universally usable and readable. </p> 
<p> This App offers everything from flexible grids (including Bootstrap) to custom breakpoints. Prototype simple, or utterly complex, responsive design scenarios from the content out. Cumbersome and unrealistic static representations are a thing of the past. Instead kickstart projects with adaptive content and layout code that is crisp, clean and production ready. </span> </p> 
<p> For more information, visit https://www.coffeecup.com/responsive-layout-maker</p> </div>

We can also define other elements with an itemscope using itemproperties from Thing (the top level itempscope which Creative Works is under).  This would allow us to define how to handle the URL in our markup.  Because this is a Creative Works itemscope, you have access to all the itemprops under Creative Works and all itempropts that Creative Works belongs to as well.

 The itemprop for URL is located in the Thing Properties.

<div itemscope itemtype=" http://schema.org/Article"> <span itemprop="name"> <h1>RESPONSIVE LAYOUT MAKER</h1> </span> 
<span itemprop="headline"> <h2>Rapid Browser Based Website Prototyping and Wireframing.</h2> </span> 
<span itemprop="text"> <p> Content is king! But to make him rule effectively and be loved, he needs the support of a strong layout that works on any screen or device size. One that gives the content room to flourish and adapts to it's unique character. Responsive Layout Maker is the only App that creates fluid CSS layouts with custom breakpoints, making content universally usable and readable. </p> 
<p> This App offers everything from flexible grids (including Bootstrap) to custom breakpoints. Prototype simple, or utterly complex, responsive design scenarios from the content out. Cumbersome and unrealistic static representations are a thing of the past. Instead kickstart projects with adaptive content and layout code that is crisp, clean and production ready. </span> </p> 
<p> <span itemprop="url"> For more information, visit https://www.coffeecup.com/responsive-layout-maker </span></p> </div>

The End Result!

Now that we have our page classified, here is how the search engines will read this:

  • They will know this is an Article
  • The name of  this article is: “RESPONSIVE LAYOUT MAKER”
  • The headline reads as: “ Rapid Browser Based Website Prototyping and Wireframing.”
  • It has the URL of :  https://www.coffeecup.com/responsive-layout-maker
  • The article has the text of:   “Content is king! But to make him rule effectively and be loved, he needs the support of a strong layout that works on any screen or device size. One that gives the content room to flourish and adapts to it's unique character. Responsive Layout Maker is the only App that creates fluid CSS layouts with custom breakpoints, making content universally usable and readable. This App offers everything from flexible grids (including Bootstrap) to custom breakpoints. Prototype simple, or utterly complex, responsive design scenarios from the content out. Cumbersome and unrealistic static representations are a thing of the past. Instead kickstart projects with adaptive content and layout code that is crisp, clean and production ready.”

How cool is that! :-)

Open Graph is another form of Semantic Markup that is specific to Facebook, Pinterest and Google+. When someone shares content from your website to their timeline on Facebook, such as a link. Facebook takes a small snapshot of your website and uses it as a preview of the shared content. Open Graph allows you to customize this content by adding semantic tags so that the preview is more pointed and relevant to your website. Open Graph can be a powerful tool for branding your products, videos, etc. Adding Open Graph into your website can integrate your site into to the social concept allowing your customers to start conversations about your products but using the content you specify.

For example, the movie “Bob’s Beard” on Vimeo might include the following Tags:

 <meta property=”og:title” content=”Bob’s Beard”/>
 <meta property=”og:type” content=”movie”/>
 <meta property=”og:url” content=”https://vimeo.com/68967326”/>
 <meta property=”og:site_name” content=”Vimeo”/>

Twitter Cards allow you to add media experiences to Tweets that link to your web page content. By adding HTML to your webpage a users Tweet can be turned into a nice advertisement for your website. Showcasing your content in a “card” like fashion. This card is added to the tweet and can be seen by all followers of that user.

Twitter has seven different card types that can be applied to a Tweet.

  • Summary Card: This is a default Card and includes a title, description, thumbnail, and Twitter account attribution.
  • Summary Card with Large Image: Similar to a Summary Card, but allows you to feature an image.
  • Photo Card: A Tweet sized photo Card.
  • Gallery Card: A Tweet Card that highlights an album of photos.
  • App Card: Provides a profile for your application.
  • Player Card: Used for Video, Audio and media player content.
  • Product Card: Show off your products using this Tweet Card.

Using the same example above the meta information for our video card would be as follows:

<meta name="twitter:card" content="player">
<meta name="twitter:site" content="@Vimeo">
<meta name="twitter:title" content="Bob’s Beard">
<meta name="twitter:description" content="Bob chops his beard.">
<meta name="twitter:player" content="https://vimeo.com/68967326">

So what does this have to do with the quote in the beginning of the article? Because a day setting up your content for others to share, is not a waste of time, however it is a benefit to one’s self, thus, not making it a waste of time at all.

Learn more about Semantic Markup:

We have a few articles that explain a bit more about semantic markup and how to use it!